Desarrollo Aplicaciones Web (Redes)

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL
COMPUTACIN E
INFORMTICA
MANUAL DE APRENDIZAJE
DESARROLLO DE
APLICACIONES WEB
CDIGO: 89001683
Profesional Tcnico
DESARROLLO DE APLICACIONES WEB
TAREA 01: ANALIZAR LA ESTRUCTURA A LAS APLICACIONES WEB.

En esta tarea trataremos las siguientes operaciones:
Analizar el alcance del proyecto web.

Identificar la estructura bsica de una aplicacin web.
Organizar el equipo de trabajo segn especialidades.
Seleccionar la interfaz de desarrollo ms adecuada.
"Nunca consideres el estudio como una obligacin, sino

como una oportunidad para penetrar en el bello y
maravilloso mundo del saber.. ALBERT EINSTEIN.
EQUIPOS Y MATERIALES:
Computadora con microprocesadores core 2 Duo de mayor capacidad.

Sistema operativo Windows.
Acceso a internet.
Software de maquetacin y desarrollo de pginas web.
ORDEN DE EJECUCIN:

OPERACIONES.
1.1. OPERACIN: ANALIZAR EL ALCANCE DEL PROYECTO WEB.
Una de los procesos ms importantes para el crecimiento de una empresa y
medir su productividad, es la gestin de sus proyectos.
El personal encargado de desarrollar este tipo de
proyectos recibe a diario todo tipo de
requerimiento por parte de los usuarios (clientes).
A travs de las consultas recibidas se puede
establecer que las empresas se preocupan
constantemente por encontrar una aplicacin
ESCUELA DE TECNOLOGAS DE LA INFORMACIN

software para la gestin de proyectos buena, bonita y barata.
ste es un enfoque errneo, ya que antes de elegir una
herramienta software para la gestin de proyectos es
necesario definir los procesos que permitan optimizar el
desarrollo de proyectos.
El mejor software informtico no sirve de nada si
no se cuentas con los procesos de trabajo bien
definidos. Sin embargo, con una aplicacin comn
y una buena metodologa de gestin de proyectos
se pueden conseguir grandes resultados en el
desarrollo de proyectos.
Planificacin y el Diseo.
Definir los objetivos y el pblico al que se dirige. Antes
de comenzar con el desarrollo, es necesario determinar
cul es el fin de nuestro sitio web (generar marca, captar
clientes, vender,) e identificar su pblico objetivo.
Asimismo, debemos echar un vistazo a la competencia:
qu hace, cules son sus estrategias, etc.
Hay que tener en cuenta que el desarrollo de nuestra
web no deja de ser un proyecto empresarial o de
negocio.
Organizar la informacin (Arquitectura de la informacin). Una
vez hemos determinado el objeto de nuestra web y su pblico,
tenemos que organizar y estructurar adecuadamente la
informacin que publicaremos en el sitio. Tras dicha tarea,
podremos definir la estructura de la web (pginas,
jerarqua,).
Disear la web y crear un prototipo. En este paso
no se consideran solo los aspectos visuales o
estticos; el diseo tambin se basa en criterios
de usabilidad, accesibilidad y posicionamiento. De
este modo, el sitio web, adems de ser atractivo y
transmitir calidad, deber disponer de un sistema
de navegacin sencillo (la experiencia del usuario
es fundamental) y permitir su correcto
posicionamiento web en buscadores. Lgicamente, los elementos de
navegacin se plantearn a partir de la estructura web definida en el paso
anterior. Finalmente, este trabajo de diseo se concretar en un prototipo

realizado en cualquier formato vlido (pdf, presentacin en PowerPoint, etc.); el
cual permitir reproducir el diseo acordado, la funcionalidad bsica del sitio y,
sobre todo, ayudar a evaluar la solucin web antes de su ejecucin (ahorro de
costes).
NOTA:
1. Para qu nuestro cliente quiere un sitio web?
Esta pregunta es muy importante ya que debemos de identificar el objetivo del cliente,
pues teniendo esto claro nuestro enfoque ser ms centrado y apuntado al proyecto.
Recuerda que hay diferentes tipos de sitios web (Sitios Informativos, para ventas, para
entretener, para educar, para promocionar,
etc.) diferentes enfoques que satisfacen las
diferentes necesidades.
2. El tiempo siempre es importante tenerlo
en cuenta, por lo general el cliente siempre tendr urgencia y lo querr lo antes
posible, pero debes de tener en cuenta el tipo y tamao de la web, lo complejo que
ser hacerla, tener en cuenta el tiempo de cambios y detalles, y lo ms importante, tu
ritmo y forma de trabajo, dependiendo de esto debes de calcular el tiempo para tener
el website listo.
1.2. OPERACIN: IDENTIFICAR LA ESTRUCTURA BSICA DE UNA

APLICACIN WEB.
Un factor importante es la elaboracin de una estructura y jerarqua bien
elaborada de los contenidos de la pgina. La gestin del contenido, es decir, la
presentacin de la informacin, los mensajes a transmitir a los clientes, la
distribucin e intercambio de informacin con los usuarios para obtener una
pgina web que sea eficaz como canal de comunicacin, es fundamental para
conseguir una fidelidad y un contacto fluido y directo con los futuros usuarios y
clientes.
Textos.
La informacin suministrada en la pgina web debe
ser nica y relevante, usando las palabras y frases
clave para poder proceder posteriormente a una
buena optimizacin. Copiando el texto de una pgina
web similar supondra la penalizacin de sta por los
buscadores de internet.
Es muy importante que la informacin de su pgina
est actualizada regularmente y no quede obsoleta.

Imgenes y Animacin.
El uso de imgenes y animaciones incrementa
visualmente la calidad de la pgina web, en
cambio, un uso incorrecto de stas puede ser
obviado por los buscadores y por tanto no ser
consideradas para la optimizacin de la pgina. El
uso abusivo de imgenes tambin ralentiza la
carga de la pgina web hacindola de difcil acceso a los usuarios que
dispongan de una conexin lenta.
NOTA:
El texto contenido en imgenes y animaciones flash es totalmente invisible a los
buscadores y por tanto, no tienen ningn valor a la hora de posicionar la pgina.
Creatividad y Diseo.
Una vez definida la estructura de la pgina web y los
elementos que la componen, se procede al diseo
visual del contenido junto a la identidad corporativa de
la empresa, es decir, la integracin del logo, colores
corporativos, etc.
El propsito es conseguir una unin entre diseo y contenido, aumentando el
efecto visual y la eficacia de la pgina web.
Navegabilidad.
Es importante que su pgina web sea fcilmente
navegable, es decir, que el usuario visualice y acceda
a la informacin solicitada, desplazndose fcilmente
por todas las pginas que componen su web.
Es importante que todos los clientes interesados en la
informacin y contenido de su pgina web puedan acceder de una forma fcil a
su pgina a travs de distintos navegadores de Internet, no solamente de un
navegador.
Accesibilidad.
Cada navegador interpreta los cdigos HTML de forma
diferente, es decir, una pgina programada solamente para I.E.
10 no se ver igual en un navegador Chrome, Opera, Mozilla u
otros.

Otros servicios:
Las aplicaciones basadas en web incrementan el
trfico en la pgina ya que los usuarios los
consideran de un inters adicional, y crean la
posibilidad de que su pgina vuelva a ser visitada
e incluso recomendada a terceras personas.
Aplicaciones web como servicios
como
pronstico del tiempo, zonas de descarga, calculadores de hipoteca, bsqueda
por secciones, bsqueda de productos, convertidores de moneda, sitios
seguros, comercio electrnico, reservas on-line y otras gestiones de servicio,
son algunos de los elementos que generan el dinamismo y la interactividad en
la pgina web.
1.3. OPERACIN: ORGANIZAR EL EQUIPO DE
TRABAJO SEGN ESPECIALIDADES.
El trabajo en equipo es un proceso en el que participa
un grupo de personas que comparten objetivos
similares y cuyos conocimientos se complementan, con
la finalidad de alcanzar metas comunes. El incumplimiento o la
irresponsabilidad de alguno de los integrantes del grupo de trabajo afectan el
trabajo de todos.
Para desarrollar un sitio Web (el diseo del proyecto, desarrollo, publicacin,
mantenimiento, etctera) se requiere la formacin de un grupo de personas que
trabajen en forma coordinada.
Dicho grupo debe estar compuesto por personal de diferentes reas de la
compaa, que deben representar los intereses de su departamento en el sitio
Web.
Lo primero que debemos tener en cuenta es que en el desarrollo web existen
tres pilares fundamentales para llevar a cabo las tareas.
El rea de diseo: sta es la encargada de realizar
todo lo que tiene que ver con la parte cosmtica del
proceso, aqu se tiene que plasmar de manera
ilustrada todo lo que trae el proyecto, las interfaces
de usuario y sus respectivas implicaciones dentro
de las experiencias de usuario son inicialmente
determinadas en esta rea.

Desarrollo Front-End: en esta fase el proyecto
deja de ser simplemente una serie de imgenes
y bocetos para materializarse por medio de
cdigo del lado del cliente; es decir, todo el
cdigo que no tiene que pasar por medio de un
servidor para poder ser ejecutado. HTML, CSS y
JavaScript hacen parte del paquete front-end
que acerca mucho ms el desarrollo a su forma real, permitiendo mostrar
posibles falencias en la fase de diseo y haciendo de forma sencilla la
reestructuracin de los aspectos ms dbiles que vienen desde el primer
proceso.
Desarrollo Back-End: la parte final del proyecto
donde se le da vida a nuestro desarrollo, todas las
funcionalidades internas, las consultas a bases de
datos en servidores remotos como pueden ser
envo de formularios, inicios de sesin y todo lo
que tenga que pasar a travs de un servidor hace
parte de esta etapa. Lenguajes de programacin como PHP, ASP, JAVA y
frameworks como Django y Ruby on Rails entre otros hacen parte de la fase
Back-End.
Es importante anotar que cada una de estas fases debe ser realizada al menos
por tres departamentos distintos incluso si el grupo es pequeo y slo consta
de un diseador, un desarrollador front-end y un desarrollador back-end. No
digo que sea imposible que una sola persona realice todo lo anterior, pero por
el tema de optimizacin de trabajo es mejor tener bien definidos los roles de
cada profesional enfocando su mximo esfuerzo al rea en la que mejor se
desempee.
NOTA:
El desarrollo web es un trabajo en equipo en todas sus formas y acostumbrarse a
hacer uso de las buenas prcticas en cada uno de los roles en los que nos veamos
involucrados es fundamental para lograr un trabajo eficaz.
1.4. OPERACIN: SELECCIONAR LA INTERFAZ DE DESARROLLO MS

ADECUADA.
Para desarrollar nuestro proyecto web utilizaremos los siguientes programas:
Dreamweaver y Wampserver.
10
Dreamweaver.
Iniciar la aplicacin:
En la ventana de ejecutar ingrese Dreamweaver y dele clic en aceptar.
Crear nuevo sitio:
Dele clic en el men Sitio y luego en Nuevo sitio.
A continuacin ingrese el nombre del sitio y la carpeta

que contiene o que va a contener los archivos de su
pgina web.
Administrar Sitios.
En esta ventana Ud. podr darle mantenimiento a los sitios que he definido.
11

Archivos del proyecto.
En esta ventana Ud. podr cambiar de proyecto de forma rpida mientras en el
panel inferior se muestran los archivos y carpetas que contienen el proyecto.
Crear una nueva pgina.
Dele clic en Nuevo, luego seleccione el tipo de pgina que va a generar y dele
clic en el botn crear.
Vistas de una pgina.

Puede abrir una pgina dndole doble clic en la pgina
desde el panel de archivos en la parte derecha.
Luego la pgina se puede ver de tres formas.
Modo Diseo.
Modo Dividir.
En esta vista se puede ver parte del diseo y el cdigo al mismo tiempo.
12

Modo Cdigo.
En esta vista solo se puede ver el cdigo de la pgina web.
El inspector de Propiedades.
En esta ventana se podrn aplicar cambios de formato a la pgina y sus
elementos.
Dreamweaver CS6 es un software fcil de usar que permite crear pginas web
profesionales.
Las funciones de edicin visual de Dreamweaver CS6 permiten agregar
rpidamente diseo y funcionalidad a las pginas, sin la necesidad de
programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc... de una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras
cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web
en el servidor sin salir del programa.
Novedades de Dreamweaver CS6.

En este punto comentaremos las caractersticas que aporta esta nueva versin
sobre la anterior.
13

Plantillas diseo fluido. El acceso a la web
a travs de todo tipo de dispositivos est
experimentando un aumento importante.
Ahora es habitual acceder a internet desde
el telfono mvil y desde las tabletas. Esto
complica el diseo de los sitios web porque
los
dispositivos
son
de
diferentes
dimensiones. Una forma de afrontar este problema es utilizando el diseo
fluido, este tipo de diseo hace que la pgina se adapte automticamente a las
dimensiones del dispositivo. Este tipo de diseo utiliza HTML 5 por los que los
navegadores antiguos no son capaces de representarlo correctamente. Sin
embargo, existen libreras de Javascript que solucionan
este inconveniente.
Transiciones. Las transiciones permiten pasar
propiedades CSS de un estado inicial a otro estado final
de forma continua. Con transiciones se pueden lograr
vistosos efectos de animaciones.
Fuentes Web. Existen sitios web con multitud de
nuevas fuentes que pueden dar un aire distinto a
nuestros diseos de pginas web. En esta
versin, Dreamweaver permite incorporar los
archivos de nuevas fuentes de forma sencilla.
Integracin con PhoneGap mejorada. PhoneGap es un
servicio para generar aplicaciones para telfonos
mviles en las plataformas ms utilizadas (Android,
Apple,) ahora se ha mejorado la compatibilidad con PhoneGap desde
Dreamweaver.
Funciones exclusivas para Creative Cloud. Creative
Cloud es la nueva forma de adquirir productos Adobe,
como Dreamweaver, mediante suscripcin mensual o
anual, de esta forma se tiene acceso ms rpido a las
actualizaciones y se puede disponer de los archivos
de trabajo en cualquier ubicacin con acceso a
internet.
Adems hay funciones que slo estn disponibles
para los suscriptores de Cloud, como la insercin de
etiquetas HTML 5 desde el panel Insertar, la
compatibilidad con Edge Animate o la bsqueda
14

dinmica en Mac.
Wampserver.
WampServer es un entorno de desarrollo web para
Windows en el cual se podrn crear aplicaciones web con
Apache, PHP y base de datos en MySQL (motor de base
de datos). Esta herramienta incluye ademas con un
administrador de base de datos PHPMyAdmin con el cual
podremos crear una nueva base de datos e ingresar la
data de las tablas creadas en ella, realizar consultas y
generar scripts SQL, como exportar e importar scripts de base de datos.
WampServer ofrece a los desarrolladores herramientas necesarias para
realizar aplicaciones web de manera local, con un sistema operativo
(Windows), un manejador de base de datos (MySQL), un software de
programacin script web PHP.
WampSever se caracteriza por que puede ser usado de forma libre es decir no
debemos de contar con alguna licencia el cual nos permita el uso de la misma,
ya que pertenece a la corriente de "open source".
FUNDAMENTO TERICO.
Definir el Alcance del Proyecto es el proceso que consiste en desarrollar una
descripcin detallada del Proyecto y del producto. Esto es fundamental para su
xito, ya que proporciona un entendimiento comn entre los interesados del
Proyecto.
Se elabora a partir de los entregables principales, supuestos y posibles
restricciones al Proyecto que se han documentado en la fase de Iniciacin,
siendo en la fase de Planificacin donde el Alcance del Proyecto se describe y
se define de manera ms especfica, segn se va obteniendo ms informacin
sobre del Proyecto. Durante este proceso, se analizan los riesgos, los
supuestos y las restricciones existentes, actualizando esta informacin segn
sea necesario.
15

Planteamiento del proyecto web.
Como diseador o desarrollador web seguramente va a
encontrarte con proyectos de todo tipo. A veces se dice
s a un trabajo sin analizar a fondo lo que tendr que
hacer, cosa que puede llevar problemas ms adelante.
Cuando te presentan un nuevo proyecto, pararse a
pensar si realmente vale la pena, puede ahorrarnos
muchas horas de trabajo no deseado.
Conocer el cliente.
Es vital conocer un poco el cliente para saber con
qu tipo de cliente vamos a trabajar. Si es posible,
sera una muy buena pista ver anteriores proyectos
de ese cliente. Pregunta si te puede mostrar
anteriores pginas web para ver qu cosas le
gustan y que estilo tiene.
Lo importante es sacar informacin para conocerlo, para hacer directamente lo
que a l le gusta.
Entender al quiere.
Me he encontrado con clientes, que quieren una
cosa pero no saben exactamente qu. Luego te
piden que t, como experto en el tema les des
consejo. Estos tipos de proyecto son peligrosos
ya que son los tpicos que nunca se acaban. Como el cliente no tiene claro lo
que quiere, aunque el proyecto se haya acabado, l va a encontrar cosas que
quiere cambiar.
La mejor forma de solucionar estos problemas es haciendo preguntas, para
que de las respuestas puedas ir obteniendo pistas de cmo hacerlo. Adems
haciendo preguntas vas completando lo comentado en el apartado anterior, el
hecho de conocer el cliente para presentar exactamente lo que le gusta.
Escribir todo.
Es bsico, importante, fundamental, esencial y mil
adjetivos ms, que todo est por escrito. Antes de
empezar a trabajar en el proyecto, poneros de
acuerdo las dos partes con el precio, los plazos y todo
el trabajo que debers hacer, escrbelo todo y firmarlo
las dos partes. De esta forma nos aseguramos que se
16

tienen claros los costes del proyecto, se acepta la fecha de entrega y se tiene
claro el proyecto.
Si el cliente con el que vas a trabajar es de los que se ha comentado
anteriormente, que duda de qu quiere y del cmo lo quiere, asegrate de
escribir y dejar bien claro como trabajaras. La forma ms rpida de
solucionarlo, es cobrar al cliente por horas trabajadas, pero hay gente a la que
no le gusta trabajar por horas y prefiere cerrar un precio fijo a todo proyecto
web.
En este caso, mi recomendacin es la siguiente:
Despus de preguntarle al cliente y tener una idea de lo
que quiere, hazle una propuesta siguiendo las pautas
que habrs obtenido despus de hacerle las preguntas.
Le presentas la propuesta y que diga lo que no le gusta
y quiere cambiar (Apuntalo todo!). Hazle los cambios y
muestra el trabajo, en principio, finalizado y con el proyecto completo. A partir
de ah, si quiere hacer las cambios, no tendrs ms remedio que cobrarle por
horas.
NOTA:
La declaracin de alcance se usa para definir lo que
est dentro de las fronteras del proyecto y lo que est
afuera de estas fronteras. Es decir, que el alcance es la
definicin de los puntos que entran y no entran en el
proyecto y que es acordado por todas las partes,
refirindose a todos los requerimientos a satisfacer en
el proyecto.
Las reas que pueden ser examinadas a la hora de identificar el alcance son:
datos, procesos, aplicaciones y reas de negocio.

Aunque existen muchas variaciones posibles, una aplicacin web esta
normalmente estructurada como una aplicacin de tres-capas. Es su forma
ms comn, el navegador web ofrece la primera capa y un motor capaz de usar
alguna tecnologa web dinmica (por ejemplo PHP, JavaServlets o ASP, ASP.
NET, CGI, ColdFusion, embPerl, Python [Programming language] o Ruby on
Rails) constituye la capa intermedia. Por ltimo una base de datos constituye la
tercera y ltima capa.
17

El navegador web manda peticiones a la capa media que ofrece servicios
valindose de consultas y actualizaciones a la base de datos y a su vez
proporciona una interfaz de usuario.
Hay algunos que consideran una aplicacin web como una arquitectura de dos
niveles. Esto puede ser un "inteligente" cliente que realiza todo el trabajo y las
consultas de un "tonto" server, o un "tonto" cliente que se basa en un
"inteligente" del servidor.
El cliente se ocupara de la capa de presentacin, el servidor tienen la base de
datos (capa de almacenamiento), y la lgica de negocio (nivel de aplicacin)
sera en uno de ellos o en ambos. Aunque esto aumenta la escalabilidad de las
aplicaciones y separa la pantalla y la base de datos, aun as no se permitir la
verdadera especializacin de las capas, por lo que la mayora de las
aplicaciones superan este modelo.
Arquitectura de las aplicaciones Web.
La arquitectura tradicional de cliente/servidor
tambin es conocida como arquitectura de dos
capas. Requiere una interfaz de usuario que se
instala y se ejecuta en una PC o estacin de
trabajo y enva solicitudes a un servidor para
ejecutar operaciones complejas.
Por ejemplo, una estacin de trabajo utilizada como cliente puede ejecutar una
aplicacin de interfaz de usuario que interroga a un servidor central de bases
de datos.
Ventajas del Sistema de Dos Capas:
El desarrollo de aplicaciones en un ambiente de dos capas funciona
adecuadamente, pero no es necesariamente lo ms eficiente. Las
herramientas para el desarrollo con dos capas son robustas y ampliamente
evaluadas.
Las tcnicas de ingeniera de software de prototipo se emplean fcilmente.
Las soluciones de dos capas trabajan bien en ambientes no dinmicos
estables, pero no se ejecutan bien en organizaciones rpidamente
cambiantes.
Desventajas del sistema de dos capas:
Los ambientes de dos capas requieren control excesivo de las versiones y
demandan esfuerzo de distribucin de la aplicacin cuando se les hacen
18

cambios. Esto se debe al hecho de que la mayora de la aplicacin lgica
existe en la estacin de trabajo del cliente.
La seguridad del sistema en un diseo de dos capas es compleja y a
menudo requiere administracin de las bases de datos; esto es debido al
nmero de dispositivos con acceso directo al ambiente de esas bases de
datos.
Las herramientas del cliente y de la base de datos, utilizadas en diseos de
dos capas, constantemente estn cambiando. La dependencia a largo plazo
de cualquier herramienta, puede complicar el escalamiento futuro o las
implementaciones.
Arquitectura de tres capas.
La arquitectura de tres capas es un diseo reciente que introduce una capa
intermedia en el proceso. Cada capa es un proceso separado y bien definido
corriendo en plataformas separadas. En la arquitectura tradicional de tres
capas se instala una interfaz de usuario en la computadora del usuario final (el
cliente). La arquitectura basada en Web transforma la interfaz de bsqueda
existente (el explorador de Web), en la interfaz del usuario final.
La arquitectura de las aplicaciones Web suelen presentar un esquema de tres
niveles.
El primer nivel consiste en la capa de presentacin que incluye no slo el
navegador, sino tambin el servidor web que es el responsable de presentar
los datos un formato adecuado.
El segundo nivel est referido habitualmente a algn tipo de programa o script.
Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su
ejecucin. Una aplicacin Web tpica recoger datos del usuario (primer nivel),
los enviar al servidor, que ejecutar un programa (segundo y tercer nivel) y
cuyo resultado ser formateado y presentado al usuario en el navegador
(primer nivel otra vez).
Las diferentes capas suelen ser:
Capa 1: Cliente de aplicacin: Navegador Web.
Capa 2: Servidor de Aplicaciones: Apache,
Servidor Tomcat con servlets.
Capa 3: Servidor de Datos: Base de datos,
servidor SMTP.
19

Ventajas de la arquitectura de tres capas:
Las llamas de la interfaz del usuario en la estacin de trabajo, al servidor de
capa intermedia, son ms flexibles que en el diseo de dos capas, ya que la
estacin solo necesita transferir parmetros a la capa intermedia.
Con la arquitectura de tres capas, la interfaz del cliente no es requerida para
comprender o comunicarse con el receptor de los datos. Por lo tanto, esa
estructura de los datos puede ser modificada sin cambiar la interfaz del
usuario en la PC.
El cdigo de la capa intermedia puede ser reutilizado por mltiples
aplicaciones si est diseado en formato modular. La separacin de roles en
tres capas, hace ms fcil reemplazar o modificar una capa sin afectar a los
mdulos restantes.
Desventajas de las Arquitecturas de Tres Capas y basadas en Web.
Los ambientes de tres capas pueden incrementar el trfico en la red y
requiere ms balance de carga u tolerancia a las fallas.
Los exploradores actuales no son todos iguales.
La estandarizacin entre diferentes proveedores ha sido lenta en
desarrollarse. Muchas organizaciones son forzadas a escoger uno en lugar
de otro, mientras que cada uno ofrece sus propias y distintas ventajas.

Cmo organizar un equipo de trabajo:
El lder de un equipo de trabajo debe dirigir al grupo humano siguiendo unas
lneas comunicativas, participativas y dirigidas a la consecucin de metas
alcanzables.
El equipo de programacin que forme debe ser especializado en el desarrollo
de sitios web personalizados utilizando diferentes lenguajes, como por ejemplo
Javascript, AJAX, jQuery, MySQL, HTML y CSS, as como la configuracin de
servidores web y desarrollo PHP. El equipo siempre debe de tratar de llegar a
nuevos retos. Debe de conocer las habilidades de cada uno y saber si son
capaces de llegar a soluciones creativas, y as poder encajar perfectamente
con el equipo.
Las cualidades de un buen programador.
Con los tiempos que corre, las salidas profesionales
en el mundo TIC evolucionan y se expanden. Una de
las trayectorias ms populares actualmente es la de
programador. Los informticos aprenden a programar
20

entre otras muchas cosas y pueden si quieren ganarse la vida con ello. Pero...
puede todo el mundo ser programador? Qu cualidades ha de tener uno
para ser un buen programador?
1. Capacidad para trabajar en equipo.
Trabajar en equipo significa ser capaz de trabajar
de forma conjunta con otras personas para el
desarrollo
eficaz
de
un
proyecto.
La
programacin, en particular, es un campo en el
que la comunicacin con otras personas ha de ser fluida, abierta y efectiva si
se quiere obtener un buen resultado.
Por supuesto, hay que distinguir entre la programacin pura qu solo
desarrollar un individuo, y el tipo de programacin que se puede desarrollar
con la ayuda de aplicaciones u otros programas como CASE.
El aspecto ms importante del trabajo en equipo es la divisin de las tareas de
forma justa y acorde a las capacidades y competencias de cada miembro del
equipo. Siempre es mejor identificar quin pudo dar la solucin a un problema
que culpar a algn miembro de algn error cometido.
2. Gestin de proyectos.
Sea cual sea la dificultad del proyecto, el lder deber
hacerse cargo del proyecto y asignar el trabajo.
El gestor de proyectos supervisar la planificacin y el
anlisis y se har cargo del diseo del sistema, su
programacin y su implementacin. Un buen programador debe ser capaz de
desempear todos y cada uno de estos diversos roles.
3. Conocimiento de distintos lenguajes de programacin.
Los sistemas informticos de hoy en da se basan
en una extensa serie de lenguajes de programacin
cuyo conocimiento y manejo es fundamental para
los programadores. Un buen programador necesita
entender cmo funciona internet y las redes LANS.
Aunque el lenguaje HTML no es tan importante ya como lo fue en su da an lo
es para el funcionamiento de todos los sistemas informticos. En la actualidad,
el cdigo HTML se puede generar de forma automtica con herramientas o
aplicaciones especficas por lo que saber cmo poner en prctica todas estas
posibilidades es vital.
21

4. Idiomas extranjeros.
Todo programador ha de ser capaz de hablar algn
idioma extranjero a nivel de trabajo, especialmente
el ingls. La lengua inglesa es el idioma ms
utilizado a nivel mundial y los programadores han de
aprender a hablar ingls ya que ser muy probable
que lo necesiten para trabajar en equipos
internacionales. Por otra parte, los sistemas y programas informticos se
desarrollan generalmente en ingls as que es fundamental que puedas
desenvolverte en este idioma. Otro idioma importante es, por supuesto, el
espaol.
5. Competencia profesional.
No hace falta decir que todo programador ha de ser
competente en una gran variedad de lenguajes de
programacin, o al menos tener inters por aprender otros
lenguajes adems de los que ya sabe. Por supuesto,
depender de qu tipo de aplicaciones te interesa desarrollar.
Formar un equipo de programadores competentes en diversas
reas te asegurar el xito de cualquier proyecto.

Los lenguajes de programacin que se utilizan en el desarrollo de
un proyecto web son muy diversos, as como los distintos
programas de diseo y maquetacion involucrados de desarrollo de
un sistema web.
En el desarrollo web tenemos unas herramientas para el diseo, otras para la
maquetacin, otras para la programacin, y para la depuracin. Todas las
herramientas que usemos son muy importantes, desde el Sistema Operativo
hasta el comando ms insignificante, es por ello debemos elegir la ms
adecuada que se ajuste a nuestras necesidades para asi poder alcanzar los
objetivos.
Fases de desarrollo de una web.
Para elegir las herramientas a utilizar, antes debemos identificar las fases del
proceso que forman el ciclo de vida de un desarrollo web.
Diseo: El diseo consiste en crear esbozos de la web final mediante una
herramienta grfica, como Photoshop, GIMP o Inkscape.
22

Maquetacin HTML/CSS: La maquetacin consiste en convertir los esbozos
creados en la fase anterior en plantillas HTML, su respectiva hoja de estilos, y
las imgenes usadas. Es posible saltarse la fase anterior para comenzar
directamente con esta fase, dependiendo de si dominamos herramientas como
Photoshop o no.
Programacin cliente: La programacin cliente consiste bsicamente en
Javascript, incluyendo sus libreras como jQuery y Ajax. Una web puede no
tener necesidad de hacer programacin cliente, como puede ser una pequea
web corporativa con poca informacin esttica, o puede que requiera enormes
esfuerzos en esta fase, como ocurre con los proyectos Web 2.0.
Programacin servidor: En esta fase, que se desarrolla junto con la anterior,
crearemos la aplicacin web en un lenguaje de servidor, como puede ser PHP,
ASP .NET, Python, Perl, etc.
Depuracin: Esta fase enlaza la anterior con la siguiente, y es donde haremos
las pruebas de nuestro cdigo para saber si los procesos re realizan de forma
correcta.
Pruebas en local: En nuestro servidor local haremos todas las pruebas antes
de publicarlo en un hosting real.
Subir ficheros al hosting: Una vez nuestra web est completada y bien
testeada en nuestro servidor local (desarrollo), la subiremos al servidor del
hosting elegido (produccin). Dependiendo del hosting, podremos usar FTP,
SFTP (SSH), etc.
Pruebas en hosting: Realizaremos las ltimas pruebas en el servidor del
hosting para comprobar que el cambio de servidor no ha afectado a nada. Para
evitar problemas, nuestro servidor local debe tener exactamente la misma
configuracin que el servidor del hosting.
Herramientas: desarrollo en PHP
A continuacin enumerar las herramientas bsicas para el desarrollo de una
web en PHP, en sus diferentes fases de diseo e implementacin.
Fases: diseo y maquetacin.
Adobe Photoshop: Esta aplicacin slo est disponible
en Windows ya que pertenece a Microsoft, es el ms
usado y gracias a ello dispone de una gran comunidad de
usuarios con los que se puede contar ante cualquier
problema. Con l crearemos el diseo, as como las
imgenes que usemos en la maquetacin.
23

GIMP: Es el equivalente de software libre ms prximo a Photoshop. Al ser
libre es posible conseguirlo gratuitamente, y de hecho cualquier distribucin
GNU/Linux lo incluye. Al igual que en Photoshop, con l podremos crear el
diseo y las imgenes de la maquetacin HTML. Tambin
disponible en Windows.
Fase: maquetacin.
Adobe Fireworks: El editor de grficos vectoriales ms
utilizado para el desarrollo web. Al igual que su compaero
Photoshop se utilizado bajo plataforma Windows.
Inkscape: Es un excelente editor grfico vectorial con el que poder
crear iconos, banners, y dems dibujos de forma muy fcil y
sencilla, incluso para aquellos que no tengan conocimientos
avanzados en edicin grfica digital.
Fases: maquetacin, programacin cliente.
Dreamweaver: Es uno de los principales editores web del mercado, se ha
convertido quizs en uno de los editores ms cmodos para trabajar con CSS,
y por ello quizs tambin sea el ms usado por los diseadores web.
Fase: programacin servidor.
Zend Studio: Sin duda el mejor IDE existente en el
mercado para desarrollo web con PHP. Es un editor
de texto para pginas PHP que proporciona un buen
nmero de ayudas desde la creacin y gestin de
proyectos hasta la depuracin del cdigo.
Otra aplicacin muy til que est muy ligada a Zend
Studio es Zend Platform, un mdulo para Apache que permite depurar una web
directamente en el navegador (Internet Explorer o Firefox), adems de otras
funciones ms complejas, como alertas configurables para que nos enve un
email por cada error ocurrido en la web, o cuando un script sobrepase un
tiempo determinado de ejecucin, por ejemplo.
Fase: prueba local.
Apache: Instalar un servidor web Apache en la mquina donde
desarrollamos es fundamental. De esta manera haremos
pruebas rpidamente: editamos un fichero PHP, vamos al
navegador, actualizamos, y vemos los cambios.
Fases: pruebas en local, depuracin.
En esta fase las pruebas la haremos con nuestro navegador de internet local
donde se podr visualizar el resultado de los procesos codificados.
24
Subir ficheros al servidor del hosting.

Una vez hayamos concluido todas las fases
anteriores, y nuestro proyecto est listo,
podemos subirlo al servidor del hosting con un
programa FTP.
Ejercicios y tareas de investigacin
1. Cules son los planteamientos iniciales antes de comenzar a desarrollar

una pgina web?
2. Cul es la estructura de una pgina web? Explique cada una.
3. Describa las cualidades que debe tener cada miembro de un equipo de
desarrollo web.
4. Explique las diferencias ms importantes entre la programacin en local y
en servidor.
25
TAREA 02: IMPLEMENTAR PHP COMO LENGUAJE DE

DESARROLLO DE UNA APLICACIN WEB.
En esta tarea trataremos los siguientes Operaciones:
Instalar el servidor PHP y base de datos.
Trabajar con la sintaxis bsica de PHP.
Implementar estructuras condicionales.
Desarrollar estructuras repetitivas.
Utilizar y elaborar funciones en PHP.
.
Da tu primer paso ahora. No es necesario que veas el camino
completo, pero da tu primer paso. El resto ir apareciendo a
medida que camines. Martin Luther, Jr.

Acceso a internet.
ORDEN DE EJECUCIN:

OPERACIONES:
2.1. OPERACIN: INSTALAR EL SERVIDOR
PHP Y BASE DE DATOS.
INSTALACIN.
Para desarrollar la instalacin de WampServer
debemos de bajar la versin con la cual vamos a
trabajar.
26

Una vez descargado el programa procederemos a la instalacin de la misma
ejecutando el archivo WampServer2.exe que descargaron el cual nos permitir
realizar
la
instalacin
del
programa.
Le damos clic en siguiente.
A continuacin se mostrar la carpeta donde se

instalara el programa y en cual podremos acceder a
cada uno de los recursos instalados por el mismo.
Luego nos da la opcin de crear un acceso directo en

el escritorio, para ejecutar el WampServer cuando
queramos utilizarlo.
Por ltimo se realizar la instalacin del

WampServer el cual extraer los archivos
necesarios y los instalar, el proceso de
instalacin demorara de acuerdo a la capacidad
del ordenador, pero de modo general se
desarrolla de forma rpida.
En la siguiente ventana vemos que nos solicita la

ruta del explorador por defecto.
27

En la siguiente ventana nos pide los parmetros de nuestro correo.
Si es local puede dejar los valores por defecto.

En la parte final de la instalacin veremos la siguiente
ventana que nos informa que la instalacin se ha
completado, adems de ofrecernos la opcin de que se
ejecute WampServer al finalizar la instalacin.
NOTA:
En algunos casos para que funcione el servidor
Wampserver tiene que agregar el nmero 80 en el
archivo httpd.conf tal como lo muestra la siguiente
imagen:
Busca la lnea Listen y digita el numero 80 al

costado del que ya est escrito, luego guarde y
reinicie los servicios.
PROBAR FUNCIONAMIENTO DEL WAMPSERVER.

Abra su navegador de internet y
digite en la barra de direcciones.
Localhost:8080 y presione la tecla
ENTER.
28

VERIFICAR EL PHPMYADMIN.
En la ventana anterior dele clic en el vnculo de la seccin Tools que dice
phpmyadmin, tal como lo indica la imagen anterior.
2.2. TRABAJAR CON LA SINTAXIS BSICA DE PHP.

El cdigo PHP est incrustado entre medio del cdigo HTML. Por tanto
debemos indicar de alguna forma que dejamos de escribir en cdigo HTML y
empezamos a escribir en cdigo PHP. Tambin debemos indicar dnde acaba
el cdigo PHP y volvemos a escribir en cdigo HTML.
Esto se hace indicndolo mediante unas etiquetas especiales que indican
dnde empieza y acaba el cdigo PHP.
La etiqueta <?php indicar que empezamos a escribir en PHP, y la etiqueta ?>
indica que acaba el cdigo PHP.
<?php .... codigo php ... ?>
Escribir en la pgina con PHP
La instruccin echo es una de las ms utilizadas en PHP, ya que nos permite
visualizar en pantalla lo que escribamos detrs de esta palabra clave. Si lo que
queremos visualizar es un texto, debemos escribirlo entre comillas de la
siguiente manera:
<?php
echo "Hola mundo";
?>
Lo escrito dentro de la instruccin echo entre comillas, es interpretado por el
navegador como cdigo HTML, por lo que podemos poner etiquetas HTML
dentro del texto entre comillas para integrar mejor este texto en la pgina:
<?php
echo "<p>Hola mundo</p>";
?>
29

La instruccin print es en todo igual a la instruccin echo pudiendo usar una u
otra indistintamente para obtener el mismo resultado:
<?php
print "<p>Hola mundo</p>";
?>
Esta instruccin o sentencia funciona igual que la anterior, y tiene el mismo
efecto en la pgina.
Trabajar PHP con Dreamweaver y probarlo en nuestro servidor local.
Pasos para crear un archivo php y
ejecutarlo en el servidor local:
1. Abra el programa Dreamweaver y cree
una nueva pgina PHP.
2. Digite el siguiente cdigo y guarde el archivo con el nombre proceso1.php
3. Gurdelo dentro de la carpeta www que se gener al momento de instalar su

servidor Wampserver.
4. Verifique que su archivo ya tenga un nombre asignado y este guardado en la

carpeta www.
30
5. Abra su navegador de internet y en la barra de direcciones digite lo

siguiente:
http://localhost:8080/proceso1.php
El resultado debe ser una pgina como la
siguiente:
NOTAS:
Es preferible crear carpetas dentro de la raz www para organizar nuestros cdigos.
Al ejecutar el Wampserver reconocer las carpetas que se encuentran dentro de su
raz principal, las cuales al ejecutarlas buscaran automticamente el archivo con
nombre index.php el cual siempre ser el primero en ejecutarse tal como tambin
pasa en un servidor real en internet.
Trabajar con carpetas dentro del servidor local.

