Residencia

TECNOLGICO DE ESTUDIOS SUPERIORES
DE TIANGUISTENCO
INFRME TCNICO
[SISTEMA PARA EL PROCESO DE RESIDNECIAS
PROFESIONALES]
NOMBRE DEL ALUMNO
[ERICK JIMNEZ SOTO]
[201023025]
NOMBRE DEL ASESOR INTERNO
[ING. HUGO ARMANDO LEN GARCA]
[ISC, 901]
TIANGUISTENCO, MEXICO, [2014]
NDICE
I INTRODUCCIN......................................................................................................... 4
Il JUSTIFICACIN.......................................................................................................... 6
lll OBJETIVOS............................................................................................................... 7
3.1 OBJETIVO GENERAL............................................................................................ 7
3.2 OBJETIVOS ESPECFICOS.................................................................................... 7
lV CARACTERIZACIN DEL REA EN LA QUE PARTICIPO..............................................8
4.1 NOMBRE DE LA EMPRESA Y/O RAZN SOCIAL...................................................8
4.2 DOMICILIO.......................................................................................................... 8
V PROBLEMAS A RESOLVER......................................................................................... 9
VI ALCANCES Y LIMITACIONES..................................................................................... 9
VII FUNDAMENTO TERICO....................................................................................... 10
CAPITULO 1. LENGUAJE DE PROGRAMACIN..........................................................10
1.1Introduccin al HTML........................................................................................ 10
1.1.1Sintaxis del HTML........................................................................................... 12
1.1.2Tablas en HTML. Atributos de la tabla y conclusin........................................15
1.1.3Formularios HTML.......................................................................................... 19
1.2Introduccin a la maquetacin con CSS............................................................23
1.2.1Formas de aplicar estilos en maquetacin CSS..............................................28
1.3PHP................................................................................................................... 31
1.3.1 Qu puede hacer PHP?................................................................................ 34
1.3.2 Qu necesito?.............................................................................................. 36
1.3.3Etiquetas de PHP............................................................................................ 38
Salir de HTML......................................................................................................... 39
Inicio de la sesin en PHP con session_start..........................................................42
Formularios HTML (GET y POST)............................................................................48
Introduccin a AJAX................................................................................................ 51
Sintaxis.................................................................................................................. 55
Variables................................................................................................................ 57
Palabras reservadas............................................................................................... 61
CAPITULO 2. SERVIDOR WEB..................................................................................62

1.1 WAMP SERVER.................................................................................................. 62
APACHE.................................................................................................................. 63
CAPITULO 3. Almacn de datos.............................................................................. 66
MySQL y el cdigo abierto...................................................................................... 66
Bases de datos....................................................................................................... 66
Utilizar una base de datos...................................................................................... 67
Crear una base de datos........................................................................................ 67
Tablas..................................................................................................................... 67
Mostrar tablas........................................................................................................ 67
Crear tablas........................................................................................................... 68
Introducir datos en una tabla................................................................................. 69
Update................................................................................................................... 69
Delete.................................................................................................................... 69
Vlll PROCEDIMIENTO Y DESCIPCIN DE LAS ACTIVIDADES REALIZADAS...................70
Modelo en Cascada................................................................................................ 70
PLANIFICACIN...................................................................................................... 72
Establecimiento del mbito del proyecto...............................................................72
Determinacin de la factibilidad............................................................................72
Anlisis de riesgos................................................................................................. 73
ANALISIS Y DISEO DE REQUERIMIENTOS.............................................................75
Definicin de los recursos requeridos....................................................................75
DISEO.................................................................................................................. 76
IX CONCLUSIONES Y RECOMENDACIONES.................................................................87
X REFERENCIAS BIBLIOGRAFA.................................................................................. 88
XI ANEXOS................................................................................................................. 89
A.
MANUAL DE USUARIOS.................................................................................... 89
B.
MANUAL TCNICO.......................................................................................... 101
CONTROL............................................................................................................. 108
Ajax...................................................................................................................... 108
PHP...................................................................................................................... 113
INTERFACES......................................................................................................... 137
ESTRUCTURA Y UBICACIN DE LOS ARCHIVOS DEL SISTEMA..................................151
C. NDICE DE FIGURAS....................................................................................... 155
D. NDICE DE TABLAS......................................................................................... 155
I INTRODUCCIN.
En una empresa de carcter privado, tiene un giro de manufactura, perteneciente al
grupo Emerson, en una de sus ramas, como tal empez con el nombre de Fisher, se
dedicaba a la elaboracin de vlvulas para el control de flujo de slidos, lquidos y gas,
ya que constantemente est innovando en la elaboracin de sus productos, se tiene
que capacitar al personal. Por otra parte la logstica de las capacitaciones se considera
como un punto de oportunidad ya que los registros se hacen va fsica, causando la
perdida de informacin y complicando su gestin.
La elaboracin de un sistema que logre gestionar la informacin, ser el que ayude a
realizar los registros de forma eficaz y de manera digital para un fcil acceso, con lo
cual logrremos tener beneficios palpables, por ejemplo: la disminucin del uso del
papel.
WAMP SERVER, su acrnimo hace referencia a las herramientas que est utiliza
Windows, Apache, Mysql y Php, cada una de estas herramientas son bsicas para el
desarrollo web, por lo que nos adentraremos en puntualizar qu es? y cmo
funciona?, as como tambin definiremos cada una de las herramientas, se utiliz este
paquete de herramientas ya que es un software que no tiene costo alguno, dando as
un ahorro en la compra de licencias, debo hacer mencin que dicha herramienta ya se
encontraba instalada, por lo que le dimos mayor utilidad, esta herramienta es de fcil
implementacin ya que es soportable para pequeos desarrollos web.
Hablemos de Apache, este se define como un servidor web que nos dar la
comunicacin para que nuestro sistema pueda ser de alguna forma palpable, es decir;
para visualizar las pginas web y este se encarga de que funcionen, este servidor ya
viene predeterminado en WAMP SERVER, por lo que tiene mayor soporte y
adaptabilidad al desarrollar.
En lo que a Mysql respecta es un gestor de bases de datos, es de los ms simples a

manejar pero que as mismo tiene mucho potencial para el manejo de la informacin
almacenada en las bases ah creadas, este gestor de base de datos esta
predeterminado en WAMP SERVER por lo que no hay problema alguno en manejarlo, y
no se tienen problemas de licencia por la misma razn.
Php es un lenguaje de programacin para el desarrollo de pginas web dinmicas, es
un lenguaje orientado a objetos por lo que tiene muchas funcionalidades que nos
permitirn poder desarrollar de manera ms eficaz nuestro proyecto en algunos
aspectos podemos decir que php se apega mucho al dinamismo que tambin podemos
encontrar en java, no tenemos problemas con respecto a licencias ya que es libre.
Il JUSTIFICACIN.
Se requiere un manejo eficaz de la informacin con respecto al registro del personal
en los cursos de capacitacin, el registro que actualmente se utiliza es de manera
manual, por lo que se cae en la perdida de informacin, el sistema ayudar a que se
pueda obtener un registro acertado y un control adecuado, esto aumenta la eficacia
y elimina la redundancia, existe ahorro de papel porque el registro ser digital, solo
en casos puntales se crear de manera fsica.
El desarrollo web se realiza atendiendo a diversos problemas del software del que
se tiene autorizado utilizar; por ejemplo la instalacin de ciertas versiones de java, la
empresa tiene un sistema de administracin propio sus requerimientos conllevan al
fallo de diversas aplicaciones, por tanto se opta en prescindir
en utilizar
programacin en java, otro de los factores es que las maquinas que se utilizan
suelen ser cambiadas en determinado momento o movidas a otro sitio, eso implica
la instalacin continua del software en los equipos de cmputo.
Se utiliz un software de uso libre que se encuentra dentro de la empresa, el costo
por utilizacin es nulo, el software se adecua fcilmente a lo requerido, en tanto la
red de la empresa este activa este sistema podr operar eficazmente, si el sistema
necesita asistencia tcnica se realizara en un solo punto haciendo la modificacin
para cualquiera que lo utilice, es una de las ventajas de tener un desarrollo web.
lll OBJETIVOS.
3.1 OBJETIVO GENERAL.
Desarrollar un sistema integral para el rea de Recursos Humanos el cual les permita
gestionar la informacin referente a capacitacin y asistencias de los empleados de la
empresa.
3.2 OBJETIVOS ESPECFICOS.

1. Conocer la informacin a manejar.
2. Conocer la funcionalidad de los registros.
3. Conocer y entender el procedimiento de registro de las capacitaciones, desde su
alta hasta su reporte final.
4. Sistematizar el procedimiento de manera digital.
5. Satisfacer las necesidades que se plantean.
lV CARACTERIZACIN DEL REA EN LA QUE

PARTICIPO.
4.1 NOMBRE DE LA EMPRESA Y/O RAZN SOCIAL.
Nombre de la empresa: Fisher Controles de Mxico S.A. De C.V.
Giro: Manufactura.
4.2 DOMICILIO.
Localidad: zona industrial.
Municipio: Toluca.
Estado: Mxico.
Direccin: Calle Industrias Qumicas 203, Zona Industrial. Mxico. C.P. 50071.
Telfono: (722) 2799809.
Frank
Gerente mantenimiento
Medina
Alvaro
coordinador de proyectos
Martinez
Oscar
Jefes
Rodriguez
Becarios
Rodolfo
Cruz
Erick
Jimenez
Soto
El rea se encuentra dentro del departamento de mantenimiento, el puesto a

desempear se nombra becario de sistemas y apoyo al jefe de TI, quien es mi jefe
directo, las actividades a realizar son dar soporte tcnico a los usuarios de la empresa,
solucionar problemas en la conexin de red y telefona, las actividades se llevan a cabo
en conjunto al desarrollo del sistema, la asignacin la realiza el jefe de proyectos del
departamento.
V PROBLEMAS A RESOLVER
El departamento de R.H. administra la informacin de los empleados de manera manual
eso significa duplicar informacin, perdida de informacin y desperdicio de horas
hombre. El manejo de la informacin es realizado mediante herramientas bsicas como
hojas de Excel, pequeos desarrollos en Access y hojas de papel.
VI ALCANCES Y LIMITACIONES.
ALCANCES:
a. Contar con un sistema integral que permita la consolidacin de la
informacin de una manera rpida sencilla y eficiente.
b. Permitir al personal de R.H. el uso de informacin para la toma de
decisiones.
c. Se contara con la posibilidad de generar registros de asistencia.
d. Se podrn generar reportes en tablas con respecto a los parmetros
indicados en el sistema.
e. Se podr generar una lista en pdf de los que asistan a los cursos de
capacitacin.
f. Se podrn crear los cursos que se impartirn a los empleados de la
empresa y registrarlos en la base de datos.
g. El sistema llegar a la etapa de implementacin.
LIMITACIONES:
h.
i.
j.
k.
Falta de informacin inicial.

Falta de procesos definidos.
Uso de tecnologa estndar definida por la empresa.
Falta de informacin Benchmark (informacin a comparar).
VII FUNDAMENTO TERICO.
10
CAPITULO 1. LENGUAJE DE PROGRAMACIN
11
1.1 Introduccin al HTML

HTML es el lenguaje con el que se escriben las pginas web. Las pginas web pueden
ser vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos
decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar
las pginas webs al usuario, siendo hoy en da la interface ms extendida en la red.
Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro
gusto. Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el
HTML nos permite la introduccin de referencias a otras pginas por medio de los
enlaces hipertexto.
El HTML se cre en un principio con objetivos divulgativos. No se pens que la web
llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre
sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos
de gente que lo utilizaran en un futuro. Sin embargo, pese a esta deficiente
planificacin, si que se han ido incorporando modificaciones con el tiempo, estos son
los estndares del HTML. Numerosos estndares se han presentado ya. El HTML 4.01
es el ltimo estndar a septiembre de 2001.
Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes y
deficiencias que han debido ser superados con la introduccin de otras tecnologas
accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las
webs. Ejemplos que pueden sonaros son las CSS, JavaScript u otros. Veremos ms
adelante en qu consisten algunas de ellas.
Otros de los problems que han acompaado al HTML es la diversidad de navegadores
presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de
una manera unificada. Esto obliga al webmster a, una vez creada su pgina,
comprobar que esta puede ser leda satisfactoriamente por todos los navegadores, o al
menos, los ms utilizados.
12
Adems del navegador necesario para ver los resultados de nuestro trabajo,
necesitamos evidentemente otra herramienta capaz de crear la pgina en si. Un archivo
HTML (una pgina) no es ms que un texto. Es por ello que para programar en HTML
necesitamos un editor de textos.
Es recomendable usar el Bloc de notas que viene con windows, u otro editor de textos
sencillo. Hay que tener cuidado con algunos editores ms complejos como Wordpad o
Microsoft Word, pues colocan su propio cdigo especial al guardar las pginas y HTML
es nicamente texto plano, con lo que podremos tener problemas.
Existen otro tipo de editores especficos para la creacin de pginas web los cuales
ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No
obstante, es aconsejable en un principio utilizar una herramienta lo ms sencilla posible
para poder prestar la mxima atencin a nuestro cdigo y familiarizarnos lo antes
posible con l. Siempre tendremos tiempo ms delante de pasarnos a editores ms
verstiles con la consiguiente ganancia de tiempo.
Tambin puedes acceder a descripciones editores ms complejos que el Block de
Notas, pero ms potentes como Homesite o UltraEdit.
Es importante tener claro todo ello puesto que en funcin de vuestros objetivos puede
que, ms que aprender HTML, resulte ms interesante aprender el uso de una
aplicacin para la creacin de pginas.
As pues, una pgina es un archivo donde est contenido el cdigo HTML en forma de
texto. Estos archivos tienen extensin .html o .htm (es indiferente cul utilizar). De modo
que cuando programemos en HTML lo haremos con un editor de textos y guardaremos
nuestros trabajos con extensin .html, por ejemplo mipgina.htm.
13
1.1.1 Sintaxis del HTML

El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que
llamamos etiqueta. A travs de las etiquetas vamos definiendo los elementos del
documento, como enlaces, prrafos, imgenes, etc. As pues, un documento HTML
estar constituido por texto y un conjunto de etiquetas para definir la forma con la que
se tendr que presentar el texto y otros elementos en la pgina.
La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan
a esta etiqueta. As por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML
escribimos una frase con el siguiente cdigo:
<b>Esto esta en negrita</b>
El resultado Ser:
Esto esta en negrita
Las etiquetas <p> y </p> definen un prrafo. Si en nuestro documento HTML
escribiramos:
<p>Hola, estamos en el prrafo 1</p>
<p>Ahora hemos cambiado de prrafo</p>
El resultado sera:
Hola, estamos en el prrafo 1
Ahora hemos cambiado de prrafo
Partes de un documento HTML
Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta
<html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes
principales:
14
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de

ndole informativo como por ejemplo el titulo de nuestra pgina.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos
nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos
visto.
El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla:
Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que ser mostrada por el navegador: Texto e imgenes
</body>
</html>
Las maysculas o minsculas son indiferentes al escribir etiquetas
A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de
maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta
sin embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras
tecnologas que pueden convivir con nuestro HTML (XML por ejemplo) no son tan
permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar
fallos triviales en un futuro.
15
1.1.2 Tablas en HTML. Atributos de la tabla y conclusin

Adems de los atributos especficos de cada celda o lnea, las tablas pueden ser
adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta
<table>. He aqu aquellos que pueden parecernos en un principio importantes:
align Alinea horizontalmente la tabla con respecto a su entorno.
background Nos permite colocar un fondo para la tabla a partir de un enlace a una
imagen.
bgcolor
Da color de fondo a la tabla.
borderDefine el nmero de pixels del borde principal.

