Programacion Web
Programacion Web
Programación WEB
1
2
Universidad Autónoma de Manizales
Contenido
CARTA DE PRESENTACIÓN 9
CARTA DESCRIPTIVA DE LA ASIGNATURA 10
CONTENIDO PROGRAMÁTICO 12
MAPA CONCEPTUAL DE CONTENIDOS 12
BIBLIOGRAFIA BÁSICA CONSULTADA 13
Programación WEB
HTML INTERMEDIO 27
2.1. OBJETIVOS ESPECÍFICOS 27
2.2. DESARROLLO TEMÁTICO 27
2.2.1. Texto preformateado 27
2.2.2. Acentos y otros caracteres especiales 28
2.2.3. Tabla de caracteres importantes 29
2.2.4 LISTAS 30
2.2.5. Como hacer comentarios en html 32
2.2.6. Tablas con HTML 32
2.2.7. Otros atributos importantes para tener en cuenta con tablas 34
2.3. CONCLUSIONES 35
3
SESION NÚMERO CUATRO
PÁGINAS CON ESTILO Y VALIDACIÓN DE FORMULARIOS CON JAVASCRIPT 51
4.1. OBJETIVOS ESPECÍFICOS 51
4.2. DESARROLLO TEMÁTICO 51
4.2.1. Hojas con estilo 51
4.2.2. Redefinición de etiquetas 52
4.2.3. Separar estilos 53
4.2.4. Validación de formularios con javascript 55
4.3. CONCLUSIONES 62
4
Universidad Autónoma de Manizales
8.2.2. Conexión a la base de datos desde PHP 100
8.2.3 CONSULTA A LA BASE DE DATOS 101
8.2.4. Insertando registros 102
8.2.5. Borrando registros 103
8.2.6 Autenticación 104
8.3 CONCLUSIONES 105
Programación WEB
10.2.5. Encontrando un sitio de residencia web (hosting) 117
10.2.6. Contacto con la empresa prestadora del servicio 118
10.2.7. Subiendo archivos al sitio web 121
10.3. CONCLUSIONES 125
5
6
Universidad Autónoma de Manizales
Créditos: 3
Programación WEB
7
8
Universidad Autónoma de Manizales
CARTA DE PRESENTACIÓN
Estimado Estudiante.
El desarrollo web es un campo de la programación relativamente joven, comparado con los otros
tipos de programación. Este es uno de los campos de acción más requeridos en la actualidad
para tecnólogos e ingenieros, ya que mediante la misma se crea buena parte del entorno en la
red de redes, es decir de Internet.
El diseño y desarrollo web ha venido revolucionado la forma como las empresas presentan su
imagen comercial y su objeto de negocio. Son millones las páginas web publicadas, todas ellas
con uno u otro estilo; lo anterior ha vendió generando enormes y variadas líneas de acción,
sobre las que puede moverse en el campo laboral un tecnólogo o ingeniero. La dinámica con
la que este tipo de desarrollo evoluciona día a día, ha cambiado el rol clásico del diseñador y
programador web, a los cuales se les presenta a diario un desafío: el de estar a la vanguardia de
los cambios, y acciones laborales por desarrolla; ya sea frente a la presentación a nivel mundial
de una determinada empresa respecto a la imagen de la misma y de su objeto de negocio, o a
la generación de comercio electrónico entre otros campos de acción que se pueden desarrollar.
La programación web, ha permitido que muchas transacciones comerciales, bancarias, de salud,
Programación WEB
etc. Se puedan realizar usando medios electrónicos, principalmente potenciando y masificando
el uso de la red: Internet.
Debido a la importancia y crecimiento de Internet como una herramienta para la transmisión y
recepción de la información, hace que el uso y comprensión de herramientas para el desarrollo
web, sea una necesidad sentida para el tecnólogo e ingeniero de hoy. Es imperativo que deban
aprender los aspectos básicos, medios y avanzados del desarrollo web, dado que esto les hará
más competitivos en el mundo laboral, pues contarán con capacidades apetecidas por múltiples
empresas, que ofrecen sus servicios por medio de la web, para ampliar la cobertura de su objeto
de negocio por medio del comercio electrónico; además de ayudar en la captura y procesamien-
tos de datos de los clientes y demás actividades que se hacen vía web. Adicionalmente el Tecnó-
logo e Ingeniero que sigan esta línea de trabajo podrán desarrollarse como empresarios en varia-
das especialidades del desarrollo web permitiendo de esta forma aumentar la autonomía laboral
propia de un profesional de Tecnología e Ingeniería de la Universidad Autónoma de Manizales.
Esta asignatura pretende poner al Tecnólogo en análisis y programación de sistemas de informa-
ción en la ruta de desarrollo web, buscando aumentar sus competencias, frente a posibilidades
de negocio que muestra bastantes puertas abiertas, bajo n posibilidades que fomentarán la crea-
tividad del estudiante, como proyección de su vida profesional.
¡BIENVENIDOS!
9
CARTA DESCRIPTIVA DE LA ASIGNATURA
Introducción
El curso estará estructurado en diez (10) sesiones de aprendizaje; cada uno de sus elementos se
describe como parte del contenido programático. En cada sesión encontrará los conceptos fun-
damentales trazados por los objetivos que se quieren alcanzar en ella. El material ha sido escrito
como continuidad de las asignaturas de Programación, de tal forma que encontrará a lo largo del
módulo la necesidad de recordar y aplicar los tópicos referentes a las mismas.
Estrategia de Aprendizaje
El módulo ha sido pensando bajo la Metodología Sinfónica Virtual, la cual persigue, tener una
conversación dialógica entre todas las herramientas de aprendizaje ofrecidas por la Universidad
Autónoma de Manizales en el modelo de educación a distancia. Para lograr alcanzar esto, es
importante que siga el módulo rigurosamente y de forma sistemática, pues en él encontrará en
todo momento que le será exigida la realización de actividades, laboratorios, consultas, etc. Para
poder llamar su atención se han colocado íconos de conocimiento que tienen un significado es-
pecial al interior de lo escrito en el módulo; estos íconos son:
10
Universidad Autónoma de Manizales
Programación WEB
deberán ser enviados como adjuntos en el lugar indicado de cada apartado.
11
CONTENIDO PROGRAMÁTICO
Sesión Contenidos a Tratar.
Html básico: Esta sesión describe los aspectos iniciales del lenguaje de programación
1 marcado de Hipertexto.
Html intermedio: En esta sesión se pretende ahondar sobre este lenguaje, avanzando en
2 el manejo de tablas y listas.
Html avanzado: En esta sesión ahondamos en el manejo de formularios para el manejo
3 de información de usuarios
Páginas con estilo y Validación de formularios con Javascript: Esta sesión ahonda el as-
4 pecto de los formularios validados con el lenguaje de programación interpretado Javas-
cript.
Iniciando el lenguaje de programación php: Esta sesión estudia los aspectos básicos del
5 leguaje de programación php.
Continuando con el lenguaje php: en esta sesión se estudian los procesos de decisión y
6 bucles en php.
Programación orientada a objetos con php: esta sesión enfoca todo lo del paradigma de
7 POO, redireccionándolo a un lenguaje web como lo es php versión 5.0
Relación entre el lenguaje php y las bases de datos: Esta sesión retoma los aspectos bá-
8 sicos de las bases de datos y hace una relación directa con el lenguaje de programación
php.
Manejo de sesiones con php: Esta sesión permite mostrar el manejo de sesiones para el
9 logueo de usuarios en el ingreso de un desarrollo indicado.
Publicación en la web: Esta sesión se enfoca al aspecto de poder publicar desarrollos
10 web en un Hosting gratuito o pago.
Anexo de instalaciones: Este muestra los aspectos pormenorizados para instalar los dis-
11 tintos paquetes de software que se usan al interior de todo el módulo.
ACTIVIDAD
12
Universidad Autónoma de Manizales
Programación WEB
Soria, Ramón. (1998.). Navegar en Internet HTML, diseño y creación de páginas web.
Talens Oliag, Sergio y Hernández Orallo, José. (1996). HTML. Manual de Referencia.
Madrid: Editorial Paraninfo.
LA WEB DEL PROGRAMADOR. http://www.lawebdelprogramador.com/
MEMORIAS DE UN APRENDIZ DE PHP. http://www.rinconastur.net/php/php35.php
PHP YA. http://www.phpya.com.ar/
WEB ESTILO. http://www.webestilo.com/
BEYET. INTERNET SERVICES. http://byethost.com/
13
14
SESION NÚMERO UNO
HTML BÁSICO
Universidad Autónoma de Manizales
• Identificar las distintas posibilidades de aplicación de los tags que forman parte del len-
guaje HTML.
• Clasificar los tags de HTML que manejan imágenes y vínculos a otras páginas.
Es el lenguaje de programación utilizado para crear las páginas web de cualquier sitio. Básica-
mente se trata de una especie de editor de texto, como el Word, por ejemplo. La principal dife-
Programación WEB
rencia es que con el HTML hemos de utilizar lo que se denominan etiquetas o tags, para forma-
tear el texto, imágenes, etc.
Para escribir programas de HTML, se tienen múltiples posibilidades. Una es abrir Block de notas
(o algún editor de texto) y escribir el código allí. La otra forma es utilizar algún editor de HTML; en
nuestro caso usaremos Notepad++, dada la facilidad de uso y sus altas posibilidades para mante-
ner el rastreo sintáctico del código y permitir la posibilidad de verificar rápidamente si el código
está bien escrito. (Ver anexo de instalaciones: Instalando Notepad++ )
15
SESION NÚMERO UNO HTML BÁSICO
1.2.3. Código básico de una página
HTML trabaja con unas etiquetas especiales, a las que denominamos TAGS. Todos los tags se
escriben entre los símbolos: < y >. El cuerpo básico de un programa realizado en HTML es:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
1.2.3.1. Punto A. Todas las páginas HTML comienzan con el código de inicio <html> y terminan
con el código </html>
<html>
</html>
1.2.3.2. Punto B. Las páginas HTML se dividen en un encabezado y un cuerpo. Para el encabeza-
miento tenemos que poner los “tags”: <head> y </head>
Tenemos que ponerlo dentro de las instrucciones inicial y final de página (paso A), por lo tanto
nos queda:
<html>
<head>
</head>
</html>
1.2.3.3. Punto C. Igualmente insertamos las instrucciones para el cuerpo de la página <body> y
</body>. Con lo que nos queda:
<html>
<head>
</head>
<body>
</body>
</html>
16
Universidad Autónoma de Manizales
1.2.4.1. Ingresando título de la página
Grabe el archivo tenido presente que desde el inicio, se le indicó al sistema que el lenguaje del
código es HTML. Observé la figura 3.
¡IMPORTANTE!
Para ver el resultado que se obtiene en cualquier programa, siga los siguientes pasos. Selec-
cione del menú de herramientas: Ejecutar y seleccione el navegador donde lo desea visuali-
zar. No olvide que estamos programando para la WEB y todo se visualiza en los navegadores:
IE=Internet Explorer; Firefox; Safari; Chrome, etc. En la figura 4, seleccionamos IE.
17
SESION NÚMERO UNO HTML BÁSICO
18
Universidad Autónoma de Manizales
Programación WEB
1.2.4.3. Centrando texto en la página
En la figura 8, se muestra el código que se escribe para centrar un letrero al interior de una pági-
na; en este caso se usa el tag: <center>; si quisiéramos alinear a la izquierda usamos el tag: <left>
y si deseamos alinear a la derecha se usa el tag: <right>. La figura 9 muestra el texto en salida al
centro de la página.
19
SESION NÚMERO UNO HTML BÁSICO
1.2.5. Otras tags importante que se usan regularmente al hacer páginas web
Para ponerlo en cursiva utilizamos “i” (de italian). Esto se logra colocando un tag: <i>texto en
cursiva</i>. No olvide: por normas estándar todo tag que se abre, se debe cerrar.
Para subrayado utilizamos “u” (underline). Para realizar esto usamos el tag: <u>subrayado</u>.
Generalmente se subraya parte de la frase.
En ocasiones es necesario cambiar el color del fondo de la página; para lograr este objetivo se
usa el tag: en el cuerpo <bgcolor>. Es importante hacer claridad que los colores se pueden llamar
20
Universidad Autónoma de Manizales
con su nombre en inglés; por ejemplo, si deseamos color azul escribiríamos: blue. Esta práctica no
es recomendable, dado que la norma estándar para que cualquier navegador publique lo que se
desea fielmente indica que se debe escribir en el código internacional de programación WEB. La
figura 12, muestra el código de algunos de los colores básicos.
Observe que según esta tabla el color azul será: #0000FF; este código garantiza que cualquier na-
vegador muestre el mismo color.
Programación WEB
Si desea obtener un color específico, existen en la red de la in-
ternet gran cantidad de sitios que ayudan a encontrar el código
respectivo; uno de ellos está en la dirección:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
Veamos un ejemplo donde se cambia el color del fondo de la página. La figura 13 muestra el códi-
go digitado en Notpad++; Este ejemplo muestra también dos nuevos tags. Uno permite cambiar
el tamaño de la letra; este es el tag: <Font size=”EL TAMAÑO” > ; el tamaño va a criterio de autor
de la página web; el tamaño va desde 1 hasta 7 (con modificaciones de + y -). El otro permite
alinear un texto; este es el tag: <div aling=”center”> No olvide que la alineación pude ser: right,
left, center, justify.
21
SESION NÚMERO UNO HTML BÁSICO
La salida de este código se muestra en la figura 14. Observe el cambio de tamaño de la letra y el
color de fondo que ha pasado de blanco a gris.
Por EJEMPLO: Para poner el texto en rojo <FONT COLOR=»RED»>este texto se pone rojo</font>.
Para Color azul = Blue. No olvide utilizar mejor el código de colores estándar, visto anteriormente.
Los titulares o encabezamiento de los textos son otra forma de modificar el tamaño del texto. La
orden para encabezamiento es “H1” para un titular muy grande, “H2” para uno grande, H3, H4,
H5 y para letra pequeña H6. En la figura 15, se muestra el uso de estos tags.
La salida por pantalla de este programa se muestra en la figura 16. Observe como los textos van
cambiando de tamaño:
22
Universidad Autónoma de Manizales
1.2.5.6. Salto de línea
En muchas ocasiones es necesario dar un salto de línea, algo como un enter o salto de carro en la
página. En este caso se usa el tag: <BR> La figura 17, muestra el código que se usa.
Programación WEB
Figura 18. Salida de salto de línea
Desde una página WEB, se puede ir a otra página web o a otro portal web; lo anterior se logra
haciendo uso de los links. La figura 19, muestra el código que se usa.
23
SESION NÚMERO UNO HTML BÁSICO
1.2.5.8. Trabajando con imágenes
Efectivamente una página web, sin imágenes no es una página atractiva. Es fundamental trabajar
con la mayor cantidad de imágenes que impacten al visitante del sitio. El la figura 20 se visualiza
su uso. En la figura 21, se ve la salida de ese código.
24
Universidad Autónoma de Manizales
Programación WEB
LABORATORIO No 1, realice el algoritmo pedido luego de estar
seguro que cumple las pruebas de escritorio, envíelo al docente en el link denominado: Entrega
LABORATORIO No 1.
1.3. CONCLUSIONES
• La principal característica del HTML es el uso de etiquetas o tags, para formatear el texto,
imágenes, etc.
• Con HTML se puede dar formato a: título, texto, color de texto, fondos, salida por pantalla,
vínculos, tratamiento de imágenes de las distintas páginas web que se desarrollen.
• Para escribir código HTML, se puede utilizar un block de notas o un ambiente de desarrollo
como el Notepad++.
• Para establecer la salida por pantalla de un código HTML realizado, se escribe el nombre de la
página en un navegador cualquiera, como si fuera una dirección web.
• Las extensiones básicas de código HTML es .htm, .html, xhtml, entre otros.
25
26
SESION NÚMERO DOS
HTML INTERMEDIO
Universidad Autónoma de Manizales
• Categorizar los distintos elementos que se tienen en cuenta para crear tablas en HTML.
• Distinguir los distintos atributos que se pueden usar en tablas con HTML.
En ocasiones al diseñar una página web, se desea hacer una salida por pantalla que muestre algo
Programación WEB
novedoso como se muestra en la figura 23
Para lograr esto utilizamos una nueva etiqueta: <PRE>...</PRE> El nombre asignado a esta etique-
ta proviene de la palabra “PREformateado” (o PREformatted en inglés) y su función es mantener
todo formateado manual que sea hecho en el texto escrito entre la instrucción de inicio (<PRE>)
y la instrucción de fin (</PRE>). La figura 24 muestra el código que implementa la salida anterior:
27
SESION NÚMERO DOS HTML INTERMEDIO
Al hacer páginas web, se debe guardar una relación directa con las normas de ortografía que se
marcan para cada idioma. En el caso de Colombia, se usa ortografía para el idioma español. Este
idioma tiene acentos o algunos caracteres especiales para que las letras suenen, como la ñ. Para
su adecuada visualización en cualquier navegador, se usan códigos especiales, como las Entida-
des de caracteres con nombres y de caracteres numéricos1 Entidades de caracteres con nombre.
2.2.2.1. Son aquellas en las que los símbolos ‘&’ y ‘;’ se pone el nombre (o abreviatura) asignado
a ese carácter. Sólo existen para los caracteres especiales más usados. En la figura 25 se puede
ver un ejemplo de este tipo de entidades en el que vemos la estructura general que todas tienen.
Figura 25. Una entidad de carácter con nombre tiene tres partes: ‘& ‘ + ‘nombre’ + ‘;’
28
Universidad Autónoma de Manizales
2.2.2.2. Entidades de caracteres numéricas: en este tipo de entidades entre ‘&’ y ‘;’ se escribe
el número asignado a ese carácter en el estándar ISO-Latin-1 precedido de una almohadilla: ‘#’.
Este tipo de entidades son menos usadas que las anteriores aunque tienen la ventaja de abarcar
cualquier letra posible en cualquier idioma. En la figura 26 se muestra la estructura de este tipo
de entidades usando de nuevo como ejemplo la letra A mayúscula y acentuada.
Figura 26. Una entidad de carácter numérica tiene cuatro partes: ‘ &’ + ‘#’ + ‘número’ + ‘;’
La figura 27, muestra la tabla con los caracteres que se deben tener en cuenta y la forma como se
deben escribir, para que se lean en cualquier navegador.
Programación WEB
29
SESION NÚMERO DOS HTML INTERMEDIO
La figura 28, muestra el código donde se puede visualizar el uso de caracteres para mostrar la a
tildada…
2.2.4 LISTAS
Una lista, o listado, es una enumeración de dos o más elementos y suelen disponerse de tal for-
ma que se facilite la distinción entre ellos. El lenguaje HTML define los siguientes tipos de listas:
Numerada u ordenada. No ordenada. Listas de glosario o de definición. Menús. Usadas con
párrafos cortos. Listas de directorio.
La etiqueta <UL>...</UL> (UL proviene de Unordered List, que significa lista no ordenada). Dentro
de estas etiquetas insertaremos cada elemento con la etiqueta <LI>
La etiqueta <OL>...</OL> (OL: Ordered List, Lista ordenada), y cada elemento se inserta, al igual
que en el caso de listas no ordenadas, con la etiqueta <LI>.
2.2.4.3 GLOSARIO.
• La palabra que queremos definir: para insertar la palabra usaremos la etiqueta <DT> que
proviene de Definition Term (Término de definición). Esta nueva etiqueta funciona de
forma muy similar a <LI> y la instrucción de fin (</DT>) es igualmente optativa.
• La definición o descripción de esa palabra: una vez indicada la palabra es hora de poner su
definición. Para ello usamos otra nueva etiqueta: <DD> cuyas siglas significan Definition
Description (parte de la definición que contiene la descripción). La definición suele ser
un párrafo y será mostrado por los navegadores sangrado con respecto al texto anterior.
En Explorer las listas de menú (<MENU>) y de directorio (<DIR>) son mostradas de igual manera
que las listas no numeradas (<UL>).
30
Universidad Autónoma de Manizales
2.2.4.5. ANIDAMIENTO DE LISTAS
Vistos todos los tipos de listas se nos puede plantear una pregunta: ¿Se puede incluir una lista
dentro de otra? La respuesta es SI. El lenguaje HTML permite insertar unas listas dentro de otras
ya sean del mismo o de distinto tipo. A esta posibilidad se le llama anidamiento de listas y la for-
ma de realizarlo es incluir todo el código de una lista dentro de uno de los elementos de la otra.
La figura 29, muestra el código para ejemplos variados de listas.
Programación WEB
31
SESION NÚMERO DOS HTML INTERMEDIO
Para hacer comentarios del código en HTML, se escribe entre <!--- y --> Como se muestra en el
ejemplo siguiente: <!-- Aquí se escribe el comentario --> Depende del programador que tantos
comentarios y de qué amplitud, se puede desea hacer cada uno de ellos.
Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, ta-
bla. Esta etiqueta consta de instrucción de inicio, <TABLE>, e instrucción de fin, </TABLE>. Entre
ambas debemos introducir otras tres etiquetas, que definirán la estructura de la tabla. Estas
etiquetas son:
• TR: la etiqueta Table Row nos permitirá insertar filas en la tabla. La tabla tendrá tantas
filas como apariciones de esta etiqueta haya entre <TABLE> y </TABLE>. La instrucción de
inicio de TR, <TR>, marca el comienzo de la línea, la instrucción de fin, </TR>;, marca su
final. La instrucción de fin es optativa, si no se usa se considera que una línea ha acabado
cuando comienza otra o cuando acaba la tabla. Entre el comienzo y el fin de la línea de-
bemos insertar las celdas de la tabla.
• TH: ete es el primero de los dos tipos de celdas existentes en el lenguaje HTML. El nom-
bre de la etiqueta proviene del inglés Table Header, encabezado de tabla. Al igual que
la etiqueta anterior el comienzo del encabezado viene dado por la instrucción de inicio,
<TH> y finaliza con la instrucción de fin, </TH>, o con el comienzo de otra celda. En ge-
32
Universidad Autónoma de Manizales
neral entre el comienzo y el fin se suele insertar texto, que será mostrado en negrita o
subrayado y centrado.
• TD: este es el segundo tipo de celda de las tablas HTML. El nombre de la etiqueta, Table
Data (Datos de tabla), nos induce a pensar que su función será introducir todos los datos
que queramos en las celdillas definidas de esta forma. Y así será, de hecho podemos
insertar cualquier elemento de
HTML: imágenes, listas, texto
formateado e incluso otras ta-
blas. La diferencia de esta celda
con la anterior es pequeña, y
su existencia separada sólo tie-
ne sentido si consideramos el
carácter descriptivo del HTML.
En la práctica la diferencia prin-
cipal es que el texto de los en-
cabezados de tabla aparecerá
resaltado y centrado y el de las
celdas normales (TD) no.
Programación WEB
go, en las primeras versiones
del lenguaje HTML era obliga-
torio usarlas y por esta razón
algunos navegadores antiguos
las necesitan para poder enten-
der las tablas. Es por ello que
nuestra recomendación es usar
siempre dichas instrucciones
de fin para seguir con nuestro
objetivo de llegar a la mayor
cantidad de público posible.
La figura 31 Muestra algunos tags usados para generar una tabla. La salida de este código se vi-
sualiza en la figura 32.
33
SESION NÚMERO DOS HTML INTERMEDIO
2.2.7. Otros atributos importantes para tener en
cuenta con tablas
34
Universidad Autónoma de Manizales
Programación WEB
Ingrese al Aula Virtual y ubique en la Sesión el apartado de-
nominado: “LABORATORIO DE SESIÓN”, despliegue el archivo
LABORATORIO No 2, realice el algoritmo pedido luego de estar
seguro que cumple las pruebas de escritorio, envíelo al docente en el link denominado: Entrega
LABORATORIO No 2.
2.3. CONCLUSIONES
• En HTML se pueden hacer diseños preformateados que permiten la salida por pantalla
de páginas con algún toque personalizado.
• Al crear tablas se debe considerar cada uno de los elementos que conforman las filas y las
columnas; ocasionalmente se tiene en cuenta el borde y la alineación.
35
SESION NÚMERO DOS HTML INTERMEDIO
• Los tipos de lista que se pueden considerar en HTML son: lista ordenada, desordenada,
glosario, menú y directorio. Algunas pueden ser ordenadas.
36
SESION NÚMERO TRES
HTML AVANZADO
Universidad Autónoma de Manizales
Otra de las características importantes de la web es la posibilidad que los usuarios nos propor-
Programación WEB
cionen información, es decir, la tan nombrada interactividad. Mediante la utilización de formula-
rios podemos demandar ciertos datos a nuestros usuarios, bien sea a un email o a una base de
datos.
La mayor parte de los elementos HTML de que disponemos permite al visitante visualizar los
contenidos de un sitio, pero no interactuar con él. Dicho de otro modo, la relación usuario/página
es unidireccional y estática. Con las plantillas, por el contrario, el usuario puede interactuar con
el sitio enviando sus comentarios, haciendo peticiones sin necesidad de escribir mensajes por
correo electrónico, firmando en el libro de visitas, contestando a encuestas y sondeos, etc. Todo
ello define una relación bidireccional, que es posible sólo gracias a la intervención de programas
residentes en servidores WWW: se trata de los denominados CGI o Common Gateway Interface
(Interfaz Común de Pasarela).
• impostación de las marcas para la creación de la plantilla, de los campos y del botón de
envío;
37
SESION NÚMERO TRES HTML AVANZADO
• elaboración de un script CGI en servidor (o llamamiento de un script ya impostado)
Se puede incluir un formulario en una página web con las etiquetas <FORM> y </FORM>.
Si METHOD está impostado como GET, los datos se envían al servidor y se separan en dos varia-
bles. Para este método, el número máximo de caracteres que puede contener el formulario es de
255. Utilizando “method=post”, el script CGI recibe directamente los datos sin un proceso previo
de descodificación. Esta característica hace que el script pueda leer una cantidad ilimitada de
caracteres.
La marca de base para la definición de los elementos de un formulario es <INPUT>, que se utiliza
para agregar botones, menús de selección, contraseñas, etc. A <INPUT> se le pueden asignar los
ocho (8) valores que analizamos a continuación.
Este valor crea los típicos campos de texto, en los que generalmente se solicitan datos tales como
el nombre o la dirección de correo electrónico. Es un valor usado sobre todo para informaciones
no predefinidas, que cambian cada vez. TEXT tiene tres atributos opcionales, presentes también
en el ejemplo: maxlength (el número máximo de caracteres que puede ser introducido en el
campo y que no es posible superar), size (la anchura de la cadena dentro de la página) y value
(visualiza un texto por defecto dentro de la cadena).
3.2.3.2.2. Type=”PASSWORD”
Este campo de texto funciona como el anterior, pero con una pequeña diferencia que su propio
nombre indica: cuando se escribe dentro del cajetín blanco, no se ven los caracteres sino los clá-
sicos asteriscos de las contraseñas. En realidad, los datos no se codifican de ningún modo por lo
que esta marca no consigue eliminar la inseguridad de fondo.
38
Universidad Autónoma de Manizales
3.2.3.2.3. Type=”CHECKBOX”
Este atributo se utiliza para representar datos de tipo “sí/no” y “verdadero/falso”. Crea peque-
ñas casillas cuadradas que hay que puntear o dejar en blanco. Si la casilla está punteada, INPUT
restituye un valor al CGI; en caso contrario, no restituye ningún valor. Value impostado en “sí”
significa que por defecto la casilla está punteada. Checked controla el estado inicial de la casilla,
en el momento de cargar la página.
3.2.3.2.4. Type=”RADIO”
Este atributo tiene funciones similares al visto anteriormente, pero contiene más posibilidades
de selección. Seleccionando una de las voces presentes, y siempre y cuando tengan todas un
valor “name” idéntico, las restantes se deseleccionan automáticamente.
3.2.3.2.5. Type=”SUBMIT”
El clásico botón de envío que remite el formulario con todo su contenido. La dimensión del botón
depende de la longitud del texto.
Programación WEB
3.2.3.2.6. Type=”RESET”
Botón que vuelve a impostar todo el formulario eliminando los datos introducidos.
3.2.3.2.7. Type=”IMAGE”
Función similar a la de la tecla “ENVÍA”, pero con la diferencia de que en lugar del botón de la
opción por defecto, aparece una imagen.
3.2.3.3. TEXTAREA
TEXTAREA se utiliza para introducir comentarios o campos que prevén muchas líneas de texto. La
anchura se imposta con “cols” y la altura con “rows”. WRAP=”physical” establece que, en el caso
de que el texto introducido supere la anchura de la ventana, salte de línea automáticamente.
3.2.3.4. SELECT
SELECT es un elemento que permite la creación de listas con varias posibilidades de selección. En
nuestro ejemplo, hemos hipotizado que se solicita una calificación sobre un sitio web.
39
SESION NÚMERO TRES HTML AVANZADO
<SELECT size=1 cols=4 NAME=”calificación”>
<OPTION selected value=ninguna>
<OPTION value=bueno> Bueno
<OPTION value=suficiente> Suficiente
<OPTION value=excelente> Excelente
</select>
<html>
<head>
<title>EJEMPLO DE FORMULARIO</title>
</head>
<body>
<tr align=middle>
40
Universidad Autónoma de Manizales
<td width=”32%” bgColor=#e1e1e1 height=21 colspan=”2”><input type=”text”
name=”nombres” size=”23”></td>
</tr>
<tr align=middle>
</tr>
<tr align=middle>
Programación WEB
<td width=”86%” bgColor=#e1e1e1 height=21 colspan=”4”><input type=”text”
name=”direccion” size=”50”></td>
</tr>
<tr>
</td>
</tr>
41
SESION NÚMERO TRES HTML AVANZADO
3.2.3.10. <!--USO DEL TYPE CHECKBOX-->
<tr align=middle>
<option>Computador Dell</option>
<option>Impresora HP</option>
<option>Impresora EPSON</option>
<option>Software Contable</option>
<option>Software administrativo</option>
<option>Diseño especifico</option>
</select></td>
</tr>
</table><br>
<p align=”center”>OBSERVACIONES<br>
42
Universidad Autónoma de Manizales
3.2.3.13. <!--USO DEL SUBMIT-->
<p> </p>
</table>
</body>
</html>
Programación WEB
Figura 35. Salida por pantalla de un formulario de inscripción
3.2.4. Marcos
Los marcos (vulgarmente conocidos como frames) permiten dividir la pantalla en diversas zonas
que pueden actuar independientemente unas de otras. Resultan útiles para mostrar permanen-
temente en una ventana el sumario de una página, y en otra, el contenido seleccionado.
Para definir las diferentes subventanas o frames se utilizan las directivas <FRAMESET>, </FRA-
MESET> y <FRAME>. La directiva <FRAMESET> indica cómo se va a dividir la ventana principal.
Pueden incluirse varias directivas <FRAMESET> anidadas con la finalidad de subdividir una divi-
sión.
Los atributos ROWS y COLS definen si la división de la pantalla se hace por filas o por columnas.
Cuando se definen las filas, los tamaños de las subventanas (en puntos o en porcentajes) se in-
dican de la superior a la inferior. En el caso de las columnas, los tamaños se indican de izquierda
a derecha.
43
SESION NÚMERO TRES HTML AVANZADO
Por ejemplo:
<FRAMESET ROWS=”25%,50%,25%”>
creará tres subventanas horizontales; la primera ocupará el 20% de la ventana principal, la se-
gunda un 50% y la tercera un 25%.
<FRAMESET COLS=”120,*,100”>
creará tres subventanas verticales, la primera y la tercera tendrán una anchura fija de 120 y 100
puntos respectivamente. La segunda (*) ocupará el resto de la ventana principal.
anidará las dos directivas. La primera dividirá la ventana principal en dos subventanas verticales,
la primera ocupará un 20% de la ventana principal y la segunda el resto. La segunda directiva vol-
verá a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas
horizontales, la superior ocupará un 30% de la subventana, y la inferior el resto.
3.2.5. La directiva <FRAME> indica las propiedades de cada subventana. Es necesario indicar
una directiva <FRAME> para cada subventana creada. Los parámetros posibles son: (ver figura
36)
¡IMPORTANTE!
La definición de los marcos debe ir antes de la definición del cuerpo del documento (<BODY>).
44
Universidad Autónoma de Manizales
3.2.5.1. EN LA PAGINA QUE ESTA DENTRO DEL MARCO
Cuando se quiera mostrar una página hay que indicar al navegador en qué subventana debe
aparecer. Por defecto, se mostrará en la ventana donde se encuentre el enlace, pero se puede
escoger la subventana de destino del enlace incluyendo el parámetro TARGET en la etiqueta <A
HREF>, que puede tener los siguientes valores: (ver figura 37).
¡IMPORTANTE!
Para eliminar el borde gris de los marcos, se debe insertar el siguiente código:
Programación WEB
<frameset cols=”20%,60%,20%” border=0>
Para regular la distancia del contenido del marco al margen superior (marginheight) y a los már-
genes izquierdo y derecho (marginwidth):
45
SESION NÚMERO TRES HTML AVANZADO
46
Universidad Autónoma de Manizales
3.2.6. Capas
Programación WEB
Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página,
en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre
sí, lo que proporciona grandes posibilidades de diseño.
Podemos insertar una capa a través de las etiquetas <div> y </div>, que como ya vimos, sirven
para agrupar bloques de texto. A través del atributo id se le da un nombre a la capa, y a través del
atributo style se establecen el resto de propiedades de la capa.
Algunas Ordenes: left (izquierda), top (superior), position: absolute o relative, width (anchura)
y height (altura), z-index puede establecerse el índice de la capa dentro de la página, visibility:
visible o hidden, con: layer-background-image y background-image se puede establecer una
imagen, con: layer-background-color y background-color se puede establecer un color de fondo,
Hay otras que encuentras en Internet. La figura 43, muestra el código que se usa para crear capas.
En la figura 44 se visualiza la salida por pantalla de dicho código.
47
SESION NÚMERO TRES HTML AVANZADO
48
Universidad Autónoma de Manizales
3.3. CONCLUSIONES
• La CGI es el Common Gateway Interface es decir la Interfaz Común de Pasarela, que per-
mite a los usuarios interactuar con algún desarrollo web.
• La marca INPUT es la que nos permite clasificar la entrada de datos en un formulario, esta
puede ser: de texto, password, lista, etc.
• Los marcos o frames, permiten dividir la pantalla en diversas zonas que pueden actuar
independientemente unas de otras.
• Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la
página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y
solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
Programación WEB
49
50
SESION NÚMERO CUATRO
PÁGINAS CON ESTILO Y
VALIDACIÓN DE FORMULARIOS
Universidad Autónoma de Manizales
CON JAVASCRIPT
4.1. OBJETIVOS ESPECÍFICOS
• Identificar la definición de páginas con estilo.
• Identificar los distintos elementos que conforman la validación de los formularios con
Javascript.
Programación WEB
Figura 45. El resultado de las páginas con estilo
De esta forma, el resultado final que observa la persona en su browser es una mezcla entre las
características predefinidas para cada comando HTML y la hoja de estilo.
51
SESION NÚMERO CUATRO PÁGINAS CON ESTILO Y
VALIDACIÓN DE FORMULARIOS CON JAVASCRIPT
4.2.1.1. Aplicación directa
En la figura 46, se puede observar cómo se codificaría para obtener estilos mucho más atractivos
al realizar sitios web. En la figura 47, se puede visualizar la salida por pantalla de este código.
Suele ocurrir que queremos definir estilos que se apliquen a todas las etiquetas del documento,
es decir, queremos que todo el documento tenga un cierto tipo de letra, que las tablas tengan
otro, que las cabeceras tengan un color determinado, para ello, definiremos estilos globales por
medio de la etiqueta <STYLE> ... </STYLE> como se muestra en la figura 48.
52
Universidad Autónoma de Manizales
Podemos definir los estilos en un fichero distinto al documento HTML, y después referenciar-
lo desde el propio documento HTML. Esto lo haremos con la siguiente etiqueta, dentro de la
cabecera del documento (entre <HEAD> ... </HEAD>). La etiqueta que usamos para lograr este
cometido es:
Programación WEB
similar al siguiente:
<style type=”text/css”>
BODY {
background-color: #FEEFCB;
color: #000000;
}</style>
<BODY>....<BODY>
Para visualizar mediante un ejemplo esta forma de hacer páginas con estilo, observe con
detenimiento la figura 49 y la salida de dicho código, en la figura 50.
53
SESION NÚMERO CUATRO PÁGINAS CON ESTILO Y
VALIDACIÓN DE FORMULARIOS CON JAVASCRIPT
2. Para conectar un archivo de hojas de estilos con el resto de archivos HTML que conforman
un sitio web hay que colocar una llamada en la cabecera (<head>) de cada documento, en
cuya redacción se introduce el nombre del archivo CSS con el atributo href:
Para visualizar mediante un ejemplo esta forma de hacer páginas con estilo, observe con
detenimiento la figura 51, donde se ve en forma detallada la página que carga un archivo
que contiene los estilos a usar dentro de ella; en la figura 52 se visualiza la página que con-
tiene los estilos que se pueden cargar en una o varia páginas que la llamen para usar los
estilos allí definidos (es lo que llamamos CSS externo) y la salida de dicho código, se puede
visualizar en la figura 50. Es decir es lo mismo, realizado desde dos enfoques diferentes.
54
Universidad Autónoma de Manizales
Programación WEB
Figura 51. Página que usará estilos de un archivo externo
55
SESION NÚMERO CUATRO PÁGINAS CON ESTILO Y
VALIDACIÓN DE FORMULARIOS CON JAVASCRIPT
<script language=”Javascript 1.x”>
El atributo lenguaje hace referencia a la versión de Javascript que se va a utilizar en dicho script.
Al realizar páginas WEB o sitios WEB, en muchas ocasiones nos veremos en la necesidad de crea
formularios, como se aprendió en la Sesión No 3. La experiencia nos demuestra, que al diseñar y
desarrollar dichos formularios, se debe tener presente la validación de algunos campos, que un
usuario determinado del mismo, podría llegar confundir la información que debe ser diligencia-
da. Para lograr este cometido se usan funciones; estas permiten comparar caracteres permitidos
e indicar que los campos sean diligenciados. Veamos algunos de ellos.
<script language=”javascript”>
esto indicará que iniciaremos a escribir código de Javascript. Seguidamente se declara la
función de validación.
Es importante observar que en este caso se define inicialmente la variable con var; lue-
go va el nombre de dicha variable a validar, iniciando con er_ se escribe una igualdad y
se inicia la serie de caracteres que se aceptan con un /^( ; dentro encontramos [a-z],
esto significa que se acepta el abecedario en minúscula; el siguiente grupo de caracteres
aceptados es separado por un |; observe que luego se ha escrito [A-Z] significa que se
acepta también el abecedario en mayúsculas. De igual forma se separan y escriben los
otros caracteres aceptados en el campo llamado nombre. Finalmente, luego del carácter
final aceptado, se cierra con |\s|\.|-)+$/
4. La siguiente rutina que se muestra es muy usada para dar forma a las fechas que general-
mente se toman en los formularios; ver figura 53.
5. Una vez se han indicado los respectivos caracteres y formatos aceptados, se procede a
56
Universidad Autónoma de Manizales
escribir la rutina de comprobación para cada uno de los campos. Por ejemplo, si quere-
mos validar el campo nombre escrito con anterioridad se escribiría la siguiente rutina:
if(!er_nombres.test(formulario.nombres.value)) {
return false
Programación WEB
Figura 54. Validación del formato fecha
</script>
Esto indica que se ha cerrado todo el código escrito en lenguaje Javascript. No se puede
olvidar que todo esto se escribe antes del BODY.
7. La primera línea que escribimos dentro del body es: (ver figura 55)
Esta línea que se muestra en la figura 55, permite validar el formulario escrito anterior-
mente.
57
SESION NÚMERO CUATRO PÁGINAS CON ESTILO Y
VALIDACIÓN DE FORMULARIOS CON JAVASCRIPT
EJEMPLO DE VALIDACION DE FORMULARIO:
<html>
<head>
<title>SUSCRIPCIÓN</title>
</head>
<script language=”javascript”>
//VALIDACION
function validacion(formulario) {
var er_nombres = /^([a-z]|[A-Z]|á|é|í|ó|ú|ñ|ü|\s|\.|-)+$/
var er_apellidos = /^([a-z]|[A-Z]|á|é|í|ó|ú|ñ|ü|\s|\.|-)+$/
var er_pais = /^([a-z]|[A-Z]|á|é|í|ó|ú|ñ|ü|\s|\.|-)+$/
var er_departamento = /^([a-z]|[A-Z]|á|é|í|ó|ú|ñ|ü|\s|\.|-)+$/
var er_direccion = /^([a-z]|[A-Z]|[0-9\s\+\-]|á|é|í|ó|ú|ñ|ü|\s|\.|-)+$/
//fechas, formato dd/mm/aaaa o d/m/aa
var er_mes31dias = /^([1-3]0|[0-2][1-9]|31|[0-9])\/(1|01|3|03|5|05|7|07|8|08|10|1
2)\/(1999|20[0-1][0-9]|2020)$/
var er_mes30dias = /^([1-3]0|[0-2][1-9]|[0-9])\/(4|04|6|06|9|09|11)\/(1999|20[0-1]
[0-9]|2020)$/
var er_mes28dias = /^([1-2]0|[0-2][1-8]|[0-1]9|[0-9])\/(02|2)\/(1999|200[1-3]|200[5-
7]|2009|201[0-1]|201[3-5]|201[7-9])$/
var er_mes29dias = /^([1-2]0|[0-2][1-9]|[0-9])\/(02|2)\/(2000|2004|2008|2012|2016|
2020)$/
//comprueba campo de nombre
if(!er_nombres.test(formulario.nombres.value)) {
alert(‹Contenido del campo NOMBRE no válido.›)
return false
}
//comprueba campo de apellido
if(!er_apellidos.test(formulario.apellidos.value)) {
alert(‹Contenido del campo APELLIDOS no válido.›)
return false
}
58
Universidad Autónoma de Manizales
return false
}
//comprueba la fecha segun calendario de nacimiento(hasta el 2020, ojo)
if (!(er_mes31dias.test(formulario.fechanace.value) ||
er_mes30dias.test(formulario.fechanace.value) ||
er_mes29dias.test(formulario.fechanace.value) ||
er_mes28dias.test(formulario.fechanace.value))) {
alert(‘Contenido del campo FECHA DE NACIMIENTO no válido.’)
return false
}
}
</script>
<body>
<!-- Para validar el formulario -->
<form onsubmit=”return validacion(this)” name=”Formvalidacion” METHOD=”POST”
action=”a otro lado”>
<!----------FIN VALIDACION FORM------->
<p align=”center”><b><font face=”Bernard MT Condensed” size=”5”
color=”#FF0000”>SUSCRIPCIÓN</font></b></p>
<table cellSpacing=1 width=”96%” border=0>
<tr align=middle>
Programación WEB
<td width=”15%” bgColor=#e1e1e1 height=21>Nombres:</td>
<td width=”32%” bgColor=#e1e1e1 height=21 colspan=”2”><input type=”text”
name=”nombres” size=”23”></td>
<td width=”23%” bgColor=#e1e1e1 height=21 colspan=”2”>Apellidos:</td>
<td width=”23%” bgColor=#e1e1e1 height=21><input type=”text” name=”apellidos”
size=”24”></td>
</tr>
<tr align=middle>
<td width=”47%” bgColor=#e1e1e1 height=21 colspan=”3”>Pais:  
;
<input type=”text” name=”pais” size=”26”></td>
<td width=”46%” bgColor=#e1e1e1 height=21 colspan=”3”>Departamento &n
bsp;
<input type=”text” name=”departamento” size=”26”> </td>
</tr>
<tr align=middle>
<td width=”43%” bgColor=#e1e1e1 height=21 colspan=”2”>Dirección</td>
<td width=”86%” bgColor=#e1e1e1 height=21 colspan=”4”><input type=”text”
name=”direccion” size=”50”></td>
</tr>
<tr>
<td width=”17%” bgColor=#e1e1e1 height=21 colspan=”4”>
<p align=”left ”><font size=”1”><font face=”Arial”>Fecha
de Nacimieto</font></font>(<b><font face=”Arial” size=”1”>dd/mm/aaaa) </font></
b><input type=”text” name=”fechanace” size=”14”></p>
</td>
59
SESION NÚMERO CUATRO PÁGINAS CON ESTILO Y
VALIDACIÓN DE FORMULARIOS CON JAVASCRIPT
<td width=”112%” bgColor=#e1e1e1 height=21 colspan=”2”> &
nbsp;
Sexo F <input type=”radio” value=”F” checked
name=”sexo”> M<input type=”radio” value=”M” name=”sexo”></td>
</tr>
<tr align=middle>
<td width=”156%” bgColor=#e1e1e1 height=21 colspan=”6”>Color del producto
<select size=”1” name=”colores”>
<option selected>Azul</option>
<option>Verde</option>
<option>Amarillo</option>
<option>Rojo</option>
<option>Negro</option>
</select> Producto a pedir <select
size=”1” name=”productos”>
<option>Computador Dell</option>
<option selected>Computador HP</option>
<option>Impresora HP</option>
<option>Impresora EPSON</option>
<option>Software Contable</option>
<option>Software administrativo</option>
<option>Diseño especifico</option>
</select></td>
</tr>
</table>
<p align=”center”><input type=”submit” value=”Enviar” name=”accion”></p>
<p> </p>
<hr>
</table>
</body>
</html>
La salida de este formulario se puede ver en la figura 56. Es importante tener presente que este
formulario no permite ingresar datos no especificados dentro de los caracteres válidos y tampo-
co permite dejar espacios en blanco.
60
Universidad Autónoma de Manizales
Programación WEB
grafía: ¿Cómo se puede hacer programación mediante el len-
guaje de programación Javascript? Realice un ejemplo simple.
Organice su respuesta y escríbala en un archivo de texto; una vez tenga el archivo grabado en su
computador, ingrese al Aula Virtual y busque el link marcado como CONSULTA No 4. Ingrese y
envíelo como un adjunto.
61
SESION NÚMERO CUATRO PÁGINAS CON ESTILO Y
VALIDACIÓN DE FORMULARIOS CON JAVASCRIPT
4.3. CONCLUSIONES
• Una hoja de estilo permite aumentar el control del diseñador sobre cómo se verán sus
páginas Web, asociando un conjunto de propiedades de formato físico a los elementos
estándar del lenguaje HTML.
• Las etiquetas en las páginas CSS, son las que permiten indicar las distintas propiedades
que generalizan el estilo de una o varias páginas.
• Los estilos de las páginas CSS, pueden definirse de forma interna y de forma externa por
invocación de la página que contiene los distintos estilos.
62
SESION NÚMERO CINCO
INICIANDO EL LENGUAJE DE
PROGRAMACIÓN PHP
Universidad Autónoma de Manizales
• Identificar los distintos elementos que forman y con los que se puede trabajar el lengua-
je de programación php.
Programación WEB
se pueden destacar:
• Eficiente: PHP consume muy pocos recursos en el servidor, por lo que con un equipo
relativamente sencillo es posible desarrollar interesantes aplicaciones.
PHP se ejecuta en el servidor antes que la página sea enviada al usuario que realizó la petición.
Esto incluye los siguientes pasos:
63
SESION NÚMERO CINCO
INICIANDO EL LENGUAJE DE PROGRAMACIÓN PHP
• El usuario pulsa sobre un enlace solicitando un documento.
• Llega la solicitud al servidor y localiza el documento. Por la extensión del archivo se de-
termina que es un archivo que contiene código PHP y lanza el intérprete.
PHP es un lenguaje que se embebe dentro de código HTML, por tanto se hace necesario señali-
zar el punto o puntos específicos donde se utiliza el lenguaje php. Lo anterior se logra haciendo
uso de etiquetas, éstas son:
2. OTRA FORMA:
<?php y ?>
Para correr cualquier programa realizado en php, se hace necesario contar con un ser-
vidor que permita visualizar estas aplicaciones; El servidor que se usa es el Apa-
che. Hace algún tiempo instalar este servidor era un poco complicado, pero los tiem-
pos han cambiado; hoy día se cuenta con programas como el Appserv, el cual es una
herramienta OpenSource para Windows que facilita la instalación de Apache, MySQL y PHP.
Estas tres aplicaciones se configuran en forma automática y en forma muy rápida. Como valor
agregado incorpora phpMyAdmin para el manejo de MySQL. (Ver anexo de instalaciones: Ins-
talando Appserv)
5.2.3.1. Instrucciones
Instrucción Echo/Print: se utiliza para imprimir algo en pantalla (cadena, variable). Tenga pre-
sente que todos los archivos que se trabajará de ahora en adelante deben ser colocados dentro
del root del servidor (c:\appserv\www\) o en htdocs.
64
Universidad Autónoma de Manizales
5.2.4. Variables
En PHP, las variables se representan como un signo de dólar seguido por el nombre de la variable.
El nombre de la variable es sensible a minúsculas y mayúsculas. No se requiere declararlas.
Ejemplo 1:
<html>
<head>
<title>Ejemplo 1. Sesion 5</title>
</head>
<body bgcolor=”#FFFFFF”>
<?
$variable1=”Curso diseño Web: “;
$variable2=”HTML, PHP y MYSQL”;
echo $variable1.” “.$variable2;
?>
</body>
</html>
Programación WEB
Figura 57. Aspectos importantes de PHP
Dependiendo de la información que contenga, una variable puede ser considerada de uno u otro
tipo:
65
SESION NÚMERO CINCO
INICIANDO EL LENGUAJE DE PROGRAMACIÓN PHP
5.2.4.1. Objetos
Se trata de conjuntos de variables y funciones asociadas. Presentan una complejidad mayor que
las variables vistas hasta ahora, pero su utilidad es más que interesante.
Aplicación directa para nuestro sitio web. Enumeramos algunas de las variables y la información
que nos aportan: consideramos las siguientes variables:
$HTTP_USER_AGENT
Nos informa principalmente sobre el sistema operativo y tipo y versión de navegador utilizado
por el internauta. Su principal utilidad radica en que, a partir de esta información, podemos re-
direccionar nuestros usuarios hacia páginas optimizadas para su navegador o realizar cualquier
otro tipo de acción en el contexto de un navegador determinado.
$HTTP_ACCEPT_LANGUAGE
Nos devuelve la o las abreviaciones de la lengua considerada como principal por el navegador.
Esta lengua o lenguas principales pueden ser elegidas en el menú de opciones del navegador.
Esta variable resulta también extremadamente útil para enviar al internauta a las páginas escritas
en su lengua, si es que existen.
$HTTP_REFERER
Nos indica la URL desde la cual el internauta ha tenido acceso a la página. Muy interesante para
generar botones de “Atrás” dinámicos o para crear nuestros propios sistemas de estadísticas de
visitas.
$PHP_SELF
Nos devuelve una cadena con la URL del script que está siendo ejecutado. Muy interesante para
crear botones para recargar la página.
$HTTP_GET_VARS
66
Universidad Autónoma de Manizales
Se trata de un array que almacena los nombres y contenidos de las variables enviadas al script
por URL o por formularios GET.
$HTTP_POST_VARS
Se trata de un array que almacena los nombres y contenidos de las variables enviadas al script
por medio de un formulario POST
$HTTP_COOKIES_VARS
Se trata de un array que almacena los nombres y contenidos de las cookies. Veremos qué son
más adelante.
$PHP_AUTH_USER
Almacena la variable usuario cuando se efectúa la entrada a páginas de acceso restringido. Com-
binado con $PHP_AUTH_PW resulta ideal para controlar el acceso a las páginas internas del sitio.
$PHP_AUTH_PW
Programación WEB
$REMOTE_ADDR
$DOCUMENT_ROOT
$PHPSESSID
Guarda el identificador de sesión del usuario. Veremos más adelante en qué consisten las sesio-
nes.
5.2.5.1 Los operadores aritméticos: nos permiten realizar operaciones numéricas con nuestras
variables.
67
SESION NÚMERO CINCO
INICIANDO EL LENGUAJE DE PROGRAMACIÓN PHP
5.2.5.2. Operadores de incremento. Sirven para aumentar o disminuir de una unidad el valor de
una variable.
68
Universidad Autónoma de Manizales
5.2.5.3. Operadores combinados. Una forma habitual de modificar el valor de las variables es
mediante los operadores combinados:
Programación WEB
Figura 65. Operadores de comparación
5.2.5.5. Operadores lógicos. Se usan en combinación con los operadores de comparación cuan-
do la expresión de la condición lo requiere.
69
SESION NÚMERO CINCO
INICIANDO EL LENGUAJE DE PROGRAMACIÓN PHP
Ejemplo 2:
<html>
<head>
<title>Ejemplo 2</title>
</head>
<body bgcolor=”#FFFFFF”>
<?
$a=5; //esto es un entero
$b=3; //esto es un entero
$resultado=$a%$b;
$division=$a/$b;
echo $resultado;
echo “<BR>”;
echo $division;
echo “<BR>”;
echo number_format($division,2);
?>
</body>
</html>
70
Universidad Autónoma de Manizales
5.3. CONCLUSIONES
• PHP es un lenguaje de scripting que permite la navegación dinámica de contenidos en un
Programación WEB
servidor web, su nombre oficiales PHP: HyperText preprocessor.
• Entre sus principales características de php se pueden destacar: potente y robusto len-
guaje de programación embebido en documentos HTML, alto rendimiento y fácil uso,
dispone de librerías de conexión con la mayoría de los sistemas de gestión de bases de
datos para el almacenamiento de información permanente en el servidor, a partir de la
versión cinco (5) se puede trabajar con el paradigma de programación orientada a obje-
tos, lo que permite mayor versatilidad en el desarrollo y mayor aceptación en el mercado.
• Para correr cualquier programa realizado en php, se hace necesario contar con un servi-
dor que permita visualizar estas aplicaciones; El servidor que se usa es el apache.
71
72
SESION NÚMERO SEIS
CONTINUANDO CON EL
LENGUAJE PHP
Universidad Autónoma de Manizales
Las sentencias condicionales nos permiten ejecutar o no unas ciertas instrucciones dependiendo
del resultado de evaluar una condición. Las más frecuentes son la instrucción if y la instrucción
Programación WEB
switch.
6.2.1.1. IF...ELSEIF...ELSE
La sentencia IF...ELSEIF...ELSE permite ejecuta varias condiciones en cascada. Para este caso ve-
remos un ejemplo, en el que utilizaremos los operadores lógicos.
73
SESION NÚMERO SEIS CONTINUANDO CON EL LENGUAJE PHP
<?php
if (condición)
{
Sentencias a ejecutar con condición es cierta.
}
Elseif
{
Sentencias a ejecutar si condición es falsa.
}
else
{ ......}
?>
Ejemplo 1:
<html>
<head>
<title>EJEMPLO 1</title>
</head>
<body bgcolor=”#FFFFFF”>
<?
$a = 8;
$b = 3;
if ($a < $b)
{
echo “a es menor que b”;
}
else
{
echo “a no es menor que b”;
}
?>
</body>
</html>
Ejemplo 2:
<html>
<head>
<title>EJEMPLO 2</title>
</head>
<body bgcolor=”#FFFFFF”>
74
Universidad Autónoma de Manizales
<?
$cantidad=58;
if ($cantidad < “10”){
echo “Patricia”;
}
elseif (($cantidad >=”11”) && ($cantidad <”20”))
{
echo “EVA”;
}
elseif (($cantidad >=”20”) && ($cantidad <”30”))
{
echo “MARITZA”;
}
else {
echo “MAFE”;
};
?>
</body>
</html>
Programación WEB
6.2.1.2. SWITCH...CASE...DEFAULT
Una alternativa a IF...ELSEIF...ELSE, es la sentencia SWITCH, la cual evalúa y compara cada expre-
sión de la sentencia CASE con la expresión que evaluamos, si llegamos al final de la lista de CASE
y encuentra una condición verdadera, ejecuta el código de bloque que haya en DEFAULT. Si en-
contramos una condición verdadera debemos ejecutar un BREAK para que la sentencia SWITCH
no siga buscando en la lista de CASE.
<?php
switch(condicion) {
case 1
si se cumple condicion 1
break;
case 2
si se cumple condicion 2
break;
etc.................
default: o ;
SI NO SE CUMPLE....
}
?>
Ejemplo 3
75
SESION NÚMERO SEIS CONTINUANDO CON EL LENGUAJE PHP
<html>
<head>
<title>EJEMPLO 3</title>
</head>
<body bgcolor=”#FFFFFF”>
<?
$dia=”Miercoles”;
switch ($dia)
{
case “Lunes”:
echo “Hoy es Lunes”;
break;
case “Martes”:
echo “Hoy es Martes”;
break;
case “Miercoles”:
echo “Hoy es Miercoles”;
break;
case “Jueves”:
echo “Hoy es Jueves”;
break;
case “Viernes”:
echo “Hoy es Viernes”;
break;
case “Sábado”:
echo “Hoy es Sábado”;
break;
case “Domingo”:
echo “Hoy es Domingo”;
break;
default;
echo “Esa cadena no corresponde a ningún día de la semana”;
}
?>
</body>
</html>
76
Universidad Autónoma de Manizales
6.2.2. Bucles o LOOPS
Los bucles nos permiten iterar conjuntos de instrucciones, es decir repetir la ejecución de un
conjunto de instrucciones mientras se cumpla una condición. Se cuenta con los siguientes LOOPS:
Sentencia while ; Sentencia for ; Sentencia Do...While ; veamos cada uno de estos.
6.2.2.1. While
La sentencia while ejecuta un bloque de código mientras se cumpla una determinada condición.
Su sintaxis:
<?php
while (condición)
{
intrucciones a ejecutar.
}
?>
Ejemplo 4:
Programación WEB
<html>
<head>
<title>Ejemplo de PHP SWITCH</title>
</head>
<body>
<?php
$num = 1;
while ($num < 5) {
echo $num.”<br>”;//el . concatena cadenas
$num++;
}
?>
<!-- otro ejemplo
<?php
$i=0;
while ($i<10)
{
echo “El valor de i es “, $i,”<br>”;
$i++;
}
?>
-->
</body>
</html>
77
SESION NÚMERO SEIS CONTINUANDO CON EL LENGUAJE PHP
6.2.2.2. Sentencia: FOR
El bucle FOR no es estrictamente necesario, cualquier bucle FOR puede ser sustituido fácilmente
por otro WHILE. Sin embargo, el bucle FOR resulta muy útil cuando debemos ejecutar un bloque
de código a condición de que una variable se encuentre entre un valor mínimo y otro máximo.
Su sintaxis es:
<?php
for (inicial ; condición ; ejecutar en iteración)
{
instrucciones a ejecutar.
}
?>
Ejemplo 5:
<html>
<head>
<title>Ejemplo de PHP FOR</title>
</head>
<body>
<?php
for ($num = 1; $num <=5; $num++)
{
echo $num;
}
?>
</body>
</html>
Ejemplo 6:
<html>
<head>
<title>Ejemplo de PHP break EN FOR</title>
</head>
<body>
<?php
for ($num = 1; $num <=5; $num++)
{
echo $num;
if ($num == 3)
78
Universidad Autónoma de Manizales
{
echo “Aquí nos salimos \n”;
break;
}
}
?>
</body>
</html>
6.2.2.3. DO…WHILE
Esta sentencia es similar a WHILE, salvo que con esta sentencia primero ejecutamos el bloque
de código y después se evalúa la condición, por lo que el bloque de código se ejecuta siempre al
menos una vez.
<?php
do {
SENTENCIAS QUE HACE
}
while (CONDICION);
?>
Ejemplo 7:
Programación WEB
<html>
<head>
<title>Ejemplo de PHP BREAK DO WHILE</title>
</head>
<body>
<?php
$num = 1;
do {
echo $num;
if ($num == 3)
{
echo “Aquí nos salimos \n”;
break;
}
$num++;
} while ($num < 5);
?>
</body>
</html>
79
SESION NÚMERO SEIS CONTINUANDO CON EL LENGUAJE PHP
<?php
printf(cadena formato, variable1, variable2...);
?>
Ejemplo 8:
<html>
<head>
<title>Ejemplo de PHP FOR</title>
</head>
<body>
<?php
$var=”texto”;
$num=3;
printf(“Puede fácimente intercalar <b>%s</b> con números <b>%d</b>
<br>”,$var,$num);
printf(“<TABLE BORDER=1 CELLPADDING=10>”);
for ($i=0;$i<5;$i++)
{
printf(“<tr><td>%.2f</td></tr>”,$i);
}
printf(“</table>”);
?>
</body>
</html>
La cadena de formato puede incluir una seria de caracteres especiales que indican como forma-
tear las variables que se incluyen en la instrucción. En la figura 68 se dan algunos elementos con
su respectivo tipo de variable.
80
Universidad Autónoma de Manizales
6.2.4. Manejo de cadenas
• sprintf(cadena de formato, var1, var2...). Formatea una cadena de texto al igual que printf
pero el resultado es devuelto como una cadena.
• substr(cadena, inicio, longitud). Devuelve una subcadena de otra, empezando por inicio y
de longitud longitud.
• chop(cadena). Elimina los saltos de línea y los espacios finales de una cadena.
Ejemplo 9:
Programación WEB
<html>
<head>
<title>Ejemplo de CADENAS</title>
</head>
<body>
<?php
//LONGITUD DE LA CADENA
echo strlen(“maritzazambrano”),”<br>”;
echo “<BR>”;
//DIVIDE LA CADENA EN OTRAS SEPARADAS
$palabras=split(“ “,”LA VIDA ES AMOR”);
for($i=0;$palabras[$i];$i++)
echo $palabras[$i],”<br>”;
echo “<BR>”;
//RESULTADO DEVUELTO COMO CADENA
$resultado=sprintf(“8x5 = %d <br>”,8*5);
echo $resultado,”<br>”;
echo “<BR>”;
//REEMPLAZA CADENA POR OTRA..COMIENZO Y LONGITUD
echo substr(“Devuelve una subcadena de otra”,9,3),”<br><br>”;
echo “<BR>”;
//ELIMINA SALTOS DE LINEA
if (chop(“cadena \n\n “) == “cadena”)
echo “Iguales.<br>”;
echo “<BR>”;
81
SESION NÚMERO SEIS CONTINUANDO CON EL LENGUAJE PHP
//BUSCA PALABRA DENTRO DE LA FRASE
echo strpos(“ITC año de la refundacion”, “año”),”<br><br>”;
echo “<BR>”;
//REEMPLAZA PALABRA
echo str_replace(“verde”,”rojo”,”Un pez de color verde, como verde es
la hierba.”),”<br>”;
?>
</body>
</html>
82
Universidad Autónoma de Manizales
6.3. CONCLUSIONES
• Las sentencias condicionales nos permiten ejecutar o no unas ciertas instrucciones de-
pendiendo del resultado de evaluar una condición. Las más frecuentes son la instrucción
if y la instrucción switch.
• Los bucles nos permiten iterar conjuntos de instrucciones, es decir repetir la ejecución de
un conjunto de instrucciones mientras se cumpla una condición.
Programación WEB
• La cadena de formato puede incluir una seria de caracteres. Al igual que otros lenguajes
de programación estas permiten el manejo de palabras, frases u oraciones.
83
84
SESION NÚMERO SIETE
PROGRAMACIÓN ORIENTADA A
OBJETOS CON PHP
Universidad Autónoma de Manizales
• Exponer los conceptos básicos del paradigma de programación orientado a objetos para
php.
Programación WEB
son las mismas que se tomaron al momento de cursar las asignaturas: Fundamentos de progra-
mación orientada a objetos y Programación Orientada a Objetos; en aquella ocasión se usó el
lenguaje de programación Java; ahora se hace uso de estos conceptos para sean modelados,
mediante el lenguaje de programación Web, denominado php.
El lenguaje PHP tiene la característica de permitir programar con las siguientes metodologías:
Para mayor sencillez y teniendo presente lo indicado en el primer párrafo de este módulo, se
tomarán en cuenta las definiciones sencillas de David Tavárez, socializadas a la comunidad aca-
démica en: http://pixelar.me/programacion-orientada-a-objetos-en-php/. [Visitado el 12 de ju-
nio de 2011] En su sitio indica las siguientes, definiciones que resumen lo visto en asignaturas
anteriores:
85
SESION NÚMERO SIETE PROGRAMACIÓN ORIENTADA A OBJETOS CON PHP
7.2.2.1. Objeto. Se refiere comúnmente a atributos (elementos, variables) y comportamientos (mé-
todos, operaciones) encapsulados en una entidad. Son un método natural para implementar estruc-
turas de datos abstractos, trayendo “físicamente” componentes de datos con procedimientos para
luego manipularlos. Todo objeto tiene estado, exhibe un comportamiento bien definido y posee iden-
tidad única.
7.2.2.2. Clase. Es un tipo de dato definido por el programador que determina las estructuras de datos
que lo forman y las funciones asociadas con él, es decir es un modelo con el que se construyen los
objetos.
Se define como el constructor utilizado como “plano” para crear un Objeto. Describe el estado y el
comportamiento del objeto creado. Un objeto creado por una clase es una instancia de la clase y la
clase que creó esa instancia es considerada como el tipo del objeto. Un ejemplo de un objeto creado
por una clase “fruta” sería “piña”, otro “pera” y así sucesivamente. Es la abstracción de un concepto.
7.2.2.3. Instancia. Se crea cuando una construye un objeto. Las instancias de una clase comparten los
mismo atributos, pero pueden diferir en qué los atributos contengan. Por ejemplo, una clase “Perso-
na” describe los atributos comunes de una persona; cada persona es generalmente parecida, pero
varía en atributos como “altura” y “peso”. La clase listaría tipos de atributos, así como también las
acciones que una persona podría realizar: “saltar”, “caminar”, “andar”, “comer”. La instancia es el ob-
jeto creado en tiempo de corrida de una aplicación. Otro ejemplo sería: “Lassie” es una instancia de la
clase “Perro” y así también “Pluto” sería otra instancia de la misma clase.
7.2.3.1. Herencia. Es la capacidad formar nuevas Clases usando clases previamente definidas. Las
nuevas clases, conocida como Clases Derivadas, toman (o heredan) los atributos y los métodos
preexistentes de la clase “madre”. Es un intento para ayudar a reusar código con poca o casi ninguna
modificación.
7.2.3.2. Métodos. Se refiere como las funciones de un objeto, haciendo un paralelo con programación
estructurada.
7.2.3.3. Abstracción. Es un concepto o idea no asociada a una instancia. El concepto se originó por la
analogía con la abstracción en matemáticas. Teóricamente envuelve la facilidad de definir objetos que
representan “actores” abstractos que pueden realizar un trabajo o acción. Un ejemplo sería una clase
“casa” que defina la estructura de una casa.
7.2.3.5. Polimorfismo. Es la habilidad de un tipo “A” que aparece y es usado como otro tipo “B”.
Significa que un tipo “A” de alguna manera deriva de un tipo “B” o que un tipo “A” implementa una
interface que representa un tipo “B”. Por ejemplo, si a un “Perro” se le ordenara que hablara, éste
ladraría, mas si a un “Cerdo” se le ordenara que hablara respondería con un “oink oink“. Este último
símil es muy simpático.
86
Universidad Autónoma de Manizales
EJEMPLO 1:
En este primer ejemplo se describe gran parte de estos conceptos dados anteriormente. La figura
69 lo hace notar en forma precisa. Ejemplo tomado junto a su explicación del sitio PHP YA. http://
www.phpya.com.ar/poo/temarios/descripcion.php?cod=36&punto=2&inicio=0. [Visitado el 13
de junio de 2011]
Programación WEB
Figura 69. Php con POO
87
SESION NÚMERO SIETE PROGRAMACIÓN ORIENTADA A OBJETOS CON PHP
EXPLICACIÓN DEL EJEMPLO ANTERIOR:
Siempre conviene buscar un nombre de clase lo más próximo a lo que representa. La palabra cla-
ve para declarar la clase es class, seguidamente el nombre de la clase y luego encerramos entre
llaves de apertura y cerrado todos sus atributos (variable) y métodos (funciones).
class Persona {
private $nombre;
public function inicializar($nom)
{
$this->nombre=$nom;
}
public function imprimir()
{
echo $this->nombre;
echo ‘<br>’;
}
}
Los atributos normalmente son privados (private), ya veremos que esto significa que no podemos
acceder al mismo desde fuera de la clase; Lo anterior asegura el uso del concepto de encapsula-
miento. Luego para definir los métodos se utiliza la misma sintaxis que las funciones del lenguaje
PHP.
Decíamos que una clase es un molde que nos permite definir objetos. Ahora veamos cual es la
sintaxis para la definición de objetos de la clase Persona:
$per1=new Persona();
$per1->inicializar(‘Juan’);
$per1->imprimir();
Definimos un objeto llamado $per1 y lo creamos asignándole lo que devuelve el operador new.
Siempre que queremos crear un objeto de una clase utilizamos la sintaxis new [Nombre de la
Clase]. No olvide que esto, también se denomina instanciación.
Luego para llamar a los métodos debemos anteceder el nombre del objeto el operador -> y, por
último, el nombre del método. Para poder llamar al método, éste debe ser definido público (con
la palabra clave public). En el caso que tenga parámetros se los enviamos:
$per1->inicializar(‹Juan›);
También podemos ver que podemos definir tantos objetos de la clase Persona como sean nece-
sarios para nuestro algoritmo:
$per2=new Persona();
$per2->inicializar(‘Ana’);
$per2->imprimir();
88
Universidad Autónoma de Manizales
Esto nos da una idea que si en una página WEB tenemos 2 menús, seguramente definiremos una
clase Menú y luego crearemos dos objetos de dicha clase.
Esto es una de las ventajas fundamentales de la Programación Orientada a Objetos (POO), es
decir reutilización de código (gracias a que está encapsulada en clases) es muy sencilla.
Lo último a tener en cuenta en cuanto a la sintaxis de este primer problema es que cuando acce-
demos a los atributos dentro de los métodos debemos utilizar los operadores $this-> (this y ->):
El atributo $nombre solo puede ser accedido por los métodos de la clase Persona.
Cuando creamos un objeto de una clase determinada, los atributos declarados por la clase son
localizadas en memoria y pueden ser modificados mediante los métodos. En la figura 70, obser-
vamos detenidamente el manejo de los atributos; de igual forma se puede visualizar el uso de los
métodos. Los métodos son como las funciones en los lenguajes estructurados, pero están defi-
nidos dentro de una clase y operan sobre los atributos de dicha clase. Los métodos también son
Programación WEB
llamados las responsabilidades de la clase. Para encontrar las responsabilidades de una clase hay
que preguntarse qué puede hacer la clase. El objetivo de un método es ejecutar las actividades
que tiene encomendada la clase a la cual pertenece. Ejemplo tomado junto a su explicación del
sitio PHP YA. [Visitado el 13 de junio de 2011] http://www.phpya.com.ar/poo/temarios/descrip-
cion.php?cod=36&punto=2&inicio=0.
89
SESION NÚMERO SIETE PROGRAMACIÓN ORIENTADA A OBJETOS CON PHP
Como podemos ver normalmente los atributos de la clase se definen inmediatamente después
que declaramos la clase:
class Menu {
private $enlaces=array();
private $titulos=array();
En este ejemplo específico, muestra también el uso de vectores. El primer método que añade a
los vectores los datos que llegan como parámetro:
Conviene darle distinto nombre a los parámetros y los atributos (por lo menos inicialmente para
no confundirlos). El segundo método, muestra los datos que van alimentando cada uno de los
arreglos definidos anteriormente. En este ejemplo disponemos un for y hacemos que se repita
tantas veces como elementos tenga el vector $enlaces (es lo mismo preguntar a uno u otro
cuantos elementos tienen ya que siempre tendrán la misma cantidad). Para obtener la cantidad
de elementos del vector utilizamos la función count. Dentro del for imprimimos en la página el
hipervínculo:
Hay que acostumbrarse que cuando accedemos a los atributos de la clase se le antecede el ope-
rador $this-> y seguidamente el nombre del atributo propiamente dicho. Si no hacemos esto
estaremos creando una variable local y el algoritmo fallará. Por último, para hacer uso de esta
clase Menu debemos crear un objeto de dicha clase (lo que en programación estructurada es
definir una variable):
$menu1=new Menu();
$menu1->cargarOpcion(‘http://www.google.com’,’Google’);
$menu1->cargarOpcion(‘http://www.yahoo.com’,’Yhahoo’);
$menu1->cargarOpcion(‘http://www.msn.com’,’MSN’);
$menu1->mostrar();
Creamos un objeto mediante el operador new y seguido del nombre de la clase. Luego llamamos
al método cargarOpcion tantas veces como opciones necesitemos para nuestro menú (recordar
que SOLO podemos llamar a los métodos de la clase si definimos un objeto de la misma). Final-
mente, llamamos al método mostrar que imprime en la página nuestro menú.
90
Universidad Autónoma de Manizales
7.2.5. Características de los constructores
{
[algoritmo]
}
Debemos definir un método llamado __construct (es decir utilizamos dos caracteres de subraya-
do y la palabra construct). El constructor debe ser un método público (public function). Además
hemos dicho que el constructor puede tener parámetros. Ver figura 71. Ejemplo tomado junto a
su explicación del sitio PHP YA. [Visitado el 13 de junio de 2011]
Programación WEB
http://www.phpya.com.ar/poo/temarios/descripcion.php?cod=36&punto=2&inicio=0.
91
SESION NÚMERO SIETE PROGRAMACIÓN ORIENTADA A OBJETOS CON PHP
Hay que tener mucho cuidado cuando definimos el constructor, ya que el más mínimo error (nos
olvidamos un carácter de subrayado, cambiamos una letra de la palabra construct) nuestro
algoritmo no funcionará correctamente, ya que nunca se ejecutará este método (ya que no es el
constructor).
7.2.6. Herencia
La herencia significa que se pueden crear nuevas clases partiendo de clases existentes, que ten-
drá todos los atributos y los métodos de su ‘superclase’ o ‘clase padre’ y además se le podrán
añadir otros atributos y métodos propios. En PHP, a diferencia de otros lenguajes orientados a
objetos (C++), una clase sólo puede derivar de una única clase, es decir, PHP no permite herencia
múltiple. Utilizamos la palabra clave extends y seguidamente el nombre de la clase padre (con
esto estamos indicando que todos los métodos y atributos de la clase.
Clase de la que desciende o deriva una clase. Las clases hijas (descendientes) heredan (incorpo-
ran) automáticamente los atributos y métodos de la clase padre.
7.2.6.2 Subclase
http://www.phpya.com.ar/poo/temarios/descripcion.php?cod=36&punto=2&inicio=0.
92
Universidad Autónoma de Manizales
7.2.7. Polimorfismo
Programación WEB
Una subclase en PHP puede redefinir un método, es decir que podemos crear un método con el
mismo nombre que el método de la clase padre. Ahora cuando creamos un objeto de la subclase,
el método que se llamará es el de dicha subclase.
Lo más conveniente es sobrescribir métodos para completar el algoritmo del método de la clase
padre. No es bueno sobrescribir un método y cambiar completamente su comportamiento.
Veamos nuestro problema de las tres clases: Operación, Suma y Resta. Sobrescribiremos en las
subclases el método imprimirResultado (el objetivo es que muestre un título indicando si se trata
del resultado de la suma de dos valores o el resultado de la diferencia de dos valores). Esto es
lo que en teoría llamamos un tipo de polimorfismo. No olvide los conceptos vistos en POO. Ver
figura 73a y 73b. Ejemplo tomado junto a su explicación del sitio PHP YA. [Visitado el 13 de junio
de 2011]
http://www.phpya.com.ar/poo/temarios/descripcion.php?cod=36&punto=2&inicio=0.
93
SESION NÚMERO SIETE PROGRAMACIÓN ORIENTADA A OBJETOS CON PHP
94
Universidad Autónoma de Manizales
De programación orientada a objetos con php, se puede escribir cantidades: por ejemplo de co-
laboración entre objetos, modificadores de acceso, clases abstractas y concretas, métodos des-
tructores y estáticos, etc. El objetivo de esta sesión es fundamentar los conceptos básicos de POO
usando el lenguaje php. Depende del estudiante el seguir ahondando en esta temática.
Programación WEB
Ingrese a AULA VIRTUAL y desarrolle la actividad marcada
como: ACTIVIDAD No 7. Esta le ayudará a reforzar lo planteado
en este módulo.
95
SESION NÚMERO SIETE PROGRAMACIÓN ORIENTADA A OBJETOS CON PHP
7.3. CONCLUSIONES
• A partir de la versión cinco (5), mediante el lenguaje de programación php, se puede ha-
cer uso del paradigma de programación orientada a objetos; en esencia son las mismas
definiciones de los cursos de POO.
• Cuando creamos un objeto de una clase determinada, los atributos declarados por la cla-
se son localizadas en memoria y pueden ser modificados mediante los métodos.
96
SESION NÚMERO OCHO
RELACIÓN ENTRE EL LENGUAJE
Universidad AutónomaPHP Y LAS BASES DE DATOS
de Manizales
Para la realización de este curso sobre PHP con acceso a base de datos hemos elegido la base de
datos MySQL por ser gratuita, y por ser también la más empleada en entornos UNIX, para lo cua,
el servidor donde tenemos alojadas las páginas nos tiene que proporcionar herramientas para
crearla o acceso al Telnet para que la creemos nosotros mismos.
Programación WEB
Para crear la base de datos, se usará el administrador de Bases de datos, que se creó
al momento de instalar el Appserv. (Ver anexo de instalación). Para su ingreso siga los
siguientes pasos:
2. Ahora debe buscar el administrador de Bases de datos y dar click sobre el:
97
SESION NÚMERO OCHO RELACIÓN ENTRE EL LENGUAJE PHP Y LAS BASES DE DATOS
3. Se pedirá el nombre de usuario y contraseña: casi siempre y como se indicó en el anexo
de instalación el usuario es: root y la contraseña es: admin; depende de los datos que se
asignaron.
4. Se creará una nueva base de datos. El nombre depende de Usted. En este ejemplo la
llamaremos UAM.
98
Universidad Autónoma de Manizales
5. Se confirma que se creó.
6. Una vez conseguido esto debemos crear las tablas en la base de datos, la descripción de
las tablas contienen la estructura de la información que almacenaremos en ellas. Para lo
cual, usaremos en lenguaje de consultas SQL común para todas las bases de datos rela-
cionales. En este ejemplo creamos una tabla llamada prueba con 3 campos: un campo
identificador, que nos servirá para identificar unívocamente una fila con el valor de dicho
campo, otro campo con el nombre de una persona y por último un campo con el apellido
Programación WEB
de la persona. En fundamentos de Bases de datos o en la asignatura Base de datos, se
aprendió a crear la tabla usando la siguiente sintaxis o query SQL:
CREATE TABLE prueba (
Id int(11) DEFAULT ‘0’ NOT NULL auto_increment,
Nombre varchar(100),
Apellidos varchar(100),
PRIMARY KEY (Id),
UNIQUE Id (Id) );
En nuestro caso y por facilidad usaremos el administrador como se muestra en las figuras
siguientes: (Ver figura 79).
99
SESION NÚMERO OCHO RELACIÓN ENTRE EL LENGUAJE PHP Y LAS BASES DE DATOS
Al darle continuar, diligenciamos los datos conforme lo indicamos en el párrafo anterior.
Una vez que tenemos creada la base de datos en nuestro servidor, el siguiente paso es conectar-
nos a la misma desde una página PHP. Para ello, PHP nos proporciona una serie de instrucciones
para acceder a bases de datos MySQL. La figura 82, muestra el código que logra la conexión:
100
Universidad Autónoma de Manizales
8.2.3 CONSULTA A LA BASE DE DATOS
Una vez que nos hemos conectado con el servidor de bases de datos, ya podemos realizar con-
sultas a las tablas de la base de datos.
Para facilitar la programación hemos separado la función de conexión en una librería aparte, de
tal manera que la incluiremos en todas las páginas que accedan a la base de datos. En nuestro
caso el programa será: S8_ejemplo1.php; dado que fue el que se codificó para la conexión a la
base de datos. En la figura 83, se puede visualizar el código de consulta.
Programación WEB
Figura 83. Código de consulta
Al ejecutar el programa… No se puede olvidar que los códigos php se colocan en la carpeta www
del Appserv; dado que es la carpeta pública del servidor local. Se obtiene algo similar a lo mos-
trado en la figura 84.
101
SESION NÚMERO OCHO RELACIÓN ENTRE EL LENGUAJE PHP Y LAS BASES DE DATOS
En este ejemplo hemos utilizado tres (3) instrucciones nuevas: mysql_query, mysql_fetch_array y
mysql_free_result. Con la instrucción mysql_query hemos hecho una consulta a la base de datos
en el lenguaje de consultas SQL, con la instrucción mysql_fetch_array extraemos los datos de la
consulta a un array y con mysql_free_result liberamos la memoria usada en la consulta.
Hasta ahora nos hemos conectado a una base de datos y hemos hecho consultas a la misma,
ahora presentaremos como introducir nuevo registros en la base de datos.
102
Universidad Autónoma de Manizales
La primera página PHP S8_ejemplo3.php es un formulario que nos permite introducir nombre y
apellido para añadirlo a la base de datos, seguido de una consulta que nos muestra el contenido
de la tabla prueba. El formulario llama a la página S8_ejemplo4.php, que añadirá los datos a la
tabla.
La segunda página S8_ejemplo4.php se conecta a la base de datos y añade un nuevo registro con
la instrucción insert del lenguaje de base de datos SQL.
El borrado de registros es uno de los procesos más sencillos. Para indicar que elemento vamos
a borrar hemos usado un enlace a la página S8_ejemplo6.php pasándole el Id de cada registro;
es decir, la llave primaria; de esta manera, la página S8_ejemplo6.php, que borra los registros,
Programación WEB
sabe que elemento de la tabla ha de borrar. Las figuras 87 y 88 muestran el código que permite
verificar este proceso.
103
SESION NÚMERO OCHO RELACIÓN ENTRE EL LENGUAJE PHP Y LAS BASES DE DATOS
VISUALIZACION Y ADMINISTRACION
104
Universidad Autónoma de Manizales
Programación WEB
8.3 CONCLUSIONES
• Mediante el administrador de la base de datos de Appserv se puede gestionar de una
manera fácil y simple el manejo de las distintas bases de datos usando el motor de base
de datos Mysql.
• Como en toda base de datos, se puede insertar, borrar y buscar registro usando para esto
programación y/o el administrador de la base de datos MyAdmin de Mysql.
105
106
SESION NÚMERO NUEVE
MANEJO DE SESIONES CON PHP
Universidad Autónoma de Manizales
Una sesión al tiempo en el que un usuario determinado se encuentra navegando en un sitio web;
si un usuario no navega por el sitio web durante un determinado tiempo, se dice que ha termi-
nado su sesión en el sitio y a partir de allí cuando vuelve a ingresar lo hace en una nueva sesión.
El concepto de sesión es útil porque es posible asociar a cada sesión un identificador único de
forma tal de registrar la actividad del usuario en el sitio web y mantener persistencia utilizando
únicamente este identificador.
Las sesiones nos van a permitir mantener información relacionada con la sesión en todas las
Programación WEB
páginas que integran nuestro sitio. Algunas de las funciones que vamos a utilizar para el manejo
de sesiones:
• session_start : crea una nueva sesión si es que no existe o retoma la sesión existente.
Tenemos que colocar la función session_start en todas nuestras páginas, pero debes colocarla
antes de enviar alguna etiqueta HTML, dato o un espacio de lo contrario te devolverá un error.
Ver figura 89.
Una vez creada la sesión podemos utilizar la variable súper global $_SESSION para almacenar las
variables que necesitamos dentro de la sesión. La figura 90 muestra la sintaxis.
107
SESION NÚMERO NUEVE MANEJO DE SESIONES CON PHP
Estas variables van a estar disponibles en todas las páginas en que tengamos la sesión. Aho-
ra bien para eliminar todas las variables de sesión registradas utilizaremos la función “ses-
sion_unset”, la sintaxis es la siguiente: session_unset();Ahora bien, si deseamos solo eliminar
una variable lo haremos utilizando la función unset. La sintaxis sería: la siguiente: unset($_
SESSION[“nombrevariable”]); para eliminar la sesión utilizaremos la función session_destroy();
Ejemplos tomados del sitio web especializado en desarrollo web, denominado: Code Drinks: http://www.codedrinks.com/index.
php/2010/05/27/manejo-de-sesiones-en-php/ [Visitado el 20 de junio de 2011]
108
Universidad Autónoma de Manizales
Insertamos registros:
De otra forma se puede insertar también registros en la tabla. Se puede hacer directamente en
insertar.
Programación WEB
Figura 95. Insertar directamente
109
SESION NÚMERO NUEVE MANEJO DE SESIONES CON PHP
Ahora escribimos los programas en php, que mostrarán el uso de sesiones. Para esto se hará un
programa que permite el ingreso de un usuario a un sitio web. Inicialmente se pide el nombre
del usuario y la contraseña de ingreso. Ver figuras 99 a 102
Las siguientes tres gráficas muestran el código que se escribe para permitir el ingreso de un usua-
rio a un determinado sitio.
110
Universidad Autónoma de Manizales
Programación WEB
Figura 100a. Código inicial de logueo de usuarios. Login.php
111
SESION NÚMERO NUEVE MANEJO DE SESIONES CON PHP
112
Universidad Autónoma de Manizales
La siguiente figura muestra el cierre de sesión.
Programación WEB
http://www.codedrinks.com/index.php/2010/06/24/formulario-de-login-con-php-y-mysql/
113
SESION NÚMERO NUEVE MANEJO DE SESIONES CON PHP
9.3. CONCLUSIONES
• Una sesión al tiempo en el que un usuario determinado se encuentra navegando en un
sitio web; si un usuario no navega por el sitio web durante un determinado tiempo, se
dice que ha terminado su sesión en el sitio y a partir de allí cuando vuelve a ingresar lo
hace en una nueva sesión.
• Una de las aplicaciones típicas del manejo de sesiones es el logueo que generalmente se
construye para el ingreso de usuarios a un desarrollo web determinado.
114
SESION NÚMERO DIEZ
PUBLICACIÓN EN LA WEB
Universidad Autónoma de Manizales
• Ejecutar la subida de archivos que componen un sitio web, mediante el panel de control.
Cuando se hace algún desarrollo que será publicado en la web, tal como un sitio o portal web, se
Programación WEB
hace necesario tener como base una página que será la encargada de cargar las demás páginas
involucradas en el desarrollo realizado. Esta página que será la principal es llamada index; se
puede encontrar con diversas extensiones: index.html, index.htm, index.php, index.jsp, index.
asp. Se hace importante tener presenta esta norma estándar, dado que los servidores web, ya sea
aquel que se encuentre instalado para trabajo local o para trabajo en remoto, siempre buscarán
el index de la aplicación para iniciar la aplicación.
Para efectos didácticos de este curso, crearemos una página que permita mostrar lo que debe
hacerse al momento de publicar en la web algún desarrollo determinado. La figura 104, muestra
una página que llamaremos index.html; es importante tener presente que si se tienen imágenes
o cualquier otro archivo adiciona, estos se deben colocar en el mismo punto donde se encontrará
el index.
115
SESION NÚMERO DIEZ PUBLICACIÓN EN LA WEB
Es importante tener en cuenta que para disponer de una página web visible se hace necesario
un lugar donde alojarla. Ese “lugar” (espacio web) lo puede ofrecer un servidor de hosting (que
significa alojamiento de páginas web) bien de forma gratuita o bien pagando cierta cantidad.
Más adelante se tocará esta temática de planes gratuitos y de pago donde alojar algún sitio web,
e incluso instrucciones detalladas de cómo registrarse en un servidor gratuito.
Por otro lado, una vez tenemos el espacio para nuestra página web, los visitantes necesitan
escribir algo en sus navegadores para dirigirse a nuestra nueva web. Esto es la URL o dirección
de la web que puede ser o bien un dominio escogido (y pagado) por tí, como por ejemplo www.
fermath.org o www.google.es o www.mipagina.es o bien un subdominio (los gratuitos suelen
ser subdominios) que tienen una forma algo más larga, por ejemplo el sitio donde reside el aula
virtual de la UAM en EDUPOL: http://aulavirtualuam.edupol.com.co. Veremos entonces cómo
registrar un dominio y también cómo relacionar un dominio o subdominio con un hosting, etc.
116
Universidad Autónoma de Manizales
10.2.3. Dominio
Un dominio o nombre de dominio es el nombre que identifica un sitio web. Cada dominio tiene
que ser único en la internet. Por ejemplo, “www.masadelante.com” es el nombre de dominio
de la página web de Masadelante. Un solo servidor web puede servir múltiples páginas web de
múltiples dominios, pero un dominio sólo puede apuntar a un servidor.
Los tipos de organización más comunes son .COM, .NET, .MIL, y .ORG, que se refieren a comer-
cial, network, militar, y organización (originalmente sin ánimo de lucro, aunque ahora cualquier
persona puede registrar un dominio .org).
Puesto que la internet se basa en direcciones IP, y no en nombres de dominio, cada servidor web
requiere de un servidor de nombres de dominio (DNS) para traducir los nombres de los dominios
a direcciones IP. Cada dominio tiene un servidor de nombre de dominio primario y otro secun-
dario.
10.2.4. Subdominio
Programación WEB
www.elsitio.com, mientras que los subdominios inician con: http://subdominio.elsitio.com; ob-
sérvese que el subdominio está ligado de un dominio por medio de un punto y este no inicia
con www como si lo hace el dominio. Haciendo un poco de claridad al respecto, se debe tener
presente que el subdominio normalmente se escribe delante del dominio al que está asociado el
subdominio, separado por un “.” por ejemplo, trabajos.profesionalhosting.com es el subdominio
trabajo de profesionalhosting.com, su principal ventaja es que un subdominio tiene todas las
propiedades de un dominio con la diferencia de que este es gratis y con la única desventaja de
que aumenta un poco la dirección.
117
SESION NÚMERO DIEZ PUBLICACIÓN EN LA WEB
10.2.6. Contacto con la empresa prestadora del servicio
Lo primero que se hace es buscar en la red una empresa que presente el servicio de residencia
de sitios web. En este caso se debe digitar: http://byethost.com El sitio seleccionado ha sido
evaluado por varios años, encontrando su servicio como uno de los más serios y completos del
mercado; tanto el servicio gratuito como el comercial son bastante robustos y se garantiza la
estabilidad del mismo. Por los motivo se ha seleccionado esta empresa. La figura 105 muestra la
página de contacto.
De click donde dice “Free Hosting” y una vez allí, de nuevamente click en: “Click here to sign up
for free Hosting” Es importante que se completen los campos del formulario que se presenta.
La figura 106, muestra el formulario de solicitud paro obtener servicio de Hosting gratuito. Es
fundamental recordar que el servicio le otorgará una dirección URL para su sitio web, a manera
de subdominio. Tenga presente el USERNAME, este será el que inicialmente identificará su sitio
web.
Complete totalmente los campos que son solicitados; el sistema le enviará un correo donde
confirmará que un ser humano y no una máquina está solicitado el servicio. Las figura 107 y 108
muestran los dos correos que deberá recibir. No olvide seguir los pasos que le indique el sistema.
118
Universidad Autónoma de Manizales
Programación WEB
Figura 108. Correo final de solicitud
Este último correo es importantísimo en la medida que en le informarán los datos importantes
para gestionar todo en la red, referente al sitio que desea publicar. La figura 109, muestra la lista
de datos que le enviará el sistema. Se debe guardar estos datos con gran sigilo dado que son los
que permitirán su ingreso al su sitio.
119
SESION NÚMERO DIEZ PUBLICACIÓN EN LA WEB
10.2.6.1. Entendiendo cada uno de estos datos
11. CPanel URL: Dirección para accesar el panel de control del sitio.
Para gestionar el panel de control, donde se tendrán todos los archivos del sitio al igual que la
base de datos, se hace necesario digitar la dirección que dice en CPanel URL, allí verá una ventana
parecida a la mostrada en la figura 110.
120
Universidad Autónoma de Manizales
Aquí se digitan los datos que pide el sistema para ingresar al panel de control. Una vez dentro
verá una página similar a la que se muestra en la figura 111.
Programación WEB
de su sitio web.
1. Usando un servicio ftp: este se usará si el sitio web tiene bastantes carpetas de gran
tamaño.
Para efectos de este módulo, se hará el ejemplo usando la forma 2. Se hace el ejemplo subiendo
el index.html creado desde el inicio de esta sesión. Para lograrlo se siguen los siguientes pasos:
1. Ubique administrador de archivos en la sección Administrador del sitio. Ver figura 112.
121
SESION NÚMERO DIEZ PUBLICACIÓN EN LA WEB
2. Al ingresar a esta parte se encontrará una pantalla muy parecida a la que se muestra en
la figura 113.
3. Los documentos o archivos que se desean subir se deben colocar en la carpeta pública:
www; aquí es llamada htdocs. Al desplegar esta parte, se encuentra la existencia de un
index.html, el cual ha sido colocado por default en el sistema, este archivo se debe bo-
rrar (se señala y se borra seleccionando delete y confirmado en borrado). Se subirán los
archivos creados para este ejemplo, los cuales son: el nuevo index.html y una carpeta
adicional que contiene las gráficas que necesita dicho archivo. Por facilidad se crea un
.zip; este se sube y se descomprime en la misma carpeta htdocs. En las figuras 114 y 115
se observa esto.
122
Universidad Autónoma de Manizales
Es importante que se tenga presente que los archivos se descomprimen de inmediato, al
subir por este medio al Hosting.
4. Se organizan los archivos conforme se diseño el sitio. Todo lo anterior se debe hacer en
la carpeta htdocs. No olvide que el archivo visible por importancia debe ser: index.html
(puede ser también un index.php, index.jsp, etc). Ver la figura 116.
Programación WEB
Figura 116. Moviendo archivos
5. Los archivos deben quedar en el sitio indicado, como se muestra en la figura 117.
6. Una vez realizado esto, ya puede digitar la dirección URL de su sitio web; deberá funcio-
nar óptimamente. En este caso se debe mostrar una página similar a la siguiente, si tomo
como base este ejemplo. Ver figura 118.
123
SESION NÚMERO DIEZ PUBLICACIÓN EN LA WEB
124
Universidad Autónoma de Manizales
10.3. CONCLUSIONES
Programación WEB
• Cuando se hace algún desarrollo que será publicado en la web, tal como un sitio o portal
web, se hace necesario tener como base una página que será la encargada de cargar las
demás páginas involucradas en el desarrollo realizado
• Es importante tener en cuenta que para disponer de una página web visible se hace ne-
cesario un lugar donde alojarla. Ese “lugar” (espacio web) lo puede ofrecer un servidor
de Hosting (que significa alojamiento de páginas web) bien de forma gratuita o bien
pagando cierta cantidad.
• Un dominio o nombre de dominio es el nombre que identifica un sitio web. Cada dominio
tiene que ser único en Internet. Un subdominio es un dominio dentro de un dominio.
• Cada panel de control de un Hosting determinado, tiene sus opciones para facilitar la
gestión de archivos y bases de datos entre otras opciones.
• El archivo que gestiona los otros archivos siempre se denomina index, este puede tener
extensión: html, php, asp, jsp, etc.
125
126
11. ANEXO DE INSTALACIONES
Universidad Autónoma de Manizales
La figura 119, muestra el contenido que se encuentra en CD, que se envía como complemento al
material escrito, enviado a cada uno de los centros asociados.
Programación WEB
Figura 119. Contenido del CD, adicional a material escrito
Al interior del material escrito se hace uso de estos programas para comprender los distintos
conceptos. El manejo de cada uno de estos paquetes de desarrollo se socializará a medida que
se realicen las diversas tutorías sobre cada una de las temáticas.
Notepad++ es un programa muy versátil, que permite trabajar fácilmente en la escritura de códi-
go para programación. Notepad++ es un editor de texto y de código fuente libre con soporte para
varios lenguajes de programación. Una de sus limitaciones es que solo funciona en Microsoft
Windows. Este excelente programa se parece al Bloc de notas en cuanto al hecho de que puede
editar texto sin formato y de forma simple. No obstante, incluye opciones más avanzadas que
pueden ser útiles para usuarios avanzados como desarrolladores y programadores, una de estas
es la de poder ir visualizando el resultado del código que se está escribiendo. Este software es
libre y se distribuye bajo los términos de la Licencia Pública General de GNU.
Para su instalación busque en el CD que se envió junto a este material escrito la carpeta marcada
como: NOTPAD++ y de doble click en el archivo instalador, como se muestra en la figura 120.
127
11. ANEXO DE INSTALACIONESB
Permita la instalación de este programa si su sistema operativo requiere permisos de instalación.
Una vez lo permita deberá seleccionar el lenguaje a configurar en su instalación; como lo mues-
tra la figura 121.
Ahora indique al instalador que siga con el recorrido de la misma normalmente. Seleccione si-
guiente como lo muestra la figura 122.
128
Universidad Autónoma de Manizales
Ahora indique la ruta donde lo desea instalar; La ruta de instalación la selecciona cada uno de los
usuarios, según su conveniencia. Ver figura 124.
Seleccione los componentes. Esta parte se deja tal como aparece en la figura 125.
Programación WEB
Figura 125. Componentes de instalación
Seleccione como se muestra en la figura 126, que se cree un ícono rápido para abrirlo directa-
mente en el escritorio de su computador.
129
11. ANEXO DE INSTALACIONESB
Al seleccionar Instalar, el programa inicia su instalación en el disco duro, en la ruta que se le indicó
en un paso anterior. Ver figura 127.
Al finalizar muestra una imagen parecida a la descrita en la figura 128. Ya está listo para trabajar
con este programa.
Al presionar Terminar se abre el programa como se muestra en la figura 129. El manejo de este
programa se explica en las sesiones del módulo escrito.
130
Universidad Autónoma de Manizales
11.2.3. Instalando el Happdit
HAPedit es el acrónimo para Html Asp Php editor; muy útil para todos los desarrolladores de
webs dinámicas que necesiten un editor win32 en modo texto. Sus principales características
son: coloreado de sintaxis para html/php, html/asp, html, JavaScript, css y sql; mostrar los re-
sultados en el navegador; visor de proyectos; “compilación” de código php; edición de etiquetas
HTML; completación de código; previsualización de imágenes, consola SQL, FTP Manager. Este
software es freeware. Dentro de las recomendaciones que dan sus autores, una de ellas es: Este
programa es freeware (libre), NO PUEDE SER VENDIDO O INTERCAMBIADO. Cada copia, dupli-
cación, distribución, transferencia en red, línea telefónica u otro medio electrónico, para uso
privado o colectivo es ALTAMENTE recomendado. La última versión se hizo el 28 Mayo 2004. La
distribución que aquí se hace es netamente educativa y bajo ningún fin comercial. Tomado de:
http://hapedit.free.fr/hapedit.php?LangId=ES [Junio 26 de 2011]
Programación WEB
11.2.3.1. Creando acceso directo de Hapedit
La figura 130, se muestra como se crea el acceso directo y que archivo seleccionar para crear el
acceso directo.
131
11. ANEXO DE INSTALACIONESB
Al finalizar la creación del acceso directo en el escritorio se fija un ícono similar al mostrado en la
figura 131.
Appserv es una herramienta OpenSource para Windows que facilita la instalación de Apache,
MySQL y PHP en la cual estas aplicaciones se configuran en forma automática. Como extra in-
corpora phpMyAdmin para el manejo de MySQL. La mayoría de de bases de datos y gestores de
contenidos web requieren estos componentes. En ocasiones, configurarlos provoca quebraderos
de cabeza. AppServ facilita mucho la labor y ahorra bastante tiempo.
Para su instalación busque en el CD que se envió junto a este material escrito la carpeta marcada
como: APPSERV y de doble click en el archivo instalador, como se muestra en la figura 133.
132
Universidad Autónoma de Manizales
Valide la licencia como se muestra en la figura 135.
Programación WEB
Figura 136. Seleccionando la ruta de instalación
133
11. ANEXO DE INSTALACIONESB
Esta parte es fundamental. Ahora se debe seleccionar el nombre del servidor y el correo del ad-
ministrador. Escriba en el nombre del servidor localhost, en el mail escriba su mail y en el puerto
deje el mimo por default el 80. Ver figura 138.
Ahora escriba la contraseña del usuario que se llama root. La contraseña que usamos en forma
estándar es: admin. Ver figura 139
134
Universidad Autónoma de Manizales
Una vez termina la instalación el programa está listo para ser iniciado. Ver figura 141.
Programación WEB
El appserv iniciará cada vez que se inicie Windows. Lo anterior
garantiza que el servidor siempre esté arriba, para ejecutar
cualquier aplicación en local. Para probar su instalación correc-
ta, escriba en algún navegador: http://localhost La salida debe ser la página con todas las compo-
nentes (servidor Apache, php y Mysql) de Appserv.
FileZilla - es el mejor cliente FTP, gratuito. Posee una agradable e intuitiva interfaz. Sustenta FTP,
SFTP y FTP sobre SSL. Es multiplaforma y está disponible para Linux, FreeBSD y MacOS X. Muy có-
modo para actualizar archivos en su hosting. FileZilla es un cliente FTP multiplataforma de código
abierto y software libre, licenciado bajo la Licencia Pública General de GNU. Soporta los protoco-
los FTP, SFTP y FTP sobre SSL/TLS (FTPS). Inicialmente fue diseñado para funcionar en Microsoft
Windows, pero desde la versión 3.0.0, gracias al uso de wxWidgets, es multiplataforma, estando
disponible además para otros sistemas operativos, entre ellos GNU/Linux, FreeBSD y Mac OS X.
Para su instalación busque en el CD que se envió junto a este material escrito la carpeta marcada
como: FTP, ingrese y de doble click en el archivo instalador, como se muestra en la figura 142.
135
11. ANEXO DE INSTALACIONESB
Una vez que se da permiso al sistema para que se instale, se indica la licencia de este programa.
Ver figura 144.
La figura 145 indica la particularidad de instalación en un equipo para uso personal o para varios
usuarios.
136
Universidad Autónoma de Manizales
Componentes de instalación. Ver figura 146.
Luego le debe indicar la ruta de instalación como en los programas anteriores. Al darle instalar el
programa inicia su recorrido. Al final de la misma sale la venta de culminación de esta instalación
como se muestra en la figura 147.
Programación WEB
Figura 147. Finalización de instalación
Las figuras 148 muestran el ambiente de Filezilla y el icono creado en el escritorio para ingresar
al mismo.
137
11. ANEXO DE INSTALACIONESB
138
Universidad Autónoma de Manizales
Programación WEB
139
140