1. Crear una carpeta con el nombre CAPITULO 2, elaborar un archivo php con
el nombre proceso2_1.php el cual tendr el siguiente cdigo:
2. Guardar el archivo en la carpeta creada en el

paso anterior y ejecutar el servidor
Wampserver.
3. Verifique que la carpeta se puede visualizar en la pantalla principal del
Wampserver.
31
4. Dele clic a la carpeta indicada en el paso anterior

y podr ver el listado de archivos que la
contienen.
Al darle clic al archivo se ejecutara en nuestro servidor.

NOTA:
Si el archivo tuviera el nombre index.php se ejecutara automticamente al darle clic
al nombre de la carpeta.
Dentro de la carpeta pueden existir varios archivos pero siempre se ejecutara por
defecto el archivo con nombre index.php.
Ingresar script PHP dentro de una pgina con contenido HTML.

1. Cree la siguiente pgina php dentro de la carpeta Capitulo 2.
2. Actualice el listado de archivos de la carpeta con F5 y ejecute el archivo que

acabamos de crear. Vera un resultado como el siguiente:
Separar instrucciones.
Como hemos visto en los ejemplos anteriores, cuando finaliza la instruccin o
la funcin aadimos un punto y coma al final de la lnea para separar las
instrucciones y que el servidor pueda ejecutar todo correctamente.
32
Comentarios.
Si queremos explicar una funcin, marcar un error o avisar de tu ltima
actualizacin podemos usar comentarios. Tenemos varias formas de comentar,
ya sea en una lnea o en varias.
Crea un nuevo archivo php con el nombre comentario1.php y gurdalo en la
carpeta Capitulo 2.
Verifica que los archivos que se van creando se organizan en fichas dentro del
programa Dreamweaver.
NOTA:
Crea un nuevo SITIO local que este asignado a la carpeta Capitulo 2 para que
los archivos estn organizados.
En la ventana anterior se pueden visualizar todos los archivos y carpetas que

contiene el sitio Capitulo 2.
2.3. IMPLEMENTAR ESTRUCTURAS CONDICIONALES.
Quiz la estructura de control ms bsica y la ms utilizada sea if-else:
if (condicion) {
// Instrucciones que hay que ejecutar si la condicin es verdadera
} else {
// Instrucciones que hay que ejecutar si la condicin es falsa
}
En castellano sera algo as:

Si (Tal cosa es cierta) {
33

// Haz esto
} En caso contrario {
// Haz esto otro
}
Ejercicio 1:
En un formulario preguntaremos al usuario como se llama, pasaremos las
variables a la pgina saludos.php. En saludos.php mostraremos un saludo
diferente en funcin del usuario ingresado.
Formulario
<html>
<head>
<title> Ejemplo If 1</title>
</head>
<body>
<form action="saludos.php" method="get">
Quin eres?<br />
<input type="text" name="nombre" />
<input type="submit" name="reset" value=" Enviar " />
</form>
</body>
</html>
saludos.php
<html>
<head>
<title> Ejemplo de If </title>
</head>
<body>
<h1> Pgina de bienvenida</h1>
<?php // Empieza el cdigo php
if ($nombre=="senati") { // Si el nombre es senati
echo(" Bienvenido $nombre !!"); // saludo especial
}else {
echo("Hola, $nombre, gracias por visitarnos"); // saludo para los dems
}
?>
</body>
</html>
34

NOTA:
El operador ==, es muy importante.
Si utilizas slo =, estars utilizando el operador de asignacin, es decir estableciendo
que $nombre es igual a senati con lo que la condicin siempre sera cierta.
Del ejercicio anterior supongamos que queremos dejar pasar slo al usuario
senati y que ingrese la contrasea, por ejemplo la clave 123.
Formulario:
<html>
<head>
<title> Ejemplo If 3 </title>
</head>
<body>
<form action="saludos.php" method="get">
Quin eres?<br />
<input type="text" name="nombre" /><br />
Y tu Contrasea?<br />
<input type="text" name="pass" />
<input type="submit" name="reset" value=" Enviar " />
</form>
</body>
</html>
saludos.php
<html>
<head>
<title> Ejemplo If 2 </title>
</head>
<body>
<h1> Pgina de bienvenida</h1>
<?php // Empieza el cdigo php
if ($nombre=="senati" and $pass =="123") {
// Si el nombre es senati y la contrasea es 123
echo(Bienvenido $nombre !!"); // saludo especial
}else {
echo("Acceso denegado"); // saludo para los dems
}
?>
</body>
</html>
35

Adems existe la instruccin elseif, que como su nombre indica, es una
combinacin de if y else. Aade una nueva condicin en el caso de que la
primera fuera falsa y slo ejecuta las instrucciones si esta nueva condicin es
verdadera. Es decir,
Veamos un ejemplo:
if ($a > $b) {
// Ejecuta esto si a es Mayor que b
echo("a es mayor que b");
} elseif ($a == $b) {
// si a no es mayor que be, comprueba si a es igual a b
echo("a es igual que b");
} else {
// si no se cumplen las anteriores condiciones ejecuta sta
echo ("a es menor que b");
}
Ejercicio 2:
En este simple ejemplo la condicin if es verdadera por lo que se ejecutara el
cdigo y se mostrara el mensaje X es mejor que Y
<?php
$x=5;
$y=7;
if($x<$y){
echo "X es menor que Y";
}
?>
Ejercicio 3:
Mostrar un mensaje distinto dependiendo de la edad ingresada para cada
persona.
La variable que cambiara de valor ser $edad.
<?php
$edad = 33;
if ($edad > 40) {
echo "S, $edad es mayor que 40.";
} else if ($edad > 35) {
echo "S, $ edad es mayor que 35.";
} else if ($t edad > 30) {
echo "S, $ edad es mayor que 30.";
} else {
echo "No, $ edad es menor que 40, 35 y 30.";
}
?>
36
En este caso la respuesta sera: S, 33 es mayor que 30.

Si el valor de $edad se cambia a 22, la respuesta sera: No, 22 es menor que
40, 35 y 30.
NOTA:
Por otro lado est muy relacionada con el else, que sirve para continuar con el proceso
si no se cumple la condicin.
<?php
if ( $usuario != false ) {
echo "Bienvenido de nuevo $usuario";
} else {
echo Hola, si an no estas registrado puedes hacerlo ;
}
?>
2.4. DESARROLLAR ESTRUCTURAS REPETITIVAS.

Bucle: While
If else nos permita decidir si queramos ejecutar o no una instruccin en
funcin de una condicin, los bucles nos permiten utilizar una condicin para
determinar cuntas veces queremos ejecutar una instruccin.
While (condicin) {
// Instrucciones a ejecutar una y otra
//vez mientras la condicin sea cierta
}
El funcionamiento es muy parecido al del if-else, la diferencia estriba en que si
la condicin es cierta y se ejecuta la orden, la condicin vuelve a comprobarse
una y otra vez mientras siga siendo cierta. En cambio en el cambio del if-else
slo se comprueba la condicin una vez, si es cierta se ejecuta la instruccin y
se sigue con el programa.
Ejercicio 1:
$cantidad = 1;
while ($cantidad < 10) {
echo ("$cantidad ");
$cantidad++;
}
Esto traducido al castellano sera:
$cantidad = 1; $cantidad es igual a uno
while ($cantidad < 10) Mientras el valor de la variable $cantidad sea menor que 10
37

echo ($cantidad ); Escribe el valor de cantidad
$cantidad++ (suma 1 al valor que tenga $cantidad, tambin podramos haber escrito
$cantidad = $cantidad +1)
Veamos cmo funciona el script paso a paso,

$Cantidad es igual a 1
1 es menor que 10
Escribo 1 en pantalla
$cantidad = 2 (1+1)
2 es menor que 10
Escribo 2 en pantalla
$cantidad = 3 (2+1)
Si ejecutamos este script, en pantalla veramos 1 2 3 4 5 6 7 8 9

Ejercicio 2:
El siguiente ejemplo es un simple programa en PHP con el que imprimimos la
serie de nmeros del 1 al 10 en pantalla:
<?php
$x =1;
while ($x<=10)
{
echo "<p>X tiene el valor de :".$x."</p>";
$x=$x+1;
}
?>
Bucle: Do While
La sentencia Do-While es la misma que la sentencia while, la nica diferencia
es que se evala la expresin al final.
Ejercicio 1:
<?php
$c =1;
do
{
echo $c;
}
while ($c>5);
?>
38

En el ejemplo anterior el valor de $c se muestra slo si es mayor que 5, pero
con la sentencia Do-while muestra el valor de $c como uno primero y luego
comprueba la expresin o condicin.
Ejercicio 2:
<?php
$c = 6;
do
{
if ($c>5)
{
echo "Ingrese un valor menor que 5";
break;
}
}
while ($c<5);
?>
Utilice la sentencia "Break" para suspender la ejecucin del cdigo en un bucle.

Ejercicio 3:
$n=0;
$i=1;
do {
echo "$i: Esta frase se repetir $n veces";
i++;
}
while ($i<=$n)
En el ejemplo anterior $n es el nmero de veces que se repetir el bucle,

mientras que $i es la variable que controla el bucle. Esta condicin no se
cumple en un principio, sin embargo el bucle se ejecuta siempre una vez. Si en
el cdigo cambiamos el valor de la variable $n por un nmero igual o mayor
que 1, el bucle se repetir tantas veces como hayamos indicado en esa
variable.
Bucle: for
Los bucles for funcionan exactamente igual que en C. Con una sola instruccin
controlamos todo el bucle, as que para los vaguetes est muy bien.
for (valor inicial; condicion; ejecutar en cada blucle) {
// Instrucciones a ejecutar mientras la condicin sea cierta
}
39

Ejercicio 1:
for ($cantidad = 1; $cantidad <10; $i++) {
echo("$cantidad");
}
Traducido es igual a:
Cantidad es igual a 1, mientras cantidad sea menor que 10 escribe cantidad en
pantalla y despus smale 1 al valor de cantidad.
Ejercicio 2:
Elaborar un script que imprima en pantalla la tabla de multiplicar del 7.
<?php
for ($i=1 ; $i<=10 ; $i++) {
$n= $i*7;
echo "7 x $i = $n <br/>";
}
?>
Bucle: Swich/case
Nos permite ejecutar un bloque de cdigo u otro dependiendo del valor de una
variable.
Ejercicio para mostrar un mensaje dependiendo de la edad seleccionada de la
persona en un formulario.
Formulario:
<h1>Dime tu edad:</h1>
<form action="#" method="post">
<p><input type="radio" name="edad" value="infante" /> Menos de 14 aos.</p>
<p><input type="radio" name="edad" value="adolescente" /> de 15 a 20 aos</p>
<p><input type="radio" name="edad" value="joven" /> de 21 a 40 aos</p>
<p><input type="radio" name="edad" value="maduro" /> de 41 a 60 aos</p>
<p><input type="radio" name="edad" value="mayor" /> ms de 60 aos.</p>
<p><input type="submit" value="resultado" />
</form>
El cdigo PHP con la estructura switch a aplicar es el siguiente:

<?php
$tuEdad=$_POST['edad'];
switch ($tuEdad) {
case "infante":
echo "menos de 14 aos: todava eres un nio";
break;
case "adolescente":
40

echo "entre 15 y 20 aos: todava eres muy joven";
break;
case "joven":
echo "de 21 a 40 aos: eres una persona joven";
break;
case "maduro":
echo "entre 41 y 60 aos: eres una persona madura";
break;
case "mayor":
echo "ms de 60 aos: Ya eres una persona mayor";
break;
default:
echo "an no me has dicho tu edad";
}
?>
NOTA:
Existe un tipo de bucle especial para matrices llamado for each.
2.5. UTILIZAR Y ELABORAR FUNCIONES EN PHP.

Ejercicio 1:
Crear una funcin para sumar dos nmeros.
Escribimos primero un formulario en el que pedimos al usuario que nos d dos
nmeros:
<form action="#" method="post">
<p>Escribe dos nmeros:
Primer nmero: <input type="text" name="n1" /> ...
Segundo nmero: <input type="text" name="n2" />
<p><input type="submit" value="mostrar resultado" />
</form>
Despus en cdigo php escribimos primero la funcin que suma los dos
nmeros, despus pasamos los dos nmeros a la funcin y mostramos el
resultado en pantalla.
function suma($a,$b) {
$c=$a+$b;
return $c;
}
$n1=$_POST['n1'];
$n2=$_POST['n2'];
$n3=suma($n1,$n2);
echo "Sumar: $n1 + $n2 =$n3"
41

Ejercicio 2:
Crearemos una funcin con variables.
<?php
$var2="mundo.";
function ver () {
$var1="hola ";
echo "$var1 $var2";
}
ver()
?>
En el ejemplo anterior se puede ver la variable que hemos declarado dentro de

la funcin, de manera que la variable que declaramos fuera de ella es ignorada.
El resultado ser lo siguiente:
Hola
Ejercicio 3:
Elaborar las siguientes funciones:
<?
function calcular_Cuadrado($numero) {
$calculo = $numero * $numero;
return $calculo;
}
function calcular_Cubo($numero) {
$calculo = $numero * $numero * $numero;
return $calculo;
}
echo "Hola";
$raiz = calcular_Cuadrado(20);
echo "La raiz cuadrada de 20 es: ".$raiz.".";
echo "Y la raiz cubica de 20 es: ".calcular_Cubo(20)."";
?>
Como se puede ver en el ejemplo anterior, creamos dos funciones,

calcular_Cuadrado y calcular_Cubo, y luego las mostramos, podemos tanto
guardarla en una variable, o simplemente mostrarla a travs de un echo.
Ejercicio 4:
Vamos a ver un ejemplo de creacin de funciones en PHP. Se trata de hacer
una funcin que recibe un texto y lo escribe en la pgina con cada carcter
separado por "-". Es decir, si recibe "hola" debe escribir "h-o-l-a" en la pgina
web.
La manera de realizar esta funcin ser recorrer el string, caracter a caracter,
42

para imprimir cada uno de los caracteres, seguido de el signo "-".
Recorreremos el string con un bucle for, desde el carater 0 hasta el nmero de
caracteres total de la cadena.
El nmero de caracteres de una cadena se obtiene con la funcin predefinida
en PHP strlen(), que recibe el string entre parntesis y devuelve el nmero de
los caracteres que tenga.
<html>
<head>
<title>funcion 4</title>
</head>
<body>
<?
function escribe_separa($cadena){
for ($i=0;$i<strlen($cadena);$i++){
echo $cadena[$i];
if ($i<strlen($cadena)-1)
echo "-";
}
}
escribe_separa ("hola");
echo "<p>";
escribe_separa ("Texto ms largo, a ver lo que hace");
?>
</body>
</html>
La funcin que hemos creado se llama escribe_separa y recibe como

parmetro la cadena que hay que escribir con el separador "-". El bucle for nos
sirve para recorrer la cadena, desde el primer al ltimo carcter. Luego, dentro
del bucle, se imprime cada carcter separado del signo "-". El if que hay dentro
del bucle for comprueba que el actual no sea el ltimo carcter, porque en ese
caso no habra que escribir el signo "-" (queremos conseguir "h-o-l-a" y si no
estuviera el if obtendramos "h-o-l-a-").
Resultado de cmo se vera:
h-o-l-a
T-e-x-t-o- -m--s- -l-a-r-g-o-,- -a- -v-e-r- -l-o- -q-u-e- -h-a-c-e
43

FUNDAMENTO TERICO:
En informtica, un servidor es un tipo de software que realiza ciertas tareas en
nombre de los usuarios. El trmino servidor ahora tambin se utiliza para
referirse al ordenador fsico en el cual funciona ese software, una mquina
cuyo propsito es proveer datos de modo que otras mquinas puedan utilizar
esos datos.
Este uso dual puede llevar a
confusin. Por ejemplo, en el
caso de un servidor web, este
trmino podra referirse a la
mquina que almacena y maneja
los sitios web, y en este sentido
es utilizada por las compaas
que ofrecen hosting o hospedaje.
Alternativamente, el servidor web
podra referirse al software, como el servidor de http de Apache, que funciona
en la mquina y maneja la entrega de los componentes de las pginas web
como respuesta a peticiones de los navegadores de los clientes.
Los archivos para cada sitio de Internet se almacenan y se ejecutan en el
servidor. Hay muchos servidores en Internet y muchos tipos de servidores, pero
comparten la funcin comn de proporcionar el acceso a los archivos y
servicios.
Un servidor sirve informacin a los ordenadores que se conecten a l. Cuando
los usuarios se conectan a un servidor pueden acceder a programas, archivos
y otra informacin del servidor.
En la web, un servidor web es un ordenador que usa el protocolo http para
enviar pginas web al ordenador de un usuario cuando el usuario las solicita.
Los servidores web, servidores de correo y servidores de bases de datos son a
lo que tiene acceso la mayora de la gente al usar Internet.
Algunos servidores manejan solamente correo o solamente archivos, mientras
que otros hacen ms de un trabajo, ya que un mismo ordenador puede tener
diferentes programas de servidor funcionando al mismo tiempo.
Los servidores se conectan a la red mediante una interfaz que puede ser una
red verdadera o mediante conexin va lnea telefnica o digital.
44

El rol fundamental de un Servidor Web.
La principal funcin de un servidor Web es almacenar los archivos de un sitio y
emitirlos por Internet para poder ser visitado por los usuarios. Bsicamente, un
servidor Web es una gran computadora que guarda y transmite datos va
Internet. Cuando un usuario entra en una pgina de Internet su navegador se
comunica con el servidor enviando y recibiendo datos que determinan qu es
lo que ve en la pantalla. Por eso decimos que los servidores Web estn para
almacenar y transmitir datos de un sitio segn lo que pida el navegador de un
visitante.
Cmo funcionan los servidores.

Cada servidor Web y cada computadora conectada a Internet tienen asignado
una direccin de IP irrepetible que lo identifica en la red incluyendo la PC que
tens en tu casa. La direccin de IP vendra a ser como los datos del remitente
en una carta postal. Cuando llegas a un sitio Web, se enva un pedido desde tu
direccin de IP hacia la direccin IP del servidor. El servidor Web responde
mandando datos a la direccin IP que los pide. Esto es lo que pasa cada vez
que estamos navegando un sitio en Internet.
Ms del 90% de los sitios en Internet utilizan un servidor alquilado a travs de
una empresa de Web hosting.
La capacidad de un servidor depende del tipo de servidor que sea y de los
componentes que lo conforman.

El PHP
(acronimo
de PHP:
Hypertext
Preprocessor), es un lenguaje interpretado de alto
nivel embebido en pginas HTML y ejecutado en
el servidor. El PHP inicio como una modificacin a
Perl escrita por Rasmus Lerdorf a finales de 1994.
Su primer uso fue el de mantener un control sobre
45

quien visitaba su curriculum en su web.
En los siguientes tres aos, se fue
convirtiendo en lo que se conoce
como PHP/FI 2.0. Esta forma de
programar
llego
a
muchos
usuarios, pero el lenguaje no tomo
el peso actual hasta que Zeev
Surasky y Andi Gutmans le
incluyeron nuevas caractersticas
en 1997, que dio por resultado el
PHP 3.0. La versin 5 es la ms reciente y est previsto el lanzamiento de la
rama 6.
Con PHP se puede hacer cualquier cosa que podemos realizar con un script
CGI, como el procesamiento de informacin en formularios, foros de discusin,
manipulacin de cookies y pginas dinmicas.
Un sitio con pginas dinmicas es el que permite interactuar con el visitante, de
modo que cada usuario que visita la pgina vea la informacin modificada para
requisitos articulares. Las aplicaciones dinmicas para el Web son frecuentes
en los sitios comerciales (e-commerce), donde el contenido visualizado se
genera de la informacin alcanzada en una base de datos u otra fuente
externa.
Soporte para bases de datos:
Una de sus caractersticas ms potentes es su suporte
para gran cantidad de bases de datos. Entre su soporte
pueden mencionarse InterBase, mSQL, MySQL,
Oracle, Informix, PosgreSQL, entre otras. PHP tambin
ofrece la integracin con las varias bibliotecas externas,
que permiten que el desarrollador haga casi cualquier
cosa desde generar documentos en pdf hasta analizar cdigo XML.
Su sintaxis es muy similar a la del ASP, pues el cdigo PHP va incrustado
dentro del cdigo HTML.
Un ejemplo prctico de una instruccin funcional de PHP sera:
<?php print "Hola SENATINOS, buenos das.";?>
Que al ser ejecutado en el servidor nos imprimira dentro del cdigo HTML la
frase:
Hola SENATINOS, buenos das.
46
Otro ejemplo de pgina Php es el siguiente:

<html>
<body>

<?php #parte del cdigo Php ?>

</body>
</html>
PHP ofrece una solucin simple y universal para las

paginaciones dinmicas del Web de fcil
programacin. Su diseo elegante lo hace
perceptiblemente ms fcil de mantener y ponerse
al da que el cdigo comparables en otros lenguajes. Debido a su amplia
distribucin PHP est perfectamente soportado por una gran comunidad de
desarrolladores.
Cdigo abierto:
Como producto de cdigo abierto, PHP goza de la ayuda de
un gran grupo de programadores, permitiendo que los fallos
de funcionamiento se encuentren y se reparan rpidamente.
El cdigo se pone al da continuamente con mejoras y
extensiones de lenguaje para ampliar las capacidades de
PHP. Es utilizado en aplicaciones Web-relacionadas por
algunas de las organizaciones ms prominentes tales como Mitsubishi, Redhat,
Der Spiegel, MP3-Lycos, Ericsson y NASA.
PHP es la opcin natural para los programadores en mquinas con Linux que
ejecutan servidores web con Apache, pero funciona igualmente bien en
cualquier otra plataforma de UNIX o de Windows, con el software de Netscape
o del web server de Microsoft. PHP tambin utiliza las sesiones de HTTP,
conectividad de Java, expresiones regulares, LDAP, SNMP, IMAP, protocolos
de COM (bajo Windows).
Para trabajar con capacidades
PHP, se puede conseguir mayor
informacin en PHP.net, sitio
encargado de mantener al da a
todos los desarrolladores con las
ltimas descargas relacionadas
con el lenguaje y documentacin.
47

Qu significa sintaxis PHP?
Sintaxis se refiere a las formas y estructura que debe de tener un lenguaje para
su interpretacin. Formado por un conjunto de reglas bsicas que debemos de
tener en cuenta a la hora de escribir. Un ejemplo podemos verlo a la hora de
comunicarnos con otra persona, debemos de tener una base que nos haga
explicarnos de una forma concreta y as conseguir que el receptor nos
entienda.
Mostrar texto por pantalla.
Para mostrar texto por pantalla usaremos la funcin echo o print. Si has
programado en C por ejemplo, seguramente te suenen estas funciones. Con
ella podremos imprimir variables, datos de formularios, informacin de bases
de datos, en general todo lo que ver el usuario.
<?php
echo Hola Senatino;
?>
Separar instrucciones.
Como vemos en el ejemplo anterior, cuando finaliza la instruccin o la funcin
aadimos un punto y coma al final de la lnea para separar las instrucciones y
que el servidor pueda ejecutar todo correctamente. Es obligatorio su uso
Comentarios.
Si queremos explicar una funcin, marcar un error o avisar de tu ltima
actualizacin podemos usar comentarios. Tenemos varias formas de comentar,
ya sea en una lnea o en varias.
<?php
// Esto es un comentario de una linea
echo "Hello world";
/* Esto es un
comentario de
varias lneas */
?>
NOTAS:
a. Proceso.
Las paginas PHP son interpretadas por parte del servidor y como resultado se
devuelve al cliente codigo HTML que es lo unico que sabe interpretar el
navegador, es decir las paginas PHP dependen del servidor y no del navegador
48

dado que este solo recive codigo HTML.
Cliente
Servidor
Servidor
Servidor
Cliente
Solicita una
Pgina PHP
Recibe la
peticin
Procesa la
Pagina PHP
Devuelve al
Cliente HTML
Visualiza la Pagina
el en Browser
b. Observaciones.
Las etiquetas que indican la presencia del cdigo Php son "<?php" y "?>", sin
embargo es posible configurar Php para que reconozca incluso "<?" y "?>" que
son ms simples de escribir.
Las instrucciones en el cdigo Php tiene que estar entre las etiquetas "/*" y "*/".
Otro tipo de comentario se da poniendo la etiqueta "#" al comienzo de una
lnea. La lnea entera no se pondr en marcha.
Las instrucciones Php para devolver el cdigo Html son:
PRINT("");
echo("");
La instruccin para la concatenacin de cadenas es el punto (.).

Por ejemplo, la instruccin
echo("Hola"." "."Alberto")
produce la cadena
"Hola Alberto"
Cada instruccin pura en Php tiene que acabar con el punto y coma (;)
Para que se puedan ejecutar los archivos stos tienen que ser extensin ".php"
(a no ser que el servidor de la red est configurado de forma diferente).
Cada archivo de nuestro sitio, que incluye instrucciones Php, tiene que tener
esta extensin.

Operadores condicionales en PHP
Los operadores condicionales nos permiten trabajar en la condicin de alguna
estructura del PHP. Se pueden incluir por ejemplo, en la estructura if-else o los
bucles para especificar como se debe cumplir dicha condicin.
49

Operador
Funcin
==
Comprueba si dos cadenas son indnticas
!=
Comprueba si dos cadenas son diferentes
<
Comprueba si el valor de la izquierda es menor que el de la derecha
>
Comprueba si el valor de la izquierda es mayor que el de la derecha
<=
Comprueba si el valor de la izquierda es menor o igual que el de la

derecha
>=
Comprueba si el valor de la izquierda es mayor o igual que el de la

derecha
Estos operadores son fciles de utilizar, pues sus funciones son de matemtica
simple. El operador == indica que dos variables son identicas, el != indica que
son completamente contrarios. Por otro lado, el < indica menor que, <= menor
o igual que, > mayor que y >= mayor o igual que. Veremos tan solo un ejemplo
de este tipo para ver su funcionamiento.
Ejemplo PHP:
<?php
$cadena = 24;
if( $cadena <= 88 ) {
// Si la variable $cadena es mayor o igual a 88 se ejecutar "verdadero"
echo "Correcto";
} else {
// Si la variable $cadena es menor a 88 se ejecutar "falso"
echo "Todo mal";
}
?>
Resultado PHP:
Correcto
Operadores ms utilizados en PHP.
Operadores aritmticos.
+ Suma dos valores
- Resta dos valores (o pasa a negativo un valor)
* Multiplica dos valores
/ Divide dos valores
50

% Resto de dividir dos valores
++ Incremento en una unidad
Decremento en una unidad
Operadores de asignacin.
= Asigna a la parte derecha el valor izquierdo
+= Realiza la suma de la derecha con la izquierda y la asigna a la derecha
-= Realiza la resta de la derecha con la izquierda y la asigna a la derecha
*= Realiza la multiplicacin de la derecha con la izquierda y la asigna a la
derecha
/= Realiza la divisin de la derecha con la izquierda y la asigna a la derecha
%= Se obtiene el resto y se asigna
.= Concatena el valor de la izquierda con la derecha y lo asigna a la derecha
Operadores lgicos.
! Operador NO o negacin. Si era true pasa a false y viceversa
and Operador Y, si ambos son verdaderos vale verdadero
or Operador O, vale verdadero si alguno de los dos es verdadero
xor Verdadero si alguno de los dos es true pero nunca ambos
&& True si ambos lo son
|| True si alguno lo es
Operadores condicionales.
== Comprueba si dos nmeros son iguales
!= Comprueba si dos nmeros son distintos
> Mayor que, devuelve true en caso afirmativo
< Menor que, devuelve true en caso afirmativo
>= Mayor o igual
<= Menor o igual
En PHP podemos combinar los operadores con las estructuras condicionales,
vamos a ver su funcionamiento con un ejercicio bsico que comprueba que una
variable es mayor o menor que otra:
Como vern se utiliz el operador condicional menor que para comprobar que
una variable era menor que otra. Tambin se puede hacer lo siguiente:
51
Esta vez se hizo una combinacin de operadores, se utiliz el operador and

que significa y, es decir, si $una_variable es menor o igual a 10 y
$otra_variable es menor o igual a 25 entonces muestra un mensaje de que la
condicin se cumple, de lo contrario si el if hubiera sido distinto mostraba otro
mensaje.
Existen tres tipos bsicos, las simples, las dobles y las mltiples.
Simples:
Las estructuras condicionales simples se les conocen como Tomas de
decisin. Estas tomas de decisin tienen la siguiente forma:
Dobles:
Las estructuras condicionales dobles permiten elegir entre dos opciones o
alternativas posibles en funcin del cumplimiento o no de una determinada
condicin. Se representa de la siguiente forma:
Donde:
Si: Indica el comando de comparacin.
52

Condicin: Indica la condicin a evaluar.
Entonces: Precede a las acciones a realizar cuando se cumple la condicin.
Instruccin(es): Son las acciones a realizar cuando se cumple o no la
condicin.
Si no: Precede a las acciones a realizar cuando no se cumple la condicin.
Dependiendo de si la comparacin es cierta o falsa, se pueden realizar una o
ms acciones.
Mltiples:
Las estructuras de comparacin mltiples,
son tomas de decisin especializada que
permiten comparar una variable contra
distinta posibles resultados, ejecutando para
cada caso una serie de instrucciones
especficas. La forma comn es la siguiente:

Son estructuras basadas en reiterar una o un grupo de instrucciones "n" veces
y dependen de una variable de control del ciclo.
PHP propone varios tipos de estructuras repetitivas o ciclos, cada uno con
caractersticas especficas distintas.
Estructura while.
Esta instruccin ejecuta un bloque de programa mientras se cumpla una cierta
condicin.
Si la condicin es verdadera, ingresa en el ciclo del while, y ejecuta la porcin
de programa incluida.
Cuando deja de cumplirse la condicin, sale del ciclo y contina ejecutndose
el resto del programa.
Si por el contrario, la condicin no se cumple de entrada, las lneas en el
interior del while no se ejecutarn ni una vez.
El formato es el siguiente:
while (Condicin){
Instruccin_1;
:
53

Instruccin_N;
}
Ejemplo Prctico:
Imprimir los mltiplos de 5 comenzando en el valor 100 y terminando en el valor
500.
<Html>
<Title> Multiplos de 5 </Title>
<Body>
<H2>
Mltiplos de 4 de 100 a 500
<Hr>
<?PHP
$m=100; // Valor Inicial
while ($m<=500)
{
echo "$m - ";
$m = $m+5;
}
?>
</Body>
</Html>
Resultado:
Estructura do..while
Es un ciclo repetitivo en el cual la condicin se evala al final del mismo. Su
formato es el siguiente:
do{
instruccin_1;
instruccin_2;
:
instruccin_n;
}while (condicin);
En este caso se observa que las instrucciones dentro del ciclo se procesan al
menos una vez, ya sea que la condicin sea falsa o verdadera. Por lo tanto, en
este ciclo, las instrucciones se procesarn de uno a n veces.
Ejemplo Prctico:
Mostrar en pantalla todos los nmeros divisibles por 7 entre 100 y 500.
54

<?PHP
$n=100;
do{
if ($n % 7 == 0){
echo "$n - ";
}
$n++;
}while ($n<500);
?>
Estructura for
Es uno de los ciclos ms prctico para determinadas situaciones. Se utiliza
generalmente cuando se tiene bien especificada la cantidad de repeticiones a
realizar. Se diferencia de los anteriores, en que se debe incluir en l, una
variable, la cual se incrementa o decremento en forma automtica.
Su formato es el siguiente:
for ($variable=ValorInicial; Condicion; Incremento){
Intruccin_1;
:
Intruccin_n;
}
Esta instruccin for consta de tres parmetros, que son:

Inicializacin de la variable que se utilizar en la condicin.
Condicin que se debe cumplir para permanecer en el ciclo.
Incremento de la variable contador.
Ejemplo Prctico:
Desarrollar una tabla que contenga el nmero, su cuadrado y su cubo.
<Html>
<Title> Tabla de Cuadrados y Cubos </Title>
<Body>
<?PHP
echo "<Table align=Center Border=2 width=60%>";
echo"<Tr>";
echo"<th>"; echo " Nmero "; echo"</Th>";
echo"<th>"; echo " Cuadrado "; echo"</Th>";
echo"<th>"; echo " Cubo ";
echo"</Th>";
echo"</Tr>";
for ($i=1; $i<=15; $i++)
{
$cuadrado= $i * $i;
55

$cubo = $i * $i * $i;
echo"<Tr>";
echo"<td align=Center>"; echo ($i);
echo"<td align=Center>"; echo ($cuadrado);
echo"<td align=Center>"; echo ($cubo);
echo"</Tr>";
}
echo "</Table>";
?>
Resultado:

En PHP se pueden definir funciones, de manera que no haga falta escribir el
mismo cdigo varias veces. Las funciones deben definirse antes de utilizarlas
(aunque no sea en el mismo fragmento de cdigo php). Las funciones pueden
no tener argumento o tener argumentos por valor o por referencia.
Los nombres de las funciones siguen las mismas reglas de los identificadores
de PHP, es decir, deben comenzar por una letra o un guin bajo (_) y el resto
de caracteres pueden ser letras, nmeros o guiones bajos (se pueden utilizar
caracteres no ingleses como acentos, ees, etc), pero los nombres de
funciones no distinguen entre maysculas o minsculas.
La gua de estilo PEAR para PHP recomienda que los nombres de las
funciones sigan el estilo camelCase (es decir, sin espacios ni guiones, con la
primera palabra en minsculas y el resto con la primera letra en maysculas).
Ejemplo de funcin y de su uso:
<?php
// ESTA ES LA DEFINICIN DE LA FUNCIN calculaHipotenusa
function calculaHipotenusa($arg1, $arg2)
{
$hipotenusa = sqrt($arg1 * $arg1 + $arg2 * $arg2);
return $hipotenusa;
}
56

// ESTO ES UN EJEMPLO DE USO DE LA FUNCIN calculaHipotenusa
$cateto1 = 12;
$cateto2 = 16;
$hipotenusa = calculaHipotenusa($cateto1, $cateto2);
print "<p>El tringulo de lados $cateto1, $cateto2 y $hipotenusa es rectngulo.</p>\n";
?>
Resultado:
El tringulo de lados 12, 16 y 20 es rectngulo.
PHP no distingue entre maysculas y minsculas en los nombres de las
funciones.
<?php
// ESTA ES LA DEFINICIN DE LA FUNCIN calculaHipotenusa
function calculaHipotenusa($arg1, $arg2)
{
$hipotenusa = sqrt($arg1*$arg1+$arg2*$arg2);
return $hipotenusa;
}
// ESTO ES UN EJEMPLO DE USO DE LA FUNCIN calculaHipotenusa
$cateto1 = 12;
$cateto2 = 16;
$hipotenusa = CALCULAHIPOTENUSA($cateto1, $cateto2);
print "<p>El tringulo de lados $cateto1, $cateto2 y $hipotenusa es rectngulo.</p>\n";
?>
La instruccin RETURN.
Cuando invocamos una funcin, la ejecucin del programa pasa a ejecutar las
lneas de cdigo que contenga la funcin, y una vez terminado, el programa
continua su ejecucin desde el punto en que fu llamada la funcin.
Existe una manera de terminar la ejecucin de la funcin aunque an haya
cdigo por ejecutar, mediante el u haya cdigo por ejecutar, mediante el uso de
la instrucin return terminamos la ejecucin del cdigo de una funcin y
devolvemos un valor. Podemos tener varios return en nuestra funcin, pero por
lo general, cuantos ms return tengamos menos reutilizable ser nuestra
funcin.
<?php
function mayor ($x, $y){
$msg = "";
57

if ($x > $y) {
$msg = $x." es mayor que".$y;
} else {
$msg = $y." es mayor que".$x;
}
return $msg;
}
?>
Include y require.
La clusula require("archivo"); se sustituye en el cdigo antes de que este se
ejecute por el contenido del archivo, que puede ser un archivo local o una URL.
Esta sustitucin se realiza una sola vez, mientras se est preprocesando el
contenido del archivo .php y antes de ejecutarlo.
La clusula include("archivo"); tambin se sustituye por el contenido de archivo,
pero en lugar de realizarse una nica vez durante el preproceso del archivo, se
realiza durante la ejecucin, cada vez que el flujo del programa llega a esa
lnea.
Estas 2 clusulas son de gran utilidad a la hora de necesitar unas mismas
lneas de cdigo en varios archivos (por ejemplo, una funcin que valide
ciertos datos, o que muestre la cabecera y pie de las pginas). En lugar de
copiar ese cdigo en todos los archivos que lo necesiten, se pone en un
archivo que es "incluido" por el resto.
Diferencias.
Aunque las clausulas include y require parecen actuar de la misma manera en
realidad no es as. Estas son 2 grandes diferencias que poseen.
Optimizacin de los accesos a disco: Imagnese un cdigo en el que
dependiendo de una serie de condiciones, se deba incluir o no otros archivos.
Con require se cargaran TODOS los archivos SIEMPRE. Con include,
nicamente aquellos que se vayan a utilizar.
Flexibilidad. Con include podemos acceder a archivos cuyo nombre tenemos
en una variable que podemos ir cambiando en tiempo de ejecucin, mientras
que con require siempre se accede al mismo archivo.
Tambin existen las funciones include_once y require_once, que nos aseguran
que un determinado archivo slo ser procesado una vez, en caso de que en
sucesivos includes vuelva a aparecer.
58

Bibliotecas.
Las bibliotecas son archivos php que se pueden incluir en cualquier otro
archivo php. Las bibliotecas se suelen utilizar para centralizar fragmentos de
cdigo que se utilizan en varias pginas. De esa manera, si se quiere hacer
alguna modificacin, no es necesario hacer el cambio en todos las pginas si
no nicamente en la biblioteca.
Por ejemplo, si definimos en la biblioteca una funcin que imprima la cabecera
de las pginas, desde cualquier pgina se puede incluir la biblioteca mediante
la construccin include y llamar a la funcin como si se hubiera definido en la
propia pgina:
Ejercicio:
Elaborar el archivo milibreria.php
<?php
function cabecera($titulo)
{
print "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
<title>$titulo</title>
<link href=\"estilo.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>
<body>
<h1>$titulo</h1>\n";
}
?>
Crear el archivo ejerciciolibreria.php

<?php
include "milibreria.php";
cabecera("Pgina de ejemplo");
print "<p>Esta pgina es vlida</p>";
?>
</body>
</html>
Se pueden crear todas las bibliotecas que se necesiten e incluir cualquier

nmero de bibliotecas en cualquier punto de un programa. Las bibliotecas
pueden a su vez incluir otras bibliotecas.
Normalmente, las bibliotecas suelen contener funciones, definiciones de
59

constantes o inicializacin de variables, pero en realidad pueden incluir
cualquier tipo de cdigo php, que se ejecutar en la posicin en la que se
incluya la biblioteca.
En el ejemplo siguiente, las bibliotecas modifican variables, lo que afecta a su
valor.
biblioteca_1.php
<?php
$i = 1;
?>
biblioteca_2.php
<?php
$i = $i + 10;
?>
Programa:
<?php
include "biblioteca_1.php";
print "<p>Ahora \$i vale $i</p>\n";
?>
Resultado:
Ahora $i vale 1
Ahora $i vale 11
Ahora $i vale 21
60

1. Instale un servidor php en su computadora local.
2. Explique la diferencia entra las distintas estructuras condicionales que
existen.
3. Elabore una pgina php para que muestra la tabla de multiplicar de un
nmero en orden descendente del 12 al 1. Cuando se ingrese un numero
negativo o cero el programa de indicar mediante los mensajes Es negativo
o Es cero para el caso que corresponda.
4. Cree una funcin que permita ingresar el subtotal de una compra, el tipo de
moneda (Soles o Dolares) y que devuelva como resultado el total mas el igv,
el tipo de moneda, todo en soles.
61

TAREA 03: IMPLEMENTAR FORMULARIOS EN LAS PGINAS WEB.
Trabajar con los distintos controles en un formulario.
Manipular el comportamiento de los controles de un formulario.
Validar los formularios web.
Enviar y recibir informacin de los formularios.
.
El xito del hombre radica en el grado de humildad de espritu
que tenga.. Annimo.

Acceso a internet.
3.1. TRABAJAR CON

FORMULARIO.
LOS
DISTINTOS
CONTROLES
EN
UN
PASOS PARA INSERTAR UN CAMPO DE TEXTO EN UNA PGINA PHP.

Los controles deben de estar dentro de un formulario.
PASO 1: Dele clic en men

Insertar, luego seleccione la
opcin formulario e inserte
el formulario tal como lo
muestra
la
siguiente
imagen:
PASO 2: Ubique el cursor dentro del

formulario, dele clic al men Insertar, luego
formulario y por ultimo seleccione campo de
texto.
62

PASO 3: En la siguiente ventana indicaremos
los atributos bsicos del campo de texto como por
ejemplo el id y la Etiqueta, luego dele clic en el
botn Aceptar.
Resultado en diseo:
Resultado en el navegador:
Vista cdigo:
Verifique que el cdigo se ha generado de forma automtica.
PASOS PARA INSERTAR UN CONTROL

LISTA / MENU
PASO 1: Del ejemplo anterior, ubicamos el
cursor debajo del campo de texto nombre
y seleccionamos la opcin Lista men tal
como lo muestra la siguiente imagen:
PASO 2: Ingrese los atributos y dele

clic en el botn Aceptar.
63

PASO 3: Seleccione el control lista/Men en la vista
diseo y dele clic al botn Valores de la lista del panel
inferior de propiedades.
PASO 4: En la siguiente ventana ingrese los

valores y las etiquetas que tendr cada valor
de la lista.
Utilice el botn + que se encuentra en la
parte superior izquierda de la ventana para
agregar ms elementos.
PASO 5: En la vista cdigo puede ingresar el parmetro selected al elemento
que desea que aparezca seleccionado por defecto.
Resultado en diseo:
Vista cdigo:
Verifique que el cdigo generado de forma automtica:
64
PASOS PARA INSERTAR UN CONTROL CAMPO DE TEXTO DEL TIPO

CONTRASEA.
PASO 1: Ingrese un control campo de texto llamado clave con su respectiva
etiqueta, tal como lo muestra la siguiente imagen:
PASO 2: Seleccione el
campo de texto y
active
la
opcin
Contrasea del panel
de propiedades.
Adicionalmente puede agregar los atributos para la cantidad mxima de
caracteres (Car. mx) que se puede ingresar y el tamao (Ancho car) de
cuantos caracteres se pueden visualizar, tal como lo muestra la imagen
siguiente:
65
En este ejemplo se digito la siguiente clave: 12345, vemos que el campo de

texto est protegido para que no se pueda visualizar el texto ingresado.
Adems solo se pueden ingresar un mximo de 5 caracteres.
Vista cdigo: Verifique que el cdigo generado de forma automtica:
Nos podemos dar cuenta que al trabajar en modo diseo el programa general
el cdigo de forma automtica.
3.2. MANIPULAR EL COMPORTAMIENTO DE LOS CONTROLES DE UN

FORMULARIO.
FORMAS DE USAR JAVASCRIPT EN DOCUMENTOS HTML.

Definir javascript en la misma pgina.
66

La primera forma de usar JavaScript dentro de una pgina web es embebiendo
directamente el cdigo JavaScript dentro del cdigo HTML.
Escriba el siguiente cdigo y gurdelo con el nombre primer_js.html en su
carpeta del servidor local.
<html>
<body>
<script type="text/javascript">
document.write("Hola programador!!!")
</script>
</body>
</html>
El resultado en el navegador seria el siguiente:
Como podemos observar, el cdigo JavaScript debe ir encerrado entre las

siguientes marcas:
<script language="javascript">
</script>
La segunda forma para usar JavaScript es definir JavaScript en un archivo
externo. Los archivos de JavaScript son archivos de texto guardados con la
extensin .js.
DEFINIR JAVASCRIPT EN UN ARCHIVO EXTERNO.

PASO 1: Crear un nuevo archivo del tipo Javascript.
67

PASO 2: Ingresar el cdigo en la nueva pgina creada.
alert('Mensaje JavaScript');
PASO 3: Crear una nueva pgina con el nombre javascript1.html la cual har
referencia al archivo mensaje.js y tendr el cdigo tal como lo muestra la
siguiente imagen:
PASO 4: Ejecutar la pgina

javascript1.html.
Observe que al ejecutarse la pgina javascript1.js ejecuta el archivo mensaje.js
el cual tiene el cdigo para emitir una alerta en el navegador.
Luego de aceptar el mensaje de alerta se mostrar en pantalla el siguiente
mensaje que fue definido entre las etiquetas body de la pagina principal
javascript1.html.
NOTA:
*El archivo mensaje.js debe de estar almacenado en la misma ruta que el archivo
javascrip1.html, si estuviera en otro lado habra que indicar la ruta en el src del archivo
que lo invoca.
*El cdigo javascript puede ejecutarse directamente en una pgina con extensin
PHP.
68

Operadores Aritmticos.
Los operadores aritmticos toman los valores numricos (literales o variables)
como sus operando y devuelve un solo valor numrico. Los operadores
aritmticos normales son:
Operador
+
*
/
%
Nombre
Ejemplo
5+6
7-9
6*3
4/8
7%2
++
Suma
Substraccin
Multiplicacin
Divisin
Mdulo: el resto
despus de la
divisin
Incremento.
--
Decremento.
a--
Invierte el signo de
un operando.
-a
a++
Descripcin
Suma dos nmeros
Resta dos nmeros
Multiplica dos nmeros
Divide dos nmeros
Devuelve el resto de dividir
ambos nmeros, en este ejemplo
el resultado es 1
Suma 1 al contenido de
una variable.
Resta 1 al contenido de una
variable.
Invierte el signo de un operando.
Elaborar cdigo JavaScript utilizando operadores

aritmticos.
PASO1:
Cree un archivo
con
el nombre
operadores1.php e ingrese el siguiente cdigo:
PASO2:
Ejecute el archivo en su servidor
local y tendr el siguiente
resultado:
Pasos para crear un archivo que cargue datos en la misma pgina

utilizando una funcion ajax.
El ejemplo va a consistir en un link dentro de la pgina principal que al hacer
click sobre el mostrara una tabla sin que la pgina se recargue. La tabla que va
a mostrar se encuentra en otro archivo.
69

PASO 1: Crear un archivo con el nombre ajax1.php el cual tendr el siguiente
cdigo.
<html lang="en">
<head>
<title>Ejemplo de ajax</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"type="text/javascript">
</script>
<script>
function cargar(){
var url="tabla.php"
$.ajax({
type: "POST",
url:url,
data:{},
success: function(datos){
$('#tabla').html(datos);
}
});
}
function borrar(){
var d = document.getElementById("tabla");
while (d.hasChildNodes())
d.removeChild(d.firstChild);
document.getElementById("cerrar").style.visibility="hidden";
}
</script>
</head>
<body>
<p>
Ejemplo utilizando ajax: </p>

<p>Da click sobre el link para cargar una tabla sin cambiar de pagina. </p>
<div>
<a href="#" onClick="cargar();">Ver tabla de alumnos</a>
70

<a href="#" onclick="borrar();">Borrar tabla</a>
</div>
<div id="tabla">
</div>
</body></html>
Modo diseo del cdigo anterior:
NOTA: Recuerden que para que todo funcione tenemos que mandar llamar la
librera jquery, en el ejemplo anterior se est llamando desde una librera
alojada en un servidor.
PASO 2:
Crear un archivo con el nombre tabla.php el cual tendr el siguiente cdigo.
<?php
$nombres=array("hugo","marlene", "july", "melisa");
$tabla="<table style='text-align:center;margin-top:10px;' border='1'>
<tr>
<td>No. de Alumno</td>
<td>Nombre del Alumno</td>
</tr> ";
$num=1;
foreach($nombres as $td)
{
$tabla.="<tr>
<td>$num</td>
<td>$td</td>
</tr>";
$num++;
}
$tabla.='</table>';
71

echo $tabla;
?>
RESULTADO:
Al darle clic en el vnculo ver tabla de
alumnos automticamente carga el
resultado de la pgina tabla php en la
misma pgina ajax1.php sin recargarla,
el resultado lo posiciona dentro de la
capa con el id "tabla".
Al darle clic en el vnculo Borrar tabla debe de desaparecer.
Ejercicio de clculo con PHP, Ajax y jQuery.
Descrito de una manera muy resumida, AJAX es una tecnologa que nos
permite realizar acciones en una pgina web que necesiten respuesta del
servidor sin recargarla. Con ello conseguimos que nuestra web sea dinmica y
por tanto obtener un diseo ms atractivo.
El ejercicio se compone de dos archivos: un archivo donde mostraremos los
formularios con datos de entrada y otro con el archivo de procesamiento.
PASO 1:
Elaborar un archivo con el nombre ajax2.php e ingresar el siguiente cdigo:
<html>
<head>
<title>Ejercicio AJAX, PHP Y JQUERY</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
function realizaProceso(valorCaja1, valorCaja2){
var parametros = {
"valorCaja1" : valorCaja1,
"valorCaja2" : valorCaja2
};
$.ajax({
data: parametros,
url: 'ejemplo_ajax_proceso.php',
type: 'post',
72

beforeSend: function () {
$("#resultado").html("Procesando, espere por favor...");
},
success: function (response) {
$("#resultado").html(response);
}
});
}
</script>
</head>
<body>
Introduce valor 1
<input type="text" name="caja_texto" id="valor1" value="0"/>
Introduce valor 2
<input type="text" name="caja_texto" id="valor2" value="0"/>
Realiza suma
<input type="button" href="javascript:;" onclick="realizaProceso($('#valor1').val(),
$('#valor2').val());return false;" value="Calcula"/>
<br/>
Resultado: <span id="resultado">0</span>
</body>
</html>
OBSERVACIN:
En este cdigo, utilizamos los id de las cajas de texto para pasarle sus valores
a la funcin realizaProceso. En esta funcin recogemos los valores de entrada
en un array parmetros y enviamos mediante AJAX especificando el parmetro
data (datos que mandamos), url (direccin del archivo de proceso) y type
(POST o GET).
Por ltimo vemos que tenemos dos eventos: beforeSend y success donde
podemos indicar la accin a realizar mientras se procesan los datos y tras
terminar de procesarlos (en este caso jugar con el contenido HTML del id
resultado).
Vista diseo:
73
NOTA:
Tenga cuidado al escribir la ruta a la librera jQuery, debe de estar en la misma
raz donde se encuentra el formulario, caso contrario debe de indicar la ruta. Se
puede descargar desde la siguiente URL:
http://jquery.com/download/
Existen varios versiones del archivo jquery.
PASO 2:
Creamos el archivo ejemplo_ajax_proceso.php, el cual se encarga de sumar
los datos recibidos por POST. Su cdigo es el siguiente:
<?php
$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2'];
echo $resultado;
?>
PASO 3:
Ejecutar el archivo ajax2.php en el servidor local.
Al cargar la pgina podemos ver que los campos de texto tiene el valor 0 por
defecto, as como el resultado.
74
Al ingresar valores en los campos 1 y 2 y darle clic en el botn Calcula,