bordercolor Define el color del borde.
cellpadding Define, en pixels, el espacio entre los bordes de la celda y el contenido de
la misma.
cellspacing Define el espacio entre los bordes (en pixels).
height Define la altura de la tabla en pixels o porcentaje.
width Define la anchura de la tabla en pixels o porcentaje.
Los atributos que definen las dimensiones, height y width, funcionan de una manera
anloga a la de las celdas tal y como hemos visto en el capitulo anterior.
Contrariamente, el atributo align no nos permite justificar el texto de cada una de las
celdas que componen la tabla, sino ms bien, justificar la propia tabla con respecto a su
entorno.
Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y
a la izquierda.
Ejemplo de tabla centrada
Esta tabla est centrada (aling="center"). Solo tiene una celda.
Este sera un texto cualquiera colocado al lado de una tabla centrada
Ejemplo de tabla alineada a la derecha
16
Esta tabla est alineada a la derecha (aling="right"). Solo tiene una celda.Para que se
vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodear
la tabla, igual que ocurra con las imgenes alineadas a un lado.
Ejemplo de tabla alineada a la izquierda
Esta tabla est alineada a la izquierda (aling="left"). Solo tiene una celda.Para que se
vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodear
la tabla, igual que ocurra con las imgenes alineadas a un lado.
Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un aspecto
ms esttico. En un principio puede parecernos un poco confuso su uso pero un poco
de practica ser suficiente para hacerse con ellos.
En la siguiente imagen podemos ver grficamente el significado de estos atributos.
Modelo de Cellpading y Cellspacing
Podis comprobar vosotros mismos que los atributos definidos para una celda tienen
prioridad con respecto a los definidos para una tabla. Podemos definir, por ejemplo, una
tabla con color de fondo rojo y una de las celdas de color de fondo verde y se ver toda
la tabla de color rojo menos la celda verde. Del mismo modo, podemos definir un color
azul para los bordes de la tabla y hacer que una celda particular sea mostrada con un
borde rojo. (Aunque esto no funcionar en todos los navegadores debido a que algunos
no reconocen el atributo bordercolor.
Tabla de color rojo de fondo
Celda normal
El atributo bgcolor de la tabla est en rojo.
Esta celda est en verde. tiene el atributo bgcolor en color verde
Tablas anidadas
Muy til tambin es el uso de tablas anidadas. De la misma forma que podamos incluir
listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras. As,
podemos incluir una tabla dentro de la celda de otra. El modo de funcionamiento sigue
siendo el mismo aunque la situacin puede complicarse si el nmero de tablas
embebidas dentro de otras es elevado.
Vamos a ver un cdigo de anidacin de tablas. Veamos primero el resultado y luego el
cdigo, as conseguiremos entenderlo mejor.
Celda de la tabla principal
Tabla anidada, celda 1

17
Este sera el cdigo:

<table cellspacing="10" cellpadding="10" border="3">
<tr>
<td align="center">
Celda de la tabla principal
</td>
<td align="center">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td>Tabla anidada, celda 1</td>
</tr>
<tr>
</tr>
</table>
</td>
</tr> </table>
Ejemplos prcticos
Hasta aqu la informacin que pretendamos transmitiros sobre las tablas en HTML.
Sera importante ahora realizar algn ejemplo de realizacin de una tabla un poco
compleja. Por ejemplo la siguiente:
Animales en peligro de extincin
Nombre
Cabezas
Previsin 2010
Ballena
6000 4000 1500
Oso Pardo
50
Previsin 2020
18
Lince 10
Tigre 300
210
Se puede ver esta tabla en otra ventana, donde tambin podremos examinar su cdigo
fuente.
Otro ejemplo de tabla con el que podemos practicar:
Climas de Amrica del Sur
Venezuela
Colombia
Ecuador
Per Parte de arriba de Amrica del Sur. Pases como:
Argentina
Chile
Uruguay
Paraguay Parte de abajo de Amrica del Sur. Pases como:
Bosque tropical, clima de sabana, clima martimo con inviernos secos. Climas
martimos con veranos secos, con inviernos secos, climas frios, clima de estepa, clima
desrtico.
Tambin la podemos ver en una ventana a parte para extraer su cdigo fuente.
Maquetar con tablas
En HTML tradicional se utilizan las tablas, aparte de mostrar informacin tabulada como
hemos visto en este artculo, para maquetar pginas web. Con las tablas podemos
generar una serie de espacios donde podemos mostrar contenidos estructurados en
columnas y filas, como la maquetacin de una revista o un portal. La maquetacin por
tablas la comentamos en un taller de HTML. Es muy recomendable su lectura para
hacerse una idea del proceso de creacin de pginas medianamente avanzadas y con
informacin bien estructurada.
19
1.1.3 Formularios HTML

Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la informacin,
esencialmente mediante texto, imgenes y enlaces. Nos queda por ver de qu forma
podemos intercambiar informacin con nuestro visitante. Desde luego, este nuevo
aspecto resulta primordial para gran cantidad de acciones que se pueden llevar a cabo
mediante el Web: Comprar un artculo, rellenar una encuesta, enviar un comentario al
autor...
Hemos visto anteriormente que podamos, mediante los enlaces a direcciones de email,
contactar directamente con un correo electrnico. Sin embargo, esta opcin puede
resultar en algunos casos poco verstil, si lo que deseamos es que el navegante nos
enve una informacin bien precisa y adems requiere que el visitante tenga instalado
en su ordenador algn correo electrnico en un programa como Outlook Express. Es
por ello que el HTML propone otra solucin mucho ms amplia: Los formularios.
Los formularios son esas famosas cajas de texto y botones que podemos encontrar en
muchas pginas web. Son muy utilizados para realizar bsquedas o bien para introducir
datos personales por ejemplo en sitios de comercio electrnico. Los datos que el
usuario introduce en estos campos son enviados al correo electrnico del administrador
del formulario o bien a un programa que se encarga de procesarlo automticamente.
1.1.3.1 Qu se puede hacer con un formulario

Usando HTML podemos nicamente enviar el contenido del formulario a un correo
electrnico, es decir, construir un formulario con diversos campos y, a la hora pulsar el
botn de enviar, generar una ventana de redaccin de un email con los datos que el
usuario haya escrito en cada uno de esos campos.
A menudo desearemos hacer cosas ms complejas con los formularios, como que se
enve automticamente el correo a un email sin necesidad que el contenido pase por
ningn programa de email. Para ello tendremos que procesar el formulario mediante un
programa. La cosa puede resultar un poco ms compleja, ya que tendremos que
emplear otros lenguajes ms sofisticados que el propio HTML. En este caso, la solucin
20
ms sencilla es utilizar los programs prediseados que nos ofrecen un gran nmero de
servidores de alojamiento y que nos permiten almacenar y procesar los datos en forma
de archivos u otros formatos. Si vuestras pginas estn alojadas en un servidor que no
os propone este tipo de ventajas, siempre podis recurrir a servidores de terceros que
ofrecen este u otro tipo de servicios gratuitos para webs. Por supuesto, existe otra
alternativa que es la de aprender lenguajes como ASP o PHP que nos permitirn, entre
otras cosas, el tratamiento de formularios.
As pues, en resumen, con HTML podremos construir los formularios, con diversos tipos
de campos, como cajas de texto, botones de radio, cajas de seleccin, mens
desplegables, etc. Sin embargo, debe quedar claro que desde HTML no se puede
enviar directamente el correo, sino que se generar un email en el ordenador del
visitante, que ste tendr que enviar "manualmente" por medio de su programa de
correo. Si queremos que el formulario se enve automticamente o se procese en el
servidor
para
generar
otro
tipo
de
respuesta,
necesitaremos
lenguajes
de
programacin.
1.1.3.2 Cmo hacer un formulario en HTML

Los formularios son definidos por medio de las etiquetas <form> y </form>. Entre estas
dos etiquetas colocaremos todos los campos y botones que componen el formulario.
Dentro de esta etiqueta <form> debemos especificar algunos atributos:
action
Define el tipo de accin a llevar a cabo con el formulario. Como ya hemos dicho, existen
dos posibilidades:
El formulario es enviado a una direccin de correo electrnico
El formulario es enviado a un programa o script que procesa su contenido
21
En el primer caso, el contenido del formulario es enviado a la direccin de correo

electrnico especificada por medio de una sintaxis de este tipo:
<form action="mailto:direccion@correo.com" ...>
Si lo que queremos es que el formulario sea procesado por un programa, hemos de
especificar la direccin del archivo que contiene dicho programa. La etiqueta quedara
en este caso de la siguiente forma:
<form action="direccin del archivo" ...>
La forma en la que se expresa la localizacin del archivo que contiene el programa es la
misma que la vista para los enlaces.
method
Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los
dos valores posibles que puede tomar esta atributo son post y get. A efectos prcticos y,
salvo que se os diga lo contrario, daremos siempre el valor post.
enctype
Se utiliza para indicar la forma en la que viajar la informacin que se mande por el
formulario. En el caso ms corriente, enviar el formulario por correo electrnico, el valor
de este atributo debe de ser "text/plain". As conseguimos que se enve el contenido del
formulario como texto plano dentro del email.
Si queremos que el formulario se procese automticamente por un programa,
generalmente no utilizaremos este atributo, de modo que tome su valor por defecto, es
decir, no incluiremos enctype dentro de la etiqueta <form>
Ejemplo de etiqueta <form> completa
As, para el caso ms habitual -el envo del formulario por correo- la etiqueta de
creacin del formulario tendr el siguiente aspecto:
22
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)"

method="post" enctype="text/plain">
Entre esta etiqueta y su cierre colocaremos el resto de etiquetas que darn forma a
nuestro formulario, las cuales sern vistas en captulos siguientes.
1.2 Introduccin a la maquetacin con CSS

La maquetacin con CSS es algo que ya forma parte de nuestro da a da. Es as? Si
tu respuesta es que s, felicidades!! Ests ahorrndote muchos quebraderos de cabeza
y enfocando tus esfuerzos en la va correcta, que te permitir crecer y evolucionar como
diseador web y desarrollador en general. Si respondiste que la maquetacin CSS no
forma parte de tus tcnicas habituales, o si piensas que no la necesitas, ests en el
lugar correcto, donde intentaremos hacerte cambiar de idea y sobre todo, ensearte a
hacer las cosas tal como dicen los estndares, que a la postre comprobars que es la
manera ms sencilla y ms potente.
1.2.1 Qu haba antes de la maquetacin CSS

Antes de la llegada de CSS disponamos nicamente del HTML, que tena mltiples
carencias a la hora de posicionar elementos en la pgina, porque cuando fue creado no
se esperaba que la web se convirtiera en un multi-medio, donde los profesionales
aportaran caudales de creatividad y diseos caprichosos. HTML en principio
nicamente permita organizar el texto en prrafos, acompaado de enlaces, listas,
imgenes, tablas y poco ms.
Como slo haba HTML, los diseadores utilizaron el nico recurso que tenan a mano
para posicionar elementos en la pgina: las tablas, que estaban pensadas para
presentar informacin tabulada (en celdas formadas por filas y columnas), pero no para
maquetar una web entera. Anidando tablas (colocando unas tablas dentro de otras) y
con el recurso de imgenes de un pxel transparente, se poda obtener una estructura
de diseo para luego llenarla con los contenidos que se desease.
23
Las tablas solucionaron por un buen tiempo las necesidades de los diseadores de
webs, pero tenan diversos problemas, aparte de no facilitar mucho la estructura de
sitios con un diseo complejo.
El contenido se mezcla con las reglas de presentacin o formato. Lo que hace que el
cdigo de tu pgina web sea innecesariamente grande y ello deriva en pginas ms
pesadas. Al final, con tablas tenemos una web ms lenta y la transferencia de datos de
nuestro servidor tambin aumenta, con lo que tu servidor podra atender a menos
usuarios al mismo tiempo y te saldr ms caro de mantener.
El rediseo de una web se hace mucho ms complicado, porque para cambiar la forma
con la que se ve tu pgina tendrs que actualizar todo el cdigo. Si maquetas utilizando
CSS slo tendrs que cambiar el cdigo CSS para que el aspecto de tu pgina sea tan
distinto como desees.
Tu pgina tendr problemas serios al verse en otros dispositivos, como Palms o
telfonos mviles, que tienen pantallas menores.
Tendrs que remar contra corriente para intentar que tu pgina se vea como quieres,
porque ests utilizando unas herramientas, las tablas, que no te ofrecen las
posibilidades necesarias para maquetar a voluntad. Tendrs que aprender mil truqillos
para saltarte las limitaciones de las tablas y a medida que los apliques, tu cdigo se
har ms y ms pesado, menos entendible y su mantenimiento ser cada da ms
complicado.
1.2.2 Por qu maquetar con CSS

Cuando apareci CSS tuvimos que aprender un lenguaje nuevo, lo que siempre es, al
menos, un poco pesado. Pero es que los navegadores al principio tampoco lo
soportaban completamente y lo peor de todo, no sabamos cmo utilizarlo para
librarnos de las tablas, o incluso no sabamos que CSS nos iba a servir para eso. En
definitiva, que durante un buen tiempo estaba la solucin a todos los problemas (las
hojas de estilo en cascada: CSS) delante de nosotros, pero ya sea por pereza, por falta
de soporte de los browsers, o porque no sabamos cmo valernos de ese nuevo
24
lenguaje, muchos de nosotros retrasamos todo lo posible la incorporacin de esta

nueva herramienta para maquetar toda una web.
Afortunadamente, todas las razones por las que podamos estar dejando de maquetar
una web con CSS han pasado a la historia. Los navegadores las soportan por completo
y existe una extensa documentacin sobre la maquetacin con hojas de estilo en
cascada, que podemos leer en DesarrolloWeb.com y en otros muchos sitios, aparte de
infinidad de libros. Sobre la pereza, estoy seguro que la opinin de muchos webmasters
en artculos como este y la evolucin de sitios web de referencia, han hecho que poco a
poco nos haya resultado menos pesado empezar a trabajar intensivamente con CSS.
Por otra parte, la profesionalizacin de los diseadores de webs y la competencia, hace
necesario que, las personas que nos pretendemos dedicar a trabajar en este mundo del
desarrollo, tengamos que aumentar la calidad de nuestro trabajo, as como mejorar la
productividad y la facilidad de mantenimiento. Incluso si no pretendemos convertirnos
en diseadores profesionales y tan slo queremos tener una web bonita y prctica, las
CSS sern nuestro mejor aliado.
Y todo esto por qu? Slo porque con CSS se separa el contenido del aspecto o
presentacin?
Entiendo que muchas personas no encuentren de entrada ventajas en separar el
contenido de la presentacin. Yo mismo tard bastante en entender cmo esta prctica
iba a ayudar en mi trabajo, pero os comentar un par de casos de mi experiencia:
Uno de los sitios web que ms me impactaron a la hora de entender cmo CSS podra
ayudar en la maquetacin de webs, fue el CSS Zend Garden, en el que podemos ver
una web a la que se le cambia el diseo radicalmente, slo alterando la hoja de estilo
en cascada. Podemos acceder a ese sitio y ver el diseo principal, pero adems, en la
barra de la derecha, encontrars un listado de alternativas de aspecto creadas por otras
personas que resultan sin duda impactantes, por lo mucho que cambian con respecto a
diseo original con slo alterar el archivo CSS con los estilos. Sin duda, una
25
demostracin como la de CSS Zend Garden es realmente ilustradora sobre las

posibilidades que tendremos a nuestro alcance, si maquetamos nicamente con hojas
de estilos.
Sobre las ventajas de maquetar con CSS frente a la maquetacin con tablas ya hemos
hablado en otros artculos en DesarrolloWeb.com, por lo que no voy a repetir de nuevo
las mismas ideas. En este artculo he querido hablar sobre las desventajas de las tablas
y compartir con vosotros algunas de mis experiencias, con intencin de motivar a las
personas en el aprendizaje de la maquetacin CSS.
As pues, espero que os animis a leer este manual de Maquetacin CSS, donde
aprenderis diversas tcnicas con las que empezar a utilizar posicionamiento CSS en
lugar de las poco recomendables tablas.
1.2.3 Formas de aplicar estilos en maquetacin CSS