podemos ver como el resultado aparece en la etiqueta inferior despus de una
carga rpida.
Al darle clic:
Segundos despus:
3.3. VALIDAR LOS FORMULARIOS WEB.

PASOS PARA CREAR UN FORMULARIO VALIDADO.
El formulario consta de 3 archivos:
1. contacto.html Pgina HTML que vern las personas que visiten el
formulario en tu sitio web.
2. validar.js JavaScript para validar que los campos de nuestro formulario no
estn vacis
3. contacto.php El script PHP que recoge las variables de nuestro formulario
y enva el E-Mail de contacto.
PASO 1:
Creamos un archivo html con el nombre contacto.html y diseamos el
siguiente formulario.
75
Modo diseo
En ejecucin
CODIGO FUENTE DEL FORMULARIO ANTERIOR:

<html>
<head>
<title>Formulario de Contacto Validado</title>

<script type="text/javascript" src="validar.js"></script>

</head>
<body>

<div align="center">
<form method="post" action="contacto.php" onsubmit="return Validar(this);">
<label for="name">Nombre Completo:<br>
<input id="name" name="name" type="text" size="27"> </label><br><br>
<label for="email">Correo Electrnico:<br>
<input id="email" name="email" type="text" size="27"> </label><br><br>
<label for="subject">Asunto:<br>
<input id="subject" name="subject" type="text" size="27">
</label><br><br>
<label for="message">Mensaje: <br>
<textarea name="message" id="message" rows="5" cols="30"></textarea>
</label><br><br>
<input type="submit" name="submit" value="Enviar" /><br>
</form>
76

</div>

</body>
</html>
PASO 2:
Creamos un archivo Javascript con el nombre validar.js e ingresamos el
siguiente cdigo.
// JavaScript Document
//Funcin que verifica campos del formulario vacos
function Validar(f) {
if (f.name.value=="") {
alert("Por favor escriba su Nombre completo");
f.name.focus();
return false;
}
if (f.email.value=="") {
alert("Por favor escriba su direcci\xF3n de correo electr\xF3nico");
f.email.focus();
return false;
}
if (f.subject.value=="") {
alert("Por favor escriba el asunto de su Mensaje");
f.subject.focus();
return false;
}
if (f.message.value=="") {
alert("Por favor escriba su Mensaje.");
f.message.focus();
return false;
}
}
77

PASO 3:
Ejecute el formulario html en el servidor local
y dele clic al botn enviar sin ingresar ningn
dato, vera que aparecen las alertas de la
validacin.
3.4. ENVIAR Y RECIBIR INFORMACIN DE LOS FORMULARIOS.
UTILIZANDO METODO POST.

Crearemos un formulario que permita enviar los valores introducidos en un
formulario a una pgina PHP.
PASO 1: Creamos un archivo con el nombre metodopost.php e ingresamos el
siguiente cdigo.
NOTA:
Se muestra solo parte del cdigo de la pgina entre las etiquetas
<BODY></BODY>.
<body>
<form method="POST">
<label for="nombre">Nombre: </label>
<input name="nombre" type="text" />
<label for="apellido">Apellidos: </label>

<input name="apellido" type="text" />
<label for="edad">Edad: </label>

<input name="edad" type="text" />
<input name="enviar" type="submit" value="Enviar" />

</form>
78

<?php
echo $_GET['nombre']."<br>";
echo $_GET['apellido']."<br>";
echo $_GET['edad'];
?>
</body>
PASO 2: Ejecutamos el archivo en nuestro servidor local y al Ingresar la

informacin en los campos de texto y presionar el botn enviar tendramos el
siguiente resultado:
UTILIZANDO METODO GET

PASO 1: Creamos un archivo con el nombre metodoget.php e ingresamos el
siguiente cdigo.
<body>
<form method="GET">
<label for="nombre">Nombre: </label>
<input name="nombre" type="text" />
<label for="apellido">Apellidos: </label>

<input name="apellido" type="text" />
<label for="edad">Edad: </label>
<input name="edad" type="text" />
<input name="enviar" type="submit" value="Enviar" />
79

</form>
<?php
echo $_GET['nombre']."<br>";
echo $_GET['apellido']."<br>";
echo $_GET['edad'];
?>
</body>
*El diseo es igual al ejemplo anterior.

El resultado sera el siguiente:
Si se puede dar cuenta en la URL se muestran los datos ingresando, ya que

utilizando el mtodo GET esta es la va por la cual viajan las variables.
FUNDAMENTO TERICO:
Trabajar con los distintos controles en un formulario.
Se denomina formulario al escrito o libro (en ambos casos puede ser tanto
virtual como impreso) que contiene frmulas referentes a una cierta ciencia o
disciplina. Las frmulas son modelos de resolucin, que se valen de palabras,
o nmeros y smbolos matemticos. Por ejemplo: un formulario de ecuaciones
matemticas.
En el campo laboral, los formularios son muy utilizados en el anlisis de la
contratacin de un nuevo empleado, para saber datos
generales del mismo, como su nombre y apellido, edad,
sexo, y condiciones de salud, y datos que influyan en
mayor medida en el trabajo que se realizar, como
experiencias laborales anteriores, conocimiento
de
otros idiomas, y distintas aptitudes que podran definir si
la persona es apta para el empleo.
Un formulario es tambin, un documento, impreso o en
un soporte virtual, que contiene campos en blanco
(casilleros) para completar determinada informacin o
elegir opciones dadas, con el fin de trasmitir la misma
80

de una a otra persona, con un objetivo especfico. Los formularios forman parte
de nuestra vida cotidiana, cuando vamos al mdico, cuando enviamos un mail
a una pgina web, cuando contestamos una encuesta, y en innumerables
casos ms, estamos rellenando formularios.
Los formularios web son aquellos presentes en Internet, entre ellos los
formularios de contacto, tiles para la comunicacin con el o los
administradores de un sitio web, con ciertos fines, como comentarios
personales, sugerencias, propuestas financieras, entre otros. Generalmente
estos formularios poseen pocos campos a completar, como el nombre, la
direccin de e-mail y el mensaje propiamente dicho; pues son los datos
necesarios para que una vez recibido el e-mail, pueda ser contestado.
Generalmente en estos formularios aparece al final una imagen con nmeros o
letras, para que la persona los copie en el campo correspondiente, y as evitar
el Spam o correo basura, en el cual el formulario es completado
automticamente por un sistema, y contiene usualmente propaganda de un
producto o servicio que no ha sido solicitada, o cadenas de e-mails de
remitentes desconocidos.
Cuando hablamos de la accesibilidad de los formularios, generalmente nos
referimos a que sean accesibles para las personas que utilizan lectores de
pantalla. Las personas con otros tipos de la discapacidad normalmente resultan
menos afectadas por los formularios defectuosos. Cabe sealar, sin embargo,
que todos nos beneficiamos de un formulario bien organizado y fcil de utilizar,
especialmente aquellos con discapacidades cognitivas.
NOTA:
El formulario, junto con la lnea de comandos, fue uno de los primeros estilos de
interaccin que se usaron para comunicarse con los ordenadores y ha perdurado
hasta nuestros das. Pero es curioso que siendo tan utilizados nos encontremos tantas
veces con malos diseos.
Elementos de formulario
Los elementos de formulario como botones y cuadros de texto tambin se
denominan "campos de formulario" y "controles de formulario". La mayora de
controles se crean con la etiqueta <input>, por lo que su definicin formal y su
lista de atributos son muy extensas:
81
Etiqueta
Atributos
comunes
Atributos
propios
<input>
bsicos, internacionalizacin, eventos y foco
type = "text | password | checkbox | radio | submit | reset | file |

hidden | image | button" - Indica el tipo de control que se incluye en el
formulario
name = "texto" - Asigna un nombre al control (es imprescindible para

que el servidor pueda procesar el formulario)
value = "texto" - Valor inicial del control

size = "unidad_de_medida" - Tamao inicial del control (para
los campos de texto y de password se refiere al nmero de caracteres,
en el resto de controles se refiere a su tamao en pxel)
maxlength = "numero" - Mximo nmero de caracteres para los
controles de texto y de password
checked = "checked" - Para los controles checkbox y

radiobutton permiteindicar qu opcin aparece preseleccionada
disabled = "disabled" - El control aparece deshabilitado y su valor no se
enva al servidor junto con el resto de datos
readonly = "readonly" - El contenido del control no se puede modificar
src = "url" - Para el control que permite crear botones con imgenes,
indica la URL de la imagen que se emplea como botn de formulario
alt = "texto" - Descripcin del control
Tipo
de En lnea y etiqueta vaca
elemento
Descripcin
Se emplean para insertar un control en un formulario
A continuacin se muestran ejemplos para los diez controles que se pueden

crear con la etiqueta <input>.
Cuadro de texto.
Se trata del elemento ms utilizado en los formularios. En el caso ms sencillo,
se muestra un cuadro de texto vaco en el que el usuario puede escribir
cualquier texto:
82

Ejemplo de etiqueta input (type=text)
A continuacin se muestra el cdigo HTML correspondiente al ejemplo anterior:
Nombre <br/>
<input type="text" name="nombre" value="" />
El atributo type diferencia a cada uno de los diez controles que se pueden crear
con la etiqueta <input>. Para los cuadros de texto, su valor es text. El atributo
name es el ms importante en los campos del formulario. De hecho, si un
campo no incluye el atributo name, sus datos no se envan al servidor. El valor
que se indica en el atributo name es el nombre que utiliza la aplicacin del
servidor para obtener el valor de este campo de formulario.
Cuando el usuario pulsa el botn de envo del formulario, el navegador enva
los datos a una aplicacin del servidor para que procese la informacin y
genere una respuesta adecuada. En el servidor, la aplicacin que procesa los
datos debe obtener en primer lugar toda la informacin introducida por el
usuario. Para ello, utiliza el valor del atributo name para obtener los datos de
cada control del formulario.
Como el valor del atributo name se utiliza en aplicaciones programadas, es
esencial ponerse de acuerdo con el programador de la aplicacin, no se debe
modificar su valor sin modificar la aplicacin y no se deben utilizar caracteres
problemticos en programacin (espacios en blanco, acentos y caracteres
como o ).
El atributo value se emplea para establecer el valor inicial del cuadro de texto.
Si se crea un formulario para insertar datos, los cuadros de texto deberan estar
vacos. Por lo tanto, o no se aade el atributo value o se incluye con un valor
vaco value="". Si por el contrario se crea un formulario para modificar datos, lo
lgico es que se muestren inicialmente los datos guardados en el sistema. En
este caso, el atributo value incluir el valor que se desea mostrar: <input
type="text" name="nombre" value="Juan Prez" />
Si no se especifica un tamao, el navegador muestra el cuadro de texto con un
tamao predeterminado. El atributo size permite establecer el tamao, en
caracteres, con el que se muestra el cuadro de texto. Su uso es imprescindible
en muchos formularios, en los que algunos campos como la direccin deben
mostrar ms caracteres de lo normal (<input size="100" ...) y otros campos
como el cdigo postal deben mostrar menos caracteres de lo normal (<input
size="5"...).
Adems de controlar el tamao con el que se muestra un cuadro de texto,
83

tambin se puede limitar el tamao del texto introducido. El atributo maxlength
permite establecer el mximo nmero de caracteres que el usuario puede
introducir en un cuadro de texto. Su uso es imprescindible para campos como
el cdigo postal, el nmero de la Seguridad Social y cualquier otro dato con
formato predefinido y limitado.
Por ltimo, el atributo readonly permite que el usuario pueda ver los contenidos
del cuadro de texto pero no pueda modificarlos y el atributo disabled deshabilita
un cuadro de texto de forma que el usuario no pueda modificarlo y adems, el
navegador no enva sus datos al servidor.
Cuadro de contrasea
La nica diferencia entre este control y el cuadro de texto normal es que el
texto que el usuario escribe en un cuadro de contrasea no se ve en la
pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o
crculos, por lo que es ideal para escribir contraseas y otros datos sensibles.
Ejemplo de etiqueta input (type=password)

Contrasea <br/>
<input type="password" name="contrasena" value="" />
Checkbox
Los checkbox o "casillas de verificacin" son controles de formulario que
permiten al usuario seleccionar y deseleccionar opciones individualmente.
Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos
es completamente independiente del resto. Por este motivo, se utilizan cuando
el usuario puede activar y desactivar varias opciones relacionadas pero no
excluyentes.
Ejemplo de etiqueta input (type=checkbox)

Puestos de trabajo buscados <br/>
<input name="puesto_directivo" type="checkbox" value="direccion"/> Direccin
<input name="puesto_tecnico" type="checkbox" value="tecnico"/> Tcnico
<input
name="puesto_empleado"
type="checkbox"
value="empleado"/>
84

Empleado
El valor del atributo type para estos controles de formulario es checkbox. Como
se muestra en el ejemplo anterior, el texto que se encuentra al lado de cada
checkbox no se puede establecer mediante ningn atributo, por lo que es
necesario aadirlo manualmente fuera del control del formulario. Si no se
aade un texto al lado de la etiqueta <input /> del checkbox, el usuario slo ve
un pequeo cuadrado sin ninguna informacin relativa a la finalidad de ese
checkbox.
El valor del atributo value, junto con el valor del atributo name, es la
informacin que llega al servidor cuando el usuario enva el formulario.
Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo
checked. Si el valor del atributo es checked, el checkbox se muestra
seleccionado. En cualquier otro caso, el checkbox permanece sin seleccionar.
Aunque resulta redundante que el nombre y el valor del atributo sean idnticos,
es obligatorio indicarlo de esta forma porque los atributos en XHTML no
pueden tener valores vacos:
<input type="checkbox" checked="checked" ... /> Checkbox seleccionado por
defecto
Radiobutton.
Los controles de tipo radiobutton son similares a
los controles de tipo checkbox, pero presentan una
diferencia muy importante: son mutuamente
excluyentes. Los radiobutton se utilizan cuando el
usuario solamente puede escoger una opcin entre
las distintas opciones relacionadas que se le presentan. Cada vez que se
selecciona una opcin, automticamente se deselecciona la otra opcin que
estaba seleccionaba.
Ejemplo de etiqueta input (type=radio)
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" />
Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer
El valor del atributo type para estos controles de formulario es radio. El atributo
name se emplea para indicar los radiobutton que estn relacionados. Por lo
tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el
navegador sabe que estn relacionados y puede deseleccionar una opcin del
85

grupo de radiobutton cuando se seleccione otra opcin.
Botn de envo de formulario.
La mayora de formularios dispone de un botn
para enviar al servidor los datos introducidos por el
usuario:
Ejemplo de etiqueta input (type=submit)
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El
navegador se encarga de enviar automticamente los datos cuando el usuario
pincha sobre este tipo de botn. El valor del atributo value es el texto que
muestra el botn. Si no se establece el atributo value, el navegador muestra el
texto predefinido Enviar consulta.
Botn de reseteo del formulario.

Aunque su uso era muy popular hace unos
aos, la mayora de formularios modernos ya
no utilizan este tipo de botn. Se trata de un
botn especial que borra todos los datos
introducidos por el usuario y devuelve el
formulario a su estado original:
Ejemplo de etiqueta input (type=reset)
<input type="reset" name="limpiar" value="Borrar datos del formulario" />
El valor del atributo type para este control de formulario es reset. Cuando el
usuario pulsa este botn, el navegador borra toda la informacin introducida y
muestra el formulario en su estado original. Si el formulario no contena
originalmente ningn valor, el botn de reset lo vuelve a mostrar vaco. si el
formulario contena informacin, el botn reset vuelve a mostrar la misma
informacin original.
Como es habitual en los botones de formulario, el atributo value permite
establecer el texto que muestra el botn. Si no es utiliza este atributo, el
navegador muestra el texto predefinido del botn, que en este caso es
Restablecer.
Ficheros adjuntos.
Los
formularios
tambin
permiten
adjuntar archivos para subirlos al
servidor. Aunque desde el punto de vista
86

de HTML y del navegador no existe ninguna limitacin sobre el nmero, tipo o
tamao total de los archivos que se pueden adjuntar, todos los servidores
aaden restricciones por motivos de seguridad.
Ejemplo de etiqueta input (type=file)
Fichero adjunto.
<input type="file" name="adjunto" />
El valor del atributo type para este control de formulario es file. El navegador se
encarga de mostrar un cuadro de texto donde aparece el nombre del archivo
seleccionado y un botn que permite navegar por los directorios y archivos del
ordenador del usuario.
Si se incluye un control para adjuntar archivos, es obligatorio aadir el atributo
enctype en la etiqueta <form> del formulario. El valor del atributo enctype debe
ser multipart/form-data, por lo que la etiqueta <form> de los formularios que
permiten adjuntar archivos siempre es:
<form action="..." method="post" enctype="multipart/form-data">
...
</form>
Campos ocultos.
Los campos ocultos se emplean para aadir informacin oculta en el
formulario:
Ejemplo de etiqueta input (type=hidden)

<input type="hidden" name="url_previa" value="/articulo/primero.html" />
El valor del atributo type para este control de formulario es hidden. Los campos
ocultos no se muestran por pantalla, de forma que el usuario desconoce que el
formulario los incluye. Normalmente los campos ocultos se utilizan para incluir
informacin que necesita el servidor pero que no es necesario o no es posible
que la establezca el usuario.
Botn de imagen.
El aspecto de los botones de formulario se puede personalizar por completo, ya
que incluso es posible utilizar una imagen como botn:
87

Ejemplo de etiqueta input (type=image)
<input type="image" src='imagenes/botonconsultar.png' name="consultar"
id="consultar" value="Consultar" />
El valor del atributo type para este control de formulario es image. El atributo
src indica la URL de la imagen que debe mostrar el navegador en lugar del
botn normal.
Su principal ventaja es que permite personalizar por completo la esttica de los
botones y mostrarlos con un aspecto homogneo en todos los navegadores. El
principal inconveniente es que ralentiza la carga del formulario y que si se
quiere modificar su aspecto, es necesario crear una nueva imagen.
Botn.
Algunos formularios complejos necesitan botones
ms avanzados que los de enviar datos
(type="submit")
y
resetear
el
formulario
(type="reset"). Por ese motivo, el estndar
HTML/XHTML define un botn de tipo genrico:
Ejemplo de etiqueta input (type=button)
<input type="button" name="guardar" value="Guardar Cambios" />
El valor del atributo type para este control de formulario es button. Si pruebas a
pulsar un botn de este tipo, vers que el navegador no hace nada: no enva
los datos al servidor y no borra los datos introducidos. Este tipo de botones slo
son tiles si se utilizan junto con el lenguaje de programacin JavaScript. Si la
pgina incluye cdigo JavaScript, los botones de este tipo se pueden
programar para que realicen cualquier tarea compleja cuando se pulsa sobre
ellos.
MANIPULAR EL COMPORTAMIENTO DE LOS CONTROLES DE UN
FORMULARIO.
Utilizar JavaScript para manipular los controles del formulario:
Al igual que HTML, Javascript es un lenguaje de programacin que se puede
utilizar para construir sitios Web y para hacerlos ms interactivos.
Aunque comparte muchas de las caractersticas y de las estructuras del
lenguaje Java, fue desarrollado independientemente. El lenguaje Javascript
puede interactuar con el cdigo HTML, permitiendo a los programadores web
utilizar contenido dinmico. Por ejemplo, hace fcil responder a los
88

acontecimientos iniciados por usuarios (como introduccin de datos en
formularios) sin tener que utilizar CGI.
El lenguaje Javascript es opensource, por lo cualquier persona puede utilizarlo

sin comprar una licencia.
NOTA:
El CGI por sus siglas en ingls Common Gateway Interface es de las primeras formas
de programacin web dinmica.
Cuando el World Wide Web inici su funcionamiento como lo conocemos, empezando
a tomar popularidad aproximadamente en 1993, solo se poda apreciar texto,
imgenes y enlaces. La introduccin de Plugins en los navegadores permiti mayor
interactividad entre el usuario y el cliente, aunque estaba limitado por la velocidad y la
necesidad de tener que bajar e instalar cada plugin que se necesitara, por lo que estos
se desarrollaron mayormente en reas de vdeo, audio y realidad virtual.
El CGI (Por sus siglas en ingls Common Gateway Interface) cambio la forma de
manipular informacin en el web.
En s, es un mtodo para la transmisin de informacin hacia un compilador instalado
en el servidor. Su funcin principal es la de aadir una mayor interaccin a los
documentos web que por medio del HTML se presentan de forma esttica.
El primer paso es una solicitud que se formula desde una pgina web al servidor
donde reside el CGI. A continuacin el CGI solicita a la base de datos la informacin
adecuada y es respondido. Finalmente se envan los datos, ya formateados para ser
comprensibles, a la pgina web, donde son consultados por el usuario.
Caractersticas de Javascript.
Es simple, no hace falta tener conocimientos de programacin para poder
hacer un programa en JavaScript.
Maneja objetos dentro de nuestra pgina Web y sobre ese objeto podemos
definir diferentes eventos. Dichos objetos facilitan la programacin de pginas
89

interactivas, a la vez que se evita la posibilidad de ejecutar comandos que
puedan ser peligrosos para la mquina del usuario, tales como formateo de
unidades, modificar archivos etc.
Es dinmico, responde a eventos en tiempo real. Eventos como presionar un
botn, pasar el puntero del mouse sobre un determinado texto o el simple
hecho de cargar la pgina o caducar un tiempo. Con esto podemos cambiar
totalmente el aspecto de nuestra pgina al gusto del usuario, evitndonos tener
en el servidor un pgina para cada gusto, hacer clculos en base a variables
cuyo valor es determinado por el usuario, etc.
Si bien hoy en da, JAVA Script, es un lenguaje muy usado, sus principales
aplicaciones son:
Responder a eventos locales dentro de la pgina, como apretar un botn,
La realizacin de clculos en tiempo real.
La validacin de formularios dentro de una pgina.
La personalizacin de la pgina por el usuario, que le permitir tener una
pgina web a su medida.
La inclusin de datos del propio sistema, como son la hora y la fecha.
CMO INCLUIR JAVASCRIPT EN PGINAS DE HTML?
Existen tres formas principales:
La forma general es la que sigue:
<SCRIPT LANGUAGE="JavaScriptConVersin">
Sentencias de JavaScript ....
</SCRIPT>
Si slo se escribe LANGUAGE="JavaScript", la propia versin del explorador
de internet escoge la versin de JavaScript por defecto. Por ello, es
conveniente incluir la versin deseada. Dentro de estas tags SCRIPT es donde
se escribe en JavaScript. Pueden ponerse cuantos se quieran a lo largo del
documento y en cualquier lugar. Ahora bien, se recomienda poner las funciones
en el HEAD del documento. De este modo, una funcin est definida desde el
principio del documento, lo que asegura su existencia a la hora de ejecutarse
en algn punto de la pgina. Esto evitar muchos errores.
Si lo que se quiere es incluir un archivo de JavaScript en lugar de insertar las
lneas de programa en la pgina HTML:
90

<SCRIPT SRC="Archivo. js ">
...
</SCRIPT>
Conviene tener en cuenta los navegadores que no soportan JavaScript. Un
navegador que no acepta JavaScript no leer lo que hay entre las tags
SCRIPT. Adems, deben tenerse en cuenta las versiones: si se programa algo
que slo funciona con la versin 1.1 se pondr LANGUAGE= "JavaScript1.1"
para que los navegadores antiguos ignoren esta parte de cdigo y no d error.
Sin embargo, la versin 1.2 de JavaScript s la interpretar. Hay varias formas
de excluir el cdigo de JavaScript de los navegadores antiguos:
Se emplea la tag pareada <NOSCRIPT> para incluir entre ellas contenidos que
aparecern en aquellos navegadores que no soporten JavaScript.
El siguiente esquema hace que se ignoren las sentencias en navegadores que
no soportan JavaScript:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
Algunas tags permiten incluir controladores de eventos en ellas. Estas tags
son:
Links
Imgenes
Anclas
Veamos un ejemplo con un link:
<A HREF="http://www.uc3m.es/"
OnClick="alert('Este link lleva al Alula Global de la UC3M')">Aula Global de la
UC3M
</A>
Como puede verse, dentro de la tag, como atributo de sta, se pone un
controlador de eventos y despus del signo igual y entre comillas se incluye el
cdigo de JavaScript. Ahora bien, tambin es posible llamar a una funcin del
HEAD del documento. Se recomienda esta segunda opcin ya que es una
91

manera ms limpia y clara de escribir pginas. Se conseguira lo mismo que en
el ejemplo anterior de esta forma:
<HEAD>
function avisar(){alert("Este link lleva al Aula Global de la UC3M")}
</HEAD>
<BODY>
<A HREF="http://www.uc3m.es/" OnClick="avisar()">Aula Global de la UC3M
</A>
</BODY>
Por ltimo, y antes de terminar, es necesario resear que las comillas y los
apstrofos no pueden usarse indistintamente. En principio, hay que emplear
comillas. Pero si algn comando que requiere comillas est incluido dentro de
otro y las comillas se han empleado para el comando incluyente, el comando
incluido deber emplear apstrofos. Para aclarar este embrollo, vase un
ejemplo: La funcin alert requiere comillas: alert("texto") El evento OnClick
tambin: OnClick="cdigo en JavaScript" Si queremos una ventana de alert al
clicar sobre un link, se escribir de la siguiente forma: OnClick="alert('texto')"
Fundamentos del JavaScript
En este apartado vamos a definir los fundamentos del lenguaje debido a que es
necesario hacer mencin de ellos para una mejor comprensin posterior.
Argumentos:
Se usan con mtodos y funciones. Pueden se tanto valores y variables, como
objetos que el mtodo o funcin requieren para ser procesados.Por ejemplo,
function squareroot(16), funcin raz cuadrada del argumento, valor en este
caso, 16.
Manejadores de Eventos:
Se usan para ejecutar o llamar a un script de JavaScript. Pongamos un ejemplo
para clarificar:
<A HREF="link.htm" onClick=
"functionX( )"> Pulse aqu </A>
Aqu tenemos un evento de clic que inicia las acciones de la funcin functionX(
), es decir, al pulsar en el anclaje no slo accedemos a la pgina LINK.HTM,
sino que se ejecuta functionX( ).
92

A lo largo de este manual iremos viendo las distintas categoras de eventos y
su manejo. Como adelanto a apartados sucesivos vamos a nombrarlos:Eventos
de Botn y anclajes (links), de ventana, de formulario y de imgenes. Con
versiones posteriores de browsers estas categoras han ido aumentando,
incluyendo en la actualidad Live3D, LiveAudio y LiveVideo entre otros.
Expresiones:
Una expresin es un conjunto de literales, variables y operadores que
describen un nico nmero, cadena o valor lgico.Ejemplo: x = y + 10.
Funciones:
Las funciones son sentencias que contienen instrucciones para ser ejecutadas
cuando se realiza la llamada a la funcin. En algunos lenguajes de
programacin tambin reciben los nombres de subrutinas o procedimientos.
Los tres trminos coinciden en la definicin inicial pero en algunos lenguajes la
diferencia estriba en que una funcin siempre devuelve un valor obtenido por la
ejecucin de sus instrucciones, mientras que, por ejemplo, un procedimiento
puede o no devolver valor alguno. En el siguiente ejemplo de funcin vemos
que usando el mtodo alert( ), se abre una ventana de aviso con el texto "Esto
es una prueba". Como se puede ver las instrucciones internas deben ir entre
llaves ({ }).
Function prueba( ) {
alert("Esto es una prueba");
}
Literales:
Los literales son representaciones de valores, que pueden ser enteros, coma
flotante, cadenas o booleanos. A diferencia de las variables que se declaran, a
los literales se les refiere: el 45 es un valor numrico que no necesita ser
declarado y tiene valor por s mismo.
Mtodos:
Los mtodos son una especie de funciones, asociadas a objetos y que
requieren argumentos. Hemos visto ya un ejemplo con alert(). Se pueden
distinguir a simple vista ya que son palabras seguidas de ( ) y no son como las
funciones que adems llevaban llaves.
Objetos:
Los objetos son los elementos principales afectados o interpretados en
JavaScript. Un ejemplo de objeto podra ser tanto un botn dentro de un
formulario, como el propio formulario o documento. En la instruccin
93

Document.write("hola") se est invocando al mtodo write( ) del objeto
document para escribir "hola" en el documento HTML.
Los operadores permiten manipular el valor de las variables, realizar

operaciones matemticas con sus valores y comparar diferentes variables. De
esta forma, los operadores permiten a los programas realizar clculos
complejos y tomar decisiones lgicas en funcin de comparaciones y otros
tipos de condiciones.
Asignacin
El operador de asignacin es el ms utilizado y el ms sencillo. Este operador
se utiliza para guardar un valor especfico en una variable. El smbolo utilizado
es = (no confundir con el operador == que se ver ms adelante):
var numero1 = 3;
A la izquierda del operador, siempre debe indicarse el nombre de una variable.
A la derecha del operador, se pueden indicar variables, valores, condiciones
lgicas, etc:
var numero1 = 3;
var numero2 = 4;
/* Error, la asignacin siempre se realiza a una variable,
por lo que en la izquierda no se puede indicar un nmero */
5 = numero1;
// Ahora, la variable numero1 vale 5
numero1 = 5;
// Ahora, la variable numero1 vale 4
numero1 = numero2;
Incremento y decremento
Estos dos operadores solamente son vlidos para las variables numricas y se
utilizan para incrementar o decrementar en una unidad el valor de una variable.
Ejemplo:
94

var numero = 5;
++numero;
alert(numero); // numero = 6
El operador de incremento se indica mediante el prefijo ++ en el nombre de la
variable. El resultado es que el valor de esa variable se incrementa en una
unidad. Por tanto, el anterior ejemplo es equivalente a:
var numero = 5;
numero = numero + 1;
De forma equivalente, el operador decremento (indicado como un prefijo -- en
el nombre de la variable) se utiliza para decrementar el valor de la variable:
var numero = 5;
--numero;
El anterior ejemplo es equivalente a:
var numero = 5;
numero = numero - 1;
Los operadores de incremento y decremento no solamente se pueden indicar
como prefijo del nombre de la variable, sino que tambin es posible utilizarlos
como sufijo. En este caso, su comportamiento es similar pero muy diferente. En
el siguiente ejemplo:
var numero = 5;
numero++;
El resultado de ejecutar el script anterior es el mismo que cuando se utiliza el
operador ++numero, por lo que puede parecer que es equivalente indicar el
operador ++ delante o detrs del identificador de la variable. Sin embargo, el
siguiente ejemplo muestra sus diferencias:
var numero1 = 5;
var numero2 = 2;
95

numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6
Si el operador ++ se indica como prefijo del identificador de la variable, su valor
se incrementa antes de realizar cualquier otra operacin. Si el operador ++ se
indica como sufijo del identificador de la variable, su valor se incrementa
despus de ejecutar la sentencia en la que aparece.
Por tanto, en la instruccin numero3 = numero1++ + numero2;, el valor de
numero1 se incrementa despus de realizar la operacin (primero se suma y
numero3 vale 7, despus se incrementa el valor de numero1 y vale 6). Sin
embargo, en la instruccin numero3 = ++numero1 + numero2;, en primer lugar
se incrementa el valor de numero1 y despus se realiza la suma (primero se
incrementa numero1 y vale 6, despus se realiza la suma y numero3 vale 8).
Lgicos.
Los operadores lgicos son imprescindibles para realizar aplicaciones
complejas, ya que se utilizan para tomar decisiones sobre las instrucciones que
debera ejecutar el programa en funcin de ciertas condiciones.
El resultado de cualquier operacin que utilice operadores lgicos siempre es
un valor lgico o booleano.
Negacin.
Uno de los operadores lgicos ms utilizados es el de la negacin. Se utiliza
para obtener el valor contrario al valor de la variable:
var visible = true;
alert(!visible); // Muestra "false" y no "true"
variable
!variable
true
false
false
true
96

Si la variable original es de tipo booleano, es muy sencillo obtener su negacin.
Sin embargo, qu sucede cuando la variable es un nmero o una cadena de
texto? Para obtener la negacin en este tipo de variables, se realiza en primer
lugar su conversin a un valor booleano:
Si la variable contiene un nmero, se transforma en false si vale 0 y en true
para cualquier otro nmero (positivo o negativo, decimal o entero).
Si la variable contiene una cadena de texto, se transforma en false si la cadena
es vaca ("") y en true en cualquier otro caso.
var cantidad = 0;
vacio = !cantidad; // vacio = true
cantidad = 2;
vacio = !cantidad; // vacio = false
var mensaje = "";

mensajeVacio = !mensaje; // mensajeVacio = true
mensaje = "Bienvenido";
mensajeVacio = !mensaje; // mensajeVacio = false
La negacin lgica se obtiene prefijando el smbolo! al identificador de la
variable.
Matemticos.
JavaScript permite realizar manipulaciones matemticas sobre el valor de las
variables numricas. Los operadores definidos son: suma (+), resta (-),
multiplicacin (*) y divisin (/). Ejemplo:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2; // resultado = 2
resultado = 3 + numero1;
// resultado = 13
resultado = numero2 4;
// resultado = 1
resultado = numero1 * numero 2; // resultado = 50

97

Adems de los cuatro operadores bsicos, JavaScript define otro operador
matemtico que no es sencillo de entender cuando se estudia por primera vez,
pero que es muy til en algunas ocasiones.
Se trata del operador "mdulo", que calcula el resto de la divisin entera de dos
nmeros. Si se divide por ejemplo 10 y 5, la divisin es exacta y da un
resultado de 2. El resto de esa divisin es 0, por lo que mdulo de 10 y 5 es
igual a 0.
Sin embargo, si se divide 9 y 5, la divisin no es exacta, el resultado es 1 y el
resto 4, por lo que mdulo de 9 y 5 es igual a 4.
El operador mdulo en JavaScript se indica mediante el smbolo %, que no
debe confundirse con el clculo del porcentaje:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0
numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4
Los operadores matemticos tambin se pueden combinar con el operador de
asignacin para abreviar su notacin:
var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *= 2; // numero1 = numero1 * 2 = 10
numero1 /= 5; // numero1 = numero1 / 5 = 1
numero1 %= 4; // numero1 = numero1 % 4 = 1
Propiedades:
Podramos considerar las propiedades como adjetivos de los objetos que
describen. Por ejemplo, del objeto botn podemos encontrar propiedades como
tamao, situacin en la ventana, texto, etc.
98

Sentencias de Control:
Son las responsables directas del flujo del cdigo. Un ejemplo tpico sera un
bloque if con la instruccin if...then que ejecuta ciertas instrucciones en funcin
del cumplimiento de la condicin.
Nota: En JavaScript toda instruccin debe ir finalizada por ";". No siguen esta
regla las propias sentencias de control, llamadas y definicin de funciones.
Tipos de Datos:
JavaScript reconoce 4 tipos de valores, o tipos de datos: nmeros, booleanos,
cadenas y el valor null(sin valor). Tambin reconoce el valor type, accesible a
travs del objeto date. Hay que tener mucho cuidado en las operaciones con
distintos tipos de datos que producirn a buen seguro errores en la ejecucin.
Variables:
Son las representaciones de los tipos de datos que se inicializan o toman valor
a travs de las expresiones. Pueden ser locales o globales. Locales significa
que slo se usan o tienen sentido en el mbito en que se han definido, por
ejemplo una funcin, y globales en todo el script. En el siguiente ejemplo
vemos un ejemplo de script con una variable local y otra global.
<SCRIPT>
var globalvar1=5;
Function multiplica()
{
var localvar1=2 * globalvar1;
alert("Dos por cinco son= " + localvar1);
}
<SCRIPT>
Diferencias con Java.
La principal diferencia es que JAVA es un lenguaje compilado, mientras que
JavaScript es interpretado.
JAVA al compilar crea programas independientes, llamados APPLETS que se
invocan desde una pgina Web, mientras que el cdigo de JavaScript va
incluido en la pgina.
Est orientado a objetos de forma limitada ya que no maneja los conceptos de
clase ni herencia.
En JavaScript no es necesario declarar el tipo de variable, ni debe existir las
referencias a los objetos antes de ejecutarlo..
99

NOTA:
Qu es AJAX?
AJAX es un conjunto heterogneo de tecnologas web utilizadas conjuntamente
para permitir que las interacciones dinmicas cliente-servidor comunes en las
aplicaciones web, se realicen sin que estas requieran recargar o refrescar la
pgina. AJAX es el acrnimo de Asynchronous JavaScript and XML (JavaScript
Asncrono y XML). AJAX no es una tecnologa en s misma - es una
combinacin de tecnologas usada de una manera concreta. AJAX utiliza
distintas tecnologas de la siguiente forma:
XHTML (o HTML) y CSS para crear la interfaz de usuario y la informacin de
estilo. Los elementos de XHTML y CSS pueden ser modificados
dinmicamente para mostrar informacin nueva, cambiar el estilo de la pgina
o alterar partes de ella. Para realizar estos cambios usualmente se emplea el
DOM (Document Object Model).
JavaScript se utiliza para manipular los elementos de la interfaz a travs del
DOM y para establecer la comunicacin con el servidor web a travs del objeto
XMLHttpRequest. Este objeto permite transmitir datos (normalmente en formato
XML) entre el cliente y el servidor web sin necesidad de recargar la pgina o
refrescarla.
Utilizando AJAX, las aplicaciones web pueden permitir altos niveles de
interactividad y de procesamiento, sin requerir las interacciones estndar entre
cliente-servidor, que constan de los siguientes pasos:
Se presenta una interfaz de la pgina Web.
Se recoge informacin del usuario (a travs de formularios, enlaces, etc.)
El usuario enva la informacin (enva el formulario, se activa un enlace, etc.)
El servidor procesa la informacin enviada.
El servidor responde con una nueva interfaz de la pgina web que es enviada
al usuario.
Con AJAX, todos estos pasos se pueden realizar en la misma interfaz. Algunos
ejemplos de uso de AJAX son las aplicaciones de mapas, bsquedas en
tiempo real, chat, validacin de formularios en tiempo real y procesamiento en
segundo plano, aplicaciones de carro de compras, aplicaciones de correo
electrnico, y la lista continua. Las aplicaciones web y la interaccin mediante
el uso de AJAX han dado origen al trmino "Web 2.0" - trmino que sin duda
indica una gran revolucin en el modo en que se hace uso de la web. Si bien
ninguna de las tecnologas que componen AJAX son nuevas o innovadoras, la
creciente popularidad y uso de AJAX conlleva la necesidad de que los
desarrolladores conozcan las implicaciones para la accesibilidad que estas
100

tecnologas acarrean.
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.
Tecnologas agrupadas bajo el concepto de AJAX
VALIDAR LOS FORMULARIOS WEB.

Una de las grandes aportaciones de JavaScript a la creacin de interfaces web
es la posibilidad de acceder al contenido de los campos de los formularios para
realizar acciones sobre los valores introducidos por el usuario, modificarlos y,
en ltima instancia, validarlos. La validacin de los datos de un formulario
mediante scripts JavaScript no sustituye a la validacin que debe realizarse,
por motivos de seguridad, en la aplicacin del servidor que recibe la
informacin. Sin embargo, al aadir una validacin local con JavaScript, la
experiencia de usuario mejora notablemente, al no ser necesario enviar los
datos al servidor y esperar su respuesta para obtener slo un mensaje
informando de la incorreccin de la informacin suministrada. Resulta frustrante
cumplimentar un formulario, pulsar el botn enviar, y esperar 30 o 40 segundos
para saber que hemos introducido mal un campo.
JavaScript, desde sus comienzos, introdujo los mecanismos necesarios para

validar campos de formulario. Estas son algunas de las validaciones tpicas:
Comprobar que se han suministrado todos los campos obligatorios
101

Comprobar que el formato de un campo es el esperado (fechas, telfonos, etc.)
Comprobar la validez (sintctica) de las direcciones de correo y URLs
Comprobar que no se sobrepasa la longitud, nmero de lneas o tamao de la
entrada.
Evento onSubmit.
La validacin de campos de formulario se basa en interceptar el momento en
que el usuario realiza el envo de los datos del formulario (es decir, pulsa sobre
el botn de enviar). Como es sabido, el botn de envo de datos se codifica con
HTML mediante un tipo especial de objeto de formulario, llamado submit. El
siguiente ejemplo muestra un formulario con un botn de envo:
<form name="miFormulario" action="mailto:[email protected]">
<input type="submit" value="Enviar" name="enviar">
</form>
Cuando el usuario pulsa sobre el botn, el navegador ejecuta la accin

codificada en el parmetro action del formulario. En el ejemplo anterior, hemos
incluido una accin de tipo mailto, es decir, de envo de datos por correo
electrnico. Lo normal es que la accin sea la invocacin de un programa que
se ejecuta en el servidor remoto, y que recibe los datos de acuerdo a la
especificacin CGI (Common Gateway Interface).
Cuando el usuario pulsa sobre el botn de enviar, se genera el evento submit,
asociado al envo de datos de un formulario. JavaScript proporciona un
mecanismo para capturar este evento, lo que nos permite ejecutar un script
justo antes de que se realice el envo de los datos.
La forma de capturar el evento consiste en introducir el atributo onSubmit en la

etiqueta del formulario cuyo evento submit queremos capturar. De esta forma,
para capturar el evento submit del formulario del ejemplo anterior escribiramos:
<form name="miFormulario" action="mailto:[email protected]"
onSubmit="alert('Has pulsado enviar.'); return false;">
</form>
En esta nueva versin del formulario, al pulsar sobre el botn de envo se

ejecutar el cdigo incluido como valor del atributo onSubmit. En este caso, se
trata de un simple alert() JavaScript informando de que se ha pulsado sobre el
102

botn de envo. Puede comprobarse el funcionamiento pulsando sobre el
siguiente botn:
El cdigo JavaScript que se ejecuta antes del envo del formulario es, en el
ejemplo anterior, un alert(). Sin embargo, se puede observar que se ha aadido
un return false al final de la lnea de cdigo. Esta es la forma de indicar al
navegador si la validacin ha sido correcta o incorrecta. Si el cdigo JavaScript
(normalmente una funcin de validacin) del atributo onSubmit devuelve false,
la validacin es incorrecta y el navegador no contina con el envo del
formulario tras ejecutar dicho cdigo. Por el contrario, si devuelve true la
validacin es correcta y el formulario se enva normalmente.
El objeto this.
Normalmente, el evento onSubmit ejecuta una funcin de validacin, como en
el siguiente ejemplo:
<form name="miFormulario" action="mailto:[email protected]"
onSubmit="return Valida(this);">
</form>
Esta funcin devolver, como ya se ha dicho, true si la validacin es correcta, y

false en caso contrario. Para poder realizar la validacin, la funcin debe
trabajar sobre los objetos del formulario a validar, para acceder a su valor y
evaluarlo. Esto se consigue pasndole como parmetro el objeto this, que
referencia en este contexto al formulario desde el que se invoca la funcin.
La funcin de validacin acceder a los campos del formulario a partir del
objeto this. A continuacin mostramos un ejemplo sencillo, en el que se
comprueba si el valor del campo de nombre campo1 es igual a OK. En caso
afirmativo, la validacin es correcta:
function Valida( formulario ) {
if (formulario.campo1.value == 'OK') {
return true
} else {
return false
}
}
103

VALIDACIN DE FORMULARIOS MS UTILIZADOS.
Validacion de campos de texto no vacios:
El ejemplo de Validacion de campos de texto no vacios muestra cmo acceder
a un campo de texto para recorrerlo carcter a carter verificando que no est
vaco y que no contiene slo caracteres en blanco.
Validacin de campos de fecha:
El script de Validacion de campo fecha es un ejemplo de validacin de un
campo que tiene que ajustarse a un formato determinado (en este caso el
formato fecha d-m-aaaa).
Validacin de campos de hora:

El script de Validacin de campos de hora tiene la particularidad de utilizar en
la validacin expresiones regulares, lo que simplifica enormemente el cdigo.
Validacin de campos de longitud fija:

Una de las comprobaciones tpicas sobre campos de formulario se refiere al
nmero de caracteres introducidos (para verificar que no supera cierto valor, o
que es exactamente igual a cierto nmero).
Esta comprobacin es til, por ejemplo, para nmeros de telfono, cdigos
postales o para nmeros de identificacin (como el DNI). El ejemplo Validacin
de campos de longitud fija muestra cmo hacerlo con expresiones regulares.
Validacin de campos de correo electrnico:

La Validacin de campos de correo electrnico es una de las ms necesarias,
ya que muchos de los formularios que se utilizan en Internet solicitan este dato.
Esta validacin es puramente sintctica (es decir, se comprueba que el formato
est de acuerdo con la RFC 821 de la mensajera electrnica de Internet), no
siendo posible comprobar que la direccin exista realmente.
Validacin de campos sin usar expresiones regulares:
Para quienes no dominen las expresiones regulares de JavaScript, pero
quieran implementar una funcin de validacin a medida, el ejemplo Validacin
de campos sin usar expresiones regulares les permitir seleccionar los
caracteres vlidos e introducirlos en una variable alfanumrica que se utilizar
despus para la validacin.
104

Validacin de campo vaco, email y URL:
El ejemplo de Validacin de campo vaco, email y URL es otro script de
validacin que no utiliza expresiones regulares, y que muestra cmo se realiza
la validacin de campos de correo electrnico y de URLs.
Enviar y recibir informacin de los formularios.

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y
nos permiten recibir informacin de los usuarios de nuestro site. Los
formularios html estn compuestos por campos de texto y botones.
Una vez el usuario ha rellenado el formulario e introducido los valores en los
campos, stos son enviados para poder procesarlos. El envo de estos datos
puede hacerse a un correo electrnico o a un programa que procese toda la
informacin y nos ayude a hacer un seguimiento.
Los formularios son un tag ms de html y, como todos los tags, debe ir indicado
mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre
</form>. Todo lo que vaya dentro de estas etiquetas, sern partes del
formulario.
La etiqueta <form> tiene una serie de atributos bsicos que vamos a pasarte a
explicar a continuacin.
Action:
El atributo action indica el tipo de accin que va a realizar el formulario.
Anteriormente indicamos que la informacin poda enviarse a un correo
electrnico o a un programa que la gestione. Es mediante esta etiqueta que se
gestionan los formularios.
Si queremos que el formulario se enve a un correo, la accin quedara escrita
de la siguiente manera:
<form action=mailto:[email protected]></form>. Este tipo de
envos se utilizaran para casos de formularios de contacto, de sugerencias,
etc.
Si lo que queremos es que la informacin sea enviada a un programa que la
gestione, debemos indicarle en la accin, la url del archivo donde se encuentra
ubicado el programa que la gestionar. Lo escribiramos de la siguiente
manera:
<form action="direccin completa del archivo que la gestionar" ...> </form>.
Este tipo de envos se utilizaran para casos de formularios de encuestas,
cuestionarios, etc.
105

Method:
Mediante este atributo le indicamos al formulario la forma en la que el
formulario ser enviado. Existen dos valores posibles: get y post.
El valor get es el valor por defecto. Si no concretamos el method, la informacin
se enviar a travs de este medio.
get indica que los datos enviados se adjuntarn en la barra de direcciones del
cliente, al final de la url correspondiente y despus de un signo de interrogacin
de cierre. Si se enva ms de un dato, stos irn separados por el smbolo &.
Un ejemplo de un formulario enviado por el method=get sera el siguiente:
http://www............?nombre1=valor1&nombre2=valor2
El valor post indica que el mtodo de envo no se har a travs de la url, sino
formando parte del cuerpo de la peticin.
Enctype:
Mediante este atributo indicaremos la forma en la que viajar la informacin
que se mande a travs del formulario.
La forma puede ser de varios tipos, aunque el ms comn es que la
informacin se enve como texto plano (enctype="text/plain").
Ventajas y desventajas de enviar variables por el mtodo GET

Hemos visto que existen dos mtodos para que el usuario envi datos hacia el
servidor: Mediante enlaces que envan variables, y mediante formularios.
Mtodo get, y mtodo post. Veamos qu criterio debemos considerar al elegir,
si presentamos al usuario un enlace o un formulario.
Comenzaremos por el mtodo get. Cules son sus ventajas?:
Codificar el cdigo HTML necesario para enviar un dato mediante una

peticin get (un enlace que adjunta variables) es muy sencillo, no
necesitamos crear ningn formulario, simplemente creamos enlaces
comunes, que enven los datos necesarios al ser pulsados por el usuario.
Es invisible para la mayora de los usuarios, que creern que pulsan un
enlace comn no sospecharan que estn enviando un dato hacia el servidor.
Por esta invisibilidad, es probable que sea usado ms que un formulario.
El uso ms comn de peticiones con el mtodo get es en consultas a una base
de datos, ya sea para una bsqueda, un filtrado de productos de catlogo por
categoras, una botonera donde el usuario elige un rubro o sesin de un sitio,
etc. Es decir, cuando ese dato que enviaremos puede estar a la vista (y hasta
106

ser modificado fcilmente por un usuario curioso que escriba en la barra de
direcciones), ya que no se usara para modificar datos de nuestra base de
datos, sino slo para mostrar parte de la informacin pblica del sitio que, de
todos modos, sera factible encontrar.
Por ejemplo u buscador:
http://www.google.com.ar/search?q=palabra
Desventajas? Las direcciones visitadas quedaran guardadas en el historial del
navegador. Lo que posibilita que un usuario vuelva a enviar la misma variable
con el mismo valor en otro momento. Eso, sumado a nuestra forma de
programar, podra ser riesgoso si usramos los enlaces para enviar al servidor
datos importantes como, por ejemplo, usuarios, y contraseas. Imaginemos un
enlace que fuese as:
login.php?usuario=Pepe&password=secreto
Esto produjera un serio problema de seguridad a nuestros usuarios si, por
ejemplo, acceden desde una computadora compartida (cibercaf, trabajo, etc.),
puesto que otros usuarios podran visitar el enlace desde el historial del
navegador, y entrar donde no debe.
La conclusin es que no debemos enviar datos importantes mediante
peticiones que usen el mtodo get. Pero si podemos usarlos para enviar datos
de "navegacin", como cdigos de categoras, de productos, palabras a buscar,
etc.
Ventajas y desventajas de enviar variables por el mtodo post.
El uso ms comn de un formulario con mtodo post es enviar datos que sern
almacenados en una base de datos, o que provocarn operaciones que
habilitaran acceso a datos privados (con un formulario de acceso a una zona
privada, o de registro).
Ventajas?
Una de las potenciales ventajas de declarar en nuestro formulario que se

utilice el mtodo post, es lograr que nuestro navegador se conecte con el
servidor y envi los datos de los campos del formulario de forma
absolutamente invisible, discreta, al menos en la barra de direcciones del
navegador. Por supuesto, eso dificulta la modificacin de la barra de
direcciones para enviar datos extra que permite el mtodo get, pero nada
impide que un usuario curioso edite el formulario en su computadora, y
107

envi datos no esperados al servidor tambin mediante el mtodo post.
A diferencia del mtodo get, los datos enviados por el mtodo post no tienen
un lmite respecto a la cantidad de variables enviadas en una misma
peticin, o a la longitud de sus valores.
Desventajas? Varias:
Si el acceso a una pgina depende del envi de datos al servidor mediante

el mtodo post, cada vez que queremos volver a ingresar a esta pgina
debemos enviar nuevamente los datos del formulario, y la mayora de
navegadores advertir esto con un mensaje de alerta al usuario, que no
siempre comprender que es lo que est sucediendo.
Otra desventaja: si el usuario guarda en sus favoritos una pgina que recibi
datos mediante post, cuando utilice ese favorito, ya no estar disponible los
datos que envi la primera vez desde un formulario y, por lo tanto, el
resultado que obtendr ya no ser el mismo (o obtendr el tpico mensaje de
alerta).
Volvemos a reafirmar la conclusin que sostiene que para enviar informacin

privada, usaremos post; para navegar por informacin pblica, usaremos get.
Y tambin usaremos get cuando deseemos que nuestra pgina pueda ser
guardada en los favoritos del usuario sin provocar problemas de usabilidad.
108

1. Disee el siguiente formulario:
2. Valide el formulario para que todos los campos sean obligatorios.
3. Mediante el mtodo Post enve todos los datos a una pgina PHP la cual
imprimir todos los datos del formulario en maysculas.
NOTA:
El diseo de la pgina php del resultado queda a su criterio.
4. Averiguar que funcin javascript permite general una tabla de multiplicar de

la siguiente forma.
Solicitar al usuario el ingreso de un nmero del 1 al 20.
109
Luego de aceptar la ventana de ingreso de datos debe de generarse una tabla

de multiplicar segn lo muestra la siguiente imagen como referencia.
5. Segn el ejemplo anterior, realizar el mismo ejercicio con la diferencia que

esta ves el usuario solicitara el numero mximo de la tabla de multiplicar,
eso ser mediante una ventana previa antes de la que solicita el numero,
para generar la tabla. (En el ejemplo anterior se creaba la tabla del 1 al 10
como macimo, para este ejercicio se ingresara el nmero mximo.)
NOTA:
La validacin debe de ejecutarse para que no permita el ingreso de nmeros
negativos ni el numero cero, indicando mediante un mensaje distinto para cada caso al
usuario.
110
TAREA 04: INTERACTUAR PHP CON ACCESO A BASE DE DATOS.

Elaborar conexin entre PHP y una base de datos.
Desarrollar consultas de manipulacin de datos desde PHP.
El triunfo del verdadero hombre surge de las cenizas del error....

Pablo Neruda.

Acceso a internet.
ORDEN DE EJECUCIN:
Elaborar conexin entre PHP y una base de datos.

Desarrollar consultas de manipulacin de datos desde PHP.
4.1. ELABORAR CONEXIN ENTRE PHP Y UNA BASE DE DATOS.

En el siguiente ejercicio vamos a crear 2 archivos, uno que se llama inicio.php
y el otro que se llame conex.php que se encontrara dentro de una carpeta con
nombre conexiones el cual tendr una funcin que se encargue de conectar a
la base de datos Northwind de prueba.
PASO 1: Creamos el archivo conex.php dentro de la carpeta creada con
nombre conexiones e ingresamos la siguiente funcin.
<?php
function Conectarse(){
if (!($conectar=mysql_connect("localhost","desarrolloweb","123456"))){
echo "Error conectando a la base de datos."."<BR>";
exit();
111

}
if (!mysql_select_db("northwind",$conectar)){
echo "Error seleccionando la base de datos.";
exit();
}
return $conectar;
}
$conectar=Conectarse();
echo "Conexin con la base de datos conseguida";
mysql_close($conectar); //cierra la conexion
?>
PASO 2: Elaboramos el archivo con nombre inicio.php en el cual mediante la

funcin include agregaremos la funcin del archivo creado en el paso anterior.
<?php
include("conexiones\conex.php");
?>
<html>
<head>
<title>Conexion</title>
</head>
<body>
<p>Este es el contenido de la pgina.</p>
</body>
</html>
RESULTADO:
Al ejecutar el archivo inicio.php en el
servidor local, podemos ver como se
muestra el mensaje de verificacin de la
conexin que se encontraba en el archivo
incluido conex.php.
4.2. DESARROLLAR CONSULTAS DE MANIPULACIN DE DATOS DESDE

PHP.
CONSULTA DE CREACION DE BASE DE DATOS Y TABLAS.
A continuacin vamos a crear un formulario que permita ingresar en un campo
de texto el nombre de la base de datos que vamos a crear.
112

PASO 1: Creamos el siguiente
formulario
(formulario_creardata1.php):
<html>
<head>
<title>Crear base de datos</title>
</head>
<body>
<form method="POST" action="creardata1.php">
<table><tr>
<td>Nombre:</td>
<td><input type="text" name="nombre_bd" /></td>
<td><input type="Submit" value="Crear base de datos" /></td>
</tr>
</table>
</form>
</body>
</html>
PASO 2: Elaboramos el archivo con nombre creardata1.php el cual va a

contener cl cdigo para crear la base de datos con el nombre que ingresemos
en el formulario recogido por el mtodo Post.
Adems tambin tiene el cdigo para crear la tabla Usuarios con 3 campos
(Nombre, edad y cedula).
<?php
$nombre_bd = $_POST['nombre_bd'];
$conectar = mysql_connect("localhost","root","");
if(!$conectar){
echo "No se ha podido conectar al servidor";
}else{
$crear = mysql_query("CREATE DATABASE $nombre_bd",$conectar);
$sql = "CREATE TABLE usuarios(
nombre VARCHAR(30),
edad INT(3),
cedula VARCHAR(13)
);";
mysql_select_db($nombre_bd,$conectar);
if(mysql_query($sql,$conectar)){
echo "base de datos creada correctamente";
}else{
echo "No se ha podido crear la base de datos";
}
113

}
?>
PASO 3: Ejecutamos el formulario

en nuestro servidor y verificamos
el resultado al crear la base de
datos.
Si actualizamos la pgina que contiene el proceso de creacin de la base de
datos creardata1.php, aparecer el siguiente mensaje:
El phpmyadmin mostrar la nueva base de

datos creada:
Si ingresamos a la base de datos creada
podemos ver la estructura de la tabla
elaborada, tal como lo muestra la siguiente
imagen:
CONSULTA DE INGRESO DE DATOS.

A continuacin vamos a crear un formulario que permita ingresar informacin a
la tabla usuarios creada en el paso anterior.
PASO 1: Diseamos el formulario tal como lo
muestra la siguiente imagen.
<html>
<head>
<title>REGISTRO</title>
114

</head>
<body>
<H1>REGISTRO DE USUARIOS</H1>
<FORM ACTION="proceso_registrar_usuario.php" method="post">
<TABLE>
<TR>
<TD>Nombre:</TD>
<TD><INPUT TYPE="text" name="nombre" id="nombre"></TD>
</TR>
<TR>
<TD>Edad:</TD>
<TD><INPUT TYPE="text" name="edad" id="edad"></TD>
</TR>
<TR>
<TD>Codigo:</TD>
<TD><INPUT TYPE="text" name="codigo" id="codigo"></TD>
</TR>
</TABLE>
<INPUT TYPE="submit" name="accion" VALUE="Grabar">
</FORM>
</body>
</html>
Antes de crear el archivo proceso_registrar_usuario.php, el cual se encargar

de registrar la informacin a la data, debemos de crear el archivo para realizar
la conexin a la nueva base de datos.
Llamaremos a este nuevo archivo conexion1.php el cual se almacenar en una
carpeta con nombre conexiondata.
NOTA: Utilizaremos el usuario y clave por defecto que nos brinda nuestro servidor de
base de datos.
PASO 2: Creacin del archivo conexin con nombre conexion1.php.

<?php
115

if (!($conectar=mysql_connect("localhost","root",""))){
exit();
}
if (!mysql_select_db("miempresa",$conectar)){
exit();
}
return $conectar;
}
echo "Conexin con la base de datos conseguida";
mysql_close($conectar); //cierra la conexion
?>
PASO 3: Creamos el archivo proceso_registrar_usuario.php, el cual se

encargara de recibir los datos del formulario por el mtodo Post, se conectara a
la base de datos y por ltimo realiza el registro a la base de datos.
Cdigo fuente:
<?php
$var_nombre = $_POST['nombre'];
$var_edad = $_POST['edad'];
$var_codigo = $_POST['codigo'];
include("conexiondata\conexion1.php");
mysql_query("insert into usuarios
(nombre, edad, cedula)
values
('$var_nombre' , '$var_edad', '$var_codigo')",$conectar);
echo mysql_error();
if (@mysql_affected_rows($conectar)){
echo "<br>Ingreso correcto.";
}
?>
<html>
116

<head>
</head>
<body>
<br>CONTENIDO DE LA PAGINA DONDE SE MOSTRARA EL RESULTADO.
</body>
</html>
PASO 4: Ejecutamos el formulario en nuestro servidor, ingresamos los datos y

le damos clic en el botn Grabar.
En la pgina de resultado se veran un reporte parecido al siguiente:
En la ventana anterior se pueden ver 3 lneas de mensajes.

La primera pertenece al archivo conex.php donde confirma la conexin a la
base de datos.
El segundo muestra el mensaje de confirmacin del ingreso a la base de
datos.
El tercero muestra el contenido propio de la pgina donde se imprimir el
resultado en el navegador.
NOTA:
Si en la pgina del resultado desea ver el contenido de los datos ingresados, bastara
con imprimir las variables con php utilizando echo.
117

Ejemplo del cdigo fuente donde imprimen los valores ingresados en el cuerpo
de la pgina:
Cdigo fuente de la pgina:
<?php
$var_edad = $_POST['edad'];
(nombre, edad, cedula)
values
('$var_nombre' , '$var_edad', '$var_codigo')",$conectar);
echo mysql_error();
}
?>
<html>
<head>
</head>
<body>
<b>REPORTE DE DATOS INGRESADOS:</b>
<TABLE width="260" height="79">
<TR>
<TD width="80">Nombre:</TD>
<TD width="180"><?php echo $var_nombre; ?></TD>
</TR>
<TR>
<TD>Edad:</TD>
<TD><?php echo $var_edad; ?></TD>
</TR>
<TR>
<TD>Codigo:</TD>
118

<TD><?php echo $var_codigo; ?></TD>
</TR>
</TABLE>
</body>
</html>
Registramos los datos:
Resultado:
Podemos verificar desde nuestro phpmyadmin que se han ingresado registros

nuevos en la tabla usuarios de nuestra base de datos.
CONSULTA DE RECUPERACIN DE DATOS.

A continuacin vamos a crear 2 ejercicios, uno para mostrar los datos de una
forma libre distribuidos en el diseo de la pgina web, y el otro mostrado en
filas.
Formulario que consulte datos y muestre de forma libre.
119

Mostrar informacin del usuario segn el cdigo ingresado en un formulario de
consulta:
PASO 1: Disear el formulario de consulta y lo guardamos con el nombre
formulario_consulta1.php.
<html>
<head>
<title>CONSULTA</title>
</head>
<body>
<H1>FORMULARIO DE CONSULTA</H1>
<FORM ACTION="proceso_consulta1.php" method="post">
<TABLE>
<TR>
<TD width="117">Ingrese codigo:</TD>
<TD width="144"><input type="text" name="codigo" id="codigo"></TD>
<TD width="66"><input type="submit" name="accion" value="Consultar"></TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
PASO 2: Creamos el archivo proceso_consulta1.php el cual se encargara de