Vamos a ver otra vez distintos modos de aplicar estilos a las pginas. Es un tema que
ya vimos en el manual de CSS, pero merece la pena refrescar conceptos y ampliar la
informacin que se ofreci en su da.
Aplicacin de estilo a etiquetas
Se puede asignar el estilo a una etiqueta concreta de HTML. Para ello, en la
declaracin de estilos escribimos la etiqueta y entre llaves, los atributos de estilo que
deseemos.
body {
background-color: #f0f0f0;
color: #333366;
}
Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para ello, indicamos las
etiquetas seguidas por comas y luego, entre llaves, los atributos que queramos definir.
26
h1, p{
color: red;
}
En este caso se define que los encabezados de nivel 1 y los prrafos, tengan letra roja.
Definicin de clases
Podemos utilizar una clase si deseamos crear un estilo especfico, para luego aplicarlo
a distintos elementos de la pgina. Las clases en la declaracin de estilos se declaran
con un punto antes del nombre de la clase.
.miclase{
color: blue;
}
Para asignar el estilo definido por una clase en un elemento HTML, simplemente se
aade el atributo class a la etiqueta que queremos aplicar dicha clase. El atributo class
se asigna al nombre de la clase a aplicar. Por ejemplo:
<p class="miclase">este prrafo tiene el estilo definido en la clase "miclase".</p>
El prrafo anterior se presentara con color azul. La definicin de clases y su utilizacin
es sencilla, pero veamos un ejemplo ms detallado:
Para la siguiente declaracin de estilos:
body, td, p{
background-color: #000000;
color: #ffffff;
27
}
.inverso{
background-color: #ffffff;
color: #000000;
}
Se ha definido un fondo negro y color del texto blanco para el cuerpo de la pgina, as
como las celdas y los prrafos. Luego se ha declarado una clase, de nombre "inverso",
con los colores al revs, es decir, fondo blanco y texto negro.
<body>
<p>Hola esto es un parrafo normal</p>
<p class="inverso">Prrafo con los colores invertidos</p>
<table>
<tr>
<td class="inverso">INVERSO</td>
<td>NORMAL</td>
</tr>
</table>
</body>
Esta pgina tiene, generalmente, el fondo negro y el texto blanco. El primer prrafo, que
es un prrafo normal, sigue esa definicin general de estilos, pero el segundo prrafo,
al que se ha aplicado la clase "inverso", tiene el fondo blanco y el texto en negro. Por lo
que respecta a la tabla, en su primera celda se ha asignado la clase "inverso", por lo
28
que se ver con fondo blanco y color de texto en negro. Mientras que la segunda celda,
que no tiene asignada ninguna clase, se presentar como se defini en la regla general.
Para conocer los resultados obtenidos en el anterior ejemplo podemos verlo en una
pgina aparte.
Estilos que slo se utilizan una vez
Tambin podemos tener un estilo especfico para un nico elemento, que no va a
repetirse en ningn otro caso. Para ello tenemos los estilos asignados por identificador.
Los identificadores se definen en HTML utilizando el atributo id en la etiqueta que
deseamos identificar. El valor del atributo id ser el que definamos nosotros.
<div id="capa1">
En la hoja de estilos, para definir el aspecto de ese elemento con id nico, se escribe el
carcter almohadilla, seguido del identificador indicado en la etiqueta y entre llaves los
atributos css que deseemos.
#capa1{
font-size: 12pt;
font-family: arial;
}
En este caso se ha asignado fuente de tamao 12 puntos y cuerpo arial.
Como se puede concluir en la lectura de estas lneas, generalmente se prefiere utilizar
estilos definidos en clases a los definidos con identificadores, a no ser que estemos
seguros que ese estilo no se va a repetir en todo el documento.
29
1.3 PHP
PHP (acrnimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de cdigo
abierto muy popular especialmente adecuado para el desarrollo web y que puede ser
incrustado en HTML.
Bien, pero qu significa realmente? Un ejemplo nos aclarar las cosas:
Ejemplo #1 Un ejemplo introductorio
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<?php
echo "Hola, soy un script de PHP!";
?>
</body></html>
En lugar de usar muchos comandos para mostrar HTML (como en C o en Perl), las
pginas de PHP contienen HTML con cdigo incrustado que hace "algo" (en este caso,
mostrar "Hola, soy un script de PHP!). El cdigo de PHP est encerrado entre las
etiquetas especiales de comienzo y final <?php y ?> que permiten entrar y salir del
"modo PHP".
30
Lo que distingue a PHP de algo del lado del cliente como Javascript es que el cdigo es
ejecutado en el servidor, generando HTML y envindolo al cliente. El cliente recibir el
resultado de ejecutar el script, aunque no se sabr el cdigo subyacente que era. El
servidor web puede ser configurado incluso para que procese todos los ficheros HTML
con PHP, por lo que no hay manera de que los usuarios puedan saber qu se tiene
debajo de la manga.
Lo mejor de utilizar PHP es su extrema simplicidad para el principiante, pero a su vez
ofrece muchas caractersticas avanzadas para los programadores profesionales. No
sienta miedo de leer la larga lista de caractersticas de PHP. En unas pocas horas podr
empezar a escribir sus primeros scripts.
Aunque el desarrollo de PHP est centrado en la programacin de scripts del lado del
servidor, se puede utilizar para muchas otras cosas. Siga leyendo y descubra ms en la
seccin Qu puede hacer PHP?, o vaya directo al tutorial introductorio si solamente
est interesado en programacin web.
31
1.3.1 Qu puede hacer PHP?
Cualquier cosa. PHP est enfocado principalmente a la programacin de scripts del

lado del servidor, por lo que se puede hacer cualquier cosa que pueda hacer otro
programa CGI, como recopilar datos de formularios, generar pginas con contenidos
dinmicos, o enviar y recibir cookies. Aunque PHP puede hacer mucho ms.
Existen principalmente tres campos principales donde se usan scripts de PHP.
Scripts del lado del servidor. Este es el campo ms tradicional y el foco principal. Son
necesarias tres cosas para que esto funcione. El analizador de PHP (mdulo CGI o
servidor), un servidor web y un navegador web. Es necesario ejecutar el servidor con
una instalacin de PHP conectada. Se puede acceder al resultado del programa de
PHP con un navegador, viendo la pgina de PHP a travs del servidor. Todo esto se
puede ejecutar en su mquina si est experimentado con la programacin de PHP.
Vase la seccin sobre las instrucciones de instalacin para ms informacin.
Scripts desde la lnea de comandos. Se puede crear un script de PHP y ejecutarlo sin
necesidad de un servidor o navegador. Solamente es necesario el analizador de PHP
para utilizarlo de esta manera. Este tipo de uso es ideal para scripts que se ejecuten
con regularidad empleando cron (en *nix o Linux) o el Planificador de tareas (en
Windows). Estos scripts tambin pueden usarse para tareas simples de procesamiento
de texto. Vase la seccin Uso de PHP en la lnea de comandos para ms informacin.
Escribir aplicaciones de escritorio. Probablemente PHP no sea el lenguaje ms
apropiado para crear aplicaciones de escritorio con una interfaz grfica de usuario, pero
si se conoce bien PHP, y se quisiera utilizar algunas caractersticas avanzadas de PHP
en aplicaciones del lado del cliente, se puede utilizar PHP-GTK para escribir dichos
programas. Tambin es posible de esta manera escribir aplicaciones independientes de
una plataforma. PHP-GTK es una extensin de PHP, no disponible en la distribucin
principal. Si est interesado en PHP-GTK, puede visitar su propio sitio web.
32
PHP puede emplearse en todos los sistemas operativos principales, incluyendo Linux,
muchas variantes de Unix (incluyendo HP-UX, Solaris y OpenBSD), Microsoft Windows,
Mac OS X, RISC OS y probablemente otros ms. PHP admite la mayora de servidores
web de hoy en da, incluyendo Apache, IIS, y muchos otros. Esto incluye cualquier
servidor web que pueda utilizar el binario de PHP FastCGI, como lighttpd y nginx. PHP
funciona tanto como mdulo como procesador de CGI.
De modo que con PHP, se tiene la libertad de elegir el sistema operativo y el servidor
web. Adems, se tiene la posibilidad de utilizar programacin por procedimientos o
programacin orientada a objetos (POO), o una mezcla de ambas.
Con PHP no se est limitado a generar HTML. Entre las capacidades de PHP se
incluyen la creacin de imgenes, ficheros PDF e incluso pelculas Flash (usando libswf
y Ming) generadas sobre la marcha. Tambin se puede generar fcilmente cualquier
tipo de texto, como XHTML y cualquier otro tipo de fichero XML. PHP puede
autogenerar estos ficheros y guardarlos en el sistema de ficheros en vez de imprimirlos
en pantalla, creando una cach en el lado del servidor para contenido dinmico.
Una de las caractersticas ms potentes y destacables de PHP es su soporte para un
amplio abanico de bases de datos. Escribir una pgina web con acceso a una base de
datos es increblemente simple utilizando una de las extensiones especficas de bases
de datos (p.ej., para mysql), o utilizar una capa de abstraccin como PDO, o conectarse
a cualquier base de datos que admita el estndar de Conexin Abierta a Bases de
Datos por medio de la extensin ODBC. Otras bases de datos podran utilizar cURL o
sockets, como lo hace CouchDB.
PHP tambin cuenta con soporte para comunicarse con otros servicios usando
protocolos tales como LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (en Windows) y
muchos otros. Tambin se pueden crear sockets de red puros e interactuar usando
cualquier otro protocolo. PHP tiene soporte para el intercambio de datos complejos de
WDDX entre virtualmente todos los lenguajes de programacin web. Y hablando de
33
interconexin, PHP tiene soporte para la instalacin de objetos de Java y emplearlos de

forma transparente como objetos de PHP.
PHP tiene tiles caractersticas de procesamiento de texto, las cuales incluyen las
expresiones regulares compatibles con Perl (PCRE), y muchas extensiones y
herramientas para el acceso y anlisis de documentos XML. PHP estandariza todas las
extensiones XML sobre el fundamento slido de libxml2, y ampla este conjunto de
caractersticas aadiendo soporte para SimpleXML, XMLReader y XMLWriter.
Existen otras extensiones interesantes, las cuales estn categorizadas alfabticamente
y por categora. Tambin hay extensiones adicionales de PECL que podran estar
documentadas o no dentro del manual de PHP, tal como XDebug.
Como se puede apreciar, esta pgina no es suficiente para enumerar todas las
caractersticas y beneficios que ofrece PHP. Consulte las secciones Instalacin de PHP
y Referencia de las funciones para una explicacin de las extensiones mencionadas
aqu.
1.3.2 Qu necesito?
En este manual se asume que se cuenta con un servidor que tiene soporte activado
para PHP y que todos los ficheros con la extensin .php son tratados por PHP. En la
mayora de servidores, esta es la extensin predeterminada para los ficheros de PHP,
aunque puede preguntar al administrador de su servidor para estar seguro. Si el
servidor tiene soporte para PHP, entonces no es necesario hacer nada. Simplemente
cree sus ficheros .php, gurdelos en su directorio web y el servidor los analizar por
usted. No hay necesidad de compilar nada o instalar otras herramientas. Piense en
estos ficheros habilitados para PHP como simples ficheros HTML con el aadido de una
nueva familia de etiquetas mgicas que permiten todo tipo de cosas.
34
Digamos que quiere ahorrar el preciado ancho de banda y trabajar localmente. En este
caso, querr instalar un servidor web, como Apache, y por supuesto PHP. Lo ms
seguro es que tambin quiera instalar una base de datos como MySQL.
Puede instalarlos de forma independiente o bien puede elegir una manera ms sencilla.
Este manual contiene Instrucciones de instalacin de PHP (asumiendo que tiene algn
tipo de servidor web ya configurado). Si tuviera problemas con la instalacin, sugerimos
que formule sus preguntas en nuestra lista de correo de instalacin. Si elige la
manera ms sencilla, localice un paquete preconfigurado para su sistema operativo,
el cual instala automticamente todo esto con nicamente unos pocos clics de ratn. Es
sencillo configurar un servidor web con soporte para PHP en cualquier sistema
operativo, incluyendo MacOSX, Linux y Windows. En Linux, podra encontrar til
rpmfind y PBone para localizar los RPM. Tambin puede visitar apt-get para buscar
paquetes para Debian.
35
1.3.3Etiquetas de PHP
Cuando PHP interpreta un fichero, busca las etiquetas de apertura y cierre, que son <?
php y ?>, y que indican a PHP dnde empezar y finalizar la interpretacin del cdigo.
Este mecanismo permite a PHP ser incrustado en todo tipo de documentos, ya que todo
lo que est fuera de las etiquetas de PHP ser ignorado por el intrprete.
PHP tambin permite las etiquetas abreviadas <? y ?> (las cuales estn
desaconsejadas debido a que slo estn disponibles si se habilitan con la directiva
short_open_tag del fichero de configuracin php.ini, o si PHP se configur con la opcin
--enable-short-tags .
Si un fichero contiene cdigo PHP puro, es preferible omitir la etiqueta de cierre de PHP
al final del fichero. Esto impide que se aadan espacios en blanco o nuevas lneas
despus de la etiqueta de cierre de PHP, los cuales pueden causar efectos no
deseados debido a que PHP iniciar la salida del buffer cuando no haba intencin por
parte del programador de enviar ninguna salida en ese punto del script.
<?php
echo "Hola mundo";
// ... ms cdigo
echo "ltima sentencia";
// el script finaliza aqu sin etiqueta de cierre de PHP
36
1.3.4Salir de HTML
Cualquier cosa fuera del par de etiquetas de apertura y cierre es ignorado por el
intrprete de PHP, el cual permite que los ficheros de PHP tengan contenido mixto. Esto
permite que PHP sea embebido en documentos HTML para, por ejemplo, crear
plantillas.
<p>Esto va a ser ignorado por PHP y mostrado por el navegador.</p>
<?php echo 'Mientras que esto va a ser interpretado.'; ?>
<p>Esto tambin ser ignorado por PHP y mostrado por el navegador.</p>
Esto funciona como se espera, porque cuando PHP intercepta las etiquetas de cierre ?
>, simplemente comienza a imprimir cualquier cosa que encuentre (a excepcin de un
una nueva lnea inmediatamente despus - vase separacin de instrucciones) haste
que d con otra etiqueta de apertura a menos que se encuentre en mitad de una
sentencia condicional, en cuyo caso el intrprete determinar el resultado de la
condicin antes de tomar una decisin de qu es lo que tiene que saltar. Vea el
siguiente ejemplo.
Usar estructuras con condiciones
Ejemplo #1 Salida avanzada usando condiciones
<?php if ($expresin == true): ?>
Esto se mostrar si la expresin es verdadera.
<?php else: ?>
En caso contrario se mostrar esto.
<?php endif; ?>
En este ejemplo, PHP saltar los bloques donde la condicin no se cumpla, incluso si
estn fuera de las etiquetas de apertura/cierre de PHP, PHP los saltar segn la
37
condicin, ya que el intrprete saltar por encima de los bloques contenidos dentro de
una condicin que no se cumpla.
Para imprimir bloques de texto grandes, es ms eficiente abandonar el modo intrprete
de PHP que enviar todo el texto a travs de echo o print.
Existen cuatro tipos de pares de etiquetas de apertura y de cierre que se pueden usar
en PHP. Dos de estas, <?php ?> y <script language="php"> </script>, siempre estn
disponibles. Las otras dos son las etiquetas abreviadas y las etiquetas estilo ASP, que
se pueden activar o desactivar desde el fichero de configuracin php.ini Aunque
algunas personas encuentran las etiquetas abreviadas y las etiquetas estilo ASP ms
convenientes, son menos portables y generalmente no se recomiendan.
Nota:
Observe tambin que si se est incrustando PHP dentro de XML o XHTML necesitar
usar las etiquetas <?php ?> para seguir los estndares.
Ejemplo #2 Etiquetas de apertura y de cierre de PHP
1. <?php echo 'si se quiere mostrar documentos XHTML o XML, debe hacerse as'; ?>
2. <script language="php">
echo 'algunos editores (como FrontPage) no les gusta
las instruciones de proceso';
</script>
3. <? echo 'esta es la forma ms simple, una instrucin de procesado SGML'; ?>
<?= expresin ?> Esto es una forma abreviada de "<? echo expresin ?>"
4. <% echo 'Quiz use de forma opcional etiquetas de estilo ASP'; %>
<%= $variable; %> Esto es una forma abreviada de "<% echo $variable; %>"
38
Las etiquetas vistas en los ejemplos uno y dos estn siempre disponibles; el ejemplo
uno es el ms comn y recomendado de los dos.
Las etiquetas abreviadas (ejemplo tres) estn solo disponibles cuando se activan
mediante la directiva short_open_tag del fichero de configuracin php.ini o si PHP se
configur con la opcin --enable-short-tags .
Las etiquetas de estilo ASP (ejemplo cuatro) estn solo disponibles cuando se activan
mediante la directiva asp_tags del fichero de configuracin php.ini.
Nota:
Se debe evitar el uso de etiquetas abreviadas cuando se desarrollen aplicaciones o
bibliotecas que estn pensadas para su redistribucin o despliegue en servidores PHP
que no estn bajo su control, porque puede que las etiquetas abreviadas no estn
soportadas en un servidor determinado. Por portabilidad y cdigo redistribuible,
asegrese de no usar etiquetas abreviadas.
Nota:
En PHP 5.2 y anteriores, el intrprete no permite que un fichero contenga nicamente la
etiqueta de apertura <?php. A partir de PHP 5.3 s se permite siempre que existan uno o
ms caracteres espacio en blanco despus de la etiqueta de apertura.
Nota:
Desde PHP 5.4, la etiqueta abreviada de echo <?= siempre es reconocida y vlida, sin
tener en cuenta la configuracin de short_open_tag.
39
1.3.5 Inicio de la sesin en PHP con session_start

Definicin de la funcin PHP session_start
La funcin PHP session_start crea una sesin o reanuda la actual basada en un
identificador de sesin pasado mediante una peticin GET o POST, o pasado mediante
una cookie.
Para usar una sesin nominada hay que utilizar la funcin session_name antes de
llamar a session_start.
Cuando session.use_trans_sid est habilidado, la funcin session_start registrar un
gestor de salida interno para la reescritura de la URL.
Si un usuario utiliza ob_gzhandler o similar con ob_start, el orden de las funciones es
importante para la salida adecuada. Por ejemplo, ob_gzhandler se debe registrar antes
de iniciar una sesin.
Cmo usar session_start en nuestro sitio web
En todas las pginas de nuestro sitio web donde necesitemos usar algn dato del
usuario que ha iniciado sesin o mostrar alguna opcin especial para el usuario
deberemos aadir el siguiente cdigo, siempre al principio del fichero (antes de
cualquier etiqueta HTML de la pgina):
<?
session_start();
?>
Con el procedimiento "session_start()" iniciaremos la sesin, si ya est iniciada no har
nada.
Registrar una variable de sesin, establecer un valor para una variable de sesin en
PHP
40
Para registrar una variable de sesin en versiones anteriores de PHP, se usaba la

funcin session_register, aunque esta funcin no es aconsejada pues est obsoleta, a
partir de PHP 5.3.0.
Para
registrar
una
variable
de
sesin
establecer
un
valor
usaremos
$_SESSION["nombre_varaable"]. En el siguiente ejemplo, registramos y establecemos

el valor para las variables de sesin nombre_cliente y nombre_usuario:
$sql = "SELECT u.usuario, u.contrasena, u.idcliente, c.nombre cliente " .
" FROM usuario u, cliente c ".
" WHERE c.id=u.idcliente and usuario='" . $txtusuario . "'";
$sqlResultado = mysql_query($sql);
$row = mysql_fetch_array($sqlResultado);
$contrasena = $row["contrasena"];
$idcliente = $row["idcliente"];
if ($contrasena == md5($txtcontrasena))
{
//establecermos las variables de sesin
$_SESSION["nombre_usuario"] = $row["usuario"];
$_SESSION["nombre_cliente"] = $row["cliente"];
...
El ejemplo anterior nos sirve tambin como mtodo para realizar el inicio de sesin
(validacin) de un usuario en nuestro sitio web, mostramos la consulta SQL que se
ejecutar y la comprobacin de si el usuario existe y si la contrasea introducida en el
41
formulario (txtcontrasena) coincide con la guardada en la base de datos (contrasena

una vez obtenido su hash md5).
Nota: cuando el usuario se da de alta en nuestro sitio web, guardamos el hash (md5) de
la contrasea en la base de datos, usando la funcin de PHP: md5. Por ello, en el
ejemplo anterior, cuando mostramos al usuario el formulario para iniciar sesin y ste
introduce su nick y su contrasea, para comparar su contrasea con la de la base de
datos, utilizamos nuevamente la funcin de PHP md5, para comparar el hash md5 de la
contrasea introducida por el usuario con el guardado en la base de datos. Este mtodo
es el idneo, as, ante cualquier acceso indebido a la tabla de usuarios de nuestra base
de datos, slo se mostrar en el campo "contrasena" el valor del hash md5, nunca la
contrasea del usuario y puesto que el hash md5 es unidireccional, de l no se puede
obtener la contrasea (en teora).
Aadir un enlace para que el usuario pueda cerrar la sesin en cualquier momento
Cuando el usuario ha iniciado sesin, siempre es recomendable aadir un enlace para
que ste pueda cerrar la sesin en cualquier momento de forma segura. As evitaremos
accesos indebidos por otros usuarios que usen el mismo equipo que el que inici
sesin. En teora, siempre que se cierre el navegador web se cerrar la sesin
automticamente, pero es aconsejable aadir este enlace para que el usuario decida
cundo cerrar la sesin.
Para aadir el enlace de "Cerrar sesin", podemos insertar el siguiente cdigo PHP
donde queramos que aparezca el enlace:
if (! empty($_SESSION["nombre_usuario"]))
{
echo "<a href="cerrarsesion.php" title="Cerrar sesin">Bienvenid@</a>" .
$_SESSION["nombre_usuario"] . " (" . $_SESSION["nombre_cliente"] . ")";
}
42
Explicamos el cdigo anterior:

Con if (! empty($_SESSION["nombre_usuario"])) comprobamos si el usuario ha iniciado
sesin, si lo ha hecho la variable de sesin nombre_usuario tendr un valor, por lo que
se ejecutar el cdigo del if.
Con el cdigo que hay dentro del if, lo nico que hacemos es mostrar algo as:
Bienveni@ ajpdsoft (Proyecto AjpdSoft)
Donde:
"Bienveni@" ser un enlace a la pgina "cerrarsesion.php" que describiremos ms
adelante.
"ajpdsoft": ser el nombre de usuario que haya iniciado la sesin.
"Proyecto AjpdSoft": ser el nombre del cliente que hayamos asignado al usuario.
Como ya hemos comentado, este cdigo PHP lo pondremos en todas las pginas de
nuestro sitio web donde queramos que aparezca el enlace a cerrar sesin. Lo
colocaremos, dentro de cada pgina, en el sitio donde queramos que aparezca. Puesto
que PHP permite "mezclarse" con cdigo HTML no tendremos problema, por ejemplo:
<td style="background-image:url(img/ajpdsoft.png)">
<?
if (! empty($_SESSION["nombre_usuario"]))
{
echo "<a href="cerrarsesion.php" title="Cerrar sesin">Bienvenid@</a>" .
$_SESSION["nombre_usuario"] . " (" . $_SESSION["nombre_cliente"] . ")"; }?>
43
<table border="0" align="right" cellpadding="0" cellspacing="0">

<tr>
Fichero "cerrarsesion.php" para cerrar sesin en PHP con session_destroy
Definicin de la funcin session_destroy de PHP
Destruye toda la informacin asociada con la sesin actual. No destruye ninguna de las
variables globales asociadas con la sesin, ni destruye la cookie de sesin. Para volver
a utilizar las variables de sesin se debe llamar a session_start().
Para destruir la sesin completamente, como desconectar al usuario, el id de sesin
tambin debe ser destruido. Si se usa una cookie para propagar el id de sesin
(comportamiento por defecto), entonces la cookie de sesin se debe borrar. setcookie()
se puede usar para eso.
Uso de la funcin session_destroy para cerrar la sesin en PHP
Crearemos un fichero de texto plano sin formato con el siguiente contenido,
guardndolo con el nombre "cerrarsesion.php" y lo subiremos a nuestro sitio FTP:
<?
session_start();
unset($_SESSION["nombre_usuario"]);
unset($_SESSION["nombre_cliente"]);
session_destroy();
header("Location: index.php");
exit;
?>
44
A continuacin explicamos cada lnea del fichero:

session_start: funcin ya explicada ms arriba, puesto que la sesin ya est iniciada, no
har nada.
unset($_SESSION["nombre_usuario"])
unset($_SESSION["nombre_cliente"]):
liberarn las variables de sesin registradas, en el ejemplo liberamos dos variables de

sesin: nombre_usuario y nombre_cliente. Este mtodo es equivalente al mtodo ya
obsoleto session_unregister (en desuso a partir de la versin 5.3.0 de PHP).
session_destroy: libera la sesin actual, elimina cualquier dato de la sesin.
header("Location: index.php"): tras liberar la sesin con los mtodos anteriores, esta
lnea vuelve a mostrar la pgina "index.php" de nuestro sitio web.
Nota 1: si tenemos muchas variables de sesin y queremos liberarlas todas podemos
usar este cdigo PHP:
$_SESSION = array();
Nota 2: si queremos eliminar todos los datos de las cookies guardadas podemos
ejecutar este cdigo PHP:
if (ini_get("session.use_cookies"))
{
$params = session_get_cookie_params();
setcookie(session_name(), '', time() - 42000,
$params["path"], $params["domain"],
$params["secure"], $params["httponly"]);
}
45
1.3.6Formularios HTML (GET y POST)

Cuando se enva un formulario a un script de PHP, la informacin de dicho formulario
pasa a estar automticamente disponible en el scrip. Existen algunas formas de
acceder a esta informacin, por ejemplo:
Ejemplo #1 Un formulario HTML sencillo
<form action="foo.php" method="post">
Nombre usuario: <input type="text" name="username" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" name="submit" value="Enviarme!" />
</form>
A partir de PHP 5.4.0, solamente existen dos maneras de acceder a datos desde
formularios HTML. Los mtodos disponibles actualemten se enumeran a continuacin:
Ejemplo #2 Acceso a datos de un formulario HTML sencillo con POST
<?php
echo $_POST['username'];
echo $_REQUEST['username'];
?>
Haban otras formas de acceder a la entrada del usuario en versiones antiguas de PHP.
Estn enumeradas abajo. Vase el historial de cambios al final para ms detalles.
46
Ejemplo #3 Old methods of accessing user input

<?php
// OJO: estos mtodos ya NO ESTN soportados.
// Los vlidos estn descritos arriba.
// Usar import_request_variables() - esta funcin ha sido eliminada en PHP 5.4.0
import_request_variables('p', 'p_');
echo $p_username;
// Estas variables predefinidas fueron eliminadas en PHP 5.4.0
echo $HTTP_POST_VARS['username'];
// Usar register_globals. Esta caracterstica fue eliminada en PHP 5.4.0
echo $username;?>
Usar un formulario con GET es similar excepto en el uso de variables predefinidas, que
en este caso sern del tipo GET. GET tambin se usa con QUERY_STRING (la
informacin
despues
del
smbolo
'?'
en
una
URL).
Por
ejemplo
http://www.example.com/test.php?id=3 contiene datos GET que son accesibles con

$_GET['id']. Vase tambin $_REQUEST.
Nota:
Puntos y espacios en nombres de variables son convertidos a guiones bajos. Por
ejemplo <input name="a.b" /> se convierte en $_REQUEST["a_b"].
PHP tambin entiende arrays en el contexto de variables de formularios (vea la faq
relacionada). Se puede, por ejemplo, agrupar juntas variables relacionadas o usar esta
caracterstica para obtener valores de una entrada "select" mltiple. Por ejemplo, vamos
a mandar un formulario a s mismo y a presentar los datos cuando se reciban:
47
Ejemplo #4 Variables de formulario ms complejas

<?php
if ($_POST) {
echo '<pre>';
echo htmlspecialchars(print_r($_POST, true));
echo '</pre>';
}
?>
<form action="" method="post">
Nombre: <input type="text" name="personal[nombre]" /><br />
Email: <input type="text" name="personal[email]" /><br />
Cerveza: <br />
<select multiple name="cerveza[]">
<option value="warthog">Warthog</option>
<option value="guinness">Guinness</option>
<option value="stuttgarter">Stuttgarter Schwabenbru</option>
</select><br />
<input type="submit" value="enviarme!" />
</form>
48
1.4 Introduccin a AJAX

El trmino AJAX se present por primera vez en el artculo "Ajax: A New Approach to
Web Applications" publicado por Jesse James Garrett el 18 de Febrero de 2005. Hasta
ese momento, no exista un trmino normalizado que hiciera referencia a un nuevo tipo
de aplicacin web que estaba apareciendo.
En realidad, el trmino AJAX es un acrnimo de Asynchronous JavaScript + XML, que
se puede traducir como "JavaScript asncrono + XML".
El artculo define AJAX de la siguiente forma:
Ajax no es una tecnologa en s mismo. En realidad, se trata de varias tecnologas
independientes que se unen de formas nuevas y sorprendentes.
Las tecnologas que forman AJAX son:
XHTML y CSS, para crear una presentacin basada en estndares.
DOM, para la interaccin y manipulacin dinmica de la presentacin.
XML, XSLT y JSON, para el intercambio y la manipulacin de informacin.
XMLHttpRequest, para el intercambio asncrono de informacin.
JavaScript, para unir todas las dems tecnologas.
Figura 1.1 Tecnologas agrupadas bajo el concepto de AJAX
49
Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de todas y cada una

de las tecnologas anteriores.
En las aplicaciones web tradicionales, las acciones del usuario en la pgina (pinchar en
un botn, seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor.
Una vez procesada la peticin del usuario, el servidor devuelve una nueva pgina
HTML al navegador del usuario.
En el siguiente esquema, la imagen de la izquierda muestra el modelo tradicional de las
aplicaciones web. La imagen de la derecha muestra el nuevo modelo propuesto por
AJAX:
Figura 1.2 Comparacin grfica del modelo tradicional de aplicacin web y del nuevo modelo
propuesto por AJAX. (Imagen original creada por Adaptive Path y utilizada con su permiso)
50
Esta tcnica tradicional para crear aplicaciones web funciona correctamente, pero no
crea una buena sensacin al usuario. Al realizar peticiones continuas al servidor, el
usuario debe esperar a que se recargue la pgina con los cambios solicitados. Si la
aplicacin debe realizar peticiones continuas, su uso se convierte en algo molesto
AJAX permite mejorar completamente la interaccin del usuario con la aplicacin,
evitando las recargas constantes de la pgina, ya que el intercambio de informacin con
el servidor se produce en un segundo plano.
Las aplicaciones construidas con AJAX eliminan la recarga constante de pginas
mediante la creacin de un elemento intermedio entre el usuario y el servidor. La nueva
capa intermedia de AJAX mejora la respuesta de la aplicacin, ya que el usuario nunca
se encuentra con una ventana del navegador vaca esperando la respuesta del servidor.
El siguiente esquema muestra la diferencia ms importante entre una aplicacin web
tradicional y una aplicacin web creada con AJAX. La imagen superior muestra la
interaccin sncrona propia de las aplicaciones web tradicionales. La imagen inferior
muestra la comunicacin asncrona de las aplicaciones creadas con AJAX.
51
Figura 1.3 Comparacin entre las comunicaciones sncronas de las aplicaciones web
tradicionales y las comunicaciones asncronas de las aplicaciones AJAX (Imagen original
creada por Adaptive Path y utilizada con su permiso)
Las peticiones HTTP al servidor se sustituyen por peticiones JavaScript que se realizan
al elemento encargado de AJAX. Las peticiones ms simples no requieren intervencin
del servidor, por lo que la respuesta es inmediata. Si la interaccin requiere una
respuesta del servidor, la peticin se realiza de forma asncrona mediante AJAX. En
52
este caso, la interaccin del usuario tampoco se ve interrumpida por recargas de pgina
o largas esperas por la respuesta del servidor.
Desde su aparicin, se han creado cientos de aplicaciones web basadas en AJAX. En
la mayora de casos, AJAX puede sustituir completamente a otras tcnicas como Flash.
Adems, en el caso de las aplicaciones web ms avanzadas, pueden llegar a sustituir a
las aplicaciones de escritorio.
1.4.1Sintaxis
La sintaxis de un lenguaje de programacin se define como el conjunto de reglas que
deben seguirse al escribir el cdigo fuente de los programas para considerarse como
correctos para ese lenguaje de programacin.
La sintaxis de JavaScript es muy similar a la de otros lenguajes como Java y C. Las
normas bsicas que definen la sintaxis de JavaScript son las siguientes:
No se tienen en cuenta los espacios en blanco y las nuevas lneas: como sucede con
XHTML, el intrprete de JavaScript ignora cualquier espacio en blanco sobrante, por lo
que el cdigo se puede ordenar de forma adecuada para su manejo (tabulando las
lneas, aadiendo espacios, creando nuevas lneas, etc.)
Se distinguen las maysculas y minsculas: al igual que sucede con la sintaxis de las
etiquetas y elementos XHTML. Sin embargo, si en una pgina XHTML se utilizan
indistintamente maysculas y minsculas, la pgina se visualiza correctamente y el
nico problema es que la pgina no valida. Por el contrario, si en JavaScript se
intercambian maysculas y minsculas, las aplicaciones no funcionan correctamente.
No se define el tipo de las variables: al definir una variable, no es necesario indicar el
tipo de dato que almacenar. De esta forma, una misma variable puede almacenar
diferentes tipos de datos durante la ejecucin del programa.
No es obligatorio terminar cada sentencia con el carcter del punto y coma (;): al
contrario de la mayora de lenguajes de programacin, en JavaScript no es obligatorio
53
terminar cada sentencia con el carcter del punto y coma (;). No obstante, es muy
recomendable seguir la tradicin de terminar cada sentencia con el carcter ;
Se pueden incluir comentarios: los comentarios se utilizan para aadir alguna
informacin relevante al cdigo fuente del programa. Aunque no se visualizan por
pantalla, su contenido se enva al navegador del usuario junto con el resto del
programa, por lo que es necesario extremar las precauciones sobre el contenido de los
comentarios.
JavaScript define dos tipos de comentarios: los de una sola lnea y los que ocupan
varias lneas. Los comentarios de una sola lnea se definen aadiendo dos barras
oblicuas (//) al principio de cada lnea que forma el comentario:
// a continuacin se muestra un mensaje
alert("mensaje de prueba");
Tambin se pueden incluir varios comentarios seguidos de una sola lnea:
// a continuacin se muestra un mensaje
// y despus se muestra otro mensaje
Cuando un comentario ocupa ms de una lnea, es ms eficiente utilizar los
comentarios multilnea, que se definen encerrando el texto del comentario entre los
caracteres /* y */
/* Los comentarios de varias lneas son muy tiles
cuando se necesita incluir bastante informacin
en los comentarios */
54
1.4.2 Variables
Las variables se definen mediante la palabra reservada var, que permite definir una o
varias variables simultneamente:
var variable1 = 16;
var variable2 = "hola", variable3 = "mundo";
var variable4 = 16, variable5 = "hola";
El nombre de las variables debe cumplir las dos siguientes condiciones:
El primer carcter debe ser una letra o un guin bajo (_) o un dlar ($).
El resto de caracteres pueden ser letras, nmeros, guiones bajos (_) y smbolos de
dlar ($).
No es obligatorio inicializar una variable al declararla:
var variable6;
Si la variable no se declara mediante el operador var, automticamente se crea una
variable global con ese identificador y su valor. Ejemplo:
var variable1 = 16;
variable2 = variable1 + 4;
En el ejemplo anterior, la variable2 no ha sido declarada, por lo que al llegar a esa
instruccin, JavaScript crea automticamente una variable global llamada variable2 y le
asigna el valor correspondiente.
El mbito de una variable (llamado scope en ingls) es la zona del programa en la que
se define la variable. JavaScript define dos mbitos para las variables: global y local.
55
El siguiente ejemplo ilustra el comportamiento de los mbitos:

function muestraMensaje() {
var mensaje = "Mensaje de prueba";
}
muestraMensaje();
alert(mensaje);
Cuando se ejecuta el cdigo JavaScript anterior, su resultado no es el esperado, ya que
no se muestra por pantalla ningn mensaje. La variable mensaje se ha definido dentro
de la funcin y por tanto es una variable local que solamente est definida dentro de la
funcin.
Cualquier instruccin que se encuentre dentro de la funcin puede hacer uso de la
variable. Sin embargo, cualquier instruccin que se encuentre en otras funciones o
fuera de cualquier funcin no tendr definida la variable mensaje.
Adems de variables locales, tambin existe el concepto de variable global, que est
definida en cualquier punto del programa (incluso dentro de cualquier funcin).
var mensaje = "Mensaje de prueba";
alert(mensaje);
}
El cdigo JavaScript anterior define una variable fuera de cualquier funcin. Este tipo de
variables automticamente se transforman en variables globales y estn disponibles en
cualquier punto del programa.
56
De esta forma, aunque en el interior de la funcin no se ha definido ninguna variable

llamada mensaje, la variable global creada anteriormente permite que la instruccin
alert() dentro de la funcin muestre el mensaje correctamente.
Si una variable se declara fuera de cualquier funcin, automticamente se transforma
en variable global independientemente de si se define utilizando la palabra reservada
var o no. Sin embargo, en el interior de una funcin, las variables declaradas mediante
var se consideran locales y el resto se transforman tambin automticamente en
variables globales.
Por lo tanto, el siguiente ejemplo si que funciona como se espera:
mensaje = "Mensaje de prueba";
}
muestraMensaje();
alert(mensaje);
En caso de colisin entre las variables globales y locales, dentro de una funcin
prevalecen las variables locales:
var mensaje = "gana la de fuera";
var mensaje = "gana la de dentro";
alert(mensaje);
}
57
alert(mensaje);
muestraMensaje();
alert(mensaje);
El cdigo anterior muestra por pantalla los siguientes mensajes:
gana la de fuera
gana la de dentro
gana la de fuera
La variable local llamada mensaje dentro de la funcin tiene ms prioridad que la
variable global del mismo nombre, pero solamente dentro de la funcin.
Si no se define la variable dentro de la funcin con la palabra reservada var, en realidad
se est modificando el valor de la variable global:
var mensaje = "gana la de fuera";
mensaje = "gana la de dentro";
alert(mensaje);
}
alert(mensaje);
muestraMensaje();
alert(mensaje);
58
En este caso, los mensajes mostrados son:

gana la de fuera
gana la de dentro
gana la de dentro
La recomendacin general es definir como variables locales todas las variables que
sean de uso exclusivo para realizar las tareas encargadas a cada funcin. Las variables
globales se utilizan para compartir variables entre funciones de forma rpida.
1.4.3Palabras reservadas
Como cualquier otro lenguaje de programacin, JavaScript utiliza una serie de palabras
para crear las instrucciones que forman cada programa. Por este motivo, estas palabras
se consideran reservadas y no se pueden utilizar como nombre de una variable o
funcin.
El estndar ECMA-262 incluye la lista de las palabras reservadas que utiliza
actualmente JavaScript y la lista de las palabras reservadas para su uso futuro.
Utilizadas actualmente:
break, else, new, var, case, finally, return, void, catch, for, switch, while, continue,
function, this, with, default, if, throw, delete, in, try, do, instanceof, typeof
Reservadas para su uso futuro:
abstract, enum, int, short, boolean, export, interface, static, byte, extends, long, super,
char, final, native, synchronized, class, float, package, throws, const, goto, private,
transient, debugger, implements, protected, volatile, double, import, public
59
CAPITULO 2. SERVIDOR WEB
60
2.1 WAMP SERVER

WampServer, un entorno Windows desarrollo web.
WampServer es un entorno de desarrollo web de Windows. Se le permite crear
aplicaciones web con Apache 2, PHP y una base de datos MySQL. Al lado,
PhpMyAdmin permite administrar fcilmente tus bases de datos.
WampServer instala automticamente todo lo que necesita para comenzar a desarrollar
aplicaciones web y es muy intuitivo de usar. Usted ser capaz de sintonizar su servidor
sin siquiera tocar los archivos de configuracin.
2.1.1 INSTALACIN
Haga doble clic en el archivo descargado y sigue las instrucciones. Todo es

automtico. El paquete WampServer se entrega un poco con las ltimas
versiones de Apache, MySQL y PHP.

Una vez WampServer est instalado, puede agregar manualmente aditionals
Apache, PHP o MySQL versiones (slo compilados VC11 VC9, VC10 y).
Explicaciones sern proporcionados en el foro .

Cada versin de Apache, MySQL y PHP tiene su propia configuracin y sus
propios archivos (datas para MySQL).

Utilizando wampserver
El directorio "www" se crear automticamente (normalmente C: \ wamp \ www)
Cree un subdirectorio en "www" y poner los archivos PHP en el interior.
Haga clic en el enlace "localhost" en el men WampSever o abrir su navegador
de Internet y vaya a la direccin URL: http: // localhost
61
2.1.2 FUNCIONALIDADES
Funcionalidades de WAMPServer son muy completas y fciles de usar por lo que no
vamos a explicar aqu cmo usarlos.
Con un clic izquierdo en el icono de WampServer, usted ser capaz de:
administrar sus servicios de Apache y MySQL

cambiar en lnea / fuera de lnea (dar acceso a todo el mundo o slo localhost)
instalar y cambiar Apache, MySQL y PHP comunicados
administrar la configuracin de los servidores
acceder a sus registros
acceder a tus archivos de configuracin
crear alias
Con un clic derecho:
cambiar el idioma del men de WampServer

acceder a esta pgina
2.2 APACHE
Apache es el servidor web hecho por excelencia, su configuracion, robustez y
estabilidad hacen que cada vez millones de servidores reiteren su confianza en este
programa.
La historia de Apache se remonta a febrero de 1995, donde empieza el proyecto del
grupo Apache, el cual est basado en el servidor Apache httpd de la aplicacin original
de NCSA. El desarrollo de esta aplicacin original se estanc por algn tiempo tras la
marcha de Rob McCool por lo que varios webmaster siguieron creando sus parches
para sus servidores web hasta que se contactaron va email para seguir en conjunto el
mantenimiento del servidor web, fue ah cuando formaron el grupo Apache.
Fueron Brian Behlendorf y Cliff Skolnick quienes a travs de una lista de correo
coordinaron el trabajo y lograron establecer un espacio compartido de libre acceso para
los desarrolladores.
62
Fue as como fue creciendo el grupo Apache, hasta lo que es hoy :) Aquella primera
versin y sus sucesivas evoluciones y mejoras alcanzaron una gran implantacin como
software de servidor inicialmente solo para sistemas operativos UNIX y fruto de esa
evolucin es la versin para Windows .
Apache es una muestra, al igual que el sistema operativo Linux (un Unix desarrollado
inicialmente para PC), de que el trabajo voluntario y cooperativo dentro de Internet es
capaz de producir aplicaciones de calidad profesional difciles de igualar.
La licencia Apache es una descendiente de la licencias BSD, no es GPL. Esta licencia
te permite hacer lo que quieras con el cdigo fuente (incluso forks y productos
propietarios) siempre que les reconozcas su trabajo.
Ahora te preguntars porqu esa popularidad de este software libre grandemente
reconocido en muchos mbitos empresariales y tecnolgicos, pues aqu algunas
razones:
Corre en una multitud de Sistemas Operativos, lo que lo hace prcticamente
universal.
Apache es una tecnologa gratuita de cdigo fuente abierto. El hecho de ser
gratuita es importante pero no tanto como que se trate de cdigo fuente abierto.
Esto le da una transparencia a este software de manera que si queremos ver que
es lo que estamos instalando como servidor, lo podemos saber, sin ningn
secreto, sin ninguna puerta trasera.

Apache es un servidor altamente configurable de diseo modular. Es muy
sencillo ampliar las capacidades del servidor Web Apache. Actualmente existen
muchos mdulos para Apache que son adaptables a este, y estn ah para que
los instalemos cuando los necesitemos. Otra cosa importante es que cualquiera
que posea una experiencia decente en la programacin de C o Perl puede
escribir un mdulo para realizar una funcin determinada.

Apache trabaja con gran cantidad de Perl, PHP y otros lenguajes de script. Perl
destaca en el mundo del script y Apache utiliza su parte del pastel de Perl tanto
63
con soporte CGI como con soporte mod perl. Tambin trabaja con Java y pginas
jsp. Teniendo todo el soporte que se necesita para tener pginas dinmicas.
Apache te permite personalizar la respuesta ante los posibles errores que se
puedan dar en el servidor. Es posible configurar Apache para que ejecute un
determinado script cuando ocurra un error en concreto.

Tiene una alta configuracin en la creacin y gestin de logs. Apache permite la
creacin de ficheros de log a medida del administrador, de este modo puedes
tener un mayor control sobre lo que sucede en tu servidor.
Se pueden extender las caractersticas de Apache hasta donde nuestra imaginacin y

conocimientos lleguen.
Comienza a hacer tus pginas web y aljalas en tu mquina, conviertes de ese modo tu
pc de escritorio en un servidor, instala el servidor APACHE, hay instaladores para
distintos sistemas operativos, si miras en la web www.apache.org de seguro que
encuentras uno para ti.
64
CAPITULO 3. Almacn de datos
65
3.1MySQL y el cdigo abierto

MySQL es un sistema gestor de bases de datos. Pero la virtud fundamental y la clave
de su xito es que se trata de un sistema de libre distribucin y de cdigo abierto. Lo
primero significa que se puede descargar libremente de Internet (por ejemplo de la
direccin (www.mysql.com); lo segundo (cdigo abierto) significa que cualquier
programador puede remodelar el cdigo de la aplicacin para mejorarlo. Esa es
tambin la base del funcionamiento del sistema Linux, por eso MySQL se distribuye
fundamentalmente para Linux, aunque tambin hay versiones para Windows. Existen
cuatro versiones de MySQL: Estndar. Incluye el motor estndar y la posibilidad de
usar bases de datos InnoDB. Todo el potencial de MySQL, pero sin soporte completo
para utilizar transacciones. Max. Para usuarios que quieran MySQL con herramientas
de prueba para realizar opciones avanzadas de base de datos Pro. Versin comercial
del MySQL estndar Classic. Igual que la estndar pero no dispone de soporte para
InnoDB El uso de MySQL (excepto en la versin Pro) est sujeto a licencia GNU public
license (llamada GPL). Est licencia admite el uso de MySQL para crear cualquier tipo
de aplicacin. Se pueden distribuir copias de los archivos de MySQL, salvo esas copias
se cobren a un tercer usuario. Se prohbe cobrar por incluir MySQL. Se puede modificar
el cdigo fuente de MySQL, pero si se distribuye la aplicacin con el cdigo modificado,
habr que obtener una copia comercial y consultar sobre el cobro de la licencia. Al
distribuir copias, se tiene que poder obtener informacin sobre las licencias GNU (ms
informacin en http://dev.mysql.com/doc/mysql/en/GPL_license.html Se puede tambin
obtener una licencia comercial que permitira cobrar las instalaciones MySQL, incluir la
base de datos en ordenadores y cobrar por ello, y otras situaciones no reflejadas en la
licencia GNU.
3.2Bases de datos
MySQL almacena las bases de datos en la carpeta data que est en la carpeta raz de
la instalacin del programa. Cada base de datos crea una carpeta en la que aparecen
los archivos necesarios para el correcto funcionamiento de la aplicacin. comando show
databases El comando show databases permite visualizar las bases de datos
actualmente activas. Ejemplo:
66
mysql> show databases;

+--------------+
| Database |
+--------------+
| mysql
|
| test
|
+--------------+
2 rows in set (0.01 sec)
En el ejemplo hay dos bases de datos activas, la principal llamada mysql y la base test
(una base de datos de prueba). Hay bases de datos que no nos sern mostradas si no
tenemos permiso para ello.
3.2.1Utilizar una base de datos

El comando use nos permite utilizar una base de datos. Es (junto a quit) el nico
comando que no requiere punto y coma.
mysql> use test
Eso hace que test sea la base de datos de trabajo actual. Tambin se puede
seleccionar la base de datos para utilizar al arrancar el propio monitor. Para ello basta
poner el nombre de la base de datos tras el comando mysql.
3.2.2Crear una base de datos

Se realiza de esta forma:
mysql>create database prueba;
Query OK, 1 row affected (0.00 sec)
La base de datos recin creada estar representada por una carpeta dentro de la
carpeta data de mysql. Aunque la base est creada, habr que utilizar el comando use
para trabajar con ella.
3.3Tablas
67
3.3.1Mostrar tablas
El comando show tables; muestra las tablas de la base de datos actual.
Ejemplo: mysql> use mysql Database changed mysql> show tables;
+-----------------+
| Tables_in_mysql |
+------------------------+
| columns_priv
|
| db
|
| func
|
| host
|
| tables_priv
|
| user |
+------------------------+
6 rows in set (0.00 sec)
Se puede utilizar la sintaxis show tables from bd, donde bd es el nombre de una base
de datos que no tiene por qu estar en uso.
3.3.2Crear tablas
Esta es ya una operacin muy importante. Es el comando create table el que la realiza.
Este comando funciona con esta sintaxis:
create table nombreTabla
tipodatos(tamao),....);
(nombrecampo1
tipodatos(tamao),
nombrecampo2
Ejemplo: mysql> create table personas (nombre varchar(30),

->apellido1 varchar(30), apellido2 varchar(30),
->telefono varchar(9));
Query OK, 0 rows affected (0.01 sec)
68
3.4Introducir datos en una tabla

Hay dos mtodos:
El comando insert Permite aadir datos manualmente a una tabla. Ejemplo:
mysql> insert into personas values('Pedro', ->'Hernndez','Crespo','979898989');
Query OK, 1 row affected (0.00 sec)
El orden de los datos debe corresponder con el de los campos de la tabla. Tambin se
puede indicar los campos:
mysql> insert into personas (nombre,apellido1,apellido2)
-> values ('Pedro','Hernndez',"crespo");
En ese caso la columna del telfono tomara el valor null indicando que est vaco.
3.4.1Update
Permite modificar campos. Su sintaxis bsica es: update tabla set columna1=valor1,
columna2=valor2,... where condicin;
Ejemplos: update artculos set iva=0.12;
update personas set nacionalidad=estados unidos where nacionalidad=USA;
update personas set edad=edad+1;
update artculos set precio=precio*1,16, descuento=descuento/2;
3.4.2Delete
Permite borrar registros de las tablas. Su sintaxis bsica es:
delete from tabla where condicin;
Ejemplos: delete from clientes where deudor=y;
69
Vlll
PROCEDIMIENTO
DESCIPCIN
DE
LAS
ACTIVIDADES REALIZADAS.
Modelo en Cascada
El Modelo en Cascada o tambin conocido como Ciclo de Vida del software da las
pautas que permiten la organizacin en el desarrollo del software a travs de la
implementacin de sus caractersticas etapas, esto quiere decir que cuando se este
llevando a cabo todas las tareas pertinentes dentro de esa etapa, no se podr avanzar
a la siguiente etapa hasta no concluir con todas las tareas.
A continuacin una breve descripcin de cada proceso que constituye este modelo:
70
1. Planificacin: Realiza un estudio de factibilidad del software as como contemplar

los
posibles
costos
que
pueden
surgir
mediante
su
implementacin.
2. Anlisis y Diseo de Requirimientos: Involucra la identificacin de las

caractersticas que nos guan para determinar las funcionalidades del software
de acuerdo al medio donde se pretende implementar, es muy importante notar
que trata de responder a las preguntas Quienes intervienen en el uso del
Software?,Qu restricciones tendr el software?.
3. Diseo: Se identifica y describe las abstracciones del software y cumplir con los
requerimientos plasmando todas esas caractersticas en un diseo que permite
visualizar y contemplar adicionalmente situaciones no previstas.
4. Implementacin: Realizar las pruebas pertinentes y verificar que se cumplen con
las caractersticas identificadas.
71
5. Operacin y Mantenimiento: Se instala dentro del ambiente, depender que

pasar a partir de ah, ya que esta etapa an puede considerar nuevamente la
existencia de caractersticas que no han sido contempladas y/o caractersticas
innecesarias, implicando la modificacin del software para la adaptacin de estas
anomalas.
6. Crecimiento y cambio: Se evala el software de modo que se determina si se
puede emplear dentro de la nueva tecnologa no afectando la integridad del
mismo, de modo que si no es posible que exista una adaptacin a lo nuevo, el
proceso de diseo del software nuevamente se repite desde el principio.
72
PLANIFICACIN
Establecimiento del mbito del proyecto.
El mbito del software describir las funciones y caractersticas que se entregaran a los
usuarios
finales.
Por lo tanto, el software que se desarrollar lleva por nombre Human resource
integral system, es un sistema de integracin donde sus funciones principales sern:
El manejo de asistencia a cursos los cuales son:

o Induccin.
o Capacitacin.
o Platicas semanales y mensuales.
Creacin de listas de asistencia automticamente al captar el nmero de nmina
de la persona que asiste (esto solo aplica para los cursos de capacitacin).
Para las plticas e induccin la lista se creara a partir de un registro manual de
datos.
Reporteo de cada curso que se ha dado.
Reporteo de cada persona por cursos que ha tomado.
Reporteo de exponentes por cursos que ha dado.
Reporteo de cursos por intervalo de fechas.
Insercin de cada curso y asistencia a la base de datos (creada por nuestro
proyecto).
Determinacin de la factibilidad.
El anlisis de lo requerido a simple vista parece factible, por tanto, todo lo que se
coment en el mbito del proyecto se puede decir que es basado en consultas e
insercin de la base de datos, la parte de la interfaz podra ser sencilla a cuestin de
tiempo pero, no implica que no se pueda dar un formato sensible y adecuado para darle
suavidad, todo esto ser despus de que la generacin del negocio sea satisfactorio.
Anlisis de riesgos.
El anlisis de riesgos se realiza por la cuestin de que el proyecto se desarrolle de la
manera ms ptima posible, como riesgos podramos tomar los siguientes:
No definir los alcances y limitaciones del proyecto.

73
1.
Mal clculo de tiempos.

Generacin de costes sobre el estimado.
No definir el cronograma de actividades aprobado por el cliente.
PERIODO DEL PROYECTO
ACTIVIDAD
SEPTIEMBRE
OCTUBRE
NOVIEMBRE
DICIEMBRE
ENERO
FEBRERO
OBSERVACIONE
S
Establecer
lineamiento
s
Alcances
Recursos
Tiempos
Desarrollo
modulo
base
Reportes
Actualizacio
nes (altas,
bajas,
modificacio
nes)
Interaccin
con otras
aplicacione
s
Tuning de
aplicacin
A) DESCRIPCIN DETALLADA DE LAS ACTIVIDADES

Establecer lineamientos, alcances, recursos y tiempos:
Definir los elementos sobre los cuales se va a trabajar en el proyecto, es decir
conoceremos que se tiene y que hace falta. As como que se espera al concluir el
mismo dentro de un plazo determinado.
Desarrollo modulo base:
Implementar la primera fase de desarrollo sobre la cual el proyecto trabajara. Esta
fase es el desarrollo ms fuerte, porque contiene la construccin de las tablas que
manejaran toda la informacin.
Reportes:
74
Implementar y validar la generacin de reportes. Esta etapa es considerada la parte

esttica del proyecto ya que dependemos del usuario para vistos buenos.
Actualizaciones (altas, bajas, modificaciones):
Darle flexibilidad al sistema para su uso.
Interaccin con otras aplicaciones:
Determinar con que otros sistemas de la empresa se relacionaran el desarrollo.
Tuning de aplicacin:
Correcciones a los incidentes que se presenten en cuanto a funcionalidad del sistema.
75
ANALISIS Y DISEO DE REQUERIMIENTOS

Definicin de los recursos requeridos.
a) Determinacin de los recursos humanos requeridos.
a. Asesor interno a la empresa.
b. Asesor externo (sobre el manejo del anlisis y desarrollo).
b) Determinacin de los recursos de software reutilizable.
a. Wampp:
Como servidor web para la realizacin de las pginas.
c) Determinacin de los recursos de entorno.
a. Php: Para la elaboracin del negocio del sistema
b. HTML: Para la elaboracin de las pginas web.
c. Css: Para la elaboracin del diseo de las pginas web.
d. Ajax: Para la creacin de paginacin y efectividad de las pginas.
e. Sql (tomado desde phpmyadmin): Para la realizacin de la base de datos
y poder manejar los datos.
f. Work station(con el software instalado y red): para la realizacin y
ocupacin de los software y los lenguajes de programacin a utilizar.
g. Lugar de trabajo: Seria para la cuestin de trabajar sin molestias.
76
DISEO
Figura1.1 Caso de uso acceso.