recoger los datos del formulario por el mtodo post, luego almacenara el
resultado de cada campo en una variable distinta, las cuales sern impresas en
el lugar que desee dentro del cuerpo de la pgina.
<?php
$consulta=mysql_query("SELECT nombre, edad, cedula FROM usuarios WHERE
cedula='$var_codigo'",$conectar);
120

$resultado = mysql_fetch_array($consulta);
$numero_filas = mysql_num_rows($consulta);
$res_nombre = $resultado[0];
$res_edad = $resultado[1];
$res_codigo = $resultado[2];
mysql_close($conectar);
?>
<html>
<head>
</head>
<body>
<br><b>REPORTE DE DATOS CONSULTADOS:</b>
<TR>
<TD width="180"><?php echo $res_nombre; ?></TD>
</TR>
<TR>
<TD>Edad:</TD>
<TD><?php echo $res_edad; ?></TD>
</TR>
<TR>
<TD>Codigo:</TD>
<TD><?php echo $res_codigo; ?></TD>
</TR>
</TABLE>
</body>
</html>
PASO 3: Ejecutamos el formulario de consulta e ingresamos un cdigo que

exista en la base de datos.
121
Resultado:
NOTA:
Si desea agregar un mensaje personalizado que aparezca solo cuando el servidor no
encuentre ningn registro con el cdigo ingresado, puede agregar la siguiente
validacin.
Ingrese el siguiente cdigo antes de cerrar la conexin, tome como referencia esta
lnea: mysql_close($conectar);
if ($numero_filas==0){
$mensaje = "<font color='#FF0000' size='+1'>
No se encontraron coincidencias con el codigo $var_codigo
</font>";
}else{
$mensaje =NULL;
}
122

Al ingresar un cdigo que no se encuentra en la base de datos podr ver que
se imprime el mensaje al final de la pgina.
Resultado al ingresar el cdigo que no existe.
Agregue el siguiente cdigo.
Formulario que consulte datos y muestre el resultado como listado.

Mostrar informacin del usuario segn el cdigo ingresado en un formulario de
consulta:
Crear el archivo con nombre listado1.php, el cual agregara la conexin y listara
los archivos de la tabla usuarios en una tabla html la cual se generara con
cdigo php.
Cdigo fuente:
<?php
$resultado=mysql_query("SELECT nombre, edad, cedula FROM usuarios",$conectar);
$numero_filas = mysql_num_rows($resultado);
?>
<html>
<head><title>CONSULTA 2</title></head>
<body>
<table>
<td><b>NOMBRE</b></td>
<td><b>EDAD</b></td>
<td><b>CODIGO</b></td>
</tr>
<?php
while($row = mysql_fetch_array($resultado)){
printf("<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
123

</tr>"
);
}
mysql_free_result($resultado);
?>
</table>
<br>
Existen <?php echo $numero_filas; ?> registros.
</body>
</html>
Consulta para mostrar los registros que coincidan con un texto ingresado
en el formulario.
Para este ejercicio nos conectaremos a la base de datos de prueba
northwind.
Por ejemplo mostrar todos los clientes cuyo nombre de empresa con la letra a.
PASO 1: Creamos el formulario
para ingresar el criterio a buscar.
<html>
<head>
</head>
<body>
<H1>FORMULARIO DE CONSULTA</H1>
<FORM ACTION="listado2.php" method="post">
<TABLE>
<TR>
<TD width="117">Ingrese el nombre:</TD>
<TD width="144"><input type="text" name="nombre" id="nombre"></TD>
<TD width="66"><input type="submit" name="accion" value="Consultar"></TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
PASO 2: Elaboramos el archivo que se encargara de recibir la informacin del

formulario y procesar la consulta en la base de datos para mostrar aquellos
nombres de empresas cuyos nombres comiencen con la letra ingresada.
<?php
124

$nombre = $_POST['nombre'];
$resultado=mysql_query("SELECT
CustomerID, CompanyName, Country
FROM customers WHERE CompanyName like '".$nombre."%'",$conectar);
?>
<html>
<body>
<table>
<td><b>ID</b></td>
<td><b>NOMBRE</b></td>
<td><b>PAIS</b></td>
</tr>
<?php
printf("<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
</tr>"
);
}
?>
</table>
<br>
Existen <?php echo $numero_filas; ?> registros que coinciden.
</body>
</html>
Resultado:
125

Al ejecutar la consulta con la letra a ingresada al formulario, obtendremos el
siguiente reporte:
Consultas con ms de una tabla:

Tome como referencia la data northwind.
Debe de mostrar los nombres de las categoras, cuantos productos tiene cada
categora, adems debe de mostrar solo aquellos productos que tengan menos
o ms productos que el nmero ingresado en el formulario.
Ordenar por nombre de categora.
PASO 1: Disear el siguiente formulario:
pp
126

PASO 2:
<?php
$cantidad = $_POST['cantidad'];
$resultado=mysql_query("SELECT c.CategoryName, count(p.productid) as Cantidad
FROM products p
INNER JOIN categories c on c.CategoryID = p.categoryid
GROUP BY c.CategoryName
HAVING count(p.productid) <=".$cantidad."
ORDER BY c.CategoryName",$conectar);
?>
<html>
<body>
<p><B>CANTIDAD DE PRODUCTOS POR CATEGORIA</B></p>
<table border="1">
<td><b>CATEGORIA</b></td>
<td><b>CANTIDAD</b></td>
</tr>
<?php
printf("<tr>
<td>$row[0]</td>
<td align=center>$row[1]</td>
</tr>"
);
}
?>
</table>
<br>
Existen
<?php echo "<font color='blue'><b>".$numero_filas."</b></font>"; ?>
registros que tienen menos de
<?php echo "<font color='red'><b>".$cantidad."</b></font>"; ?> unidades.
<br>
<br>
<a href="formulario_listado3.php" target="_parent">Regresar</a>
</body>
</html>
127

Resultado:
ELIMINAR REGISTROS.
En el siguiente ejercicio crearemos un formulario que tendr un control campo
de texto, el cual servir para ingresar el cdigo del usuario a eliminar, este
formulario se conectara al archivo que tiene la secuencia sql para eliminar uno
o ms registros.
El formulario de eliminacin estar validado para que no permita ejecutar el
botn mientras el campo de texto este vaco.
OBSERVACION:
Para modificar la estructura de la tabla agregndole un campo llave puede hacer lo
siguiente:
PASO 1:
Diseo el siguiente formulario y
codifique:
<html>
<head>
<script Language="JavaScript">
function validar(form1){
if (formulario1.codigo.value.length < 1){
alert("Ingrese el CODIGO");
formulario1.codigo.focus();
return (false);
}
if (confirm('Esta seguro de ELIMINAR?')){
}else{
128

alert("Cancelado");
return (false);
}
}
</script>
</head>
<body>
<H1>ELIMINAR REGISTRO</H1>
<FORM name="formulario1" ACTION="elimina1.php" method="post" onSubmit =
"return validar(this)">
<TABLE>
<TR>
<TD width="117">Ingrese el codigo:</TD>
<TD width="66"><input type="submit" name="accion" value="Eliminar"></TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
PASO 2: Creamos el archivo con nombre proceso_eliminar1.php, el cual

recibe el cdigo por el mtodo post del formulario anterior y ejecuta la consulta
sql para eliminar el registro de la base de datos.
NOTA:
Algunos sistemas de seguridad tienen la poltica de no eliminar ningn registro, en su
lugar cambian el estado del registro y/o lo almacenan en alguna tabla depsito o en
otra base de datos. Esto lo hacen con la finalidad de poder recuperar el registro
eliminado en el futuro o por cuestiones de auditoria, todo esto depende del anlisis
respectivo.
Cdigo fuente del archivo proceso_eliminar1.php.

<?php
$cod = $_POST['codigo'];
$consultasql4 = "DELETE FROM usuarios WHERE cedula = '$cod'";
$resultado4 = mysql_query($consultasql4, $conectar);
echo mysql_error();
?>
129

<html>
<head><title>ELIMINAR</title></head>
<body>
<p>EL USUARIO CON CODIGO <?php echo $cod; ?> FUE ELIMINADO
CORRECTAMENTE</p>
</body>
</html>
PASO 3: Cargue el formulario

e ingrese el cdigo del usuario
que desea eliminar, luego dele
clic en el botn Aceptar.
RESULTADO:
Luego de aceptar la ventana del formulario anterior, debe de mostrarse el
siguiente reporte sin ningn error, el cual indica que el registro se elimin de
forma correcta.
Verifique que en la base de datos se

elimin el registro ingresado.
ACTUALIZAR REGISTROS.
En el siguiente ejercicio crearemos un
formulario que tendr un control campo de
texto, en este campo ingresaremos el cdigo del registro que deseamos
actualizar sus datos, luego de ingresar y ejecutar este formulario, aparecern
los datos en un nuevo formulario el cual nos permitir modificar los datos para
luego ejecutar este nuevo formulario y proceder a actualizar los cambios de la
base de datos.
Este ejercicio consta de 3 archivos sin tomar en cuenta la conexin.
Formulario para ingresar el cdigo.
Formulario de actualizacin de datos.
130

Pgina que se encarga del proceso de actualizacin.

formulario_actualiza1.php, el cual nos
pedir el cdigo del registro a actualizar.
<html>
<head>
</head>
<body>
<H1>ACTUALIZAR REGISTRO</H1>
<FORM name="formulario1" ACTION="formulario_actualiza1_ver.php"
method="post">
<TABLE>
<TR>
<TD width="117">Ingrese el codigo:</TD>
<TD width="66"><input type="submit" name="accion" value="Actualizar"></TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
PASO 2: Creamos el formulario que recibe los

datos y ejecuta la consulta para mostrar el
resultado en los campos de texto de este nuevo
formulario.
Cdigo fuente del archivo
formulario_actualiza1_ver.php.
<?php
$consulta=mysql_query("SELECT nombre, edad FROM usuarios WHERE
cedula='$var_codigo'",$conectar);
$numero_filas = mysql_num_rows($consulta);
$res_nombre = $resultado[0];
$res_edad = $resultado[1];
131

if ($numero_filas==0){
$mensaje = "<font color='#FF0000' size='+1'>
No se encontraron coincidencias con el codigo $var_codigo
</font>";
}else{
$mensaje =NULL;
}
?>
<html>
<head>
<title>ACTUALIZAR</title>
function validar(form1){
alert("Ingrese el CODIGO");
formulario1.codigo.focus();
return (false);
}
if (confirm('Esta seguro de ACTUALIZAR?')){
}else{
alert("Cancelado");
return (false);
}
}
</script>
</head>
<body>
<p><b>RESULTADO DE LA CONSULTA ANTERIOR:</b></p>
<p><a href="formulario_actualiza1.php" target="_parent">Consultar otro
codigo</a></p>
<form name="formulario1" method="post" action="proceso_actualizar1.php" onSubmit
= "return validar(this)">
<TR>
<TD><b>Codigo:</b></TD>
<TD><input name="codigo" type="text" id="codigo" style="backgroundcolor:#CFE6FC" value="<?php echo $var_codigo; ?>" readonly></TD>
</TR>
<TR>
<TD width="80"><b>Nombre:</b></TD>
<TD width="180"><label for="nombre"></label>
<input name="nombre" type="text" id="nombre" value="<?php echo $res_nombre;
?>"></TD>
</TR>
<TR>
<TD><b>Edad:</b></TD>
<TD><label for="edad"></label>
<input name="edad" type="text" id="edad" value="<?php echo $res_edad;
?>"></TD>
</TR>
132

<TR>
<TD colspan="2" align="center"><input type="submit" name="actualizar"
id="actualizar" value="Actualizar"></TD>
</TR>
</TABLE>
</form>
<?php echo $mensaje; ?>
</body>
</html>

proceso_actualizar1.php, el cual se
encargara de recibir los datos de los
campos de texto del formulario
anterior,
los
cuales
fueron
modificados y son almacenados en
variables para actualizar la base de
datos.
<?php
$cod = $_POST['codigo'];
$nombre = $_POST['nombre'];
$edad = $_POST['edad'];
$consultasql = "UPDATE usuarios
SET nombre = '$nombre',
edad = '$edad'
WHERE cedula = '$cod'";
$resultado4 = mysql_query($consultasql, $conectar);
echo mysql_error();
?>
<html>
<head><title>ACTUALIZAR</title></head>
<body>
<p>EL USUARIO CON CODIGO <?php echo "<B>".$cod."</B><br>"; ?> FUE
ACTUALIZADO CORRECTAMENTE</p>
<p><b>REPORTE DE DATOS ACTUALIZADOS:</b> </p>
<TR>
133

<TD width="180"><?php echo $nombre; ?></TD>
</TR>
<TR>
<TD>Edad:</TD>
<TD><?php echo $edad; ?></TD>
</TR>
<TR>
<TD>Codigo:</TD>
<TD><?php echo $cod; ?></TD>
</TR>
</TABLE>
<p><a href="formulario_actualiza1.php" target="_parent">Consultar otro codigo para
actualizar</a></p>
</body>
</html>
RESULTADO EN EJECUCION:
Ejecutamos el primer formulario de consulta:
Modificamos los valores
de los campos de texto
y le damos clic en el
botn Aceptar.
Procedemos a darle clic

en el botn actualizar.
Reporte final indicando que se

efectu la actualizacin de forma
correcta.
NOTA:
Si desea mostrar una imagen distinta para saber si la conexin a la data se
llevo a cabo de forma correcta, puede agregar el siguiente cdigo en la
conexin.
134
De esta forma aparecen las imgenes

en vez del mensaje.
FUNDAMENTO TERICO:
Elaborar conexin entre PHP y una base de datos

A la hora de hacer grandes proyectos en PHP necesitaremos almacenar y
tener clasificados muchos datos en algn lugar. Las Cookies solo nos sirven
para almacenar datos temporalmente, y solo es visible para el visitante.
Guardar la informacin en archivos de texto por otro lado resultara imposible
de leer en caso de que tuviramos muchos datos, sin contar que la seguridad
de estos datos sera muy mala.
Para facilitar el almacenamiento de informacin existen las Bases de Datos.
Qu son las Bases de Datos?

Son espacios donde se pueden
guardar en formato de tablas grandes
cantidades de datos. Las Bases de
Datos se ordenan de la siguiente
Manera:
Cada Base de Datos cuenta con una serie de tablas y cada tabla tiene
diferentes campos (fields) y a su vez estos campos tienen propiedades y
valores. Le llamaremos Registro a este conjunto de campos que conforman
una tabla.
135

De esta manera si visualizamos una Tabla de una Base de Datos la veramos
as.
Campo1
Campo2
Campo3
1 Registro
Valor
Valor
2 Registro
Valor
Valor
De esta manera cada vez que insertemos datos dentro de una tabla se ir
creando una nueva columna con los datos. Por ejemplo si tuvisemos una tabla
que guardara el nombre, el apellido y la edad de distintas personas la
visualizaramos as luego de que 3 personas hayan ingresado sus datos:
Nombre
Apellido
Edad
Bryam
Alva
15
Sebastin
Chanca
12
Camila
Rivera
10
Tipos de Bases de datos:

Existen diferentes tipos de Bases de datos, entre estos podemos destacar:
Oracle
Mysql
MS SQL Server
Acces
Cada una con sus ventajas y desventajas.
SEGURIDAD EN LA BASE DE DATOS.

Diseando la base de datos.
El primer paso es siempre crear una base de datos, a menos que quiera utilizar
una de terceras personas. Cuando una base de datos es creada, sta es
asignada a un propietario, el que ha ejecutado la sentencia de creacin.
Usualmente, slo el propietario (o un superusuario) puede hacer cualquier cosa
con los objetos en esa base de datos, y para permitir a otros usuarios que
puedan utilizarla, debe concederles privilegios.
Las aplicaciones nunca deberan conectarse a la base de datos como su

propietario o como superusuario, porque estos usuarios pueden ejecutar
136

cualquier consulta a su antojo, por ejemplo, modificar el esquema (Ej., eliminar
tablas) o borrar su contenido entero.
Puede crear distintos usuarios de la base de datos para cada aspecto de su

aplicacin con permisos muy limitados a los objetos. La mayora de privilegios
que son requeridos deberan ser solamente otorgados, y as evitar que el
mismo usuario pueda interactuar con la base de datos en diferentes casos y
usos. Esto significa que si los intrusos ganan acceso a su base de datos
utilizando las credenciales de la aplicacin, solamente afecta a los cambios que
su aplicacin permita.
Usted est encarecido a no implementar toda la lgica del negocio en la
aplicacin web (Ej., sus scripts), en su lugar hgalo en el esquema de la base
de datos utilizando vistas, disparadores o reglas. Si el sistema evoluciona, se
pensar en abrir nuevos puertos a la base de datos, y usted tendr que reimplementar la lgica en cada base de datos del cliente por separado. Al
respecto de lo antes citado, los disparadores pueden ser utilizados para
manejar campos transparentes y automticamente, lo cual a menudo provee un
vistazo al interior cuando hay problemas de depuracin con su programa o con
el sistema de seguimientos de transacciones de su aplicacin.
Conectndose a la base de datos.
Puede ser que quiera establecer las conexiones sobre SSL para encriptar la
comunicacin cliente/servidor para incrementar la seguridad, o tambin puede
usar ssh para encriptar la conexin de red entre los clientes y el servidor de
base de datos. Si alguno de stos es utilizado, el monitoreo de su trfico y la
obtencin de informacin sobre su base de datos ser difcil para un posible
atacante.
Modelo de almacenamiento encriptado.
SSL/SSH proteje los datos que viajan desde el cliente al servidor: SSL/SSH no
proteje los datos persistentes almacenados en una base de datos. SSL es un
protocolo para proteger los datos mientras viajan en el cable.
Una vez un atacante gana acceso directamente a su base de datos (sobre
pasando el servidor web), los datos sencibles podran ser divulgados o mal
utilizados, a menos que la informacin est protegida en la base de datos por s
misma. Encriptando los datos es una buena forma de mitigar esta amenaza,
pero muy pocas bases de datos ofrecen este tipo de encripcin de datos.
La forma ms fcil para trabajar en este problema, es crear primero su propio
137

paquete de encripcin, y utilizarlo desde de sus scripts de PHP. PHP puede
guiarle en esto con muchas extensiones, tales como Mcrypt y Mhash,
cubriendo as, una amplia variedad de algoritmos de encripcin. El script
encripta los datos antes de insertarlos dentro de la base de datos, y los
desencripta cuando los devuelve.
En caso de datos que deben estar ocultos, si no fuera necesario usar su
representacin real (es decir, que no se mostrarn), quizs convenga utilizar
hashing. El ejemplo ms tpico de hashing es cuando se almacena el hash
MD5 de una contrasea en una base de datos, en lugar de almacenar la
contrasea en s misma.
Inyeccin de SQL.
Muchos desarrolladores web son desprevenidos de cmo las consultas SQL
pueden ser manipuladas, y asumen que una consulta SQL es un comando
confiable. Esto significa que las consultas SQL estn expuestas a que sean
malversadas en controles de acceso, y por lo tanto, sobrepasar las revisiones
de autenticacin y autorizacin estndar, y que algunas veces las consultas
SQL an podran permitir el acceso de comandos a nivel de sistema operativo
del ordenador.
Comandos directos de Inyeccin SQL es una tcnica donde un atacante crea o
altera comandos SQL existentes para exponer datos ocultos, sobreponerse a
los que son importantes, o peor an, ejecutar comandos peligrosos a nivel de
sistema en el equipo donde se encuentra la base de datos. Esto se logra a
travs de la aplicacin, tomando la entrada del usuario y combinndola con
parmetros estticos para elaborar una consulta SQL. Los siguientes ejemplos
estn basados en historias reales, desafortunadamente.
Debido a la falta de validacin en la entrada de datos y conectndose a la base
de datos con privilegios de sper usuario o de alguien con privilegios que
puede crear usuarios, el atacante podra crear un sper usuario en su base de
datos.
Tcnicas de evitacin.
Pese a que pueda parecer obvio que un atacante debe tener al menos algn
conocimiento de arquitecturas de bases de datos para poder realizar un ataque
con xito, el obtener esta informacin suele ser muy sencillo. Por ejemplo,
cuando la base de datos forma parte de un paquete de software libre, o
disponible pblicamente, con una instalacin predefinida, esta informacin se
encuentra completamente libre y disponible. Esta informacin puede haber sido
divulgada en proyectos de cdigo cerrado - incluso si est codificad, ofuscada o
138

compilada - incluso por el propio cdigo mediante mensajes de error. Otros
mtodos incluyen el uso de nombres de tablas y columnas frecuentes. Por
ejemplo, un formulario de inicio de sesin que utiliza una tabla 'users' con los
nombres de columna 'id', 'username', y 'password'.
Esos ataques estn principalmente basados en explotar el cdigo que no ha
sido escrito teniendo en mente la seguridad. Nunca confes en ningn tipo de
entrada, especialmente la que viene del lado del cliente, aun cuando esta
venga de una caja de seleccin, un campo oculto o una cookie. El primer
ejemplo muestra que una inofensiva consulta puede causar desastres.
Nunca se conecte como sper usuario o como el propietario de la base de
datos. Siempre utilice usuarios personalizados con privilegios muy limitados.
Use sentencias preparadas con variables vinculadas. Son proporcionadas por
PDO, MySQLi y otras bibliotecas.
Revise si la entrada proporcionada tiene el tipo de datos que se espera. PHP
tiene un rango amplio de funciones para validar la entrada de datos, desde las
ms simples encontradas en Funciones de variable y en Funciones de tipo
Caracter (Ej. is_numeric(), ctype_digit() respectivamente) y siguiendo el apoyo
con las Expresiones regulares compatibles con Perl.
Si la expresin espera una entrada numrica, considere verificar los datos con
la funcin ctype_digit(), o silenciosamente cambie su tipo utilizando settype(), o
use su representacin numrica por medio de sprintf().
Si la capa de la base de datos no admite variables vinculadas, entrecomille
cada valor no numrico proporcionado por el usuario que sea pasado a la base
de datos con la funcin de escapado de cadenas de caracteres especfica de la
base de datos (p.ej. mysql_real_escape_string(), sqlite_escape_string(), etc.).
Las funciones genricas como addslashes() son tiles solamente en un entorno
muy especfico (p.ej., MySQL en un conjunto de caracteres monobyte con
NO_BACKSLASH_ESCAPES deshabilitada), por lo que es mejor evitarlas.
No muestre ninguna informacin especfica de la base de datos, especialmente
sobre el esquema, por su correcto significado es como jugar sucio contra usted
mismo. Vea tambin Reporte de errores y Manejo de errores y funciones de
registro.
Podra utilizar procedimientos almacenados y previamente cursores definidos,
para abstraer el acceso a datos para que los usuarios no tengan acceso directo
a las tablas o vistas, para que esta solucin tenga otros impactos.
139

CONECTAR PHP Y MYSQL
A la hora de desarrollar una aplicacin PHP que necesite interactuar con una
base de datos MySQL podemos elegir las siguientes formas:
1. Elegir una API.

PHP ofrece tres APIs diferenctes para conectarse a MySQL. Abajo se muestran
las APIs proporcionadas por las extensciones mysql, mysqli, y PDO. Cada
trozo de cdigo crea una conexin al servidor de MySQL que se est
ejecutando en "ejemplo.com" usando el nombre de usuario "usuario" y la
contrasea "contrasea". Y se ejecuta una consulta para saludar al usuario.
Comparacin de las tres APIs de MySQL
<?php
// mysqli
$mysqli = new mysqli("ejemplo.com", "usuario", "contrasea", "basedatos");
$resultado = $mysqli->query("SELECT 'Hola, querido usuario de MySQL!' AS
_message FROM DUAL");
$fila = $resultado->fetch_assoc();
echo htmlentities($fila['_message']);
// PDO
$pdo = new PDO('mysql:host=ejemplo.com;dbname=basedatos', 'usuario',
'contrasea');
$sentencia = $pdo->query("SELECT 'Hola, querido usuario de MySQL!' AS _message
FROM DUAL");
$fila = $sentencia->fetch(PDO::FETCH_ASSOC);
// mysql
$c = mysql_connect("ejemplo.com", "usuario", "contrasea");
mysql_select_db("basedatos");
$resultado = mysql_query("SELECT 'Hola, querido usuario de MySQL!' AS _message
FROM DUAL");
$fila = mysql_fetch_assoc($resultado);
?>
Una Interfaz de Programacin de Aplicaciones, o API, define las clases,

mtodos, funciones y variables que necesitar llamar una aplicacin para llevar
140

a cabo una tarea determinada. En el caso de las aplicaciones de PHP que
necesitan comunicarse con un servidor de bases de datos, las APIs necesarias
se ofrecen generalmente en forma de extensiones de PHP.
Las APIs pueden ser procedimentales u orientadas a objetos. Con una API
procedimental invocan funciones para llevar a cabo las tareas, mientras con
con una API orientada a objetos se instancian clases, y entonces se invocan a
mtodos de los objetos creados. Entre ambas opciones, la segunda es
generalmente la va recomendada, puesto que est ms actualizada y conlleva
una mejor organizacin de cdigo.
Cuando se escriben aplicaciones PHP que necesitan conectar a un servidor
MySQL, existen varias opciones disponibles respecto a API. Este documento
abarca esas opciones, y ayuda a elegir la mejor solucin para cada aplicacin.
API remendada.
Se recomienda usar las extensiones mysqli o PDO_MySQL. No se recomienda
usar la extensin mysql antigua para nuevos desarrollos, ya que ha sido
declarada obsoleta a partir de PHP 5.5.0 y ser eliminada en el futuro. Se
proporciona una matriz detallada de comparacin de caractersticas ms abajo.
El rendimiento global de las tres extensiones se considera aproximadamente el
mismo. Aunque el rendimiento de la extensin aporta solamente una fraccin
del total del tiempo de ejecucin de una consulta web de PHP. A menudo el
impacto es tan bajo como 0.1%.
ext/mysqli PDO_MySQL ext/mysql
Versin de PHP donde se introdujo.
5.0
5.1
2.0
Incluida con PHP 5.x
Estado de desarrollo.
Activo
Activo
Slo
mantenimiento
Ciclo de vida.
Activo
Activo
Obsoleto
Recomendada para nuevos proyectos.
No
Interfaz POO.
No
Interfaz procedimental.
No
La API soporta el no bloqueo, consultas

asncronas con mysqlnd.
No
No
Conexiones persistentes.
141

La API soporta conjunto de caracteres.
La API soporta sentencias preparadas del

lado del servidor.
No
La API soporta sentencias preparadas del

lado del cliente.
No
No
La API soporta procedimientos

almacenados.
No
API soporta sentencias mltiples.
La mayora
No
La API soporta transacciones.
No
Las transacciones se pueden controlar con

SQL.
Soporta toda la funcionalidad de MySQL

5.1+
La mayora
No
2. Elegir un Conector.
En la documentacin de MySQL, el trmino conector hace referencia al
software que permite a una aplicacin conectarse a un servidor de bases de
datos MySQL. MySQL proporciona conectores para ciertos lenguajes, entre
ellos PHP.
Si una aplicacin de PHP necesita comunicarse con un servidor de bases de
datos, necesitar escribir el cdigo PHP que realice tareas tales como conectar
al servidor de bases de datos, realizar consultas y otras funciones relacionadas
con bases de datos. Es necesario tener un software instalado en el sistema que
proporcione a la aplicacin en PHP la API, que manejar la comunicacin entre
el servidor de bases de datos y la aplicacin, posiblemente empleando en caso
necesario otras bibliotecas. A este software generalmente se le conoce como
conector, dado que permite a una aplicacin conectar con un servidor de bases
de datos.
3. Elegir un Conector.
Un driver es un software diseado para comunicarse con un tipo especfico de
servidor de bases de datos. Podra tambin invocar a una biblioteca, como por
ejemplo la Biblioteca Cliente de MySQL o el Driver Nativo de MySQL. Estas
bibliotecas implementan el protocolo de bajo nivel que se utiliza para
comunicarse con el servidor de bases de datos.
A modo de ejemplo, la capa de abstraccin de bases de datos Objetos de
Datos de PHP (PDO) utilizar alguno de los drivers para bases de datos
142

disponibles. Uno de ellos es el driver PDO MYSQL, que permite comunicarse
con un servidor MySQL.
A menudo la gente utiliza los trminos conector y driver indistintamente. Esto
puede dar lugar a confusin. En la documentacin de MySQL, el trmino
"driver" queda reservado para el software que proporciona la parte especfica
de una base de datos dentro de un conector.
4. Elegir un Extensin.
En la documentacin de PHP aparece otro trmino - extensin. El cdigo
fuente de PHP consiste por un lado de un ncleo, y por otro de extensiones
opcionales para el ncleo. Las extensiones de PHP relacionadas con MySQL,
tales como mysqli, y mysql, estn implementadas utilizando el framework de
extensiones de PHP.
Tpicamente, una extensin ofrece una API al programador de PHP para
permitirle hacer uso de sus utilidades mediante cdigo. Sin embargo, algunas
de las extensiones que utilizan el framework de extensiones de PHP no ofrecen
ninguna API al programador.
La extensin del driver PDO MySQL, por ejemplo, no proporciona ninguna API
al programador PHP, pero en su lugar ofrece una interfaz a la capa de PDO
que tiene por encima.
No deben confundirse los trminos API y extensin, dado que una extensin no
debe necesariamente proporcionar una API al programador.
Conexiones.
El servidor MySQL soporta el uso de diferentes capas de transporte para
conexiones. Las conexiones usan TCP/IP, sockets de dominio Unix o tuberas
con nombre de Windows.
El nombre del host localhost tiene un significado especial. Est vinculado al uso
de sockets de dominio Unix. No es posible abrir una conexin TCP/IP usando
como nombre de host localhost, se debe usar 127.0.0.1 en su lugar.
Conectando PHP y MySQL.
Para obtener los datos desde MySQL necesitamos una conexin (una forma de
enlazar o comunicarse), la cual nos permitir extraer datos de la misma. Para
ello PHP tiene una serie de funciones exclusivamente para interactuar con
mysql. Entonces para la conexin utilizaremos la funcin mysql_connect y
luego mysql_select_db el cual nos permite definir a que base de datos del
143

servidor deseamos conectarnos.
EJEMPLO CONEXIN 1:
<html>
<body>
<?php
$servidor = "localhost"; //el servidor que utilizaremos, en este caso ser el localhost
$usuario = "desarrolloweb"; //El usuario que acabamos de crear en la base de datos
$contrasenha = "123456"; //La contrasea del usuario que utilizaremos
$BD = "northwind"; //El nombre de la base de datos
/*Aqu abrimos la conexin en el servidor.

Normalmente se envian 3 parametros (los datos del servidor, usuario y
contrasea) a la funcin mysql_connect,
si no hay ningn error la conexin ser un xito
El @ que se ponde delante de la funcion, es para que no muestre el error al
momento de ejecutarse, ya crearemos un cdigo para eso*/
$conexion = @mysql_connect($servidor, $usuario, $contrasenha);
/* Aqu preguntamos si la conexin no pudo realizarse, de ser as lanza un
mensaje en la pantalla con el siguiente texto "No pudo conectarse:"
y le agrega el error ocurrido con "mysql_error()"
*/
if (!$conexion) {
die('<strong>No pudo conectarse:</strong> ' . mysql_error());
}else{
//La siguiente linea no es necesaria, simplemente la pondremos ahora para
poder observar que la conexin ha sido realizada
echo 'Conectado satisfactoriamente al servidor <br />';
}
/*En esta lnea seleccionaremos la BD con la que trabajaremos y le pasaremos
como referencia la conexin al servidor.
Para saber si se conecto o no a la BD podramos utilizar el IF de la misma
forma que la utilizamos al momento de conectar al servidor, pero usaremos otra
forma de comprobar eso usando die().
*/
mysql_select_db($BD, $conexion) or die(mysql_error($conexion));
144

?>
</body>
</html>
Al ejecutarlo debe de aparecer el
mensaje tal como lo muestra la
siguiente ventana:
Desconectndonos del Servidor.
Una vez que hayamos hecho todo lo que necesitbamos deberemos
desconectarnos del Servidor, para ello usaremos la funciona mysql_close()
dndole como valor nuestra conexin.
$conexion=mysql_connect("localhost","myuser","mypass");
mysql_close($conexion);
EJEMPLO CONEXIN 2:
<?php
$usuario = "desarrolloweb";
$password = "123456";
$BD = "northwind"; //El nombre de la base de datos
try{
$conn = new PDO('mysql:host=localhost;dbname=northwind', $usuario, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
echo "Conectado satisfactoriamente al servidor";
}catch(PDOException $e){
echo "ERROR: " . $e->getMessage();
}
?>
De esta manera se conecta a la base de datos y en caso de que no pueda saca

el error con un echo. Se puede ver que el try..catch hace la funcin del or die
de la sintaxis habitual de PHP y MySQL.
EJEMPLO CONEXIN 3:
Creamos un archivo en nuestra raz principal del servidor php con el nombre
logeo.php y agregamos el siguiente cdigo:
<?php
145

session_start();
if( $_POST )
{
#Comprueba que las variables existan
if ( isset( $_POST['usuario'] ) and isset( $_POST['password'] ) ){
# archivo php necesario
require_once 'php/usuario.class.php';
# instancia a clase usuario
$usuario = new usuario();
if( $usuario->validar_ingreso($_POST['usuario'] , $_POST['password']) ){
//crea instancia de sesion segura
$_SESSION["usuario"]=$_POST['usuario'];//variable de sesion;
# si usuario existe -> redireccionar a nueva pagina
echo 'Exito: Usuario '.$_SESSION["usuario"].' logueado';exit;
}else
echo 'Error: Acceso Denegado';
}
}
?>
<form id="form" name="form" method="post" action="">
<span>Nombre de Usuario</span>
<br />
<input id="usuario" name="usuario" type="text" value="" />
<br />
<span>Contraseña</span>
<br />
<input id="password" name="password" type="password" value="" />
<br />
<input name="enviar" id="enviar" type="submit" value="Entrar" />
</form>
Elaboramos los siguientes dos archivos (ambos deben de estar en una

carpeta con nombre PHP dentro de la raz principal del servidor.)
Mysql.class.php
<?php
# CLASE PARA GESTIONAR LA BASE DE DATOS
class mysql
146

{
#___________________________________________________________________________
_soy_una_barra_separadora :)
private $localhost = "localhost";
private $usuario = "desarrolloweb";
private $password = "123456";
private $database = "northwind";
#___________________________________________________________________________
soy_una_barra_separadora :)
/* METODO PARA CONECTAR CON LA BASE DE DATOS*/
public function conectar()
{
if(!isset($this->conexion)){
$this->conexion = (mysql_connect($this->localhost, $this->usuario,$this->password)) or
die(mysql_error() );
mysql_select_db($this->database , $this->conexion) or die(mysql_error());
}
}
#___________________________________________________________________________
// METODO PARA REALIZAR UNA CONSULTA
// INPUT: $q -> consulta
// OUTPUT: $result
public function consulta($q)
{
$resultado = mysql_query($q,$this->conexion);
if(!$resultado){
echo 'MySQL Error: ' . mysql_error();
exit;
}
return $resultado;
}
#___________________________________________________________________________
// METODO PARA CONTAR EL NUMERO DE FILAS DEVUELTAS
// INPUT: $r
// OUTPUT: numero de filas
function numero_de_filas($result){
147

if(!is_resource($result))
return false;
return mysql_num_rows($result);
}
#___________________________________________________________________________
}
?>
Usuario.classs.php
<?php
# CLASE USUARIO PARA GESTIONAR A LOS USUARIOS DEL SISTEMA
require_once 'mysql.class.php';
class usuario extends mysql

{
#___________________________________________________________________________
#Cuando se crea el objeto se realiza la conexin a la base de datos
public function __construct()
{
$this->conectar();
}
#___________________________________________________________________________
public function validar_ingreso($usuario=NULL,$password=NULL)
{
if( $usuario!=null and $password!=null)
{
# se limpian variables
$usuario = htmlspecialchars(trim($usuario), ENT_QUOTES);
$password = htmlspecialchars(trim($password), ENT_QUOTES);
# se realiza la consulta a la base de datos
$r = $this->consulta("SELECT * FROM slogin_usuario WHERE user='$usuario' AND
pass='$password' ");
# retorna resultado en boolean
return ( $this->numero_de_filas($r)>0) ? true : false ;
}
else
return false;
148

}
#___________________________________________________________________________
}
?>
NOTA:
Para los ejemplos anteriores
se us una base de datos de
prueba muy utilizada en
distintos
cursos
de
programacin y administracin
de base de datos llamada
northwind.
Puede descargarlo de forma
gratuita del siguiente link:
https://code.google.com/p/nort
hwindextended/downloads/detail?name=Northwind.MySQL5.sql
-Se cre dentro de la base de datos la tabla slogin_usuario y se agregaron 2

registros de prueba.
-Adicionalmente se le agrego como usuario para la base de datos los
especificados en los cdigos de los ejemplos anteriores.
DESARROLLAR CONSULTAS DE MANIPULACIN DE DATOS DESDE

PHP.
Funciones Bsicas de SQL:
Crear Base de datos:
CREATE DATABASE nombrebase;
Ocuparemos maysculas para denotar cuales son las palabras claves del
lenguaje, y minsculas para las variables y datos ingresados. Pero realmente
no importa porque SQL no distingue entre maysculas y minsculas, pero si es
una buena prctica para facilitar la lectura.
Borrar Base de Datos:
Una vez creada una base de datos podremos borrarla con todas sus tablas e
informacin.
DROP DATABASE nombrebase;
149

Usar Base de Datos:
Cuando queramos trabajar con alguna base primero deberemos especificar en
cual, para ello usamos:
USE nombrebase;
de ah en adelante todo lo que escribamos ser aplicado sobre la Base de
datos nombrebase.
Crear Tablas:
Antes de leer el siguiente cdigo, te aviso que no debes asustarte a pesar de
que se ve algo ms complicado es bastante simple.
CREATE TABLE nombretabla (campo1 int(6) auto_increment, campo2

varchar(50) NOT NULL, campo3 varchar(4) NULL, PRIMARY KEY (campo1) );
Esto crear una Tabla dentro de la base anteriormente especificada con USE,
esta tabla tendr los campos:
campo1, que soportara datos enteros (int) de 6 caracteres y se autoincrementar lo que quiere decir que es un campo que se completa solo con un
valor que aumenta a medida que ms datos se ingresen.
campo2 que soporta texto de mximo 50 caracteres y no puede estar vaca (no
puede ser nula)
campo3 que puede ser nulo, y que soporta una cadena de texto de mximo 4
caracteres.
Adems se especifica que el campo1 ser la clave primaria, lo que quiere decir
que es campo que encabeza esa tabla.
Insertar datos en una tabla (Crear un Registro):

Al insertar datos en una tabla nos crea un nuevo registro, que sera como una
nueva fila en la tabla. Siendo cada columna un campo. Como en el ejemplo del
principio donde 1, Javier, Letelier 17 era un Registro y 2, Jaime Ruiz, 52 era
otro.
INSERT INTO nombretabla (campo1, campo2,

('valor_campo1','valor_campo2','valor_campo3');
campo3)
VALUES
150

Como vemos los datos se agregan primero especificando la tabla y los campos
a rellenar en orden. Luego los valores de cada campo en el mismo orden. En
caso de que esta tabla fuese la misma del ejemplo anterior, no sera necesario
rellenar el campo1 ya que es de auto-incremento y se podra omitir al igual que
el campo3 que puede ser nulo.
Borrar una tabla:

Casi igual que para borrar Bases de datos.
DROP TABLE nombretabla;
Consultar:
Luego de que tenemos todos nuestros datos guardados en una tabla lo ms
seguro es que luego necesito consultarle a la tabla cuales son los datos que
esta tiene para esto tenemos diferentes formas.
Seleccionar:
SELECT campo1, campo2 FROM nombretabla;
Esto nos devolver todos los datos ingresados en los campos campo1 y
campo2 de la tabla nombretabla
Si quisiramos que nos mostrase TODOS los campos podemos usar el

comodn *
SELECT * FROM nombretabla;
lo que nos devolvera todos los datos ingresados en todos los campos.
as mismo podemos filtrar las bsquedas para que nos devuelven campos que
cumplan ciertas condiciones.
SELECT * FROM nombretabla WHERE campo1="Condicin";
Esta consulta nos dar como resultado todos los datos de cualquier campo de
la tabla nombretabla que cumplan la condicin de que su campo1 tenga el valor
Condicin
Tambin se puede usar la palabra LIKE para encontrar resultados que no sean
idnticos a lo pedido, sino que solo lo contengan.
151

SELECT * FROM nombretabla WHERE campo1 LIKE "%plo%";
En el script anterior, vemos usamos el signo %, que sirve para indicar un

comodn lo que quiere decir que si ponemos un % antes de la condicin se
encontraran todos los que terminen en la condicin. Si lo tiene al final todas las
que comiencen, y si la tiene a los dos lados, no importa donde se encuentre.
Por ejemplo:
%plo% nos devolvera cualquier campo1 que contenga cosas como palabra
Plomero, Ejemplo, aplomar etc.
si fuera %plo, solo nos encontraria Ejemplo, Templo, Contemplo, si fuese

plo% nos encontrara solo los que tuviesen Plomero, Plomo y por ultimo si
fuese a%to% nos encontraria palabras como Anatomico, Atomico, Atontado,
Amatorio, Ato
Consultar a ms de una tabla:

Cuando se relacionan varias tablas es normal que una misma columna forme
parte de varias tablas. Para evitar errores de nombres duplicados podemos
hacer dos cosas. Una es utilizar la sintaxis de nombre completo:
NombreTabla.NombreColumna.
select * from dbo.Products, dbo.Categories

where dbo.Products.CategoryID = dbo.Categories.CategoryID
La otra forma es dar un alias a cada tabla. Ejemplo:

select * from dbo.Products P, dbo.Categories C
where P.CategoryID = C.CategoryID
INSTRUCCIN JOIN ON(Coincidencia INTERNAS de columnas).

La instruccin JOIN nos permite combinar varias tablas haciendo coincidir los
valores de las columas que nos interesen. Es decir, si tenemos dos tablas A y
B que contienen una (o varias) columnas con el mismo nombre, podemos
relacionar ambas tablas por la columna del mismo nombre.
152

Por cada registro de la columna en la tabla A que tambin est en la columna
de la tabla B, obtendremos un una relacin. Lo que quiere decir que se produce
un producto cartesiano de cada valor de la columna de la tabla A, por todos los
valores coincidentes de la columna en la tabla B.
SELECT *
FROM Tabla1 T1
INNER JOIN Tabla2 T2a ON T1.Campo=T2a.Campo
INNER JOIN Tabla2 T2b ON T1.Campo=T2b.Campo
Borrar datos de una tabla (Borrar un Registro).

Para borrar un registro ocupamos DELETE, como vemos debemos especificar
que borrar para ello ocupamos una condicin. Aqu es cuando los campo Autoincrement comienzan a ser muy tiles, ya que siempre estos campos tendrn
un valor nico (Ningn registro ms que el mismo tendrn ese nmero que se
da por el orden en que fueron ingresados) As podremos borrar un registro
especifico.
DELETE FROM nombretabla WHERE campo1="Condicin";
Y para borrar uno especfico:
DELETE FROM nombretabla WHERE campoautoincrement=2;
De esta manera nos borrara el registro nmero 2.

Actualizacin y edicin de datos (Edicin de un registro):
Cuando necesitemos actualizar los datos de algn registro, por ejemplo porque
alguien cambio su nmero de telfono, o desea cambiar su avatar
necesitaremos cambiar ese registro.
UPDATE nombretabla SET campo1 = "Nuevo valor", campo2 = "Nuevo valor2"

WHERE campo1="Condicin";
Al igual que al borrar datos, nos ser muy til usar campos de auto incremento
para reconocer registros nicos. Por ejemplo ocupando nuevamente la tabla
del ejemplo de las Bases de Datos si quisiramos cambiar la edad de Pedro
podramos usar:
UPDATE nombretabla SET edad="27" WHERE nombre="Pedro";

153

y para evitar que podamos cambiar tal vez la edad de otra persona tambin
llamada Pedro sera mejor usar:
UPDATE nombretabla SET edad="27" WHERE id="3";
Realizar una consulta:

Ahora lo ms importante, como realizar cualquier clase de consulta a travs de
PHP.
Para ello usaremos la funcin mysql_query() y le daremos como valores la
consulta misma en SQL y la conexin.
Siempre que esperemos resultados de nuestra consulta deberemos
almacenarla en una variable, para despus poder acceder a los resultados.
$conexion=mysql_connect("localhost","myuser","mypass");
mysql_select_db("nombreBaseDeDatos",$conexion);
$resultados = mysql_query("SELECT
campo1='condicin';",$conexion);
FROM
nombretabla
WHERE
mysql_close($conexion);
Obtener datos de la consulta:

Muchas veces nuestras consultas nos darn respuestas, ya sean tablas
completas o nmero de resultados para ello contamos con las siguientes
funciones.
mysql_num_rows($resultados); Nos dar el nmero de registros obtenidos por

nuestra consulta.
mysql_result($resultado, registro, campo); Nos dar el valor que tenga el

campo de un registro. Su uso es colocando nmeros por ejemplo si ocupamos
mysql_result($resultado, 2,4) nos dara el valor del campo que esta en la
posicin numero 5 (4+1) de el registro encontrado numero 3 (2+1) .
Bueno existen muchas otras funciones que nos permitirn ver los datos en
forma de Arrays, saber los nombres de los campos, tipos de datos, crear o
borrar Bases etc Les dejare aqu una pequea lista sin especificar mucho
como se usan, pero de seguro realizando una bsqueda en Google de dicha
funcin encontraran la manera correcta de usarla.
154
mysql_fetch_array($resultado) = Crea un array con los resultados.

mysql_field_name($resultado, campo) = Nos da el nombre de un campo.
mysql_field_type($resultado, campo) = Nos da el tipo de dato que almacena el
campo.
mysql_errno() = Numero del ltimo error dado.

mysql_error() = Nos da el ltimo mensaje de error dado.
mysql_create_db(NombreBaseNueva, $conexion) = Crea una nueva base de
datos.
mysql_drop_db(Nombrebase,$conexion) = Borra una base.

mysql_free_result($resultados)= Libera la memoria de resultados.
155

1. Cree una base de datos llamada colegio, debe tener 3 tablas segn la
siguiente estructura:
Tabla Alumno:
Campos:
Cdigo
Nombres
Apellido_paterno
Apellido_materno
Fecha_Nacimiento
Distrito
Tabla Distritos
Campos:
Cdigo
NombreDistrito
2. Elabore los formularios y procesos necesarios para realizar los

mantenimientos (Registrar, actualizar y eliminar) a las dos tablas creadas(
Alumnos y Distritos)
3. Crear un formulario que me permita seleccionar el distrito y como resultado

me muestre solamente los alumnos que pertenecen al distrito seleccionado.
4. Crear una pgina reporte que liste todos los alumnos ordenados por
apellido paterno de forma ascendente y que muestre solamente los campos:
(Apellido paterno, materno y el nombre del distrito).
5. Crear una pgina reporte que muestre solamente los siguientes campos:
(Distrito, cuntos alumnos existen por distrito).
6. Crear una pgina reporte que muestren solamente los nombres, apellidos y
las edades de los alumnos (La edad se calcula en base a la fecha actual de
consulta y fecha de nacimiento registrada)
NOTA: Todos los formularios deben de estar validados para que no se puedan
ejecutar si no se introduce ningn valor en los campos de texto respectivos.
156

TAREA 05: DESARROLLAR APLICACIONES WEB.
Elaborar variables de sesin.
Trabajar con archivos desde PHP.
Desarrollar una aplicacin web completa.
Dale un pescado al hombre y comer por un da. Ensale a pescar,
y se podr alimentar toda su vida.... Annimo.

Acceso a internet.
ORDEN DE EJECUCIN:

Trabajar con archivos desde PHP.
Desarrollar una aplicacin web completa.
5.1. ELABORAR VARIABLES DE SESIN.

Vamos a crear un ejercicio donde por medio de un formulario se ingresen los
nombres y apellidos de una persona, luego se procesos los datos a una pgina
php donde almacenara los valores en una sesin, una vez que la sesin est
definida crearemos un enlace a una pgina nueva donde se mostrara el valor
de la sesin.
NOTA: Todos los archivos se encontraran en la misma carpeta del servidor.
PASO 1: Creamos el formulario con el nombre

formulario.php.
157

<?php
session_start();
?>
<html>
<head><title>Generar variable de sesin</title></head>
<body>
<h1>INGRESE SUS DATOS PERSONALES</h1>
<form method="POST" action="proceso.php">
<p>Nombre:
<input type="text" name="nombre" size="20" id="nombre"></p>
<p>Ape. Paterno:
<input type="text" name="paterno" size="20" id="paterno">
</p>
<p>Ape. Materno:
<input type="text" name="materno" size="20" id="materno">
</p>
<p><input type="submit" value="Enviar" name="Enviar"></p>
</form>
<p><a href = "reporte.php">Ver reporte</a></p>
</body>
</html>
PASO 2: Programamos el archivo proceso.php, que se encargara de recibir

los datos del formulario y definir la sesin.
<?php
session_start();
$var_paterno = $_POST['paterno'];
$var_materno = $_POST['materno'];
$_SESSION["miusuario"] = $var_nombre." ".$var_paterno." ".$var_materno;
?>
<html>
<head>
<title>PROCESO</title>
</head>
<body>
<h1>Muestro el valor de mi SESION: </h1>
<?php
158

echo "<b>Sesion: </b>".$_SESSION["miusuario"];
?>
<p><a href = "reporte.php">Ver la variable en otra pagina</a></p>
<p><a href = "cerrarsesion.php">Cerrar sesion</a></p>
</body>
</html>
PASO 3: Elaboramos la pgina reporte.php, donde solo se inicializara la

variable de sesin ya que fue definida en la pgina anterior.
<?php
session_start();
?>
<html><head><title>REPORTE</title></head>
<body>
<h1>El valor de mi SESION se mantiene. </h1>
<?php
echo "<b>Sesion: </b>".$_SESSION["miusuario"];
?>
<p><a href = "cerrarsesion.php">Cerrar sesion</a></p>
</body>
</html>
PASO 4: Creamos la pgina cerrarsesion.php la cual se encargara de

eliminar la sesin elaborada en la pgina proceso.php.
<?php
session_start();
session_unset();
session_destroy();
?>
<html>
<head>
<title>Cerrar sesion</title>
</head>
<body>
<h1>Acaba de cerrar su sesion de forma correcta</h1>
<p><a href = "formulario.php">Ir al formulario inicial</a></p>
159

</body>
</html>
Ejecucin:
Abrimos el archivo formulario.php en nuestro servidor, ingresamos los datos y
pulsamos el botn enviar.
Le damos clic en el vnculo para ver la variable de sesin en otra pgina.
Verificamos que efectivamente se muestra el valor en la pgina reporte.php.
Por ltimo le damos clic en el botn Cerrar sesin.
NOTA:Al inicio de la aplicacin, si le damos clic en el icono ver reporte sin haber
creado la sesin, aparecer el siguiente error:
160
5.2. TRABAJAR CON ARCHIVOS DESDE PHP.

En el siguiente ejercicio vamos a crear un formulario que permita subir un
archivo csv delimitado por comas al servidor y mediante una pgina php leer el
contenido del archivo.
NOTA:
El atributo enctype="multipart/form-data" tiene que estar siempre que queramos subir
un fichero, de lo contrario no se subir ningn archivo. Es bastante habitual olvidarse
de este atributo y perder un valioso tiempo viendo qu pasa.
PASO 1: Elaboramos el formulario subir.php que se encargara de seleccionar

el archivo de la computadora local para llevarlo al servidor.
<html>
<head>
<title>Subir archivo 1</title>
</head>
<body>
<form enctype="multipart/form-data" action="proceso_carga1.php" method="POST">
<input name="uploadedfile" type="file" />
<input type="submit" value="Subir archivo" />
</form>
</body>
</html>
PASO 2: Programamos el archivo proceso_carga1.php.

<?php
if (isset ($_FILES['uploadedfile'])){
$target_path = "cargas/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
161

echo "El archivo ". basename( $_FILES['uploadedfile']['name']). " ha sido
subido";
} else{
echo "Ha ocurrido un error, trate de nuevo!";
}
}
?>
<BR /><BR />
<p><a href="leercsv.php" target="_parent">Ver contenido del archivo csv
FORMATEADO</a></p>
<p><a href="leercsv_sinformato.php" target="_parent">Ver contenido del archivo csv
SIN FORMATO</a></p>
<p><a href="eliminararchivo.php" target="_parent">Eliminar archivo</a></p>
<p> </p>
<p><a href="subir1.php" target="_parent">Regresar al formulario inicial</a></p>
PASO 3: Creamos el archivo leercsv_sinformato.php.

El siguiente cdigo es bsico para ver el contenido del archivo csv.
<?php
$diractual1='cargas/plantilla.csv';
if(file_exists($diractual1)){
$fp = fopen ( "cargas/plantilla.csv" , "r" );
while (( $data = fgetcsv ( $fp , 1000 , ";" )) !== FALSE ) { // Mientras hay lneas que
leer...
$i = 0;
foreach($data as $row) {
echo $row." - "; // Muestra todos los campos de la fila actual
$i++ ;
}
echo "<br>";
}
fclose ( $fp );
}
?>
<p><a href="proceso_carga1.php" target="_parent">Regresar</a></p>
PASO 4: Creamos el archivo leercsv.php el cual estar un poco ms

trabajado con tablas para mostrar los datos formateados.
162

<table border="0">
<?php
$diractual1='cargas/plantilla.csv';
if(file_exists($diractual1)){
$fp = fopen ( "cargas/plantilla.csv" , "r" );
$numfila = 0;
echo "<tr>
<td align='center' bgcolor='#00356A'><font color='#FFFFFF'
face='Arial'><B>N</B></font></td>
face='Arial'><B>CODIGO</B></font></td>
face='Arial'><B>APELLIDOS</B></font></td>
face='Arial'><B>NOMBRES</B></font></td>
face='Arial'><B>CORREO</B></font></td>
</tr>";
while (( $data = fgetcsv ( $fp , 1000 , ";" )) !== FALSE ) { // Mientras hay lneas que
leer...
$numfila = $numfila + 1;
if (($numfila % 2) == 0) {
$colorfila = "bgcolor = '#E1F0FF'";
}else{
$colorfila = "bgcolor = 'white'";
}
echo "<tr $colorfila><td bgcolor='#004080'><font color='white' face='Arial' size='1'>$numfila</font></td>";
$i = 0;
foreach($data as $row) {
echo "<td><font color='#003366' face='Arial' size='1'>$row</font></td>";
$i++ ;
}
echo "</tr>";
}
fclose ( $fp );
}
?>
</table>
163

<p>
<a href="proceso_carga1.php" target="_parent">Regresar</a>
</p>
PASO 5: Creamos el fichero eliminararchivo.php el cual se encargara de

eliminar el fichero csv del servidor.
<?php
unlink('cargas/plantilla.csv');
?>
<p>Archivo eliminado correctamente.</p>
<p><a href="subir1.php" target="_parent">Regresar al formulario inicial</a></p>
NOTA:
Para este ejemplo se ha creado el archivo delimitado por comas desde Excel,
el cual tiene el siguiente contenido:
Ejecucin: Seleccionamos el archivo de nuestra pc local.
Luego aparece el siguiente reporte:
Al darle clic en el vnculo Ver contenido del archivo csv FORMATEADO se

mostrara la siguiente pgina.
164
Al darle clic en el vnculo Ver contenido del archivo csv SIN FORMATO se
mostrara la siguiente pgina.
Al darle clic al vnculo Eliminar archivo se mostrara la siguiente pgina

indicando que el fichero se ha eliminado de forma correcta del servidor.
NOTA: Todas las pginas tienen vnculos que permiten navegar por la aplicacin.
5.3. DESARROLLAR UNA APLICACIN WEB COMPLETA.

Vamos a crear una aplicacin para administrar la base de datos de un colegio.
Para este ejercicio se tomaran en cuenta solo los alumnos, profesores, cursos
y notas, creando para esto las tablas necesarias.
Creacion de aplicacin web
Estructura de la base de datos:
BASE DE DATOS COLEGIO
TABLAS: Distritos, Alumnos, Profesores, Cursos, Notas, Usuarios
Estructura Tabla Distritos:
Cdigo
Nombre del distrito
Estructura Tabla Alumnos:
Cdigo
165

Apellido Paterno
Apellido Materno
Nombres
Distrito (Cdigo)
Fecha de Nacimiento
Telfono
Correo electrnico
Estructura Tabla Profesores:
Cdigo
Apellido Paterno
Apellido Materno
Nombres
Distrito (Cdigo)
Estructura Tabla Cursos:
Cdigo
Nombre del Curso
Estructura Tabla Notas:
Cdigo correlativo
Cdigo del alumno
Cdigo del curso
Nota1
Nota2
Promedio
Fecha registro
Estructura Tabla Usuarios:
Cdigo
Nombres
Usuario
Clave
Nivel
A continuacin procederemos a crear los scripts para elaborar la base de datos

y sus tablas:
PASO 1: Ingresamos a nuestro administrador de base de datos local e

ingresamos el siguiente script:
CREATE DATABASE colegio
166

Tal como lo muestra la siguiente imagen:
PASO 2: Ingresamos a la base de datos

que acabamos de crear, y en la ficha sql
ingresamos el script para crear nuestra
primera tabla distritos, tal como lo muestra
la imagen inferior:
CREATE TABLE distritos(

id_distrito char(3) NOT NULL,
nombre_dis VARCHAR(100) NOT NULL,
PRIMARY KEY (id_distrito)
);
PASO 3: Elaboramos los script para las dems tablas y la ingresamos de la

misma forma que la tabla distritos la cual se detall en el paso anterior.
Tabla alumnos:
CREATE TABLE alumnos(
codigo_al char(5) NOT NULL,
apepaterno_al VARCHAR(30) NOT NULL,
apematerno_al VARCHAR(30) NOT NULL,
nombres_al VARCHAR(30) NOT NULL,
id_distrito_al char(3) NOT NULL,
fechanac_al DATETIME,
telefono_al VARCHAR(20) NULL,
correo_al VARCHAR(20) NULL,
PRIMARY KEY (codigo_al)
);
167

Tabla profesores:
CREATE TABLE profesores(
codigo_pro char(5) NOT NULL,
apepaterno_pro VARCHAR(30) NOT NULL,
apematerno_pro VARCHAR(30) NOT NULL,
nombres_pro VARCHAR(30) NOT NULL,
id_distrito_pro char(3) NOT NULL,
PRIMARY KEY (codigo_pro)
);
Tabla cursos:
CREATE TABLE cursos(
codigo_cur char(5) NOT NULL,
nombres_cur VARCHAR(30) NOT NULL,
PRIMARY KEY (codigo_cur)
);
Tabla notas:
CREATE TABLE notas(
id INT NOT NULL AUTO_INCREMENT,
codigo_al char(5) NOT NULL,
codigo_cur char(5) NOT NULL,
nota1 double NOT NULL,
nota2 double NOT NULL,
promedio NOT NULL,
PRIMARY KEY (id)
);
Tabla usuarios:
CREATE TABLE usuarios(
id_usuario INT NOT NULL AUTO_INCREMENT,
nombre_usuario VARCHAR(30) NOT NULL,
usuario VARCHAR(10) NOT NULL,
clave varchar(10) NOT NULL,
nivel CHAR(1) NOT NULL,
PRIMARY KEY (Id_usuario)
168

);
NOTA:
Conexin Persistente:
Las conexiones persistentes son enlaces que no se cierran cuando termina la
ejecucin del archivo de comandos. Cuando se pide una conexin persistente, PHP
comprueba si hay ya una conexin persistente idntica (que permaneca abierta desde
antes) - y si existe, la usa. Si no existe, crea un enlace. Una conexin 'idntica' es una
conexin que se abri hacia el mismo "host", con el mismo nombre de usuario y la
misma contrasea (donde sea aplicable).
PASO 4: Estructuramos
las carpetas de nuestro
servidor para alojar a
los archivos necesarios
para nuestra aplicacin
web.
PASO 5: Creamos nuestro archivo de conexin conexion1.php el cual se

guardara en la carpeta conexin.
<?php
if (!($conectar=mysql_connect("localhost","root",""))){
echo "<img src=imagenes/error.png>";
exit();
}
if (!mysql_select_db("colegio",$conectar)){
exit();
}
return $conectar;
}
echo "<img src=imagenes/ok.jpg>";
En la carpeta imgenes deben de existir

2 archivos, uno que se mostrara cuando
la conexin se establezca sin problemas
y otro para el caso contrario.
?>
169

PASO 6: Creamos la funcin javascript que nos servir para validar nuestros
formularios.
El archivo se llamara validar.js y se guardara en la carpeta javascript de
nuestro servidor.
Cdigo del archivo validar.js.
// JavaScript Document
//Funcin que verifica campos del formulario vacos
function validar(formulario1) {
alert("Ingrese el codigo");
miformulario.codigo.focus();
return false;
}
if (formulario1.nombre.value.length < 1){
alert("Ingrese el nombre");
miformulario.nombre.focus();
return false;
}
if (confirm(Esta seguro de procesar el formulario?')){
}else{
alert("Cancelado");
return (false);
}
}
PASO 7: Elaboramos los formularios Distritos y Cursos y los archivos php para
el registro de las tablas segn corresponda.
a. Formulario Distrito
(formulario_registrar_distrito.php).
<html>
<head>
<?php include("javascript/validar.js"); ?>
</script>
</head>
170

<body>
<H1>REGISTRO DE DISTRITO</H1>
<FORM ACTION="proceso_registrar_distrito.php" method="post"
name="miformulario" id="miformulario" onSubmit = "return validar(this)">
<TABLE>
<TR>
<TD>Codigo:</TD>
<TD><INPUT TYPE="text" name="codigo" id="codigo"></TD>
</TR>
<TR>
<TD>Nombre:</TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
Proceso para guardar Distrito (proceso_registrar_distrito.php).

<?php
include("conexion\conexion1.php");
mysql_query("insert into distritos
(id_distrito, nombre_dis)
values
('$var_codigo', '$var_nombre')",$conectar);
echo mysql_error();
}
?>
<html>
<head><title>REGISTRO DISTRITO</title></head>
<body>
171

<p>SE REGISTRO EL DISTRITO <?php echo $var_nombre; ?> DE FORMA
CORRECTA.
</p>
<p><a href="formulario_registrar_distrito.php" target="_parent">Formulario Registrar
Distrito</a></p>
<p><a href="operaciones.php" target="_parent">Panel Principal</a></p>
</body>
</html>
b. Formulario Cursos
(formulario_registrar_distrito.php).
<?php
mysql_query("insert into cursos
(codigo_cur, nombres_cur)
values
echo mysql_error();
}
?>
<html>
<head>
<title>REGISTRO DISTRITO</title>
</head>
<body>
<p>SE REGISTRO EL DISTRITO <?php echo $var_nombre; ?> DE FORMA
CORRECTA.
</p>
<p><a href="formulario_registrar_curso.php" target="_parent">Formulario Registrar
Curso</a></p>
</body>
</html>
172

Proceso para guardar Curso (proceso_registrar_curso.php).
<?php
mysql_query("insert into cursos
(codigo_cur, nombres_cur)
values
echo mysql_error();
}
?>
<html>
<head>
<title>REGISTRO CURSO</title>
</head>
<body>
<p>SE REGISTRO EL CURSO <?php echo $var_nombre; ?> DE FORMA
CORRECTA.
</p>
Distrito</a></p>
</body>
</html>
NOTA:
Para registrar el distrito se insertara un campo Lista/Men, el cual mediante
programacin PHP se conectara a la tabla distritos.
Al seleccionar el nombre del distrito, internamente se almacenara solo el cdigo del
mismo.
173
PASO 8: Creamos el formulario para registrar a

los alumnos. (formulario_registrar_alumno.php).
Para este formulario se le puede crear de forma

adicional su propio archivo de validacin
tomando en cuenta los campos que segn el
anlisis del levantamiento de informacin sean
indispensables.
Cdigo fuente del formulario:

<html>
<head>
</script>
</head>
<body>
<H1>REGISTRO DEL ALUMNO</H1>
<FORM ACTION="proceso_registrar_alumno.php" method="post"
<TABLE>
<TR>
<TD width="93">Codigo:</TD>
<TD width="144"><INPUT TYPE="text" name="codigo" id="codigo"></TD>
</TR>
<TR>
<TD>Paterno:</TD>
<TD><INPUT TYPE="text" name="paterno" id="paterno"></TD>
</TR>
<TR>
<TD>Materno:</TD>
<TD><INPUT TYPE="text" name="materno" id="materno"></TD>
</TR>
<TR>
<TD>Nombre:</TD>
174

</TR>
<TR>
<TD>Distrito:</TD>
<TD><label for="distritos"></label>
<select name="distritos" id="distritos">
<option>Seleccione un distrito...</option>
<?php
///// CONSULTA PARA MOSTRAR LOS DISTRITOS DE LA BD COLEGIO.
$consulta = "SELECT id_distrito, nombre_dis FROM distritos ORDER BY nombre_dis
ASC";
$resultado = mysql_query($consulta, $conectar);
$fila = mysql_num_rows($resultado);
if ($fila = mysql_fetch_array($resultado)){
do {
echo '<option value= "'.$fila[0].'">'.utf8_encode($fila[1]).'</option>';
} while ($fila = mysql_fetch_array($resultado));
}
?>
</select>
</TD>
</TR>
<TR>
<TD>Fecha Nac:</TD>
<TD><INPUT TYPE="text" name="fechanac" id="fechanac"></TD>
</TR>
<TR>
<TD>Telefono:</TD>
<TD><INPUT TYPE="text" name="telefono" id="telefono"></TD>
</TR>
<TR>
<TD>Correo:</TD>
<TD><INPUT TYPE="text" name="correo" id="correo"></TD>
</TR>
</TABLE>
175

</FORM>
</body>
</html>
Cdigo fuente del archivo proceso_registrar_alumno.php el cual se encargara

de almacenar los datos del formulario en la base de datos.
<?php
$var_distritos = $_POST['distritos'];
$var_fechanac = $_POST['fechanac'];
$var_telefono = $_POST['telefono'];
$var_correo = $_POST['correo'];
$fecha_nac = date("Y-m-d",strtotime($var_fechanac));
mysql_query("insert into alumnos
(codigo_al,
apepaterno_al,
id_distrito_al, fechanac_al, telefono_al, correo_al)
apematerno_al,
nombres_al,
values
('$var_codigo', '$var_paterno', '$var_materno', '$var_nombre',
'$var_distritos', '$fecha_nac', '$var_telefono', '$var_correo')",$conectar);
echo mysql_error();
}
?>
<html><head><title>REGISTRO ALUMNO</title></head>
<body>
<p>SE REGISTRO EL ALUMNO <?php echo $var_nombre." ".$var_paterno."
".$var_materno; ?> DE FORMA CORRECTA.
</p>
<p><a href="formulario_registrar_alumno.php" target="_parent">Formulario Registrar
Alumno</a></p>
</body>
</html>
176

PASO 9: Creamos el formulario para
registrar al profesor:
(formulario_registrar_profesor.php)
<html>
<head>
</script>
</head>
<body>
<H1>REGISTRO DEL PROFESOR</H1>
<FORM ACTION="proceso_registrar_profesor.php" method="post"
<TABLE>
<TR>
<TD width="93">Codigo:</TD>
<TD width="144"><INPUT TYPE="text" name="codigo" id="codigo"></TD>
</TR>
<TR>
<TD>Paterno:</TD>
<TD><INPUT TYPE="text" name="paterno" id="paterno"></TD>
</TR>
<TR>
<TD>Materno:</TD>
<TD><INPUT TYPE="text" name="materno" id="materno"></TD>
</TR>
<TR>
<TD>Nombre:</TD>
</TR>
<TR>
<TD>Distrito:</TD>
<TD><label for="distritos"></label>
<select name="distritos" id="distritos">
<option>Seleccione un distrito...</option>
177

<?php
$consulta = "SELECT id_distrito, nombre_dis FROM distritos ORDER BY nombre_dis
ASC";
do {
}
?>
</select>
</TD>
</TR>
</TABLE>
</FORM> </body> </html>
Cdigo fuente del archivo proceso_registrar_profesor.php.

<?php
$var_distritos = $_POST['distritos'];
mysql_query("insert into profesores (codigo_pro, apepaterno_pro, apematerno_pro,
nombres_pro, id_distrito_pro)
values ('$var_codigo', '$var_paterno', '$var_materno', '$var_nombre',
'$var_distritos')",$conectar);
echo mysql_error();
178

}
?>
<html>
<head><title>REGISTRO PROFESOR</title></head>
<body>
<p>SE REGISTRO EL PROFESOR <?php echo $var_nombre." ".$var_paterno."
".$var_materno; ?> DE FORMA CORRECTA.
</p>
<p><a href="formulario_registrar_profesor.php" target="_parent">Formulario Registrar
Profesor</a></p>
</body>
</html>
PASO 10: Elaboramos el formulario para crear usuarios para acceder a la

aplicacin:
NOTA:
La validacin Javascript en este caso se encuentra en la misma pgina.
<html>
<head>
function validar(formulario1) {
if (formulario1.nombre.value.length < 1){
alert("Ingrese el codigo");
miformulario.nombre.focus();
return false;
}
if (formulario1.usuario.value.length < 1){
alert("Ingrese el usuario");
miformulario.usuario.focus();
return false;
}
if (formulario1.clave.value.length < 1){
179

alert("Ingrese la clave");
miformulario.clave.focus();
return false;
}
if (confirm('Esta seguro de procesar el formulario?')){
}else{
alert("Cancelado");
return (false);
}
}
</script>
</head>
<body>
<H1>REGISTRO DEL USUARIO</H1>
<FORM ACTION="proceso_registrar_usuario.php" method="post"
<TABLE>
<TR>
<TD width="144"><INPUT TYPE="text" name="nombre" id="nombre"></TD>
</TR>
<TR>
<TD>Usuario:</TD>
<TD><INPUT TYPE="text" name="usuario" id="usuario"></TD>
</TR>
<TR>
<TD>Clave:</TD>
<TD><INPUT TYPE="password" name="clave" id="clave"></TD>
</TR>
<TR>
<TD>Nivel:</TD>
<TD><label for="nivel"></label>
<select name="nivel" id="nivel">
<option value="1">Gerencial</option>
<option value="2">Profesor</option>
<option value="3">Alumno</option>
</select></TD>
180

</TR>
</TABLE>
</FORM> </body> </html>
Cdigo fuente del archivo proceso_registrar_usuario.php.

<?php
$var_usuario = $_POST['usuario'];
$var_clave = $_POST['clave'];
$var_nivel = $_POST['nivel'];
(nombre_usuario, usuario, clave, nivel)
values
('$var_nombre', '$var_usuario', '$var_clave',
'$var_nivel')",$conectar);
echo mysql_error();
}
?>
<html>
<head><title>REGISTRO USUARIO</title></head>
<body>
<p>SE REGISTRO EL USUARIO <?php echo $var_nombre; ?> DE FORMA
CORRECTA.
</p>
<p><a href="formulario_registrar_usuario.php" target="_parent">Formulario Registrar
Usuario</a></p>
</body>
</html>
PASO 11: Creamos la pgina para que muestre el listado de todos los
alumnos.
Le agregaremos adems 2 columnas adicionales a los campos, una para que
al darle clic aparezca el formulario de actualizacin y otra para que aparezca el
formulario que elimine el registro.
181

Archivo listado_alumnos.php.
<?php
$resultado=mysql_query("SELECT codigo_al, apepaterno_al, apematerno_al,
nombres_al,
DATE_FORMAT(fechanac_al,'%d/%m/%Y'), id_distrito_al, telefono_al, correo_al
FROM alumnos",$conectar);
?>
<title>LISTADO ALUMNOS</title>
<table width="1050" height="42" border="1">
<tr height="20">
<td width="74" align="center"><b>Elim.</b><b></b></td>
<td width="82" align="center"><b>Edit.</b></td>
<td width="91" align="center"><b>CODIGO</b></td>
<td width="72" align="center"><b>PATERNO</b></td>
<td width="72" align="center"><b>MATERNO</b></td>
<td width="72" align="center"><b>NOMBRES</b></td>
<td width="72" align="center"><b>FECHA NAC</b></td>
<td width="72" align="center"><b>DISTRITO</b></td>
<td width="72" align="center"><b>TELEFONO</b></td>
<td width="72" align="center"><b>CORREO</b></td>
</tr>
<?php
$eliminar = "<a href='eliminar_alumno.php?id=$row[0]'>Eliminar</a></a>";
$editar = "<a href='editar_alumno.php?id=$row[0]'>Editar</a></a>";
printf("<tr>
<td align=center><font face=Arial Narrow size=1>$eliminar</font></td>
<td align=center><font face=Arial Narrow size=1>$editar</font></td>
<td align=center><font face=Arial Narrow size=1>$row[0]</font></td>
<td align=left><font face=Arial Narrow size=1>$row[1]</font></td>
182

</tr>"
);
}
?>
</table>
<p>Cantidad de alumnos:<?php echo "<b>".$numero_filas."</b>"; ?></p>
A continuacin vamos a crear los formularios para actualizar y eliminar.

Las variables se van a recoger de la url con el mtodo GET.
Creamos el archivo: (editar_alumno.php)
Cdigo fuente:
<?php
$var_codigoalumno = $_GET['id'];
$consulta=mysql_query("SELECT codigo_al, apepaterno_al, apematerno_al,
nombres_al,
FROM alumnos WHERE codigo_al='$var_codigoalumno'",$conectar);
$res_paterno = $resultado[1];
$res_materno = $resultado[2];
$res_nombres = $resultado[3];
$res_fechanac = $resultado[4];
183

$res_distrito = $resultado[5];
$res_telefono = $resultado[6];
$res_correo = $resultado[7];
?>
<html>
<head>
function validar(formulario1){
if (confirm('Esta seguro de ACTUALIZAR?')){
}else{
alert("Cancelado");
return (false);
}
}
</script>
</head>
<body>
<form name="formulario1" method="post" action="proceso_actualizar_alumno.php"
onSubmit = "return validar(this)">
<TR>
<TD><input name="codigo" type="text" id="codigo" style="backgroundcolor:#CFE6FC" value="<?php echo $res_codigo; ?>" readonly></TD>
</TR>
<TR>
<TD width="80"><b>Paterno:</b></TD>
<TD width="180"><label for="paterno"></label>
<input name="paterno" type="text" id="paterno" value="<?php echo $res_paterno;
?>"></TD>
</TR>
<TR>
<TD><b>Materno:</b></TD>
<TD><label for="materno"></label>
<input name="materno" type="text" id="materno" value="<?php echo
$res_materno; ?>"></TD>
</TR>
184

<TR>
<TD><b>Nombres:</b></TD>
<TD><input name="nombres" type="text" id="nombres" value="<?php echo
$res_nombres; ?>"></TD>
</TR>
<TR>
<TD><b>FechaNac:</b></TD>
<TD><input name="fechanac" type="text" id="fechanac" value="<?php echo
$res_fechanac; ?>"></TD>
</TR>
<TR>
<TD><b>Distrito:</b></TD>
<TD><input name="distrito" type="text" id="distrito" value="<?php echo
$res_distrito; ?>"></TD>
</TR>
<TR>
<TD><b>Telefono:</b></TD>
<TD><input name="telefono" type="text" id="telefono" value="<?php echo
$res_telefono; ?>"></TD>
</TR>
<TR>
<TD><b>Correo:</b></TD>
<TD><input name="correo" type="text" id="correo" value="<?php echo
$res_correo; ?>"></TD>
</TR>
<TR>
<TD colspan="2" align="center"><input type="submit" name="actualizar"
id="actualizar" value="Actualizar"></TD>
</TR>
</TABLE>
</form>
<p><a href="listado_alumnos.php" target="_parent">Ir al listado de alumnos</a></p>
</body>
</html>
185

Elaboramos el formulario que se
encargara del proceso de actualizacin:
(proceso_actualizar_alumno.php)
Cdigo fuente:
<?php
$codigo = $_POST['codigo'];
$paterno = $_POST['paterno'];
$materno = $_POST['materno'];
$nombres = $_POST['nombres'];
$fechanac = $_POST['fechanac'];
$distrito = $_POST['distrito'];
$telefono = $_POST['telefono'];
$correo = $_POST['correo'];
$fechanac_data = date("Y-m-d",strtotime($fechanac));
$consultasql = "UPDATE alumnos
SET apepaterno_al = '$paterno',
apematerno_al = '$materno',
nombres_al = '$nombres',
fechanac_al = '$fechanac',
id_distrito_al = '$distrito',
telefono_al = '$telefono',
correo_al = '$correo'
WHERE codigo_al = '$codigo'";
$resultado = mysql_query($consultasql, $conectar);
echo mysql_error();
?>
<html>
<head><title>ACTUALIZAR</title></head>
<body>
<p>EL ALUMNO CON CODIGO <?php echo "<B>".$codigo."</B><br>"; ?> FUE
ACTUALIZADO CORRECTAMENTE</p>
<p><b>REPORTE DE DATOS ACTUALIZADOS:</b> </p>
<TR>
<TD width="115">CODIGO:</TD>
<TD width="133"><?php echo $codigo; ?></TD>
</TR>
<TR>
186

<TD>PATERNO:</TD>
<TD><?php echo $paterno; ?></TD>
</TR>
<TR>
<TD>MATERNO:</TD>
<TD><?php echo $materno; ?></TD>
</TR>
<TR>
<TD>NOMBRES:</TD>
<TD><?php echo $nombres; ?></TD>
</TR>
<TR>
<TD>FECHA NAC:</TD>
<TD><?php echo $fechanac; ?></TD>
</TR>
<TR>
<TD>DISTRITO:</TD>
<TD><?php echo $distrito; ?></TD>
</TR>
<TR>
<TD>TELEFONO:</TD>
<TD><?php echo $telefono; ?></TD>
</TR>
<TR>
<TD>CORREO:</TD>
<TD><?php echo $correo; ?></TD>
</TR>
</TABLE>
<p><a href="listado_alumnos.php"
target="_parent">Ir al listado de alumnos</a></p>
<p><a href="operaciones.php"
target="_parent">Panel Principal</a></p>
</body>
</html>
187

Creamos el archivo: (eliminar_alumno.php)
Cdigo fuente:
<?php
$var_codigoalumno = $_GET['id'];
$consulta=mysql_query("SELECT codigo_al, apepaterno_al, apematerno_al,
nombres_al,
FROM alumnos WHERE codigo_al='$var_codigoalumno'",$conectar);
$res_paterno = $resultado[1];
$res_materno = $resultado[2];
$res_nombres = $resultado[3];
$res_fechanac = $resultado[4];
$res_distrito = $resultado[5];
$res_telefono = $resultado[6];
$res_correo = $resultado[7];
?>
<html>
<head>
function validar(formulario1){
if (confirm('Esta seguro de ELIMINAR?')){
}else{
alert("Cancelado");
return (false);
}
}
</script>
</head>
<body>
<form name="formulario1" method="post" action="proceso_eliminar_alumno.php"
onSubmit = "return validar(this)">
188

<TR>
<TD><input name="codigo" type="text" id="codigo" style="backgroundcolor:#CFE6FC" value="<?php echo $res_codigo; ?>" readonly></TD>
</TR>
<TR>
<TD width="80"><b>Paterno:</b></TD>
<TD width="180"><label for="paterno"></label>
<?php echo $res_paterno; ?></TD>
</TR>
<TR>
<TD><b>Materno:</b></TD>
<TD><label for="materno"></label>
<?php echo $res_materno; ?></TD>
</TR>
<TR>
<TD><b>Nombres:</b></TD>
<TD><?php echo $res_nombres; ?></TD>
</TR>
<TR>
<TD><b>FechaNac:</b></TD>
<TD><?php echo $res_fechanac; ?></TD>
</TR>
<TR>
<TD><b>Distrito:</b></TD>
<TD><?php echo $res_distrito; ?></TD>
</TR>
<TR>
<TD><b>Telefono:</b></TD>
<TD><?php echo $res_telefono; ?></TD>
</TR>
<TR>
<TD><b>Correo:</b></TD>
<TD><?php echo $res_correo; ?></TD>
</TR>
<TR>
189

<TD colspan="2" align="center"><input type="submit" name="eliminar"
id="eliminar" value="Eliminar"></TD>
</TR>
</TABLE>
</form>
</body>
</html>
Creamos el archivo que se encarga del proceso de eliminacin:

(proceso_eliminar_alumno.php).
Codigo fuente:
<?php
$codigo = $_POST['codigo'];
$consultasql = "DELETE FROM alumnos WHERE codigo_al = '$codigo'";
echo mysql_error();
?>
<html>
<head><title>ELIMINAR ALUMNO</title></head>
<body>
<p>EL ALUMNO CON CODIGO <?php echo $codigo; ?> FUE ELIMINADO
CORRECTAMENTE</p>
</body>
</html>
190

PASO 12: Elaboramos la pagina principal de acceso y la pagina que se
encargara de evaluar el nivel al cual pertenece el usuario ingresado, y de
acuerdo al nivel lo redireccionara a la pagina correspondiente segn su
usuario.
Pagina index.php.
<html>
<head>
<title>ACCESO AL SISTEMA</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="verifica_acceso.php">
<table width="200" border="1" align="center">
<tr>
<th scope="col"><table width="200" border="1">
<tr>
<th colspan="2" scope="col">ACCESO AL SISTEMA</th>
</tr>
<tr>
<th width="83" scope="col">Usuario:</th>
<th width="101" scope="col"><label for="usuario"></label>
<input type="text" name="usuario" id="usuario" /></th>
</tr>
<tr>
<th scope="row">Clave:</th>
<td><label for="clave"></label>
<input type="password" name="clave" id="clave" /></td>
</tr>
<tr>
<th colspan="2" scope="row"><input type="submit" name="procesar"
id="procesar" value="Ingresar" /></th>
</tr>
</table></th>
</tr>
</table>
</form>
</body>
</html>
191

Pagina verifica_acceso.php.
La siguiente pgina inicializa las sesiones y se encarga de validar los
caracteres especiales en los campos de texto para minimozar el riesgo de
ataques en la aplicacin web.
Cdigo fuente:
<?php
session_start();
$usuario = htmlspecialchars(strip_tags($_POST['usuario']));
$clave = htmlspecialchars(strip_tags($_POST['clave']));
$consultasql = "select nombre_usuario, nivel from usuarios where usuario = '$usuario'
and clave = '$clave'";
$filasDevueltas = mysql_num_rows($resultado);
$resul = mysql_fetch_array($resultado);
$nombreusuario = $resul[0];
$nivelusuario = $resul[1];
if ($filasDevueltas==0){
echo "Usuario no existe";
}else{
if ($nivelusuario == "1"){
$_SESSION['usuario'] = $nombreusuario;
header('Location: operaciones.php');
}else{
if ($nivelusuario == "2") {
header('Location: operaciones_profesores.php);
}else{
header('Location: operaciones_alumnos.php ');
}
}
192

}
?>
PASO 13: Creamos la pagina cerrar sesin, la cual tendr un enlace desde
todas las paginas anteriores.
cerrarsesion.php
Cdigo fuente:
<?php
session_start();
session_unset();
session_destroy();
?>
<html>
<head>
<title>Cerrar sesion</title>
</head>
<body>
<h1>Acaba de cerrar su sesion de forma correcta</h1>
<p><a href = "index.php" target="_parent">Ir a la pagina principal</a></p>
</body>
</html>
PASO 14: Creamos el formulario para registrar las notas:

(formulario_registrar_notas.php)
NOTA:
Este formulario tiene una funcin javascript que se encarga de calcular la nota
promedio ya que este campo se encuentra de solo lectura.
193

Cdigo fuente:
<html>
<head>
<SCRIPT>
function evento_promedio() {
var n1 = parseFloat(document.getElementById("nota1").value);
var n2 = parseFloat(document.getElementById("nota2").value);
var promedio = (n1 + n2)/2;
document.getElementById("promedio").value = promedio;
}
</script>
</head>
<body>
<H1>REGISTRO DE NOTAS</H1>
<FORM ACTION="proceso_registrar_notas.php" method="post"
<TABLE>
<TR>
<TD width="93">Alumno:</TD>
<TD width="144"><select name="alumnos" id="alumnos">
<option>Seleccione un alumno...</option>
<?php
$consulta = "SELECT codigo_al, CONCAT(apepaterno_al, ' ', apematerno_al, ' ',
nombres_al) FROM alumnos ORDER BY apepaterno_al ASC";
do {
}
?>
194

</select></TD>
</TR>
<TR>
<TD>Curso:</TD>
<TD><select name="cursos" id="cursos">
<option>Seleccione un curso...</option>
<?php
//include("conexion\conexion1.php");
$consulta2 = "SELECT codigo_cur, nombres_cur FROM cursos ORDER BY
nombres_cur ASC";
$resultado2 = mysql_query($consulta2, $conectar);
$fila2 = mysql_num_rows($resultado2);
if ($fila2 = mysql_fetch_array($resultado2)){
do {
echo '<option value= "'.$fila2[0].'">'.utf8_encode($fila2[1]).'</option>';
} while ($fila2 = mysql_fetch_array($resultado2));
}
?>
</select></TD>
</TR>
<TR>
<TD>Nota1:</TD>
<TD><INPUT TYPE="text" name="nota1" id="nota1"></TD>
</TR>
<TR>
<TD>Nota2:</TD>
<TD><INPUT TYPE="text" name="nota2" id="nota2"></TD>
</TR>
<TR>
<TD colspan="2" align="center">
<a href="#" onclick="evento_promedio();">Calcular promedio</a>
</TD>
</TR>
<TR>
<TD>Promedio:</TD>
<TD><label for="alumnos">
195

<INPUT name="promedio" TYPE="text" id="promedio" readonly="readonly">
</label></TD>
</TR>
</TABLE>
</FORM>
<a href="operaciones_profesores.php" target="_parent">Operaciones</a>
</body>
</html>
Formulario que se encarga del proceso de guardado en la base de datos.

Archivo (proceso_registrar_notas.php).
Cdigo fuente:
<?php
$var_alumnos = $_POST['alumnos'];
$var_cursos = $_POST['cursos'];
$var_nota1 = $_POST['nota1'];
$var_nota2 = $_POST['nota2'];
$var_promedio = $_POST['promedio'];
mysql_query("insert into notas
(codigo_al, codigo_cur, nota1, nota2, promedio)
values
('$var_alumnos', '$var_cursos', '$var_nota1', '$var_nota2',
'$var_promedio')",$conectar);
echo mysql_error();
}
?>
<html>
<head>
<title>REGISTRO NOTAS</title>
</head>
<body>
<p>SE REGISTRO LA NOTA DE FORMA CORRECTA.
196

</p>
Notas</a></p>
<p><a href="operaciones_profesores.php" target="_parent">Operaciones</a></p>
</body>
</html>
PASO 15: Por ultimo, creamos las ventanas que tendrn los vnculos a los
distintos formularios que hemos creado a lo largo de esta aplicacin web.
Pagina (operaciones.php):
Cdigo fuente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin ttulo</title>
</head>
<body>
<h1><center>PANEL DE CONTROL PRINCIPAL</center></h1>
<p><b>REGISTRAR:</b></p>
<p><a href="formulario_registrar_alumno.php" target="_parent">Alumnos</a><br />
<a href="formulario_registrar_profesor.php" target="_parent">Profesores</a><br />
<a href="formulario_registrar_curso.php" target="_parent">Cursos</a><br />
<a href="formulario_registrar_distrito.php" target="_parent">Distritos</a><br />
<a href="formulario_registrar_usuario.php" target="_parent">Usuarios</a></p>
<p><b>LISTADOS:</b></p>
<p><a href="listado_alumnos.php" target="_parent">Alumnos</a><br />
Profesores<br />
197

Cursos<br />
Distritos<br />
Usuarios</p>
<p><a href="cerrarsesion.php" target="_parent">Cerrar Sesion</a></p>
</body>
</html>
Pagina (operaciones_profesores.php):
Cdigo fuente:
<head>
</head>
<body>
<h1><center>
OPERACIONES PROFESORES
</center></h1>
<p><b>REGISTRAR:</b></p>
<p><a href="formulario_registrar_notas.php" target="_parent">Notas</a></p>
<p><b>LISTADOS:</b></p>
<p>Alumnos</p>
<p> </p>
</body>
</html>
198

Pagina (operaciones_alumnos.php):
Cdigo fuente:
<head>
</head>
<body>
<h1><center>
OPERACIONES ALUMNOS
</center></h1>
<p>Ver notas de cursos<br />
</p>
<p>Actualizar datos</p>
</body>
</html>
NOTA:
Complete los vnculos a los formularios que necesite para que la administracin se
completa.
Ingrese registros de pruebas en todas las tablas utilizando los formularios creados en
los primeros pasos para que pueda ejecutar las consultas.
Elabore los listados de las dems tablas.
Complete los cdigos de seguridad para que un usuario de un nivel especifico pueda
cambiarse a otra ventana que no le corresponda su nivel (Utilice sesiones).
199

FUNDAMENTO TERICO:
Trabajando con Sesiones:
Las sesiones, en aplicaciones web realizadas con PHP, nos permiten
almacenar informacin que se memorizar durante toda la visita de un usuario
a un sitio web. Esto significa que un usuario puede ver varias pginas durante
su paso por un sitio web y con sesiones podemos almacenar variables que
podremos acceder en cualquiera de esas pginas.
A modo de ejemplo podemos sealar lo siguiente:
Cuando nosotros tratamos de acceder a un sistema, este nos solicita el usuario
y su contrasea, luego que este es buscado y encontrado en la tabla de la de
datos respectiva, podemos entonces almacenar en variables de sesiones el
nombre y apellido del usuario, as como el nivel del perfil del mismo. De esta
manera teniendo almacenado en una variable de sesin el nivel o el grupo al
cual pertenece el usuario, podemos controlar as durante toda la ejecucin del
sistema si ese usuario tiene o no permiso para acceder o no a ciertos procesos
de mantenimiento muy puntuales como (Incluir, modificar, Eliminar) si tiene
posibilidad o no para ingresar a ciertas opciones dispuestas en un men.
Sin embargo son muchas las diversas posibilidades de uso, donde esta bondad
que brinda el PHP, se le puede sacar provecho, Por ejemplo: El desarrollo de
un carrito de compras, Generacin de Software Educativos, Evaluaciones a
distancia, Compra de pasajes, etc.
Cuando queremos utilizar variables de sesin en una pgina tenemos que

iniciar la sesin con la siguiente funcin:
session_start ()
Inicia una sesin para el usuario o contina la sesin que pudiera tener abierta
en otras pginas. Al hacer session_start() PHP internamente recibe el
identificador de sesin almacenado en la cookie o el que se enve a travs de
la URL. Si no existe este identificador se sesin, entonces se crea
automaticamente.
Una vez iniciada la sesin podemos utilizar variables de sesin a travs de

$_SESSION, que es un arreglo asociativo, donde se accede a cada variable a
partir de su nombre, tal como se los muestro a continuacin:
200

$_SESSION["nombre_de_variable"]
Otras funciones tiles para la gestin de sesiones son:

Funcin
Descripcin
Session_id()
Retorna el identificador de la sesin.
Session_destroy()
Da por abandonada la sesin eliminando variables

e identificador.
Session_unregister(variable)
Abandona una variable sesin.
NOTA:
La sesin se tiene que inicializar antes de escribir cualquier texto en la pgina. Esto es
importante y de no hacerlo as corremos el riesgo de recibir un error, porque al iniciar
la sesin se deben leer las cookies del usuario, algo que no se puede hacer si ya se
han enviado las cabeceras del HTTP.
Si se intenta abrir una sesin despus de haber enviado texto de la pgina al

cliente se obtendr el siguiente mensaje:
Warning: session_start(): Cannot send session cache limiter - headers already
sent (output started at)
Ejemplo de cdigo para definir una variable de sesin:

<?php
session_start();
?>
<html>
<head>
<title>Crear variable de sesin</title>
</head>
<body>
<?
$_SESSION["mivariablesesion"] = "Hola Mundo";
?>
</body>
</html>
Ejemplo para leer una variable de sesin:
201

<?php
session_start();
?>
<html>
<head>
<title>Leer variable se sesin</title>
</head>
<body>
Contenido de la variable:
<?php
echo $_SESSION["mivariablesesion"];
?>
</body>
</html>
Como se puede ver, al inicio del cdigo hemos inicializado la sesin y luego en
cualquier parte del cdigo podramos acceder a las variables de sesin que
tuvisemos creadas.
NOTA:
Si intentamos acceder a una variable de sesin con $_SESSION que no ha sido
creada obtendremos otro mensaje de error:
Notice: Undefined index: mivariabledesesion, que es el mismo que si intentamos
acceder a cualquier elemento de un array que no existe.
Ejemplo para contar la cantidad de veces que se actualiza una pgina.

<?php
session_start();
if (!isset($_SESSION["cuenta_paginas"])){
$_SESSION["cuenta_paginas"] = 1;
}else{
$_SESSION["cuenta_paginas"]++;
}
?>
<html>
<head>
<title>Contador</title>
202

</head>
<body>
<p>
<?php
echo "Desde que entraste has actualizado " . $_SESSION["cuenta_paginas"] . " veces
esta pagina";
?>
</body>
</html>
En el ejemplo anterior desarrollamos los siguientes puntos:

Inicializar la sesin.
Si no tenemos el contador de pginas creado, lo inicializamos al valor 1.
Si tenemos el contador de pginas creado, lo incrementamos en 1.
En primer lugar debemos hacer es inicializar la sesin con session_start().
Luego de inicializar la sesin podemos trabajar con variables de sesin en

cualquier lugar del cdigo PHP. Nosotros vamos a crear y utilizar una variable
de sesin para llevar la cuenta del nmero de pginas que hemos visto.
$_SESSION["cuenta_paginas"]
Para ver si una variable de sesin ha sido creada podemos utilizar la funcin
isset() pasndole como parmetro la variable que deseamos saber si ha sido
creada. Si no fue creada anteriormente, simplemente la creamos (inicializando
su valor a 1). Si fue creada, pues que tenemos que incrementar en 1. Eso se
consigue con este cdigo:
}else{
}
Si deseamos que se cuenten otras pginas de nuestro sitio, lo que tenemos

que hacer es colocar el mismo trozo de cdigo al principio del archivo PHP.
203

<? session_start();
}else{
}
?>
Luego, en cualquier momento, si deseamos mostrar el nmero de pginas

vistas en un momento dado, tendramos que hacer algo como esto:
<? echo "Has visto " . $_SESSION["cuenta_paginas"] . " pginas, contando
actualizaciones de paginas"; ?>
Eliminar sesiones en PHP.

Con la salida de PHP 5.3.5 algunas muchas cosas han cambiado. Entre ellas el
manejo de sesiones. Muchas de las funciones que antes usbamos para el
trabajo con sesiones han quedado como "DEPRECATED", es decir fuera de
uso. Otras no funcionan como uno esperaba o al menos como venan
funcionando
Uso de session_destroy();
El problema que veremos es la eliminacin o destruccin de sesiones. Antes
era tan fcil como poner:
<?php session_destroy(); ?>

Y listo, nuestra sesin quedaba destruida. Todas las variables del tipo
$_SESSION['mi_variable'] quedaban igualmente destruidas y/o eliminadas sin
la necesidad de cerrar el navegador para que esto suceda. Muy til para
ponerlo en una funcin logout.
Si hoy inicias una sesin en PHP 5.3.5 y luego le aplicas este mtodo para
cerrar (eliminar) tu sesin, esta no queda destruida. Es ms, las variables de
tipo $_SESSION['mi_variable'] conservan los datos que venan almacenando.
Si creas una pagina con usuarios y uno de ellos inicia sesin en tu pgina
luego cierra su sesin y se va sin haber cerrado el navegador, otro usuario en
la misma mquina podra recuperar esa sesin. Esto porque las variables de
sesin an existen y an estn almacenando la informacin del usuario
anterior.
204

Por qu ya no funciona session_destroy()
Donde reside el verdadero problema si supuestamente session_destroy()
deba de haber eliminado todo rastro de la sesin y al ejecutarlo no nos
muestra ningn error?
El problema esta en que, si bien session_destroy() elimina todos los datos

asociados a la sesin, este mismo no elimina la cookie que contiene el
identificador de sesin en el cliente, lo que quiere decir que si se realiza una
nueva peticin al servidor, el navegador incorpora dicho identificador.
Arreglar el problema de session_destroy en PHP 5.3.5

La respuesta obvia es eliminando la cookie que contiene el Id de la sesin, esto
lo hacemos as:
Cdigo:
<?php
$parametros_cookies = session_get_cookie_params();
setcookie(session_name(),0,1,$parametros_cookies["path"]);
?>
De modo que para eliminar/destruir una sesin en PHP 5.3.5 el cdigo

completo es:
session_destroy();
$parametros_cookies = session_get_cookie_params();
setcookie(session_name(),0,1,$parametros_cookies["path"]);
con esto habremos eliminado toda la informacin de la sesin y podremos vivir

tranquilos por ahora.
Ejemplo del uso de sesiones:

Estos cdigos muestran la asignacin de un valor a una variable de sesin a
travs de un formulario, como se recupera el valor de la variable y como se
destruyen una o todas las sesiones. Por supuesto las sesiones tambin pueden
tomar valores recuperados de una base de datos. As cuando un usuario
introduce su email para identificarse, a partir de este email se puede recuperar
el identificador de este usuario de la base de datos, y ese identificador se
propagara como sesin y mantendr identificado al usuario, pero nunca
sabremos (como usuarios) cual es ese valor o la variable que lo contiene, as si
205

el sistema de identificacin no tiene agujeros de seguridad ser prcticamente
invulnerable.
A continuacin se muestran los cdigos fuentes de los archivos a elaborar:

sesion1.php
<?php
session_start();
?>
<html>
<head>
<title>Generar variable de sesin</title>
</head>
<body>
<form method="POST" action="sesion1.php">
<p>Valor para la variable de sesin <input type="text" name="valorsesion"
size="20"></p>
<p><input type="submit" value="Creamos variable de sesion" name="B1"></p>
</form>
<?php
$valorsesion = $_POST['valorsesion'];
$_SESSION["var_sesion"] = $valorsesion;
?>
<p><a href = "sesion2.php">Ver valor de sesion</a></p>
</body>
</html>
sesion2.php
<?php
session_start();
?>
<html>
<head>
<title>Leo variable se sesin</title>
206

</head>
<body>
Muestro el valor que toma la variable sesin: <br>
<?php
$valor_sesion = $_SESSION["var_sesion"];
echo $valor_sesion;
?>
<p><a href = "sesion3.php">Ver la variable en otra pagina</a></p>
</body>
</html>
sesion3.php
<?php
session_start();
?>
<html>
<head><title>Leo variable se sesin en otra pagina</title></head>
<body>
Muestro el valor que toma una variable cualquiera junto con el
de la variable sesin: <br>
<?php
$unacualquiera = "lo que sea";
echo"Vemos una variable de esta pagina <b>$unacualquiera</b>
y la variable de sesion
<b>$valor_sesion</b>";
?>
<p>
<a href = "sesion4.php">Eliminar variable de sesion</a></p>
</body>
</html>
sesion4.php
<?php
session_start();
207

session_unset();
session_destroy();
?>
<html>
<head>
<title>
Variable de sesion eliminada.
</title>
</head>
<body>
Intento escribir la variable de sesion, pero ya no aparece: <br>

<?php
echo $valor_sesion;
?>
<p><a href = "sesion1.php">Vuelvo a crear variable de sesion.</a></p>
</body>
</html>
TRABAJAR CON ARCHIVOS DESDE PHP.

El tratamiento de archivos resulta ser una prctica muy comn en cualquier
sitio web. Muy a menudo nos vemos en la necesidad de procesar un texto para
cambiarle el formato, buscar una cadena en su interior o cualquier otro tipo de
operacin.
PHP propone un sinfn de funciones para la gestin de archivos que van desde
las ms elementales de apertura, lectura y cierre a otras ms rebuscadas como
el clculo de espacio en el disco duro, tamao del archivo, gestin de derechos
de acceso.
NOTA:
Un archivo, tambin denominado Fichero, es una unidad de datos o informacin
almacenada en algn medio que puede ser utilizada por aplicaciones de la
computadora.
208
Cada archivo se diferencia del resto debido a que tiene un nombre propio y una
extensin que lo identifica. Esta extensin sera como el apellido y es lo que
permite diferenciar el formato del archivo y, asimismo, interpretar los caracteres
que conforman el contenido del archivo. De esta manera, un archivo de texto,
podr tener la extensin .txt (el nombre completo sera: ARCHIVO.txt); uno de
documento enriquecido, .doc, .pdf; uno de imgenes, .jpg, .gif; y lo mismo
ocurre con cada formato.
fopen()
Es una de las funciones bsicas para la manipulacin de archivos. Abre un
archivo en un cierto modo (el archivo que usted establezca) y devuelve el
recurso del puntero de archivo.
Usando este recurso se puede leer y/o escribir en el archivo, antes de cerrarlo
con la funcin fclose().
Los modos pueden ser seis y son los siguientes.
Modo de
apertura
Qu significa
Modo de solo lectura. Se abre el fichero y el cursor se coloca al principio

del mismo, permitiendo leerlo hasta el final.
r+
Modo de lectura/escritura. Se abre el fichero y el cursor se coloca al

principio del mismo, permitiendo leer o escribir en el fichero.
Modo de solo escritura. Se crea el fichero si no existiese, y, si existe, se

borra todo su contenido, se sita el cursor al principio del fichero
permitindonos escribir.
w+
Modo de escritura/lectura. Si el fichero no existe, se crea, y, si existiese,

se borra todo su contenido, se sita el cursor al principio del fichero
permitindonos escribir y leer.
Modo de aadido. Abre el fichero, sita el cursor al final del mismo y

permite escribir. Si el fichero no existe, lo crea, pero, en caso de existir,
no borra su contenido.
a+
Modo de aadido/lectura. Sita el cursor al final del fichero y permite

escribir y leer. Si el fichero no existe, lo crea, pero, si existe, no borra su
contenido.
209

Ejemplo de cmo leer un archivo de texto alojado en el servidor.
Creamos el archivo de texto y lo guardamos en la misma carpeta en la cual

crearemos nuestro archivo php.
Creamos el archivo php con el siguiente cdigo:

<?php
$contenido = file_get_contents('datos.txt');
echo $contenido;
?>
Al ejecutar este archivo podremos visualizar el contenido de nuestro archivo
datos.txt.
Funcin Fclose:
Esta funcin es muy simple: Slo cierra la lectura y/o escritura del archivo. Su
cdigo es:
<?php
fclose (fichero);
?>
NOTA:
No es necesario hacer esto cada vez que abramos un archivo, pero es til cuando
abrimos ms de uno, entonces abrimos el primero, luego lo cerramos, luego el
segundo y as.
Funcin file():
Esta funcin lee el archivo completo como una matriz (o array). Cada item en la
matriz corresponde a una linea en el archivo.
<?php
$lineas = file('datos2.txt');
foreach ($lineas as $numero => $linea) {
210

$numero_de_linea = $numero + 1;
echo "Linea $numero_de_linea: $linea<br>";
}
?>
Este es el archivo de texto:
El resultado al ejecutarlo en el servidor es el siguiente:
Funcin fread():
Esta funcin puede leer hasta una cantidad especificada de bytes del archivo y
devolvindolos como una cadena.
Para este ejemplo creamos el archivo data3.txt
Creamos el archivo php.

<?php
$puntero = fopen("datos3.txt", "r");
$cadena = fread($puntero, 20);
fclose($puntero);
echo $cadena;
?>
211

Resultado:
Podemos ver que solo se muestran los primeros 20 bytes(Caracteres).
Funcin Fwrite:
Esta funcin sirve para escribir en el archivo. Si modo de apertura en fopen() es
r, no har nada con el archivo, porque abre el archivo solo para lectura. Su
cdigo es:
<?php
fwrite (fichero, texto [, bytes]);
?>
Si se especifica bytes (no es obligatorio), se escribir en el archivo hasta bytes

bytes. Quiere decir que si el texto es de 3 bytes, y se especific 2 bytes en la
funcin, el texto no se pondr completo.
Ejemplo de uso de la funcin fwrite:
Creamos un archivo de texto en blanco:
Programamos nuestro archivo php:

<?php
$contenido = "Este es el contenido que se agregara al archivo de texto.";
$miarchivo = fopen('nuevoarchivo.txt', 'w');
fwrite ($miarchivo , $contenido);
echo "Se agrego el siguiente texto al archivo de texto:"."<br><br>";
echo $contenido;
?>
Al ejecutar nuestro archivo en el servidor saldr el siguiente mensaje:
212
Al ir a nuestro archivo fsicamente en el servidor, podemos ver que se agreg el

contenido.
Funcin file_exists(archivo)
Es una funcin del tipo Booleana. Como su nombre dice, ve si archivo existe. Si
existe, devuelve TRUE ( 1 ), si no, devuelve FALSE ( 0 ).
Ejemplo de como la funcin verifica la existencia de un archivo:

<?php
if (file_exists ("datos.txt")) {
echo "<font color='blue'>El archivo existe!</font>";
}else{
echo "<font color='red'>El archivo NO existe!</font>";
}
?>
Si reconoce en el servidor el archivo datos.txt mostrara el siguiente mensaje:
Si cambiamos el nombre del archivo por otro, por ejemplo abc.txt, mostrara el
siguiente mensaje:
213

Funcin is_readable(archivo):
Es una funcin del tipo booleano (ver 3.6.4), devuelve TRUE ( 1 ) si archivo
(tambin puede ser un directorio) tiene permisos de lectura para tu tipo de
usuario. Ejemplo:
<?php
if (is_readable ("datos.txt")) {
echo "Tienes permiso de lectura!";
}
?>
Funcin is_writable(archivo)
Igual que is_readable() pero, envez de ver permisos de lectura, ve permisos de
escritura. Tambin puede ser is_writeable().
A continuacin veremos un ejemplo para ver si tenemos permiso de escritura
en la carpeta archivos que se encuentra creada en el servidor local:
<?php
if (!is_writable ("/archivos")) {
echo "Puedes escribir en el directorio /archivos";
}
?>
El resultado sera el siguiente:
Funcin filesize(archivo):
Obtiene el tamao de archivo en bytes.
Ejemplo:
<?php
echo filesize ("datos.txt");
?>
El resultado ser un nmero, tal como lo muestra el ejemplo en la siguiente

imagen:
214
Importar un archivo al servidor desde nuestra pc local con un formulario

En ocasiones los que tenemos una pgina web o blog en la red, tenemos
necesidad de un medio que permita a los usuarios subir imgenes o fotos para
compartirlas y mostrarlas en nuestro sitio.
Si no disponemos de algn plugin o script donde alojamos la pgina que lo

permita, podemos hacerlo nosotros mismos, no es nada difcil, solo unas
sencillas lneas de cdigo como se detalla en esta pgina.
Se necesita un formulario en la pgina que ser el que ver el usuario y este

cargar un sencillo script que estar en la misma ubicacin de la pgina y
contiene el cdigo en PHP que ejecutar la funcin requerida.
Ejemplo de formulario que sube un archivo al servidor:
El siguiente cdigo va entre las etiquetas body de la pgina web:
<form enctype="multipart/form-data" action=" proceso_carga1.php " method="POST">

<input name="uploadedfile" type="file" />
<input type="submit" value="Subir archivo" />
</form>
enctype="multipart/form-data": es necesario para subir archivos, crea la forma

que permite explorar en su bsqueda en el equipo local.
action="uploader.php": Especifica el script con su ruta que ejecutara la accin.
El formulario se ver de la siguiente forma:
215

A continuacin creamos el archivo que se encargara del proceso de carga:
<?php
$target_path = "cargas/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) { echo "El
archivo ". basename( $_FILES['uploadedfile']['name']). " ha sido subido";
} else{
echo "Ha ocurrido un error, trate de nuevo!";
}
?>
Al ejecutar el formulario y darle clic en el botn archivo, podemos ver que

efectivamente nuestro archivo se ha alojado en el servidor.
Proceso:
Verificamos nuestra carpeta vaca.
Ejecutamos nuestro formulario y Seleccionamos un archivo.
Procesamos el formulario.
Verificamos que el archivo en la carpeta del servidor.
216
DESARROLLAR UNA APLICACIN WEB COMPLETA.

Historia de Aplicaciones Web
Las aplicaciones Web interactivas poco a poco han revolucionado la forma de
utilizar internet, aumentando el contenido de las pginas con texto esttico
(texto que no evoluciona, sino que permanecen como es) a un contenido rico e
interactivo, por lo tanto escalable.
El concepto de la aplicacin web no es
nuevo. De hecho, uno de los primeros
lenguajes de programacin para el
desarrollo de aplicaciones web fue el "Perl".
Fue inventado por Larry Wall en 1987 antes
de que internet se convirtiera en accesible para el pblico en general.
Pero fue en 1995 cuando el programador Rasmus Lerdorf

puso a disposicin el lenguaje PHP con lo que todo el
desarrollo de aplicaciones web realmente despeg. Hoy en
da, incluso muchas de estas aplicaciones se han
desarrollado en PHP, como Google, Facebook y Wikipedia.
Unos meses ms tarde, Netscape, el navegador web ms antiguo