Caso de uso: Acceso.
Descripcin: Este caso de uso nos indica cmo funcionar el proceso de
acceso para el sistema en el modo administrativo.
Pre condiciones:
Tener un usuario valido para poder acceder.
Ser Administrador del sistema.
Que los datos hayan sido dados de alta con anterioridad.
Post Condiciones:
Poder accesar a la informacin pertinente a administrar.
Tener acceso a todos los mdulos administrativos.
Descripcin:
Paso
Usuario
Sistema
Flujo
Flujo de
Alterno Excepci
n
1
Ingresar datos en
Sistema validar
los campos de
los datos
77
ingresados.
Sistema
FA
mostrar la
interfaz
administrativa
FA: El sistema mostrar la interfaz principal sin acceso
2
acceso
Podr acceder al
modo
administrativo
78
Figura 1.2 Caso de uso capacitacin.

Caso de uso: Registrar asistencia.
Descripcin: Este caso de uso es encargado de registrar las asistencias
mediante la lectura del cdigo de barras de la credencial del empleado.
Pre condiciones:
Que cada credencial est registrada en la base de datos.
Que el empleado, este dado de alta en el sistema.
Que el sistema cuente con el lector del cdigo de barras.
Post Condiciones:
Tener el registro de los asistentes al curso.
Tener el registro del curso (informacin del curso).
Descripcin:
Paso
Usuario
El usuario
selecciona men
curso-
Sistema
Flujo
Alterno
Flujo de
Excepci
n
El sistema
muestra el
formulario de
79
>capacitacin.
registro.
Con los datos de
empleado:
El usuario
introduce el id de
la nmina,
(teclado o cdigo
de barras).
idNomina
(Va a ser
ledo
mediante
cdigo de
barras o
teclado).
Fecha del
curso.
(Campo no
modificable
) R1
Muestra la
informacin
relacionada al
empleado:
Nombre
Apellidos
rea
Puesto
FA
EX1
El sistema
agrega al
empleado en la
lista de
asistencia, con
las opciones de:
Borrar del
registro de
asistencia
Agregar
uno nuevo
80
3b.
El usuario
selecciona la
opcin de agregar
nuevo.
El usuario
selecciona la
opcin de eliminar
del registro de
asistencia.
Se ejecutan los
pasos desde el 2.
El sistema borra
el usuario
seleccionado
registro de la
tabla de
asistencia.
FA: El sistema muestra un mensaje de que no se encontr el registro
introducido. M1
EX1: Muestra al usuario un error en el servidor, y re direcciona al men
principal.
Mensajes del sistema
M1: Mensaje de no se encontr registro o datos
R1: Las fechas se deben mostrar en formato DD/MM/AA hh:mm
81
82
Figura1.3.Caso de uso insercin de cursos.