y popular, anunci una nueva tecnologa, JavaScript, lo que
permite a los programadores cambiar de forma dinmica el
contenido de una pgina Web que haba sido hasta el momento
texto esttico. Esta tecnologa permite un nuevo enfoque para el
desarrollo de aplicaciones Web, que eran, y an hoy, mucho ms interactivas
para los usuarios. Por ejemplo, la instantnea
de Google, que muestra los resultados de
bsqueda en un momento en que la palabra se
escribe, hace un uso intensivo de JavaScript.
Las actualizaciones del sitio web de productos
de Microsoft tambin utiliza esta tecnologa.
217

Al ao siguiente, en 1996, dos desarrolladores, Sabeer
Bhatia y Jack Smith lanzaron Hotmail (no fue un desarrollo
original de microsoft), un servicio de correo en lnea que
permite (por primera vez) para el pblico en general para
acceder y consultar el correo electrnico siempre que sea los usuarios pudieran
estar en cualquier sitio lejos de su ordenador.
Luego vino la famosa plataforma Flash utiliza para aadir

contenido interactivo para sitios Web. Flash hizo su aparicin
en 1997, conocido como Shockwave Flash. Ms tarde,
despus de ser adquirido por Macromedia y Adobe, Flash se
convirti en una plataforma para desarrollar aplicaciones web
interactivas.
El ao siguiente marc un punto de inflexin para los medios de comunicacin

en lnea. De hecho, el 17 de enero de 1998, el sitio web The Drudge Report
anunci por primera vez un informe de noticias antes de que se difundiera en
los medios de televisin y la prensa tradicional. Se inform el escndalo
Clinton/Lewinsky. Este evento fue el detonante del periodismo en lnea tal
como lo conocemos hoy en da. Antes de esa fecha, internet nunca haba sido
considerado un medio de comunicacin importante.
El mismo ao, la compaa Google

desarroll su primer motor de bsqueda en
lnea que, por su nueva forma de indexar
pginas web, facilita enormemente la
bsqueda de informacin en internet.
Google sigue innovando y se convirti en uno de los ms prolficos en cuanto a
las aplicaciones Web, con indicacin del muy popular Google Maps, Google
Docs, Gmail y en aumento.
A principios de 2001, poco despus de

la explosin de la burbuja de internet,
Wikipedia se lanz como un subproyecto de Nupedia, una enciclopedia en lnea tradicional. Para
desarrollar su plataforma, se utiliza un tipo de Wikipedia de la
aplicacin web denominada "wiki", que permite a cualquier
usuario agregar contenido. Las contribuciones no se hicieron
esperar, y al final del primer ao de funcionamiento, Wikipedia
ya contaba con 20000 pginas en 18 idiomas. Hoy en da, casi
218

21 millones de artculos en 285 idiomas conforman el sexto sitio ms visitado
en el mundo, siendo el primero Google.
En 2003, MySpace
ms tarde, de 2005 a
convirti
en
el
comunicacin social
MySpace fue una
fue fundado y
2008, el sitio se
medio
de
ms visitado.
plataforma de
lanzamiento para otras aplicaciones web conocidos
como YouTube, y Slide.com! RockYou, todos los cuales
comenzaron como mdulos adicionales para los
usuarios de MySpace antes de convertirse en sus
propios sitios web en su propio derecho.
Entonces, tres acontecimientos muy importantes

ocurrieron en 2004. En primer lugar, en una conferencia
de la Web 2.0 a cargo de
John Battelle y Tim O'Reilly,
el concepto de "web como
plataforma" fue mencionado
por primera vez. Esta innovacin allan el camino
para futuras aplicaciones web, es decir, un software
que aprovecha las ventajas de la conexin a
internet y que se desvan del uso tradicional del escritorio. En segundo lugar, el
sitio interactivo de Digg se puso en marcha. Propuso una forma innovadora de
crear y encontrar contenido en internet mediante la promocin de noticias y
enlaces democrticamente votado por los usuarios. Y, por ltimo, el tercer gran
evento, pero no menos importante, fue el lanzamiento de Facebook, que
estaba entonces en su infancia, abierto slo a los estudiantes.
Con un milln de suscriptores a finales de 2004, Facebook se ha convertido en

el medio de comunicacin social ms utilizado con ms de 900 millones de
usuarios. Este es el segundo sitio ms visitado en el planeta y tiene la mayor
cantidad de fotos compartidas por los usuarios con un total de casi 500000
millones de fotos subidas a la plataforma. Facebook ha revolucionado la
mirada de aspectos relacionados con la vida social la comercializacin, y la
poltica en la Web.
En 2005, YouTube fue lanzado oficialmente, permite a
los usuarios compartir vdeos en lnea. De simple sitio
para compartir vdeos en internet a una plataforma
madura que se conoce hoy en da, YouTube ahora
219

ofrece cerca de 4000 millones de videos al da, adems de un servicio de
alquiler de pelculas en lnea, y, finalmente, episodios de emisin para las
empresas o las pelculas de MGM, Lions Gate Entertainment y CBS.
Twitter, por su parte, se puso en marcha en 2006. Con los aos, la popularidad
de Twitter ha aumentado de 1,6 millones de 'tweets' en 2007 con la
impresionante cifra de 340 millones de dlares por da en marzo de 2012
(equivalente a casi 4000 'tweets' por segundo).
El ao 2007 estuvo marcado por la

aparicin del iPhone, que fue sin duda
responsable de la llegada de la nueva
moda para las plataformas mviles y
aplicaciones web. Ahora son accesibles
por telfono inteligente.
A principios de 2011, la empresa Kickstarter, que

facilita la financiacin de proyectos en lnea de forma
participativa, ha llegado a los 4000 proyectos con ms
de 30 millones de dlares en donaciones. Por otra
parte, casi el 44% de los proyectos se han iniciado con
xito desde esta plataforma.
Definicin de Aplicacin WEB.
En la ingeniera software se denomina aplicacin web a aquellas aplicaciones
que los usuarios pueden utilizar accediendo a un servidor web a travs de
Internet o de una intranet mediante un navegador. En otras palabras, es una
aplicacin software que se codifica en un lenguaje soportado por los
navegadores web, y en la que se confa la ejecucin de la aplicacin al
navegador.
220
NOTA:
Quin no ha utilizado el Hotmail, Facebook, Twitter?
Quin no ha comprado en Amazon, ha vendido un
producto en Mercado Libre, ha dejado un comentario
en un blog, ha entrado a la intranet de su empresa,
ha realizado una bsqueda en Google o ha realizado
una transaccin bancaria va internet?
Casi nadie, no? Bueno, para que tengan una idea,

tanto el Hotmail, Facebook, Twitter, Amazon, Mercado Libre, los blogs, las intranets e
incluso Google no son pginas web; por el contrario, contienen una lgica compleja
que no vemos. Es por ello que son llamadas aplicaciones web.
Diferenciando pgina web, sitio web y aplicacin web.

Estos trminos representan lo mismo para quien quiera referirse a presencia en
Internet, sin embargo, para detalles tcnicos es necesario aclarar la diferencia
que existe entre ellos.
Pgina web.
Es el resultado de la unin de cdigo y contenido y al cual se tiene acceso a
travs de un enlace de hipertexto siendo necesario el uso de un navegador
web para su correcta interpretacin y visualizacin.
El cdigo est representado bsicamente por

lenguaje HTML, unido a ello es recomendable el
uso de CSS, encargado de la esttica de la
pgina, y adicionalmente tambin se puede
incluir cdigo Javascript si se necesita
221

aprovechar el comportamiento del visitante frente a algn elemento de la
pgina. Un ejemplo de uso de Javascript podra ser cuando el visitante hace
clic sobre un enlace o botn y desencadena una accin sobre ese evento como
mostrar un mensaje de advertencia.
Una pgina web es un simple archivo .HTML o la

interaccin de dos o ms archivos que pueden contener
una consulta a una base de datos usando como
herramienta de traduccin cdigo HTML y otro lenguaje
de interpretacin web como PHP.
Sitio web.
Un sitio web es el conjunto de una o ms
pginas web que podran estar, o no,
enlazadas entre s. El propsito principal de
un sitio web es trasmitir contenido para su
consulta. El trmino sitio web sera el correcto para referirnos a cualquier
producto o servicio que tenga presencia en Internet. La puerta de entrada a un
sitio web es la pgina de inicio o pgina principal.
Un ejemplo prctico de sitio web sera un blog, donde la pgina de inicio est
formada por la lista de los ltimos artculos publicados y que al hacer click
sobre el ttulo de cualquiera de ellos podemos ver el desarrollo de esa entrada
en una pgina aparte.
Aplicacin web.
Una aplicacin web es una herramienta
diseada y desarrollada para atender una
necesidad especfica desde Internet El uso
de una aplicacin web puede ser con fines
privados o pblicos. Para desarrollar una
aplicacin web es necesario tener
conocimientos de anlisis de informacin,
programacin, manejo de bases de datos,
tiempos
de
carga
de
resultados,
optimizacin de cdigo, anlisis estadsticos, funciones matemticas, diseo de
interfaz de usuario, y un sin fin de tareas que atender para que el
funcionamiento de la aplicacin web siempre sea el deseado.
222

A diferencia de los sitios web que se redisean y se modifican sus contenidos,
una aplicacin web tiende a evolucionar con el paso del tiempo debido a los
requerimientos de sus usuarios o a los cambios tcnicos producidos en su
entorno.
Por ejemplo: Twitter es una aplicacin web
que difunde contenido en Internet a travs de
sus usuarios. Usando el mismo ejemplo
podemos decir que Twitter tambin hace uso
de un sitio web para su apartado de Ayuda, y
otro para su apartado Sobre nosotros. Por lo
tanto, una aplicacin web puede tener uno o
ms sitios web con informacin relacionada
a su contenido y funcionamiento.
Cmo funcionan las aplicaciones web.
Los administradores de contenidos va web
almacenan los datos en BASES DE DATOS
(BD). Estas BD estn formadas por un
nmero variable de tablas que contienen
columnas y filas, estas tablas se componen
del contenido que ha sido previamente cargado en ellas a travs de
formularios.
En estas tablas llamamos al

nombre de cada columna
campo. Y a cada fila registro.
Ambos en el sistema poseen
nmeros de id (identificacin)
que son nicos para cada uno
de ellos.
Las pginas que se generan a partir de esos

contenidos son llamadas dinmicas. En este
contexto el trmino dinmico no indica
movimiento o animacin, sino que hace
referencia al hecho de que las pginas
dinmicas de un sitio web se generan a partir de
una solicitud o consulta que realiza una mquina
cliente a un servidor web (en este caso). Se podra decir que la pgina
dinmica no existe hasta que no es solicitada por el navegante. Cuando el
223

navegante la solicita oprimiendo alguno de los comandos disponibles se
dispara la consulta a la base de datos, y el sistema muestra una pgina web
con el contenido que este programado en la consulta.
Arquitectura de las aplicaciones Web.

La arquitectura tradicional de cliente/servidor tambin es conocida como
arquitectura de dos capas. Requiere una interfaz de usuario que se instala y se
ejecuta en una PC o estacin de trabajo y enva solicitudes a un servidor para
ejecutar operaciones complejas.
Por ejemplo, una estacin de trabajo utilizada como cliente puede ejecutar una
aplicacin de interfaz de usuario que interroga a un servidor central de bases
de datos.
Ventajas del Sistema de Dos Capas:

El desarrollo de aplicaciones en un ambiente de dos capas funciona
adecuadamente, pero no es necesariamente lo ms eficiente. Las
herramientas para el desarrollo con dos capas son robustas y ampliamente
evaluadas.
Las tcnicas de ingeniera de software de prototipo se emplean fcilmente.
Las soluciones de dos capas trabajan bien en ambientes no dinmicos
estables, pero no se ejecutan bien en organizaciones rpidamente
cambiantes.
Desventajas del sistema de dos capas:

Los ambientes de dos capas requieren control excesivo de las versiones y
demandan esfuerzo de distribucin de la aplicacin cuando se les hacen
cambios. Esto se debe al hecho de que la mayora de la aplicacin lgica
existe en la estacin de trabajo del cliente.
La seguridad del sistema en un diseo de dos capas es compleja y a
menudo requiere administracin de las bases de datos; esto es debido al
224

nmero de dispositivos con acceso directo al ambiente de esas bases de
datos.
Las herramientas del cliente y de la base de datos, utilizadas en diseos de
dos capas, constantemente estn cambiando. La dependencia a largo plazo
de cualquier herramienta, puede complicar el escalamiento futuro o las
implementaciones.
Arquitectura de tres capas:
La arquitectura de tres capas es
un
diseo
reciente
que
introduce una capa intermedia
en el proceso. Cada capa es un
proceso separado y bien
definido
corriendo
en
plataformas separadas. En la
arquitectura tradicional de tres
capas se instala una interfaz de
usuario en la computadora del usuario final (el cliente). La arquitectura basada
en Web transforma la interfaz de bsqueda existente (el explorador de Web),
en la interfaz del usuario final.
La arquitectura de las aplicaciones Web suelen presentar un esquema de

tres niveles.
El primer nivel consiste en la capa
de presentacin que incluye no slo
el navegador, sino tambin el
servidor web que es el responsable
de presentar los datos un formato
adecuado.
El segundo nivel est referido

habitualmente a algn tipo de
programa o script.
El tercer nivel proporciona al segundo los datos necesarios para su ejecucin.

Una aplicacin Web tpica recoger datos del usuario (primer nivel), los enviar
al servidor, que ejecutar un programa (segundo y tercer nivel) y cuyo
resultado ser formateado y presentado al usuario en el navegador (primer
nivel otra vez).
225

Las diferentes capas suelen ser:
Capa 1: Cliente de aplicacin: Navegador Web.
Capa 2: Servidor de Aplicaciones: Apache, Servidor Tomcat con servlets.
Capa 3: Servidor de Datos: Base de datos, servidor SMTP.
Ventajas de la arquitectura de tres capas:

Las llamas de la interfaz del usuario en la estacin de trabajo, al servidor de
capa intermedia, son ms flexibles que en el diseo de dos capas, ya que la
estacin solo necesita transferir parmetros a la capa intermedia.
Con la arquitectura de tres capas, la interfaz del cliente no es requerida para
comprender o comunicarse con el receptor de los datos. Por lo tanto, esa
estructura de los datos puede ser modificada sin cambiar la interfaz del
usuario en la PC.
El cdigo de la capa intermedia puede ser reutilizado por mltiples
aplicaciones si est diseado en formato modular. La separacin de roles en
tres capas, hace ms fcil reemplazar o modificar una capa sin afectar a los
mdulos restantes.
Desventajas de las Arquitecturas de Tres Capas y basadas en Web.

Los ambientes de tres capas pueden incrementar el trfico en la red y
requiere ms balance de carga u tolerancia a las fallas.
Los exploradores actuales no son todos iguales.
La estandarizacin entre diferentes proveedores ha sido lenta en
desarrollarse. Muchas organizaciones son forzadas a escoger uno en lugar
de otro, mientras que cada uno ofrece sus propias y distintas ventajas.
Lenguajes de programacin del lado del cliente.

Un lenguaje del lado cliente es totalmente independiente
del servidor, lo cual permite que la pgina pueda ser
albergada en cualquier sitio. Pero nuestra pgina no se
ver bien si la computadora cliente no tiene instalados los
plug-in adecuados. El cdigo, tanto del hipertexto como de
los scripts, es accesible a cualquiera y ello puede afectar a
la seguridad.
Javascript.
Javascript es un lenguaje de programacin
que realiza acciones dentro del mbito de una
pgina web. Su compatibilidad con la mayora
de los navegadores modernos, lo posiciona
como el lenguaje de programacin del lado del
226

cliente ms utilizado. Con Javascript podemos crear efectos especiales en las
pginas y definir interaccin con el usuario. El navegador (browser) del cliente
es el encargado de interpretar las instrucciones Javascript y ejecutarlas para
realizar estos efectos e interactividades, de modo que el mayor recurso, y tal
vez el nico, con que cuenta este lenguaje es el propio navegador.
Entre las acciones tpicas que se pueden realizar en Javascript tenemos dos
vertientes. Por un lado los efectos especiales sobre pginas web, para crear
contenidos dinmicos y elementos de la pgina que tengan movimiento,
cambien de color o cualquier otro dinamismo.
Por el otro, javascript nos permite ejecutar instrucciones como respuesta a las
acciones del usuario (eventos), con lo que podemos crear pginas interactivas
con programas como calculadoras, agendas, o tablas de clculo.
Javascript es un lenguaje con muchas posibilidades, es orientado a objetos,
con funciones, estructuras de datos complejas, etc.
Adems, Javascript pone a disposicin del programador todos los elementos
que forman la pgina web, para que ste pueda acceder a ellos y modificarlos
dinmicamente.
JavaScript no permite dos de las caractersticas clsicas de los lenguajes
orientados a objetos (herencia y polimorfismo), pero permite la creacin y
manipulacin de objetos sencillos, y la definicin de mtodos y propiedades
para dichos objetos.
JavaScript soporta el Modelo de Objetos de Documento (DOM, Document

Object Model). El DOM es el conjunto de objetos predefinidos que nos permite
acceder a todos los elementos de una pgina y a ciertas caractersticas
especficas del navegador.
Visual Basic Script.

Es un lenguaje de programacin de scripts
del lado del cliente, slo compatible con
Internet Explorer. Es por ello se usa poco.
Est basado en Visual Basic de Microsoft.
Tanto su sintaxis y modo de operacin es
una versin reducida del primero. El modo
de funcionamiento de Visual Basic Script
227

para construir efectos especiales en pginas web es muy similar al utilizado en
Javascript y los recursos a los que se puede acceder tambin son los mismos:
el navegador.
Applets de Java.
Son programas hechos en Java, que se transfieren
con las pginas web y que el navegador ejecuta en
el espacio de la pgina. Los applets son ms
difciles de programar que los scripts en Javascript
y requerirn conocimientos medios del lenguaje
Java. La principal ventaja de utilizar applets
consiste en que son independientes del navegador,
del sistema operativo y multiplataformas.
Cada sistema operativo dispone de una mquina Virtual de Java que puede
interpretar los Byte Codes y transformarlos a sentencias ejecutables en el
sistema en cuestin.
Flash.
Es un programa multimedia de Adobe que se
utiliza para crear presentaciones animadas.
Se trata de una aplicacin del lado del
cliente que es leda por los principales
navegadores. Las animaciones se realizan a
partir de vectores y de imgenes en base a
pxeles (llamadas raster graphics) y pueden
incluir audio y video. Este programa es uno
de los ms utilizados para animar sitios Web
y permitir la interactividad.
Lenguajes de programacin del lado Servidor.

Existe una multitud de lenguajes concebidos o no para Internet. Cada uno de
ellos explota ms a fondo ciertas caractersticas que lo hacen ms o menos
tiles para desarrollar distintas aplicaciones.
Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web,
justo antes de que se enve la pgina a travs de Internet al cliente. Las
pginas que se ejecutan en el servidor pueden realizar accesos a bases de
datos, conexiones en red, y otras tareas para crear la pgina final que ver el
cliente.
228

Los lenguajes de lado servidor ms ampliamente utilizados para el desarrollo
de pginas dinmicas son el ASP, JSP, PERL y PHP.
ASP.NET (Active Server Pages).

Lenguaje comercializado por Microsoft, y usado
por programadores para desarrollar entre otras
funciones, sitios web. ASP.NET es el sucesor
de la tecnologa ASP, fue lanzada al mercado
mediante una estrategia de mercado denominada .NET.
Se desarrollado para resolver las limitantes que brindaba tu antecesor ASP.
Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Los archivos
cuentan con la extensin (aspx).
El lenguaje ASP consiste en una serie de clases .NET utilizadas para crear
aplicaciones Web, tanto del lado cliente (Web Form) como del lado servidor
(Web Service). La integracin de nativa .NET Framework con el sistema
operativo Windows Server 2003 hace que su ejecucin sea ms estable y
rpida que otros lenguajes de programacin.
Las pginas creadas con la tecnologa ASP.NET funcionan en todo tipo de
navegadores, incluyendo Netscape, Safari e Internet Explorer.
Actualizaciones Dinmicas Soporte de servicios web XML Conexiones del tipo
DSN, o sin utilizacin de DSN, para acceder a fuentes de datos ODBC.
Ventajas:
Completamente orientado a objetos.

Controles de usuario y personalizados.
Divisin entre la capa de aplicacin o diseo y el cdigo.
Facilita el mantenimiento de grandes aplicaciones.
Incremento de velocidad de respuesta del servidor.
Mayor velocidad.
Mayor seguridad.
229

Desventajas:
Mayor consumo de recursos.
Tecnologa propietaria.
Hospedaje de sitios web costosos.
JSP
Es un lenguaje para la creacin de sitios web dinmicos, acrnimo de Java
Server Pages. Est orientado a desarrollar pginas web en Java. JSP es un
lenguaje multiplataforma.
JSP fue desarrollado por Sun Microsystems. Comparte ventajas similares a las
de ASP.NET, desarrollado para la creacin de aplicaciones web potentes.
Posee un motor de pginas basado en los servlets de Java. Para su
funcionamiento se necesita tener instalado un servidor Tomcat.
Caractersticas:
Cdigo separado de la lgica del programa.

Las pginas son compiladas en la primera peticin.
Permite separar la parte dinmica de la esttica en las pginas web.
Los archivos se encuentran con la extensin (jsp).
El cdigo JSP puede ser incrustado en cdigo HTML.
Los elementos que pueden ser insertados en las pginas JSP son los
siguientes:
Cdigo: se puede incrustar cdigo Java.
Directivas: permite controlar parmetros del servlet.
Acciones: permite alterar el flujo normal de ejecucin de una pgina.
230

Ventajas:
Ejecucin rpida del servlets.

Crear pginas del lado del servidor.
Multiplataforma.
Cdigo bien estructurado.
Integridad con los mdulos de Java.
La parte dinmica est escrita en Java.
Desventajas:
Complejidad de aprendizaje.
PERL.
Perl (Practical Extraction and Report Language) es un lenguaje de
programacin desarrollado por Larry Wall (lwall at netlabs.com) inspirado en
otras herramientas de UNIX como son: sed, grep, awk, c-shell, para la
administracin de tareas propias de sistemas UNIX. No establece ninguna
filosofa de programacin concreta. No se puede decir que sea orientado a
objetos, modular o estructurado aunque soporta directamente todos estos
paradigmas; su punto fuerte son las labores de procesamiento de textos y
archivos. Lenguaje de programacin basado en scripts portable a casi cualquier
plataforma. Es muy utilizado para escribir CGIs. Uno de sus elementos ms
potentes son las expresiones regulares, que a partir de su versin en Perl han
sido adoptadas por otros lenguajes y plataformas como .NET o Javascript.
Ventajas:
Es un buen lenguaje pegamento. Se pueden juntar varios programas de
una forma sencilla para alcanzar una meta determinada. Los usuarios de
Windows agradecern esta propiedad ya que normalmente adolecen de un
buen lenguaje tipo script.
Es relativamente rpido para un lenguaje tipo script.
Est disponible en mltiples plataformas y sistemas operativos (UNIX, Linux
y Windows). Un programa que se escriba teniendo en cuenta la
compatibilidad puede ser escrito en una plataforma y ejecutado en otra.
El desarrollo de aplicaciones es muy rpido.
Hay una coleccin enorme de mdulos que pueden ser incorporados a
cualquier script de Perl. Estn disponibles en el CPAN (Comprehensive
231

Perl Archive Network). En particular existe una extensin para clculo
numrico denominada PDL.
Perl es gratuito. Mucho ms que eso, es Software Libre. Esto quiere decir
que el cdigo fuente est disponible para que cualquiera lo pueda ver o
modificar, y lo que es ms importante, siempre lo estar. Aunque nunca
pretendas cambiar el cdigo, es importante disponer de la posibilidad de
hacerlo, ya que siempre se podr contratar a una tercera persona para que
lo modifique en el caso de que haya un error, y debera ser posible
solucionarlo.
Le otorga al programador mucha libertad para que haga el programa como
quiera. Tal como dice el eslogan de Perl Hay ms de una forma de hacerlo.
Desventajas:
Es lento para algunas aplicaciones, como programacin a bajo nivel,
escribiendo un driver para una aplicacin o corriendo modelos numricos
de clculo intensivo. Si bien se pueden insertar subrutinas FORTRAN o C en
Perl, teniendo lo mejor de los dos mundos, pero con algo ms de
complejidad.
La libertad que se le otorga al programador puede significar que el resultado
sea un programa ilegible. Si no se escribe con cuidado puede llegar a ser
difcil de leer. De hecho hay un concurso de Perl ofuscado.
Perl es un lenguaje interpretado. Este tema no es tan crtico como suena, los
programas Perl no corrern mucho ms rpidos cuando se compilen, la
nica ventaja est en la desaparicin de la fase inicial de compilacin al
correr la aplicacin.
Utiliza muchos recursos de comput. Esto significa que no es tan ligero
como un programa en C, pero en la prctica es ligero comparado con la
potencia de procesamiento de las computadoras actuales.
PHP.
PHP es el acrnimo de Hipertext
Preprocesor. Es un lenguaje de
programacin del lado del servidor
gratuito e independiente de plataforma,
rpido, con una gran librera de funciones
y mucha documentacin. Fue creado
originalmente en 1994 por Rasmus
Lerdorf, pero como PHP est desarrollado
en poltica de cdigo abierto, a lo largo de
su
historia
ha
tenido
muchas
contribuciones de otros desarrolladores.
El cliente solamente recibe
232

una pgina con el cdigo HTML resultante de la ejecucin de la PHP. Como la
pgina resultante contiene nicamente cdigo HTML, es compatible con todos
los navegadores.
Ventajas:
Muy fcil de aprender.

Se caracteriza por ser un lenguaje muy rpido.
Soporta en cierta medida la orientacin a objeto. Clases y herencia.
Es un lenguaje multiplataforma: Linux, Windows, entre otros.
Capacidad de conexin con la mayora de los manejadores de base de
datos: MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras.
Capacidad de expandir su potencial utilizando mdulos.
Posee documentacin en su pgina oficial la cual incluye descripcin y
ejemplos de cada una de sus funciones.
Es libre, por lo que se presenta como una alternativa de fcil acceso para
todos.
Incluye gran cantidad de funciones.
No requiere definicin de tipos de variables ni manejo detallado del bajo
nivel.
Desventajas:
Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede
ser ms ineficiente a medida que las solicitudes aumenten de nmero.
La legibilidad del cdigo puede verse afectada al mezclar sentencias HTML y
PHP.
La programacin orientada a objetos es an muy deficiente para
aplicaciones grandes.
Dificulta la modularizacin.
Dificulta la organizacin por capas de la aplicacin.
SEGURIDAD.
PHP es un poderoso lenguaje e intrprete, ya sea
incluido como parte de un servidor web en forma de
mdulo o ejecutado como un binario CGI separado,
es capaz de acceder a archivos, ejecutar comandos
y abrir conexiones de red en el servidor. Estas
propiedades hacen que cualquier cosa que sea
ejecutada en un servidor web sea insegura por
naturaleza.
233

PHP est diseado especficamente para
ser un lenguaje ms seguro para escribir
programas CGI que Perl o C, y con la
seleccin correcta de opciones de
configuracin en tiempos de compilacin
y ejecucin, y siguiendo algunas prcticas
correctas de programacin.
Ambientes para el desarrollo de aplicaciones Web.

Un entorno de desarrollo integrado (IDE- Integrated Development Environment
-) tambin conocido como entorno de diseo integrado o el medio ambiente
integrado de depuracin es una aplicacin de software que ofrece servicios
integrales a los programadores de computadoras para el desarrollo de
software.
Un IDE normalmente se compone de:
Un editor de texto.
Un compilador.
Un intrprete.
Herramientas de automatizacin.
Un depurador.
Posibilidad de ofrecer un sistema de control de versiones.
Factibilidad para ayudar en la construccin de interfaces grficas de usuario.
IDE para Php

Existen muchos entornos de desarrollo para
PHP en software libre tales como: Zend
Studio, Open Komodo Project, Eclipse +
phpEclipse, entre otros.
Dreamweaver de Adobe.
Es en una potente y flexible herramienta de
desarrollo
que
inclute
numerosas
herramientas para facilitarnos el desarrollo de aplicaciones web.
Dreamweaver permite trabajar con los siguientes modelos de servidor:
ASP JavaScript
ASP VBScript
ASP.NET C#
ASP.NET VB
234

COLDFUSION
JSP
PHP MySQL
El concepto de sitios en Dreamweaver
es bastante til ya que nos permite
mantener un orden lgico/fsico de la
estructura de nuestro sitio, enlaces y
recursos que este utiliza, tiene el
potencial
para
encargarse
completamente de los enlaces
relativos (recomendado).
Como se mencion Dreamweaver

proporciona soporte para variados modelos de Servidor entregando
capacidades de creacin de cdigo estndar para una serie de funciones como
son la insercin, edicin, eliminacin y consulta de datos, manejo de ciclos y
condiciones, incluso acceso por restringido por password, todo esto de una
forma muy bsica, pero sin duda es un primer acercamiento para novatos, lo
importante de esto es que podemos extender esta capacidad mediante
nuestros conocimientos y usar este entorno de desarrollo para facilitarnos la
dura tarea de desarrollar para la Web.
Jomla!
Joomla! es un Sistema de Gestin de Contenidos (CMS) premiado
mundialmente, que le ayuda a construir sitios web y otras aplicaciones online
potentes. Lo mejor de todo, es que Joomla es una solucin de cdigo abierto y
est disponible libremente para cualquiera que desee utilizarlo.
Joomla! se utiliza en todo el mundo para generar desde una simple pgina web
personal hasta complejas aplicaciones web corporativas. Entre los diferentes
usos que la gente da a Joomla! estn:
235
Webs corporativas o portales.

Comercio electrnico.
Pequeos sitios de negocios.
Webs de organizaciones o ONGs.
Aplicaciones gubernamentales.
Intranets y extranets corporativas.
Webs de escuelas o agrupaciones.
Pginas personales o familiares.
Portales de comunidades.
Revistas y peridicos.
Joomla se puede usar para gestionar fcilmente cualquiera de los aspectos de

un sitio web, desde la introduccin de contenidos e imgenes hasta la
actualizacin de un catlogo de productos o la realizacin de reservaciones
online.
WordPress.
WordPress es un sistema de gestin de contenido enfocado a la creacin de
blogs (sitios web peridicamente actualizados). Desarrollado en PHP y MySQL,
bajo licencia GPL y cdigo modificable, tiene como fundador a Matt Mullenweg.
WordPress fue creado a partir del desaparecido b2/cafelog y se ha convertido

junto a Movable Type en el CMS ms popular de la blogosfera.
Las causas de su enorme crecimiento son, entre otras, su licencia, su facilidad
de uso y sus caractersticas como gestor de contenidos.
Metodologas para el desarrollo de aplicaciones Web.

El creciente desarrollo del comercio electrnico as como el desplazamiento de
las distintas organizaciones hacia la Web ha trado en la actualidad una
constante evolucin de las aplicaciones Web.
Cada da se incrementan las transacciones
financieras, la transferencia de informacin
confidencial y ejecucin de procesos online, entre
otros,
las
cuales
exigen
funcionalidad,
confiabilidad, usabilidad y eficiencia por mencionar
236

algunas caractersticas de calidad. Esta relevancia de la economa genera
grandes desafos en las aplicaciones Web que son los de controlar y mejorar
su calidad.
Aunque las aplicaciones Web estn creciendo rpidamente tanto en uso como
en aceptacin, su desarrollo tiende a ser ad hoc, resultando en aplicaciones de
pobre calidad. La mayora de los desarrolladores Web ponen poca atencin en
la elicitacin y anlisis de requisitos, as como en las metodologas y procesos
de desarrollo. A dems los desarrolladores de aplicaciones confan
excesivamente en el conocimiento y experticia de los desarrolladores
individuales y sus prcticas de desarrollo individual ms bien que en las
prcticas estndar. No obstante, son las mismas metodologas de desarrollo
las que no tratan de manera adecuada y profunda los atributos de calidad.
Estas situaciones traen como consecuencia que los atributos de calidad de los
sistemas basados en la Web tales como la funcionalidad, confiabilidad,
mantenibilidad, usabilidad y portabilidad no se les da la debida consideracin
que se merecen durante el proceso de desarrollo.
En la ingeniera software se denomina aplicacin web a aquellas aplicaciones

que los usuarios pueden utilizar accediendo a un servidor web a travs de
Internet o de una intranet mediante un navegador. En otras palabras, es una
aplicacin software que se codifica en un lenguaje soportado por los
navegadores web en la que se confa la ejecucin al navegador.
Las aplicaciones web son populares debido a lo prctico del navegador web
como cliente ligero, as como a la facilidad para actualizarlas y mantenerlas.
Algunas aplicaciones son: los webmails, wikis, weblogs, tiendas en lnea,
intranet.
237

Ingeniera Web es el proceso utilizado para crear, implantar y mantener
aplicaciones y sistemas Web de alta calidad. Esta breve definicin nos lleva a
abordar un aspecto clave de cualquier proyecto como es determinar qu tipo de
proceso es ms adecuado en funcin de las caractersticas del mismo.
Un empleo sistemtico y disciplinado de
modelos, mtodos y modelos de ingeniera de
software en la Web para el aseguramiento y
control de la calidad favorece a la compresin y
anlisis y potencialmente mejorar los desarrollos
producidos.
Capacidad de comprensin del sitio global.
Capacidad de recuperacin y de bsqueda.
Usabilidad
Capacidad de bsqueda y navegacin.
Servicios de ayuda y realimentacin del sitio.

Capacidades estticas y de interfaz.
Servicios relacionados con el dominio de la Funcionalidad

aplicacin.
Servicios especiales.
Capacidad de correccin.
Rendimiento del tiempo de respuesta.

Velocidad de generacin de pginas.
Eficiencia
Adaptabilidad.
Calidad
de una
aplicacin
web
Capacidad de
Extensibilidad.
mantenimiento
Proceso correcto de enlace.

Velocidad de generacin de imgenes.
Recuperacin de errores.
Fiabilidad
Viabilidad y recuperacin de la entrada del

usuario.
Control y Garanta de la Calidad.

Una de las tareas colaterales que forman parte del
proceso es el Control y Garanta de la Calidad
(CGC). Todas las actividades CGC de la ingeniera
software tradicional como son: establecimiento y
supervisin de estndares, revisiones tcnicas
formales, anlisis, seguimiento y registro de
informes, etc, son igualmente aplicables en el
desarrollo de una aplicacin Web. Sin embargo, en
la Web toman especial relevancia para valorar la
calidad aspectos como:
Usabilidad.
Funcionabilidad.
Fiabilidad.
Seguridad.
Eficiencia.
Mantenimiento.
238

Control de la Configuracin.
Establecer mecanismos adecuados de control de la configuracin para el
desarrollo de una aplicacin Web es uno de los mayores desafos a los que
esta nueva disciplina se enfrenta. La Web tiene caractersticas nicas que
demandan estrategias y herramientas nuevas. Hay cuatro aspectos
importantes a tener en cuenta en el desarrollo de tcticas de control de
configuracin para la Web.
Contenido: Considerando la dinmica rpida con la que el contenido se

genera, es tarea compleja organizar racionalmente los objetos que forman la
configuracin y establecer mecanismos de control.
Personal: Cualquiera realiza cambios. Hay mucho personal no especializado
que no reconoce la importancia que tiene el control del cambio.
Escalabilidad: Es comn encontrar aplicaciones que de un da para otro
crecen considerablemente. Sin embargo, las tcnicas de control no escalan de
forma adecuada.
Poltica: Quin posee la informacin? Quin asume la responsabilidad y
coste de mantenerla?
La Gestin del Proceso.
En un proceso tan rpido como es el proceso de desarrollo de una aplicacin
Web, donde los tiempos de desarrollo y los ciclos de vida de los productos son
tan cortos, merece la pena el esfuerzo requerido por la gestin? La respuesta
es que dada su complejidad es imprescindible. Entre los aspectos que aaden
dificultad a la gestin destacamos:
Alto porcentaje de contratacin a terceros.
El desarrollo incluye una gran variedad de personal tcnico y no tcnico
trabajando en paralelo.
El equipo de desarrollo debe dominar aspectos tan variados como, software
basado en componentes, redes, diseo de arquitectura y navegacin, diseo
grfico y de interfaces, lenguajes y estndares en Internet, test de
aplicaciones Web, etc, lo que hace que el proceso de bsqueda y
contratacin de personal sea arduo.
NOTA:
La Web evoluciona y crece sin diseo alguno. Prcticas tan pobres de calidad pueden
introducir defectos que dejen al efecto 2000 como un juego de nios. Es deber de
todos proporcionar cimientos firmes a una tecnologa que mgicamente nos permite
acceder a cualquier hora a cualquier punto del planeta para obtener bienes tan
valiosos como son los servicios y la informacin.
239

Aspectos de seguridad.
Hoy en da las aplicaciones web son uno de los servicios ms utilizados ya sea
accediendo a un servidor web a travs de internet o de una intranet.
Los lenguajes de programacin web son verstiles, sencillos de usar y permiten
crear soluciones de gran envergadura.
Las aplicaciones escritas en estos
lenguajes estn expuestas a diversas
amenazas si no se toman las medidas
adecuadas para evitarlo, por este motivo
se resalta la importancia de la formacin
en seguridad que deberan de recibir
todos los programadores.
Si no se procede de forma correcta, las
aplicaciones web desarrolladas en estos lenguajes pueden servir como puerta
de entrada de un intruso a la red de la empresa, por lo que la seguridad de este
tipo de aplicaciones tiene que ser tomada como prioritaria para no exponer la
seguridad de su negocio.
Esta formacin est orientada a que los equipos de programadores conozcan
y utilicen las buenas prcticas en el diseo y desarrollo de aplicaciones para
evitar vulnerabilidades de seguridad.
El objetivo del mismo es conocer cmo proteger la aplicacin contra los fallos
ms comunes (SQL Injection, XSS, Command Execution, File Inclusion).
Fallas de seguridad.
OWASP ha publicado su proyecto Top 10 correspondiente al ao 2013, donde
han surgido algunas modificaciones en cuanto a los riesgos de seguridad ms
crticos de aplicaciones web.
El top 10 de OWASP sobre vulnerabilidades en aplicaciones web se basa en
informacin sobre riegos provenientes de 8 firmas especializadas en seguridad
de aplicaciones. Se tienen en cuenta alrededor de 500,000 vulnerabilidades
alrededor de cientos de organizaciones y miles de aplicaciones. Asimismo,
estas vulnerabilidades son priorizadas de acuerdo al nivel de explotacin,
deteccin e impacto estimado.
De acuerdo al ranking, el top 10 de este ao (2013) qued de la siguiente
manera:
A1 Injection: Corresponde a las inyeccin de cdigo, siendo las inyecciones
SQL una de las ms comunes.
240

A2 Broken Authentication and Session Management (anteriormente A3):
Corresponde al mal manejo de las sesiones en aquellas aplicaciones que
utilizan autenticacin.
A3 Cross-Site Scripting (XSS) (anteriormente A2): Ocurre cuando existe
validacin pobre de la informacin ingresada por el atacante.
A4 Insecure Direct Object References: Puede derivar en un acceso no
autorizado a informacin crtica debido a errores en el diseo o desarrollo.
A5 Security Misconfiguration (anteriormente A6): Corresponde a
configuraciones no adecuadas que pueden impactar en la seguridad de la
propia aplicacin.
A6 Sensitive Data Exposure: Se refiere a la proteccin incorrecta de datos
crticos tales como, por ejemplo, nmeros de tarjetas de crdito, contraseas,
entre otros.
A7 Missing Function Level Access Control: Corresponde a la falta de
controles desde el servidor, permitiendo a un posible atacante acceder a
funciones a las que no debera.
A8 Cross-Site Request Forgery (CSRF) (anteriormente A5): Permite a un
atacante generar peticiones sobre una aplicacin vulnerable a partir de la
sesin de la vctima.
A9 Using Known Vulnerable Components (anteriormente formaba parte de
A6): Corresponde a la explotacin de libreras, frameworks y otros
componentes vulnerables por parte de un atacante con el fin de obtener acceso
o combinar con otros ataques.
A10 Unvalidated Redirects and Forwards:
Los atacantes aprovechan el uso de
redirecciones de sitios web a otros sitios
utilizando informacin no confiable (untrusted)
para redirigir a las vctimas a sitios de
phishing o que contienen malware.En la cima
del top 10 se encuentran aquellas
vulnerabilidades que son del tipo inyeccin.
Estas vulnerabilidades suelen explotarse por
errores en la programacin de las consultas.
En segundo lugar, y subiendo desde la tercera
posicin,
se
encuentran
aquellas
vulnerabilidades que respectan al manejo de sesiones. En este caso se apunta
241

a errores en el diseo donde los atacantes pueden comprometer tokens y
contraseas o incluso explotar vulnerabilidades dentro de la aplicacin.
El caso de XSS sigue permaneciendo dentro de las 3

vulnerabilidades ms comunes. Suelen verse ataques web
XSS que aprovechan la falta de controles en la validacin de
los datos ingresados por el usuario.
El resto de las vulnerabilidades que componen el ranking

incluyen tanto fallas en el diseo de aplicaciones como tambin errores
netamente de las personas que administran las mismas. Uno de los puntos que
vale pena destacar es el referido a las malas configuraciones ubicada en la
posicin 5. En muchos casos, existen configuraciones inadecuadas por parte
de los administradores, o incluso, configuraciones por defecto que no se
adecuan al contexto de los sistemas y pueden derivar en el compromiso del
sistema si un atacante toma provecho.
Tal
como
lo
afirma
OWASP,
las
vulnerabilidades en los sistemas siguen siendo
una problemtica y es necesario tratarla con la
atencin que lo requiere. En muchos casos,
detrs de estas vulnerabilidades existe
informacin valiosa y crtica que puede ser
utilizada con diversos fines. Desde ESET
Latinoamrica, pensando en esta necesidad,
contamos con ESET Security Services donde ofrecemos servicios de auditora
de seguridad para aquellas organizaciones que deseen evaluar el estado de su
seguridad.
El futuro de las aplicaciones Web.

Puesto que en los 43 aos de la historia de
internet, los programadores han tratado de
hacer estallar las barreras entre las
aplicaciones tradicionales y aplicaciones
web. El progreso de los ltimos aos en
tecnologa, velocidad de descarga, as
como
herramientas
de
desarrollo
(incluyendo la plataforma. Net de Microsoft)
aborda algunas deficiencias.
242
Poco a poco, las aplicaciones Web se estn

convirtiendo en una funcionalidad ms completa,
mientras que estn siendo fciles de usar.
Podemos tomar por ejemplo de Google Docs,
Office Web Apps, BitDefender QuickScan, Last.fm,
y en lnea UFile QuickTax, lo que sea.
Como hemos visto, el impacto de las

aplicaciones Web sobre cmo operar un
negocio, transmitir y recibir informacin, e
incluso en la vida de las personas es
considerable. Las aplicaciones Web ofrecen
la oportunidad de conectar a los usuarios
entre s y las empresas con sus clientes. En
resumen, los desarrolladores de aplicaciones
web de hoy estn dando forma a su futuro
digital del futuro.
Tendencia de las aplicaciones Web.

Algo que distingue a Internet es su capacidad para adaptarse, cambiar y
renovarse ante las diversas necesidades y tendencias que mandan en el
mercado.
Es as, como, limitaciones tecnolgicas mediante, al principio Internet era

mucho ms chata y menos atractiva de lo que es hoy, que goza de mucha ms
vida e interactividad.
Esta constante evolucin, hizo que la informacin que viajaba en una sola
direccin, se convirtiera en una autopista de dos vas para lograr mayor
participacin de los usuarios. Fue entonces, cuando los usuarios comenzaron a
darse cuenta de su verdadero poder y, de esta forma, pasaron de ser un mero
espectador a transformarse en actores mucho ms participativos de la gran
pelcula sin fin que ofrece Internet. Con esta creciente interrelacin y con el
usuario convirtindose en generador de contenidos, se establece el paradigma
de la web 2.0 y una nueva etapa en la gran red de redes.
De la mano de este fenmeno, tambin aparecen lo que se conoce como

aplicaciones web, es decir, herramientas online que permiten realizar tareas
que antes slo estaban disponibles en aplicaciones de escritorio. Desde
soluciones de correo, pasando por agendas, editores de texto, editores de
243

imgenes, unidades de almacenamiento virtual, planillas de clculo y software
ms complejos, capaces de operar directamente desde Internet, sin que el
usuario necesite ms que tener un navegador actualizado en su computadora.
Con la evolucin de las tecnologas para el desarrollo web, como por ejemplo el
gran avance de programacin en AJAX, las aplicaciones web fueron creciendo,
siendo cada da ms robustas y ofreciendo cada vez ms opciones para el
usuario. Ya queda poco de aquellas primeras aplicaciones con opciones
bsicas e interfaz poco atractiva. Hoy en da las aplicaciones web deben dar
soluciones reales a los usuarios y mostrar una interfaz que est a la altura de
las aplicaciones de escritorio, sin perder eficiencia y sin resignar performance.
Las ventajas de las aplicaciones web son bien conocidas, pero vale la pena
repasarlas. La primera y fundamental es la que ya mencionamos: el usuario no
debe instalar software adicional, slo debe tener un navegador actualizado y
una buena conexin a Internet. En relacin a esto, tambin surge que ya no se
necesitan varios GB en el disco duro para almacenar una aplicacin que no hay
que instalar. Como la aplicacin corre en el navegador, no hay problema de
compatibilidad de sistemas operativos, por lo cual es una solucin
multiplataforma. Tampoco debemos pensar en instalarla, actualizarla o qu
pasar si se rompe nuestro disco duro. Al estar la aplicacin en Internet, ella
vive en un servidor del cual se ocupar el equipo de mantenimiento, el usuario
slo deber recordar la direccin para acceder y la clave de acceso. Esto
permite resolver de una manera mucho ms sencilla y eficiente problemas
crticos y cualquier necesidad de actualizacin. Esto tambin beneficia el
trabajo en equipo que se puede realizar con personas que se encuentren en
diversos lugares del mundo sin ningn tipo de problema.
Evidentemente hay aplicaciones que tienen una complejidad que an hoy es

difcil llevarla a la prctica en una solucin completa como herramienta online.
Sin embargo, la evolucin de las tcnicas existentes, nos demuestran da a da
que el mundo est cada vez ms permeable a utilizar herramientas online y a
probar cosas nuevas. Tambin vale la pena mencionar que las webapp son
una solucin muy interesante y cada vez ms difundidas para mviles, lo cual
es otro aspecto que todo desarrollador debe tener en cuenta como un
interesante camino por explorar.
244
1. Defina la importancia de las variables de sesin y mencione 2 casos

prcticos de su uso en una aplicacin web real.
2. Elabore un formulario que permita subir solamente archivos con la
extensin pdf al servidor. (Investigar validacin).
3. Haga una lista de todas las vulnerabilidades que pueden existir en una
aplicacin web y plantee una solucin especfica para cada una.
4. Elabore una aplicacin web para una empresa.
NOTA: La empresa debe de ser coordinada con el instructor, puede ser una
empresa ficticia.
La aplicacin web debe tener los mantenimientos a las tablas
respectivas de la base de datos y consultas que muestren informacin
de toma de decisiones.
245

Desarrollo Aplicaciones Web (Redes)

Cargado por

Copyright:

Formatos disponibles

Desarrollo Aplicaciones Web (Redes)

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Desarrollo Aplicaciones Web (Redes)

Cargado por

Copyright:

Formatos disponibles

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

DESARROLLO DE APLICACIONES WEB

TAREA 01: ANALIZAR LA ESTRUCTURA A LAS APLICACIONES WEB.

Analizar el alcance del proyecto web.

"Nunca consideres el estudio como una obligacin, sino

Computadora con microprocesadores core 2 Duo de mayor capacidad.

Analizar el alcance del proyecto web.

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

DESARROLLO DE APLICACIONES WEB

1.2. OPERACIN: IDENTIFICAR LA ESTRUCTURA BSICA DE UNA

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

1.4. OPERACIN: SELECCIONAR LA INTERFAZ DE DESARROLLO MS

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

A continuacin ingrese el nombre del sitio y la carpeta

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

Crear una nueva pgina.

Vistas de una pgina.

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

Novedades de Dreamweaver CS6.

DESARROLLO DE APLICACIONES WEB

DESARROLLO DE APLICACIONES WEB

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

Identificar la estructura bsica de una aplicacin web.

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

DESARROLLO DE APLICACIONES WEB

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

Organizar el equipo de trabajo segn especialidades.

DESARROLLO DE APLICACIONES WEB

DESARROLLO DE APLICACIONES WEB

Seleccionar la interfaz de desarrollo ms adecuada.

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

DESARROLLO DE APLICACIONES WEB

Subir ficheros al servidor del hosting.

Ejercicios y tareas de investigacin

1. Cules son los planteamientos iniciales antes de comenzar a desarrollar

ESCUELA DE TECNOLOGAS DE LA INFORMACIN

DESARROLLO DE APLICACIONES WEB

TAREA 02: IMPLEMENTAR PHP COMO LENGUAJE DE

Computadora con microprocesadores core 2 Duo de mayor capacidad.

Instalar el servidor PHP y base de datos.

DESARROLLO DE APLICACIONES WEB