Caso de uso: Insercin de curso.
Descripcin: Este caso de uso es encargado de registrar los cursos
pertinentes para el uso de la capacitacin, aqu se darn de alta.
Pre condiciones:
Tu sesin debe ser administrativa.
Debes ser administrador autorizado del sistema.
Post Condiciones:
Debers haber creado un registro sin problemas.
Podrs administrar los cursos sin problema alguno.
Descripcin:
Paso
Usuario
Sistema
Flujo
Flujo de
Alterno Excepci
n
1
Accesar a la
Mostrar una
opcin cursos.
interfaz amigable
para el registro
de cursos en el
83
sistema
Llenar los datos
El sistema
pertinentes para
validara los datos
el registro de
para su insercin.
cursos.R1
Registrar
curso.M1
3
Si deseas eliminar Mostrar un
un curso solo
mensaje de
deber dar clic
confirmacin.
sobre el mismo
M1: No debes dejar campos vacos.
R1: No se deber dejar ningn campo vaco.
R2: Las fechas se deben mostrar en formato DD/MM/AA hh:mm
2
84
85
Figura1.3. Caso de uso reporte de cursos.

Caso de uso: Generacin de reporte
Descripcin: Este caso de uso generar consultas para manejo de
informacin del sistema dando como resultados bsquedas por filtros
dados por el usuario.
Precondiciones:
Acceso como administrador.
Estar autorizado para el manejo de ese modulo.
Tener registros en la base de dato para poder realizar las consultas,
Tener especificados los filtros para realizar las bsquedas
Post condiciones:
Deber mostrarte los datos veraces de la consulta realizada.
Podrs verificar la informacin y compararla eficazmente .
Usuario
Sistema
Ingresa a la pgina
Muestra un men y un
principal.
formulario de acceso.
Colocar los datos que
Mostrar un men con
pide el formulario de
la opcin reportes
acceso:
donde podrs elegir el
tipo de curso del que
har el reporte.
Usuario.
Contrasea.
86
Selecciona en el men
la opcin reporte.
Tendrs opciones para
realizar el reporte
tales como:
Nombre del
expositor.
Intervalo de
fecha.
Nombre del
curso.
Nombre de la
sala
Regresa un formulario
Procesa la informacin
generando la consulta
enviada y devuelve
una tabla con la
consulta generada..
87
88
89
IX CONCLUSIONES Y RECOMENDACIONES.
El mtodo en el que se desarroll el sistema fue el ptimo, no podas avanzar hasta no
terminar la etapa inicial, por lo que utilizar el modelo en cascada nos llev de la mano
terminando cada proceso en su tiempo, cada una de las etapas del sistema no tuvo
problema alguno salvo la falta de informacin inicial, lo que hizo que me retrasara en
ms de una ocasin, lo primero que se realizo fue una interfaz estndar para poder
avanzar con la lgica del sistema, as mismo recabamos la informacin necesaria para
la lgica y no detenernos en las interfaces, la investigacin de algunas herramientas
desconocidas se realiz en paralelo con la programacin dando buenos resultados.
Por lo que podemos decir que una de las desventajas de este modelo si la informacin
no se da en tiempo y forma o lo requerimientos quedan inconclusos puede ser un
problema para desarrollar por que no puedes saltarte etapas de desarrollo, sin
embargo, logramos avanzar en el procedimiento.
El desarrollar con tecnologas nuevas para m como lo son Ajax, php, css, fue un reto
personal que recomiendo a todos ya que no te quedas estancado en una sola lnea de
desarrollo, claro que costo un poco la realizacin, pero con los fundamentos bsicos de
programacin tu entendimiento se vuelve ms capaz.
Fue enriquecedora la experiencia de estar desarrollando para una empresa que
monitorea y pide resultados, pude gozar de un ambiente agradable ya que siempre se
tuvo resultados como esperaban, por lo que puedo decir que se adentren mucho en ese
hbito, cumplir en tiempo lo que se te pide
90
X REFERENCIAS BIBLIOGRAFA.
Angel Cobo, P. G. (2005). PHP Yy MySQL tecnologas para el desarrollo de
aplicaciones web. mexico: Diaz de satntos.
Avi Silberschatz, H. K. (2006). Fundamentos de Bases de datos. Mexico: Mc Graw Hill.
Firtman, M. R. (2010). Ajax web 2.0 con JQuery para profesionales. Argentina: Alfa
Omega Grupo Editor Argentino.
Quijado, J. L. (marzo 2008). Domain HTML y DHTML. mexico, D.F.: Alfa Omega Grupo
Editor.
Quijado, J. L. (Septiembre 2010). Domain PHP y My SQL. Mexico: Alfa Omega Grupo
Editor.
Referencias digitales
http://downloads.mysql.com/docs/refman-5.0-es.pdf
http://linux.ciberaula.com/articulo/linux_apache_intro
https://php.net/manual/es/index.php
http://librosweb.es/ajax/
http://www.desarrolloweb.com/manuales/21/
http://www.cartagena99.com/recursos/programacion/apuntes/mysql.pdf
91
XI ANEXOS.
92
A. MANUAL DE USUARIOS.
1. como abrir el sistema.
Paso 1. Abrir un acceso directo.

En la barra de tareas.
Acceso directo en el escritorio.
Men de navegacin de inicio.

2. Vista previa
3. Ingreso a capacitacin.
Paso 1 Dar clic en el botn
. Deber mostrar la siguiente pantalla:
93
4. Registro del personal en capacitacin.
Paso 1. Seleccionar la sala donde se impartir.
Paso 2. Seleccionar el curso a tomar.
Paso 3. Seleccionar turno del trabajador.

Paso 4. Se registran los datos del trabajador, en este caso tenemos 2 casos de
insercin: trabajadores en nmina y los que no se encuentran en nmina.
94
Caso a. Trabajadores en nmina. Colocar el nmero de nmina en el campo

nomina
Caso b. Trabajadores que no se encuentran en nmina. Insertar los datos
manualmente.
Paso 5. Dar clic en el botn agregar
.
Al finalizar debera verse el registro de esta manera.
Nota en caso de error en alguno de los campos deber dar clic sobre el
registro y este se borrar de manera inmediata.
95
5. Generacin de la lista de asistencia de capacitacin.
Paso 1. Al final del registro de todos los usuarios se deber dar clic en el
botn lista
, se deber generar el siguiente documento.
96
Como puede observar se genera la lista con todos los datos referentes al
curso tomado y a los asistentes de la misma, posteriormente proceda a
guardar el documento dando clic en la figura del disquete
imprimir con la figura de impresin
o si lo prefiere
6. Ingreso al sistema de administracin
Paso 1. Deber Ingresar su usuario y contrasea en los campos.
Paso 2. Deber dar clic en el botn Accesar

siguiente pgina:
. Deber aparecer la
97
7. Generacin de Reportes.
Paso 1. Dar clic en el botn reporte

pgina:
. Deber mostrase la siguiente
98
Tendremos 4 opciones de reporte:

1.
2.
3.
4.
a)
Por expositor.
Por empleado.
Por curso.
Por intervalo de fechas.
Reporte por expositor.
Paso1. Seleccionar un expositor de la lista que ah aparece ya que
99
son todos los que ya han sido registrados
Paso 2. Dar clic en el botn

. Deber aparecer el reporte en
una tabla con todos los cursos que ha dado:
b) Reporte por empleado.

Paso 1. Seleccionar al empleado de la lista que aparece ya que son
todos mlos registrados en algn curso
Paso 2. Dar clic en el botn

deber aparecer el reporte de
todos los cursos que ha tomado:
100
c) Reporte por curso.

Paso 1. Deber seleccionar uno de los cursos que ya han sido
tomados si este no se ha impartido no aparecer en la lista.
Paso 2. Deber dar clic en el botn

para realizar la
bsqueda. Deber aparecer el siguiente reporte:
101
d) Reporte por intervalo de fecha.

Paso1. El intervalo de fecha deber ser escrito con el formato
yyyy/mm/dd en cada campo.

consulta, deber aparecer el reporte:
para realizar la
102
8. Registro de cursos.
Paso 1. Ingresar a la pgina dando clic en el botn

siguiente pgina:
. deber mostrar la
Paso 2. Deber llenar todos los campos que ah se le piden.

Nota: no se debe dejar ningn campo vaco ya que el sistema no lo permitir.

para que el registro se realice, por
consiguiente aparecer el registro y todos los cursos que han sido
registrados.
103
104
B. MANUAL TCNICO.
Manual de Tcnico
Manual de Resource integral system
Erick Jimenez soto
105
Contents
DISEO DE INTERFACES...................................................................................... 2
CONTROL............................................................................................................ 6
Ajax.................................................................................................................. 6
PHP................................................................................................................ 11
INTERFACES...................................................................................................... 32
ESTRUCTURA Y UBICACIN DE LOS ARCHIVOS DEL SISTEMA............................46
106
DISEO DE INTERFACES
Para la creacin del diseo de nuestro sistema se utilizo el mecanismo Css.
Qu es CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que
describe cmo se va a mostrar un documento en la pantalla, o cmo se va a imprimir, o
incluso cmo va a ser pronunciada la informacin presente en ese documento a travs
de un dispositivo de lectura. Esta forma de descripcin de estilos ofrece a los
desarrolladores el control total sobre estilo y formato de sus documentos.
Para qu sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la
presentacin. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS
permite a los desarrolladores Web controlar el estilo y el formato de mltiples pginas
Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la
CSS afectar a todas las pginas vinculadas a esa CSS en las que aparezca ese
elemento.
Cmo funciona?
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o ms
elementos. Las hojas de estilo estn compuestas por una o ms de esas reglas
aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la
declaracin. A su vez la declaracin est compuesta por una propiedad y el valor que se
le asigne.
h1 {color: red;}
h1 es el selector
{color: red;} es la declaracin
El selector funciona como enlace entre el documento y el estilo, especificando los
elementos que se van a ver afectados por esa declaracin. La declaracin es la parte
de la regla que establece cul ser el efecto. En el ejemplo anterior, el
selector h1 indica que todos los elementos h1 se vern afectados por la declaracin
donde se establece que la propiedad color va a tener el valor red (rojo) para todos los
elementos h1 del documento o documentos que estn vinculados a esa hoja de estilos.
107
Conociendo un poco sobre el mismo ahora hablaremos de lo que se codific en el

archivo maquetacin.css que da diseo a nuestro sistema:
Selector
Funcionalidad
#contenedor{}
Este selector darn diseo a la divisin

declarada con ese nombre en la pgina
codificada en Html.
Este selector dar diseo al divisor con
la etiqueta cabecera.
Estos tres selectores darn diseo a los
divisores dentro de la cabecera ya que
la misma fue dividida en 3 columnas:
#cabecera{}
#cabeceraiz{}
#cabecerace{}
#cabecerade{}
#menu{}
ul, ol{}
.nav li a {}
.nav li a:hover{}
.nav > li {}
.nav li ul {}
#contenido{ }
.datos{}
.datos, td{}
#resultado{}
.datagrid table { }
Cabecera izquierda.
Cabecera central.
Cabecera derecha.
Este selector dar formato al divisor

con la etiqueta men.
Estos selectores se encargaran de dar
diseo al botn que se encontrar en el
men, cada uno con una especial
funcin.
Este selector dar diseo a la divisin

con la etiqueta contenido, todo lo que
se encuentra en l y un rango.
Este selector se encuentra con un
punto por que es de tipo class, no es
un divisor como los anteriores esta vez
se trata de una tabla.
El siguiente selector dar formato a las
celdas de dicha tabla.
Este selector dar diseo al divisor con
la etiqueta resultado, lo que ah se
encuentra crea las barras (Scrollbar) y
da diseo.
Este selector dar diseo al divisor que
se encuentra dentro del divisor
resultado, esto servir para dar mejor
diseo a la tabla que ah se mostrar.
108
.datagrid {}
.datagrid table thead th {}
.datagrid table thead th:first-child { }
.datagrid table tbody td { }
.datagrid table tbody .alt td {}
.datagrid table tbody td:first-child {}
.datagrid table tbody tr:last-child td
{}
#pie{}
#pieiz{}
#piece{}
#piede{}
Dara un diseo universal del divisor

datagrid.
Estos selectores darn diseo a la
cabecera de la tabla mostrada, al
cuerpo le darn las divisiones y
alternaran el color de cada rengln.
Este selector dar formato al pie de

pgina de manera universal.
Al igual que la cabecera el pie de
pgina fue dividido en 3 columnas, por
lo que se tienen:
Pie izquierdo.
Pie central.
Pie derecho.
Respectivamente cada uno con sus

declaraciones.
109
Cabecera
Men
110
Contenido-Datos
Resultado
Datagrid-Table
Pie de pgina
111
CONTROL
Ajax
El trmino AJAX se present por primera vez en el artculo "Ajax: A New Approach to
Web Applications" publicado por Jesse James Garrett el 18 de Febrero de 2005. Hasta
ese momento, no exista un trmino normalizado que hiciera referencia a un nuevo tipo
de aplicacin web que estaba apareciendo.
En realidad, el trmino AJAX es un acrnimo de Asynchronous JavaScript + XML, que
se puede traducir como "JavaScript asncrono + XML".
El artculo define AJAX de la siguiente forma:
Ajax no es una tecnologa en s mismo. En realidad, se trata de varias tecnologas
independientes que se unen de formas nuevas y sorprendentes.
Las tecnologas que forman AJAX son:
XHTML y CSS, para crear una presentacin basada en estndares.
DOM, para la interaccin y manipulacin dinmica de la presentacin.
XML, XSLT y JSON, para el intercambio y la manipulacin de informacin.
XMLHttpRequest, para el intercambio asncrono de informacin.
JavaScript, para unir todas las dems tecnologas.
Figura 1.1 Tecnologas agrupadas bajo el concepto de AJAX

Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de todas y cada una
de las tecnologas anteriores.
112
En las aplicaciones web tradicionales, las acciones del usuario en la pgina (pinchar en
un botn, seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor.
Una vez procesada la peticin del usuario, el servidor devuelve una nueva pgina
HTML al navegador del usuario.
En el siguiente esquema, la imagen de la izquierda muestra el modelo tradicional de las
aplicaciones web. La imagen de la derecha muestra el nuevo modelo propuesto por
AJAX:
Figura 1.2 Comparacin grfica del modelo tradicional de aplicacin web y del nuevo
modelo propuesto por AJAX. (Imagen original creada por Adaptive Path y utilizada con
su permiso).
113
En la realizacin de la funcionalidad por medio de JavaScript se utilizo el documento

ajax.js, este documento se cre de manera nica as podremos utilizar los mtodos con
tan solo instanciarla en cada pgina requerida y no hacer los procedimientos por cada
una de ellas volviendo repetitivo el cdigo.
Mtodos:
Mtodo
Funcin
function crearXMLHttpRequest() {
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new
ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
function procesarEvento(){
var detalles =
document.getElementById("body");
if(conexion.readyState == 4) {
detalles.innerHTML =
conexion.responseText;
}
else
{
detalles.innerHTML = 'Cargando...';
}
}
function insertacur(valor,valor2,
valor3,valor4,valor5,valor6,valor7){
conexion=crearXMLHttpRequest();
conexion.onreadystatechange =
procesarEventos;
Retorna una respuesta de

tipo Activex, esto es para
generar la accin.
if (valor==""||valor2==""||valor3==""||
valor4==""||valor5==""||valor6==""||valor7=="")
{
alert("No debes dejar campos vacios!");
}
Procesa el evento marcado y

lo devuelve en el elemento
con la etiqueta body, en
este caso es un divisor.
Recibe datos enviados desde

un botn donde ha sido
declarado este mtodo, los
procesa para que no estn
vacios y los enva a la
pgina:
Insertacur.php
donde son procesados para
la insercin del curso.
114
else{
conexion.open("GET", "php/insertacur.php?
curso=" +
valor+"&objetivo="+valor2+"&expositor="+valo
r3+"&tipo="+valor4+"&lugar="+valor5+"&horar
io="+valor6+"&fecha="+valor7, true);
}
conexion.send(null);
}
function borracur(idfila)
{
var elTableRow =
document.getElementById(idfila);
elTableRow.style.backgroundColor
=(elTableRow.style.backgroundColor=="green"
)?'cyan':'green';
if(elTableRow.style.backgroundColor ==
'green'){
var elTableCells =
elTableRow.getElementsByTagName("td");
}
procesarEventos;
conexion.open("GET", "php/borracur.php?
nombre="+elTableCells[0].innerHTML
+"&objetivo="+elTableCells[1].innerHTML+"&e
xpositor="+elTableCells[2].innerHTML+"&tipo=
"+elTableCells[3].innerHTML+"&lugar="+elTabl
eCells[4].innerHTML+"&fecha="+elTableCells[6
].innerHTML, true);
}
Recibe un valor enviado por

el clic en una tabla, despus
ser enviado al archivo:
borracur.php donde har el
proceso de borrado de cursos
function
agregacap(valor,valor2,valor3,valor4,valor5,
Recibe valores y los enva al

archivo: Capacitacin.php
115
valor6,valor7,valor8){
procesarEventos;
if(valor4==""){
if (valor==""||valor2==""||valor3==""||
valor5==""||valor6==""||valor7==""||valor8=="")
{
}
para que sean procesados y

se inserte un registro en
capacitacin.
else{
conexion.open("GET", "php/capacitacion.php?
sala="+
valor+"&curso="+valor2+"&turno="+valor3+"&
nomina="+valor4+"&nombre="+valor5+"&apep
a="+valor6+"&apema="+valor7+"&puesto="+va
lor8, true);
}}
else{
conexion.open("GET", "php/capacitacion.php?
sala="+
valor+"&curso="+valor2+"&turno="+valor3+"&
nomina="+valor4+"&nombre="+valor5+"&apep
a="+valor6+"&apema="+valor7+"&puesto="+va
lor8, true);
}
}
function borracap(idfila)
{
var elTableRow =
document.getElementById(idfila);
elTableRow.style.backgroundColor
=(elTableRow.style.backgroundColor=="green"
)?'cyan':'green';
if(elTableRow.style.backgroundColor ==
Manda un index de tabla para

que este sea enviado al
archivo: borracap.php y el
registro que se encuentre en
esa posicin sea borrado.
116
'green'){
var elTableCells =
elTableRow.getElementsByTagName("td");
}
procesarEventos;
conexion.open("GET", "php/borracap.php?
nombre="+elTableCells[0].innerHTML
+"&curso="+elTableCells[1].innerHTML+"&num
ero="+elTableCells[2].innerHTML, true);
}
function
reporte(valor,valor2,valor3,valor4,valor5){
procesarEventos;
if (valor==""&&
valor2==""&&valor3==""&&valor5==""){
}
else{
Recibe datos de la interfaz

reporte y los manda al
archivo: reporte.php para
que
este
procese
las
consultas y devuelve un
resultado.
conexion.open("GET", "php/reporte.php?
expositor="+
valor+"&curso="+valor2+"&persona="+valor3+
"&fechai="+valor4+"&fechaf="+valor5, true);
}
}
117
PHP
PHP (acrnimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de cdigo
abierto muy popular especialmente adecuado para el desarrollo web y que puede ser
incrustado en HTML.
Bien, pero qu significa realmente? Un ejemplo nos aclarar las cosas:
Ejemplo #1 Un ejemplo introductorio
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<?php
echo "Hola, soy un script de PHP!";
?>
</body>
</html>
En lugar de usar muchos comandos para mostrar HTML (como en C o en Perl), las
pginas de PHP contienen HTML con cdigo incrustado que hace "algo" (en este caso,
mostrar "Hola, soy un script de PHP!). El cdigo de PHP est encerrado entre
las etiquetas especiales de comienzo y final <?php y ?> que permiten entrar y salir del
"modo PHP".
Lo que distingue a PHP de algo del lado del cliente como Javascript es que el cdigo es
ejecutado en el servidor, generando HTML y envindolo al cliente. El cliente recibir el
resultado de ejecutar el script, aunque no se sabr el cdigo subyacente que era. El
servidor web puede ser configurado incluso para que procese todos los ficheros HTML
con PHP, por lo que no hay manera de que los usuarios puedan saber qu se tiene
debajo de la manga.
Empezaremos con describir cada archivo .php que se encuentra en nuestro sistema:
118
Este documento nos crea el formato pdf.
Archivo Logueo.php
<?php indica el inicio de cdigo php.

session_start(); este mtodo es invocado para iniciar una sesin
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
Las variables aqu creadas hacen

referencia a los datos para la conexin
con la base de datos.
$bd_base = "rh";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password); Creamos la
conexin.
mysql_select_db($bd_base, $con);
if(isset($_POST['enviar'])){ Se valida que los daos del formulario hayan
sido enviados, si esto fue hecho se
$user=$_POST['user'];
almacenan los valores user y pass en las
variables $user y $pass respectivamente.
$pass=$_POST['pass'];
$select="select id,user,pass from
users where user='".$user."' AND pass='".$pass."'";
Se genera la consulta SQL en la base

de datos, generando un filtro con
respecto a las variables antes
declaradas.
119
$sql=mysql_query($select,$con);
if($row=mysql_fetch_array($sql))
{
$_SESSION['user']=$row['user'];
$_SESSION['pass']=$row['pass'];
$_SESSION['id']=$row['id'];
Header("Location: ..\index.php");
}else{
?>
Se crea una validacin con la condicin

de que; si la consulta arroja un
resultado se crear una sesin y se
activar, si esto es correcto
redireccionar al index, de lo contrario
se regresara al index pero con la opcin
de logueo ya que no se valido a un
usuario correcto.
<?php
Header("Location: ..\index.php");
}}?>
Archivo logout.php
<?php
session_start();
if(isset($_SESSION['user'])){
session_destroy();
header("Location: ..\index.php");
}else{
echo "Error!";
Se inicia con una variable que nos

indica el inicio de una sesin para
corroborar que esta existe, por
consiguiente se realiza un validacin
donde nos dice que si una sesin est
iniciada con un usuario valido entonces
la sesin ser destruida, si no es as
entonces marcar un error.
}
?>
Archivo capacitacin.php
<html>
Agregamos el archivo
de diseo y el
120
JavaScript, para que
podamos ocupar sus
funciones.
<head>
<link rel="stylesheet" href="../css/maquetacion.css" type="text/css" media="screen">
<script language="JavaScript" type="text/javascript" src="../js/ajax.js"></script>
<title>Query data sending an ID</title>

<meta http-equiv="X-UA-Compatible" content="IE=9,crome" />
</head>
<body>
<div class="datagrid">
<table>
<thead><tr><th>Nombre</th><th>Curso</th><th>No. de curso</th><th> </th></tr></thead>
<tbody>
<?php
Creacin del
divisor
datagrid y la
cabecera de
la tabla
$c=1;
$hoy = date("y/m/d");
Creacin de las variables a ocupar en

lenguaje php.
$bd_password = "";
$bd_base = "rh";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
Creacin de
la conexin a
$sql=mysql_query("select * from cursos where id=".$_GET['curso'].";"); base de
datos y la
consulta.
121
while($row = mysql_fetch_array($sql)){
$id=$row['id'];
$nombre=$row['nombre'];
$horario=$row['horario'];
$Dcurso=$row['nombre'];
Creamos un ciclo while donde

asignaremos los valores arrojados por
la consulta a variables concretas.
$Dobjetivo=$row['objetivo'];
$Dexpositor=$row['expositor'];
$Dtipo=$row['tipo'];
$Dfecha=$row['fecha'];
$Dhorario=$row['horario'];
if($_GET['nomina']==''){
$com=mysql_query("select * from capacitacion where
NOMBRE='".$_GET['nombre']."'&&
tipo= '".$row['tipo']."'&&
puesto='".$_GET['puesto']."'&&
nom_curso='".$row['nombre']."'&&
objetivo='".$row['objetivo']."'&&
Fecha='".$row['fecha']."'&&
expositor='".$row['expositor']."'&&
sala='".$_GET['sala']."'&&
turno='".$_GET['turno']."'");
if(mysql_fetch_array($com)){
echo"<tr>registro ya ha sido ingresado</tr>";
}else{
mysql_query("insert into capacitacion values(
'".$_GET['nomina']."','".$_GET['nombre']."
".$_GET['apepa']."".$_GET['apema']."',
'".$row['tipo']."','".$_GET['puesto']."',
'".$row['nombre']."','".$row['objetivo']."',
'".$row['fecha']."','".$row['horario']."',
122
'".$hoy."','".$row['expositor']."',
'".$_GET['sala']."','".$_GET['turno']."',
'".$id."')",$con);
}}
Realizamos una validacin donde si

tenemos la variable nomina vaca
entonces tomaremos los datos por
separado para generar un registro sin
no antes verificar que este no exista en
la base de datos para ello hacemos
consultas.
else{
$com2=mysql_query("select *
from empleados where NO_nomina='".$_GET['nomina']."'");
while($row2 = mysql_fetch_array($com2)){
$NOMBRE=$row2['NOMBRE'];
$APEPA=$row2['APEPA'];
$APEMA=$row2['APEMA'];
$PUESTO=$row2['PUESTO'];}
$com3=mysql_query("select *
from capacitacion where
NOMBRE='".$NOMBRE."'&& tipo= '".$row['tipo']."'&& puesto='".
$PUESTO."'&&nom_curso='".$row['nombre']."'&&
Al igual que lo
anterior hacemos
las mismas
validaciones
ahora con la
diferencia que
solo enviamos el
numero de
123
objetivo='".$row['objetivo']."'&&Fecha='".$row['fecha']."'&&
horario='".$row['horario']."'&&Fechar='".$hoy."'&&
expositor='".$row['expositor']."'&& sala='".$_GET['sala']."'&&
turno='".$_GET['turno']."'");
if(mysql_fetch_array($com3)){
echo"<tr>registro ya ha sido ingresado</tr>";
}else{
mysql_query("insert into capacitacion values('".$_GET['nomina']."',
'".$NOMBRE." ".$APEPA." ".$APEMA."','".$row['tipo']."',
'".$PUESTO."','".$row['nombre']."',
'".$row['objetivo']."','".$row['fecha']."',
'".$row['horario']."','".$hoy."','".$row['expositor']."',
'".$_GET['sala']."','".$_GET['turno']."','".$id."')",$con);}}}
$sql2=mysql_query("SELECT * FROM capacitacion where

nom_curso='".$Dcurso."' && objetivo='".$Dobjetivo."' &&
tipo='".$Dtipo."' && Fecha='".$Dfecha."'&&
horario='".$Dhorario."'&& expositor='".$Dexpositor."' &&
Fechar='".$hoy."'",$con);
while($row = mysql_fetch_array($sql2)){
if($c % 2==0){
$cl="alt";}
else{
$cl="al";}
?>
<tr class="<?php echo $cl; ?>" id="<?php echo $c; ?>
" onclick="javascript: borracap(this.id)">
<td><?php echo $row['NOMBRE']; ?></td>
<td><?php echo $nombre." ".$horario; ?></td>
<td><?php echo $row['id_curso']; ?></td>
<td>Eliminar</td>
</tr>
<?php
124
$c=$c+1;
}
?>
</tbody>
</table>
</div>
</body>
</html>
Generamos una consulta despus de

haber ingresado datos a la base, y
generamos una condicin para generar
el nombre de la clase de la tabla.
Generamos la tabla con cada celda,

pero las filas cambiaran de nombre,
esto se debe a que as podrn tener un
diseo de colores en grid.
Por ultimo cerramos la tabla, el divisor
grid y el cdigo html.
125
Archivo borracap.php
<html>
<head>
de diseo y el
podamos ocupar sus
funciones.
<meta charset="UTF-8" />

</head>
<body><div class="datagrid">
<table>
<thead><tr><th>Nombre</th><th>Curso</th><th>No. de curso</th><th>
</th></tr></thead>
Creacin del
divisor
datagrid y la
cabecera de
la tabla
<tbody>
<?php
$c=1;
echo$_GET['nombre'];
echo $_GET['numero'];;
echo$_GET['curso'];
lenguaje php.
echo "ha sido eliminado";
$bd_password = "";
$bd_base = "rh";
mysql_query("delete from capacitacion where
NOMBRE='".$_GET['nombre']."' && id_curso='".$_GET['numero']."'");
Creacin de
la conexin a
base de
datos y la
eliminacin
del registro.
126
Realizamos la consulta a la base de

datos, y nos mostrar los registros a
$sql2=mysql_query("select * from capacitacion where
excepcin del que se elimin.
id_curso='".$_GET['numero']."' && Fechar='".$hoy."'",$con);
if($c % 2==0){
$cl="alt";}
else{
$cl="al";}
?>
" onclick="javascript: borracap(this.id)">
<td><?php echo $row['NOMBRE']; ?></td>
<td><?php echo $row['nom_curso'] ?></td>
<td><?php echo $row['id_curso']; ?></td>
<td>Eliminar</td>
</tr>
<?php
$c=$c+1;
}
?>
</tbody>
</table>
</div>
</body>
</html>

Por ltimo cerramos la tabla, el divisor
127
Archivo Insertacur.php
<html>
<head>

</head>
<body>
Creacin del
<table>
divisor
<thead><tr>
datagrid y la
<th>Nombre</th><th>Objetivo</th>
cabecera de
<th>Expositor</th><th>Tipo</th>
la tabla
<th>Lugar</th><th>Horario</th>
<th>Fecha</th></tr></thead>
<tbody>
de diseo y el
podamos ocupar sus
funciones.
<?php
$c=1;
lenguaje php.
$bd_password = "";
$bd_base = "rh";
Creacin de
la conexin a
base de
$com=mysql_query("select * from cursos where
datos y
nombre='".$_GET['curso']."' && objetivo='".$_GET['objetivo']."' && expositor='".
consulta de
$_GET['expositor']."'&& tipo='".$_GET['tipo']."'&&
registro para
lugar='".$_GET['lugar']."'&& horario='".$_GET['horario']."'");
validacin.
128
else{
Insertamos el registro del curso
mysql_query("insert into cursos values('','".$_GET['curso']."',
despus de validar que este no existe
'".$_GET['objetivo']."','".$_GET['expositor']."','".$_GET['tipo']."',
en la base de datos.
'".$_GET['lugar']."','".$_GET['horario']."','".$_GET['fecha']."')",$con);
$sql=mysql_query("select * from cursos ");
if($c % 2==0){
$cl="alt";}
else{
$cl="al";}
?>
" onclick="javascript: borracur(this.id)">
<td ><?php echo $row['nombre']; ?></td>
<td><?php echo $row['objetivo']; ?></td>
<td><?php echo $row['expositor']; ?></td>
<td><?php echo $row['tipo']; ?></td>
<td><?php echo $row['lugar']; ?></td>
<td><?php echo $row['horario']; ?></td>
<td width="20%"><?php echo $row['fecha']; ?></td>
</tr>
<?php
$c=$c+1;}}
?>
</table>
</body>
</html>
129
Archivo borracur.php
<head>
de diseo y el
podamos ocupar sus
funciones.

</head>
<body>
<table>
<thead><tr><th>Nombre</th><th>Objetivo</th>
<th>Expositor</th><th>Tipo</th><th>Lugar</th>
<th>Horario</th><th>Fecha</th></tr></thead>
<tbody>
Creacin del
divisor
datagrid y la
cabecera de
la tabla
<?php
$c=1;
echo "el registro ha sido eliminado!";
lenguaje php.
$bd_password = "";
$bd_base = "rh";
Creacin de
la conexin a
mysql_query("delete from cursos where nombre='".$_GET['nombre']."' && objetivo='".
base de
$_GET['objetivo']."' && expositor='".$_GET['expositor']."'&& tipo='".$_GET['tipo']."'&&
datos y la
lugar='".$_GET['lugar']."'&& fecha='".$_GET['fecha']."'");
eliminacin
del registro.
130
$sql=mysql_query("select * from cursos ");

if($c % 2==0){
$cl="alt";}
else{
$cl="al";}
?>
" onclick="javascript: borracur(this.id)">
<td ><?php echo $row['nombre']; ?></td>
<td><?php echo $row['objetivo']; ?></td>
<td><?php echo $row['expositor']; ?></td>
<td><?php echo $row['tipo']; ?></td>
<td><?php echo $row['lugar']; ?></td>
<td><?php echo $row['horario']; ?></td>
<td width="20%"><?php echo $row['fecha']; ?></td>
</tr>
<?php
$c=$c+1;
}
?>
</table>
</body>
</html>

131
Archivo Reporte.php
<head>

</head>
<body>
<?php
$c=1;
Creacin de las variables a
ocupar en lenguaje php.
$bd_password = "";
$bd_base = "rh";
de diseo y el
podamos ocupar sus
funciones.
Creamos la conexin a la base de

datos.
En esta parte de cdigo es repetitivo, solo se diferencia el tipo de bsqueda y resultado,
cada sentencia indica que parmetro se sigue para la bsqueda.
Se genera la cabecera de la tabla a mostrar seguido de una consulta con al parmetro
correspondiente en la base de datos, y por ltimo se genera el cuerpo de la tabla para
mostrarla.
if($_GET['expositor']!=''){
?><div class="datagrid">
<table>
<thead><tr><th>Nombre</th>
<th>Objetivo</th><th>Fecha</th>
<th>Horario</th><th>Tipo</th>
<th>Sala</th></tr></thead>
<?php
$sql=mysql_query("select * from capacitacion where expositor='".$_GET['expositor']."'
group by id_curso ");
if($c % 2==0){
$cl="alt";}
else{
$cl="al";}
132
?>
<tr class="<?php echo $cl; ?>" ><td ><?php echo $row['nom_curso']; ?></td><td><?php
echo $row['objetivo']; ?></td><td><?php echo $row['Fecha']; ?></td><td><?php echo
$row['horario']; ?></td><td><?php echo $row['tipo']; ?></td><td><?php echo $row['sala'];
?></td><td><?php echo $row['id_curso']; ?></td> </tr>
<?php
$c=$c+1;}
echo"</tbody>
</table>
</div>";
}
elseif($_GET['curso']!=''){
?>
<table>
<thead><tr >
<th>Nombre</th>
<th>tipo</th>
<th>Puesto</th>
<th>Fecha</th>
</tr>
</thead>
<?php
$sql=mysql_query("select * from capacitacion where id_curso='".$_GET['curso']."' ");
if($c % 2==0){
$cl="alt";}
else{
$cl="al";}
?>
<tr class="<?php echo $cl; ?>" ><td ><?php echo $row['NOMBRE']; ?></td><td><?php
echo $row['tipo']; ?></td><td><?php echo $row['puesto']; ?></td><td><?php echo
$row['Fechar']; ?></td> </tr>
<?php $c=$c+1;
}
echo"</tbody>
</table>
133
</div>";}
elseif($_GET['persona']!=''){
?>
<table>
<thead><tr><th>Nombre</th><th>Objetivo</th><th>Fecha</th><th>Horario</th><th>Ti
po</th><th>Sala</th></tr></thead>
<?php
$sql=mysql_query("select * from capacitacion where NOMBRE='".$_GET['persona']."' ");
if($c % 2==0){
$cl="alt";}
else{
$cl="al";}
?>
<tr class="<?php echo $cl; ?>" ><td ><?php echo $row['nom_curso']; ?></td><td><?php
<?php $c=$c+1;
}
echo"</tbody>
</table>
</div>";
}
if($_GET['fechai']!=''&& $_GET['fechaf']!=''){
?>
<table>
<thead><tr><th>Nombre</th><th>Objetivo</th><th>Fecha</th><th>Horario</th><th>Ti
po</th><th>Sala</th></tr></thead>
<?php
$sql=mysql_query("select * from capacitacion where Fecha between '".$_GET['fechai']."'
and '".$_GET['fechaf']."' group by id_curso");
if($c % 2==0){
134
$cl="alt";}
else{
$cl="al";}
?>
<tr class="<?php echo $cl; ?>"><td ><?php echo $row['nom_curso']; ?></td><td><?php
<?php
$c=$c+1;
}echo"</tbody>
</table>
</div>";
}?>/body>
</html>
135
Archivo Lista.php (Este se encarga d crear la lista de asistencia de manera

electrnica).
<?php
require('libreria/fpdf.php'); Librera necesaria para crear el
archivo pdf.
Variables globales creadas para uso
de la base de datos y la fecha.
$bd_password = "";
$bd_base = "rh";
Conexin a
la base de
datos y
$sql1=mysql_query("select * from cursos where id='".$_GET['curso']."'");
consulta.
Este ciclo While nos condiciona a que
$Dcurso=$row['nombre'];
si hay un resultado en la consulta cada
$Dobjetivo=$row['objetivo'];
parmetro se almacenar en una
$Dexpositor=$row['expositor'];
variable global.
$Dtipo=$row['tipo'];
$Dfecha=$row['fecha'];
$Dhorario=$row['horario'];
En esta parte se hace una consulta en la base de datos para obtener
}
todos los registros con los parmetros antes almacenados en las
variables globales.
$sql3=mysql_query("SELECT * FROM capacitacion where nom_curso='".$Dcurso."' &&

objetivo='".$Dobjetivo."' && tipo='".$Dtipo."' && Fecha='".$Dfecha."'&& horario='".
$Dhorario."'&& expositor='".$Dexpositor."' && Fechar='".$hoy."'",$con);
Creamos la clase pdf, que heredara todos los mtodos de la
class PDF extends FPDF clase fpdf que fue incluida con anterioridad.
{
Aqu creamos la cabecera del documento .pdf que se generar con
todas sus caractersticas.
136
function Header(){
$bd_password = "";
$bd_base = "rh";
Variables para conexin a la base de

datos.
Generamos una conexin y una consulta con el parmetro curso obtenido de la

interfaz capacitacin
$sql=mysql_query("select * from cursos where id='".$_REQUEST['curso']."'");
while($row = mysql_fetch_array($sql)){ Mientras haya registro los datos obtenidos se
$horario=$row['horario'];
almacenaran en variables para su posterior
$nombre=$row['nombre'];
uso.
}
En esta parte se estructura toda la parte visible del documento, de manera general
estas son las herramientas a ocupar:
$this->Image('fisher.png',9,8,33); recibe los parmetros que son:

o Nombre de la imagen.
o Posicin en pixeles con respecto a la coordenada x.
o Posicin en pixeles con respecto a la coordenada y.
o Tamao de la imagen.
$this->SetFont('Arial','B',11); recibe los parmetros que son:
o Tipo de letra.
o Caracterstica de letra (Negrita, subrayada, cursiva).
o Tamao.
$this->Cell(40,20); recibe los parmetros que son:
o Tamao en pixeles con respecto a x (ancho).
o Tamao en pixeles con respecto a y (alto).
$this->Ln(); Esta instruccin solo es un salto de lnea.
$this->Cell(95,8,"CURSO: ".$nombre,1,0,'l'); recibe los parmetros que son:
o Tamao en pixeles con respecto a x (ancho).
o Tamao en pixeles con respecto a y (alto).
o Contenido dentro de la celda y caracterstica de bordes.
$this->SetX(90); nos ubica en el parmetro dado con respecto a la coordenada x.
$this->SetY(-100); nos ubica en el parmetro dado con respecto a la coordenada y.
$this->SetDrawColor(1, 1, 1); Nos seleccionar el color negro del siguiente dibujo.
$this->Line(10, 265 , 50, 265); Dibujaremos una linea horizontal solo colocando los
puntos de inicio y final (x,y,x,y).
$this->SetXY(0, 245); nos ubica en el parmetro dado con respecto a la coordenada
yx respectivamente.
137
$this->Image('fisher.png',9,8,33);
$this->Image('se.png',160,8,45);
$this->SetFont('Arial','B',11);
$this->Cell(40,20);
$this->Ln();
$this->Cell(95,8,"CURSO: ".$nombre,1,0,'l');
$this->Cell(45,8,"*NIVEL: ",1,0,'l');
$this->Cell(55,8,"FECHA: ".date("d/m/y"),1,0,'l');
$this->ln();
$this->Cell(95,8,"LUGAR: ".$_REQUEST['sala'],1,0,'l');
$this->Cell(55,8,"HORARIO: ".$horario,1,0,'l');
$this->Cell(45,8,'Hoja: '.$this->PageNo().' de:{nb} ',1,0,'l');
$this->Ln();
$this->SetX(90);
$this->Cell(30,9,'ASISTENTES ',0,0,'l');
$this->Ln();
$this->Cell(10,12,'No.',1,0,'l');
$this->Cell(22,12,'No.Nmina',1,0,'l');
$this->Cell(19,12,'TURNO',1,0,'l');
$this->Cell(67,12,'NOMBRE',1,0,'l');
$this->Cell(57,12,'PUESTO',1,0,'l');
$this->Cell(20,12,'FIRMA',1,0,'l');
$this->Ln();
}
138
Creamos el pie de pgina de nuestro documento.

function Footer(){
Variables para conexin a la base de
datos.
$bd_password = "";
$bd_base = "rh";
Generamos una conexin y una consulta con el parmetro curso obtenido de la
interfaz capacitacin
$sql=mysql_query("select * from cursos where id='".$_REQUEST['curso']."'");
$expositor=$row['expositor'];
}
Estructura fsica del Pie de
$this->SetY(-100);
$this->SetDrawColor(1, 1, 1);
$this->Line(10, 265 , 50, 265);
$this->Line(150, 265 , 190, 265);
$this->SetXY(0, 245);
$this->Cell(0,0,"EL INSTRUCTOR",0,0,'C');
$this->Cell(28,2,"".$expositor,0,0,'C');
$this->Cell(58,0,"NOMBRE",0,0,'C');
$this->Cell(228,0,"FIRMA",0,0,'C');
$this->Ln();
$this->SetXY(10,270);
$this->MultiCell(40,5,'*NIVEL= nivel de revisin de procedimiento ISO
9002.','','J','');
$this->SetXY(80,270);
$this->MultiCell(120,5,'NOTA.Los firmantes hemos sido capacitados/actualizados
en el tema de referencia y nos obligamos a participar/generar acciones
correctivas/preventivas en caso de detectar no-conformidades con el mismo.','','J','');
139
$this->SetXY(150, 285);
$this->MultiCell(40,5,'Formato F4.18B
Rev.5.','','c','');
}}
$pdf=new PDF();
Creamos la variable pdf de la clase PDF,
$pdf->AddPage();
para poder manejar sus atributos, y
$pdf->AliasNbPages();
$count=0;
Creamos el ciclo while, para que se genere
while($row= mysql_fetch_array($sql3))el cuerpo del documento con los registros de
$count=$count+1;
la consulta antes hecha.
if($count<25){
$pdf->SetFont('Arial','',8);
Creamos la estructura al mismo
$pdf->Cell(10,7,$count,1,0,'l');
$pdf->Cell(22,7,$row['NO_nomina'],1,0,'l'); tiempo que llenamos las celdas con
datos de la base de datos, siempre
$pdf->Cell(19,7,$row['turno'],1,0,'l');
y cuando el registro no sea mayor a
$pdf->Cell(67,7,$row['NOMBRE'],1,0,'l');
25; de lo contrario se ira a una
$pdf->Cell(57,7,$row['puesto'],1,0,'l');
$pdf->Cell(20,7,"",1,0,'l');
$pdf->Ln();
} else{
Esta excepcin dice que si el registro
$pdf->Cell(10,7,$count,1,0,'l');
es mayor de 25 se genera un ltimo
$pdf->Cell(22,7,$row['NO_nomina'],1,0,'l'); registro y el contador se disminuye a
$pdf->Cell(19,7,$row['turno'],1,0,'l');
0.
$pdf->Cell(67,7,$row['NOMBRE'],1,0,'l');
Por ltimo se cierra el ciclo, ya
$pdf->Cell(57,7,$row['puesto'],1,0,'l');
cuando no hay mas registros que
$pdf->Cell(20,7,"",1,0,'l');
$pdf->Ln();
$pdf->SetY(275);
$count=0;}}
140
if($count>0){
for ($i = $count; $i <25; $i++) {
$pdf->SetFont('Arial','',8);
$pdf->Cell(10,7,$i+1,1,0,'l');
$pdf->Cell(22,7,"",1,0,'l');
$pdf->Cell(19,7,"",1,0,'l');
$pdf->Cell(67,7,"",1,0,'l');
$pdf->Cell(57,7,"",1,0,'l');
$pdf->Cell(20,7,"",1,0,'l');
$pdf->Ln();}}
$pdf->Output();
?>
Si el contador se quedo con un nmero

mayor que 0 pero menor que 25,
entonces se seguirn generando las
celdas para terminar el formato aunque
este est vaco.
Se cierra el for y entonces se hace un
salto de lnea y se manda el documento
fuera para que sea visible para el
usuario.
141
INTERFACES
Archivo Index.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>
<title>INICIO</title>
<link rel="stylesheet" href="css/maquetacion.css" type="text/css" media="screen">
</head>
<?php
Con sta instruccin inicializamos una sesin e indicamos que
session_start();
if(isset($_SESSION['user'])){si tenemos activo algn usuario nos mostrar la pgina dentro
de esta condicin.
?>
<body>
Este divisor contendr elementos dentro de s que irn dando formato
<div id='contenedor'>
Este divisor solo se enfocar en la cabecera de la pgina.
<div id="cabecera">
Definimos una subdivisin para cada elemento de la cabecera dando 3, dentro de ellos
habr una imagen de fondo, cada una se identifica por cabecera derecha, izquierda, y
<div id='cabeceraiz'><h1 class ="normal"><img src="imagenes/fisher.png"
width="100%" height="100%" longdesc="fisher.png" /></div>
<div id='cabecerade'><h1 class ="normal"><img src="imagenes/emerson.png"
width="100%" height="50%" longdesc="emerson.png" /></div>
<div id='cabecerace'><h1 class ="normal"><img src="imagenes/titulo.png"
width="100%" height="50%" longdesc="titulo.png" /></div>
</div>
Hola <strong ><?php echo$_SESSION['user']?></strong> ya has iniciado sesion<a
href="php/logout.php">Cerrar sesion</a>
<div id='menu'>
<ul class="nav">
<li><a href="index.php" >
<img src="imagenes/inicio.jpg" width="15%" height="5%"
longdesc="fisher.jpg" /></a></li>
<li><a href="reporte.php"><img src="imagenes/reporte.jpg" width="15%" height="5%"
<li><a href="capacitacion.php"> <img src="imagenes/capa.jpg" width="15%"
height="5%" longdesc="fisher.jpg" /></a></li>
<li><a href="registro_cur.php"> <img src="imagenes/curso.jpg" width="15%"
142

</ul>
</div>
De misma forma que la cabecera dividimos el pie de pgina, en 3 partes por sus
posiciones y colocamos una imagen en cada una de ellas.
<div id='pie' >
Cerramos el divisor de la cabecera principal.
<div id='pieiz'><h1 class ="normal"><img src="imagenes/fisher.jpg"
<div id='piede'><h1 class ="normal"><img src="imagenes/valvule.jpg" width="100%"
Definimos el divisor men que contendr los links para navegar por el
height="100%" longdesc="fisher.png" /></div>
sistema, as mismo creamos las ligas de clase nav, y colocamos cada
<div id='piece'><h1 class ="normal"><img src="imagenes/emerson_group.jpg"
opcin del men en este caso definido por imgenes.
</div>
</div>
</body>
<?php Este fragmento de cdigo nos dice que si la condicin inicial no se
}else{ cumple entonces mostrar el cdigo dentro de esta exclusin.
?>
El cdigo que se muestra es como el de la condicin anterior a
diferencia que aqu solo se muestra la opcin del men capacitacin
ya que es la nica que se puede a ingresar sin iniciar sesin.
<body>
<div id="cabecera">
</div>
<div id='menu'>
<ul class="nav">
Creamos una tabla para meter un formulario donde podremos loguearnos
en caso de que no lo estemos, son 2 textbox y un botn de funcin para el
logueo.
143
<table>
<form method="post" action="php\logueo.php">
<tr>
<td ><FONT COLOR="0000FF" size="2%">User:</td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td><FONT COLOR="0000FF" size="2%">Pass:</td>
<td><input type="password" name="pass"/></td>
</tr>
<tr>
<td aling="center" colspan="2"><input type="submit" name="enviar"
value="Accesar"></td>
</tr>
</form>
</table>
<li><a href="capacitacion.php"> <img src="imagenes/capa.jpg" width="15%"
</ul>
</div>
<div id='pie' >
Aqu cerramos la condicin y el cdigo php.
</div>
</div>
</body>
<?php
}?>
</html>
144
Archivo Capacitacin.php
Creamos una conexin a la base de datos, el servidor localhost, usuario root,
password no tiene y la base de datos rh, despus consultamos la tabla
cursos y almacenamos los datos para posteriormente ocuparlos.
<?php
$server = 'localhost';
$username = 'root';
$password = '';
$database = 'rh';
$conexion = @new mysqli($server, $username, $password, $database);
if ($conexion->connect_error) {
die('Error de conexin: ' . $conexion->connect_error); }
$sql
="SELECT * from cursos";
$result = $conexion->query($sql);?>
En el diseo HTML de la pgina todo se conserva igual que las dems a
excepcin de los datos que ms adelante se detallarn.
<head>
<title>Capacitacin</title>
<script language="JavaScript" type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<div id="cabecera">
</div>
<div id='menu'>
<ul class="nav">
145
</ul>
</div>
<div id="contenido">
Creamos una tabla y un formulario para la insercin
de datos.
<table
class="datos" >
<form method="get" action="pdf/Lista.php">
<tr>
<td colspan="3">
<label for="Datos" >Datos curso </label>
</td>
</tr> <tr>
<td>
Generamos un selector de opciones desplegables, cada opcin tiene el nombre
de las salas a elegir.
<label for="sala">Sala: </label>
<select id="sala" name="sala">
<option value="Avandaro" >Avandaro</option>
<option value="Expansion">Expansion</option>
<option value="Malinalco">Malinalco</option>
<option value="Nevado">Nevado</option>
<option value="Teotihuacan">Teotihuacan</option>
<option value="Metepec">Metepec</option>
<option value="Valle de Bravo">Valle de Bravo</option>
</select>
</td>
<td>
Generamos un selector de opciones desplegables, a diferencia del anterior
implementamos cdigo php que nos dar las opciones con los datos
almacenados de la consulta que se realiz anteriormente.
<label for="curso">curso: </label>
<select id="curso" name="curso" >
<option value=''> </option>
Generamos un ciclo while que nos dice que mientras haya un registro se
generar un opcin con los datos de antes almacenados.
<?php
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
146
echo " <option value='".$row['id']."'>".$row['nombre'].",".$row['tipo'].",".$row['horario'].",".

$row['fecha']."</option>";
}
?>
</select>
</td>
</tr><tr>
<td colspan="3">
<label for="Datos" >Datos Empleado </label>
</td>
</tr> <tr>
<td>
<label for="nomina">Nomina: </label>
<input type="text" id="nomina" name="nomina" value="" />
</td>
<td>
<label for="turno">Turno</label>
<select id="turno" name="turno">
<option value="1ero">1ero</option>
<option value="2do">2do</option>
<option value="3ro">3ro</option>
<option value="Mixto">Mixto</option>
</select>
</td>
</tr><tr>
<td><label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre" />
</td>
<td>
<label for="apepa">Apellido Paterno: </label>
<input type="text" name="apepa " id="apepa" />
</td>
<td>
<label for="apema">Apellido Materno: </label>
<input type="text" name="apema" id="apema" />
</td>
147
Seguimos generando componentes para insercin y ahora seguimos con los

</tr> <tr>
textbox y sus etiquetas para insertar los datos.
<td>
<label for="Puesto">Puesto: </label>
<input type="text" name="puesto" id="puesto" />
</td>
<td>
Generamos
un botn con la funcin agregacap, esto es para ocupar la funcin que
agrega los registros en la base de datos por medio del archivo ajax.js, al hacerlo
con ajax la pgina no cambia solo una fraccin de cdigo.
<input type="button" value="Agregar" onclick="javascript:
agregacap(sala.value,curso.value,turno.value,nomina.value,nombre.value,apepa.value,
apema.value,puesto.value);">
</td>
<td>
Este botn genera la lista de capacitacin a diferencia del botn anterior este
cambia la pgina y genera un archivo pdf. Enviando los datos registrados en el
formulario.
<input type="submit" value="Lista" />
</td>
</tr>
</form>
</table>
</div>
Este divisor es para mostrar la tabla de registro de los usuarios.
<div id="resultado" >
</div>
</div></div>
<div id='pie' >
width="100%" height="100%" /></div>
<div id='piede'><h1 class ="normal"><img src="imagenes/valvule.jpg"
</div>
</body>
</html>
Archivo Registro_cur.php
148

<head>
<title>Registro curso</title>
</head>
Creamos una sesin y condicionamos el que haya una sesin iniciada si es as
muestra la pagina de lo contrario, se cumple otra condicin.
<?php
session_start();
if(isset($_SESSION['user']))
{?>
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id='menu'>
<ul class="nav">
</ul>
</div>
<table class="datos">
<form method="get" action="pdf/Listacap.php">
<tr>
<td colspan="3">
<label for="Datos">Datos del curso </label>
</td>
</tr>
<tr>
149
<td>
<label for="curso">Curso: </label>
<input type="text" id="curso"name="curso"/>
</td>
<td>
<label for="tipo">Tipo: </label>
<input type="text" id="tipo"name="tipo"/>
</td>
<td>
<label for="expositor">Expositor: </label>
<input type="text" id="expositor" name="expositor" />
</td>
</tr>
<tr>
<td colspan="3">
<label for="objetivo">Objetivo: </label>
<textarea rows="4" cols="50" id="objetivo" name="objetivo">
Objetivo
</textarea>
</td>
</tr>
<tr>
<td>
<label for="horario">Horario: </label>
<input type="text" id="horario"name="horario"/>
</td>
<td>
<label for="fecha">Fecha(yyyy-mm-dd): </label>
<input type="text" id="fecha"name="fecha"/>
</td>
</tr>
<tr>
<td>
<label for="turno">Sala: </label>
<select id="sala" name="sala">
<option value="Avandaro">Avandaro</option>
<option value="Expansion">Expansion</option>
<option value="Malinalco">Malinalco</option>
<option value="Nevado">Nevado</option>
150
<option value="Teotihuacan">Teotihuacan</option>
<option value="Metepec">Metepec</option>
<option value="Valle de Bravo">Valle de Bravo</option>
</select>
</td>
<td>
<input type="button" value="Agregar" onclick="javascript:
insertacur(curso.value,objetivo.value,expositor.value,tipo.value,sala.value,horario.value,f
echa.value);">
</td>
</tr>
</form>
</table>
<div id="resultado" style="height:420px;width:850px;overflow:scroll;"></div>
</div>
</div>
<div id='pie' >
</div>
</body>
Esta es la otra condicin en caso de no haber iniciado sesin, lo que har es
direccionarte al index para que te logues.
<?php
}
else{
Header("Location: index.php");
}?>
</html>
151
Archivo reporte.php
Creamos una conexin a la base de datos, el servidor localhost, usuario root, password
no tiene y la base de datos rh, despus consultamos la tabla cursos y almacenamos los
<?php
$server = 'localhost';
$username = 'root';
$password = '';
$database = 'rh';
$conexion = @new mysqli($server, $username, $password, $database);
if ($conexion->connect_error) {
die('Error de conexin: ' . $conexion->connect_error);
}
$sql
$result
="SELECT expositor from capacitacion group by expositor";

= $conexion->query($sql);
?>
<head>
<title>Reporte</title>
</head>
Creamos una sesin y condicionamos el que haya una sesin iniciada si es as
muestra la pagina de lo contrario, se cumple otra condicin.
<?php
session_start();
if(isset($_SESSION['user']))
{?>
<body>
<div id="cabecera">
152
</div>
<div id='menu'>
<ul class="nav">
<img src="imagenes/inicio.jpg" width="15%"
</ul>
</div>
<table class="datos" >
<form method="get" action="pdf/Lista.php">
<tr>
<td colspan="3">
<label for="Datos">Reporte de cursos por: </label>
</td>
</tr>
<tr>
<td>
<label for="expositor">Expositor: </label>
<select id="expositor" name="expositor" >
<?php
while ($row = $result->fetch_array(MYSQLI_ASSOC))
{
echo " <option value='".$row['expositor']."'>".$row['expositor']."</option>";
}
$sql1
="SELECT NOMBRE from capacitacion group by NOMBRE ";
$result1 = $conexion->query($sql1);
?>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="persona">Persona: </label>
153
<select id="persona" name="persona" >

<?php
while ($row1 = $result1->fetch_array(MYSQLI_ASSOC)) {
echo " <option value='".$row1['NOMBRE']."' >".$row1['NOMBRE']."</option>";
}
$sql2
="SELECT * from cursos order by nombre";
$result2 = $conexion->query($sql2);
?>
</select>
</td>
<td>
<label for="curso">curso: </label>
<select id="curso" name="curso" >
<?php
while ($row2 = $result2->fetch_array(MYSQLI_ASSOC))
{
echo " <option value='".$row2['id']."'>".$row2['nombre'].",".$row2['objetivo'].",".
$row2['expositor'].",".$row2['fecha'].",".$row2['horario'].",".$row2['tipo']."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>
<label for="fecha">Fecha inicio: </label>
<input type="text" name="fechai" id="fechai" />
</td>
<td>
154
<label for="fechaf">Fecha Final: </label>

<input type="text" name="fechaf" id="fechaf" />
</td>
<td>
<input type="button" value="Buscar" onclick="javascript:
reporte(expositor.value,curso.value,persona.value,fechai.value,fechaf.value);">
</td>
</tr>
</form>
</table>
<div id="resultado" style="height:320px;width:750px;overflow:scroll;"></div>
</div>
</div>
<div id='pie' >
</div>
</body>
Esta es la otra condicin en caso de no haber iniciado sesin, lo que har es
direccionarte al index para que te logues.
<?php
}
else{
Header("Location: index.php");
}?>
</html>
155
ESTRUCTURA Y UBICACIN DE LOS ARCHIVOS DEL

SISTEMA
Vista general de sistema.
Archivo de diseo css.
156
Ubicacin de las imgenes ocupadas.
Archivo de control ajax.js
157
Archivo generador del documento pdf. Y sus componentes.
Archivos de control php.
158
Archivos de interfaces.
159
160
C. NDICE DE FIGURAS.
Figura 1.1 Tecnologas agrupadas bajo el concepto de AJAX31
Figura 1.2 Comparacin grfica del modelo tradicional de aplicacin web y del nuevo
modelo propuesto por AJAX. (Imagen original creada por Adaptive Path y utilizada con
su permiso)...33
Figura 1.3 Comparacin entre las comunicaciones sncronas de las aplicaciones web
tradicionales y las comunicaciones asncronas de las aplicaciones AJAX (Imagen
original creada por Adaptive Path y utilizada con su permiso)34
161

Residencia

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Residencia

Загружено:

Авторское право:

Доступные форматы

TECNOLGICO DE ESTUDIOS SUPERIORES

CAPITULO 2. SERVIDOR WEB..................................................................................62

MANUAL TCNICO.......................................................................................... 101

En lo que a Mysql respecta es un gestor de bases de datos, es de los ms simples a

3.2 OBJETIVOS ESPECFICOS.

lV CARACTERIZACIN DEL REA EN LA QUE

El rea se encuentra dentro del departamento de mantenimiento, el puesto a

Falta de informacin inicial.

VII FUNDAMENTO TERICO.

CAPITULO 1. LENGUAJE DE PROGRAMACIN

1.1 Introduccin al HTML

1.1.1 Sintaxis del HTML

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de

1.1.2 Tablas en HTML. Atributos de la tabla y conclusin

Da color de fondo a la tabla.

borderDefine el nmero de pixels del borde principal.

El atributo bgcolor de la tabla est en rojo.

Esta celda est en verde. tiene el atributo bgcolor en color verde

Tabla anidada, celda 2

Tabla anidada, celda 3

Tabla anidada, celda 4

Este sera el cdigo:

6000 4000 1500

1.1.3 Formularios HTML

1.1.3.1 Qu se puede hacer con un formulario

1.1.3.2 Cmo hacer un formulario en HTML

En el primer caso, el contenido del formulario es enviado a la direccin de correo

<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)"

1.2 Introduccin a la maquetacin con CSS

1.2.1 Qu haba antes de la maquetacin CSS

1.2.2 Por qu maquetar con CSS

lenguaje, muchos de nosotros retrasamos todo lo posible la incorporacin de esta

demostracin como la de CSS Zend Garden es realmente ilustradora sobre las

1.2.3 Formas de aplicar estilos en maquetacin CSS

1.3.1 Qu puede hacer PHP?

Cualquier cosa. PHP est enfocado principalmente a la programacin de scripts del

interconexin, PHP tiene soporte para la instalacin de objetos de Java y emplearlos de

1.3.5 Inicio de la sesin en PHP con session_start

Para registrar una variable de sesin en versiones anteriores de PHP, se usaba la

$_SESSION["nombre_varaable"]. En el siguiente ejemplo, registramos y establecemos

formulario (txtcontrasena) coincide con la guardada en la base de datos (contrasena

Explicamos el cdigo anterior:

<table border="0" align="right" cellpadding="0" cellspacing="0">

A continuacin explicamos cada lnea del fichero:

liberarn las variables de sesin registradas, en el ejemplo liberamos dos variables de

1.3.6Formularios HTML (GET y POST)

Ejemplo #3 Old methods of accessing user input

http://www.example.com/test.php?id=3 contiene datos GET que son accesibles con

Ejemplo #4 Variables de formulario ms complejas

1.4 Introduccin a AJAX

Figura 1.1 Tecnologas agrupadas bajo el concepto de AJAX

Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de todas y cada una

El siguiente ejemplo ilustra el comportamiento de los mbitos:

De esta forma, aunque en el interior de la funcin no se ha definido ninguna variable

En este caso, los mensajes mostrados son:

CAPITULO 2. SERVIDOR WEB

2.1 WAMP SERVER

Haga doble clic en el archivo descargado y sigue las instrucciones. Todo es

versiones de Apache, MySQL y PHP.

Explicaciones sern proporcionados en el foro .

propios archivos (datas para MySQL).

administrar sus servicios de Apache y MySQL

Con un clic derecho: