Documente Academic
Documente Profesional
Documente Cultură
Diseñar o crear páginas web requiere el aprendizaje de unos lenguajes de programación en los que
escribir estas páginas. Estos lenguajes son la forma de decirle al navegador lo que queremos que
aparezca en la página, en qué lugar de la página queremos ponerlo, que aspecto queremos que
tenga la página, etc.
Mediante los lenguajes HTML y CSS podemos diseñar páginas bastante complejas, en las que
aparecen texto, imágenes, enlaces, videos y sonido, todo ello dentro de una estructura con varios
apartados o cajas donde cada una de ellas tiene su propio estilo.
Sin embargo las páginas creadas mediante HTML y CSS son páginas estáticas, es decir, no pueden
modificarse si no modificamos los códigos HTML y CSS con los que fueron creadas. El usuario sólo
puede verlas y enviar algún formulario por correo electrónico.
Si queremos ampliar las posibilidades de una página web, de manera que el usuario pueda
interactuar con ella o que se puedan actualizar los datos sin tener que estar modificando
constantemente su código, debemos completar su diseño mediante otros lenguajes como son
Javascript o PHP.
Conseguimos así páginas dinámicas, en las que se pueden mostrar elementos cambiantes, el
control del cambio de estos elementos puede ser tanto por parte del diseñador como del usuario.
Javascript
Javascript es un lenguaje que complementa el HTML y CSS y que permite hacer la página dinámica,
con javascript podemos realizar acciones tales como añadir un reloj, o una calculadora, permitir al
usuario que elija entre distintos aspectos o estilos para la página (elegir entre diferentes fondos,
tipos de letras, etc.), menús desplegables, verificar los formularios antes de mandarlos, abrir
ventanas secundarias, etc. La mayoría de estas acciones pueden ser controladas por el usuario.
Sin embargo Javascript es un lenguaje del lado del cliente, es decir, al abrir la página, el usuario
descarga también todo el código javascript necesario para ejecutar las acciones dinámicas, por lo
que el diseñador no puede saber qué acciones dinámicas ha ejecutado el usuario en su navegador.
No hay una comunicación real entre el usuario y el servidor de la página, ya que éste último se
limita a mandar la página junto con las instrucciones javascript para que ésta pueda ser cambiada
en todas sus opciones.
El lenguaje PHP
PHP es un lenguaje que se ejecuta en el lado del servidor, es decir, antes de mandar la página, el
servidor lee el lenguaje php, y manda los datos transformados en lenguaje HTML con lo que el
usuario nunca verá el código PHP que genera la página, o ciertas partes de la página, sino su
transformación a lenguaje HTML. Esto permite al diseñador o administrador variar datos en código
PHP que cambiarán en la página al ser cambiados en este lenguaje. Por otra parte, la conexion del
lenguaje PHP a bases de datos puede hacer que estos cambios se produzcan automáticamente al
cambiarlos en la base de datos.
Con PHP podemos también recibir datos del usuario, mediante formularios. Estos datos pueden
guardarse en bases de datos, los cuales pueden utilizarse de nuevo para variar la página.
De esta manera podemos obtener información del usuario, que será guardada en la base de datos,
la cual puede mostrarse luego en otra página o en la misma al recargarse.
Acciones tales como restricción de páginas a ciertos usuarios, creación de foros, inscripciones o
suscripciones a ciertos servicios, transaciones electrónicas, etc, no serían posibles sin el lenguaje
PHP.
El lenguaje PHP es el más utilizado para crear páginas dinámicas del lado del servidor. Existen
también otros lenguajes como ASP o PEARL del lado del servidor. ASP es muy parecido a PHP,
distribuido por Microsoft fue creado en principio para plataformas Windows. La mayor difusión de
PHP y el hecho de que PHP soporta todas las plataformas, así como que hace tiempo que ASP no
se actualiza, hace que ASP sea poco utilizado. PEARL es un lenguaje bastante más complejo, que
requiere tener mayores conocimientos sobre programación, por lo cual no lo trataremos en este
sitio.
Trabajar con PHP
PHP es un lenguaje creado por una gran comunidad de personas. Desarrollado originalmente por
Rasmus Lerdorf en el año 1994, se ha ido ampliando con el tiempo, actualmente va por la versión
5, y trabaja conjuntamente con otros programas como son la base de datos MySQL y el servidor
Apache. Veremos todo esto detenidamente en capítulos posteriores, así como la instalación de
estos programas.
Trabajar con PHP requiere saber diseñar páginas web con HTML y CSS, el código de PHP está
incrustado dentro de la página en scripts, por lo que no toda la página está escrita en este
lenguaje, sino sólo los fragmentos necesarios. Por tanto debemos saber diseñar páginas en HTML
y CSS antes de empezar a aprender PHP. Si no conoces los lenguajes HTML y CSS, te recomiendo
que antes de empezar con PHP sigas el manual de HTML y CSS.
El panel de control tiene una serie de botones que sirven para realizar
distintas acciones:
Los botones Stop/Start: (columna "Actions") Sirven para poner en
marcha o parar los diferentes programas que integra XAMPP. Cuando un
programa está funcionando el botón muestra la palabra "Stop". Si el
programa está parado el botón muestra la palabra "Start"; y en las
columnas "PID(s)" y "Port(s)" aparecen unos números. Al pulsar sobre el
boton se activa o desactiva el programa. Para poder trabajar con PHP
debemos tener activados al menos los programas "Apache y "MySQL".
Los botones Admin: Sólo están disponibles cuando el programa al que
se refieren está activado. Al pulsarlos nos abren el programa al que
corresponden, aunque para "Apache", nos abre la página de inicio del
servidor local, y en "Tomcat" nos abre una sección del servidor local donde
nos explica (eso sí, en inglés) su funcionamiento.
Los botones "Config" y "Logs" Sirven para cambiar la configuración y
las opciones de los distintos programas. A nosotros nos basta la
configuración que viene por defecto al ser instalado Xampp, por lo que no
los tocaremos.
Los botones Shell, Setup, Port-Check: Estos botones abren la consola
de Windows para poder realizar distintas configuraciones entre los
programas. No los usaremos de momento.
En la parte derecha tenemos también una columna de botones. Estos
son "Config", Netstart", "Shell", "Explorer", "Services", "Help", y "Quit".
Nosotros utilizaremos sólo el primero ("Config") y el último ("Quit"). Los
demás abren una serie de consolas o paneles que no vamos a utilizar.
El botón Config
Escribir instrucciones
Al igual que en javascript, podemos escribir las instrucciones con
varios espacios en blanco entre palabras, y con tabulaciones. Estos no
serán tomados en cuenta al interpretar el código, y se considera que sólo
hay un espacio en blanco entre palabras aunque haya más de uno. Esto
nos permite organizar el código para que pueda ser más inteligible.
Sin embargo todas las instrucciones o sentencias PHP deben acabar
con el signo de punto y coma ( ; ). El cambio de línea al escribir el código
no supone un cambio de instrucción, por lo que si no se pone el signo de
punto y coma seguiremos en la misma instrucción al cambiar de línea.
Esto supone una diferencia importante con Javascript, ya que en
Javascript al cambiar de línea acabamos la instrucción para empezar otra.
En PHP el punto y coma es obligatorio al final de cada sentencia.
Primera página
Con lo visto hasta ahora podemos ya crear una primera página
sencilla con lenguaje PHP. para ello abriremos el programa editor de
textos (HTML-Kit) y escribiremos lo siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Página con PHP</title>
</head>
<body>
<p>Este texto no esta escrito en PHP</p>
<?php
echo "<p>Este texto está escrito con PHP</p>";
?>
</body>
</html>
En esta página el código PHP está marcado en azul. Para ver como
funciona esta página la copiamos en nuestro editor de textos, y la
guardamos en la carpeta "htdocs" del directorio de XAMPP con el
nombre prueba1.php.
Para verla abrimos el navegador y escribimos en la barra de
navegacion: localhost/prueba1.php. En el navegador debemos ver las
dos líneas de texto tanto la escrita fuera de PHP como la escrita dentro
de PHP.
pulsa en este enlace para Ver ejemplo anterior
La carpeta htdocs
Este será nuestro directorio de trabajo. Dentro de esta carpeta puedes
crear subcarpetas para organizar mejor todos nuestros archivos en PHP.
Para verlos en el navegador debemos escribir en la barra de navegacion
"localhost/misubcarpeta/archivo.php". Dentro de cada subcarpeta
podemos guardar pruebas, proyectos de sitios, carpetas raiz de sitios en
php, etc. Cada subcarpeta puede tener un archivo principal al que
llamaremos "index.php" y que será el que se abra por defecto al poner
sólo el nombre de la subcarpeta.
Tal vez nos resulte más cómodo acceder a la carpeta "htdocs" desde
la carpeta de "mis documentos" o desde otra que nos sea más familiar.
Para ello no tenemos más que crear en "mis documentos" (o en la carpeta
que queramos) un acceso directo a la carpeta "htdocs".
Para escribir los nombres de los archivos debemos seguir las mismas
reglas descritas para los archivos en HTML. Recordemos que éstos son
básicamente los siguientes:
Texto en minúsculas: Todo el texto del nombre de archivo se escribirá en
minúsculas.
No poner acentos: Escribiremos todas las palabras sin acento, aunque los
tengan.
No empezar por un número: El primer carácter o signo que escribamos no
debe ser un número, pues algunos programas podrían interpretar mal el nombre
del archivo
No utilizar otros caracteres que no sean letras o números: no utilizar
barras, paréntesis, puntos, dos puntos, comas, comillas, signo más, etc.
Separar las palabras con guión normal - o con guión bajo _ : Esto nos
asegura un sólo espacio entre palabras, el ocupado por el guión bajo (El guión
bajo ( _ ) se escribe pulsando la tecla Mayúsculas y la tecla Guión a la vez).
2.2 Variables
Definición de variable.
Una variable es un elemento en el que se puede almacenar un valor
o dato. Para ello basta con asignarle a una variable un valor. Si a esa
misma variable le asignamos otro valor, esta cambiará el valor o dato que
tenga almacenado por el que le demos de nuevo.
Si conoces Javascript o cualquier otro lenguaje de progamación,
estarás ya familiarizado con este término. Si no es así verás que esto es
muy facil.
En PHP todas las variables van precedidas del signo dolar $. este signo
delante de cualquier texto indica que lo que viene detrás es una variable:
ejemplo: $miVariable
Asignar valor a una variable
Para crear una variable basta con escribirla (siempre precedida del
signo $). Por lo tanto si escribimos cualquier palabra precedida del signo
$ esta será considerada como una variable.
Sin embargo las variables tienen su utilidad en que pueden guardar
valores, datos, u otros elementos; por tanto al crearlas es conveniente
asignarles un valor o dato. Ello se hace mediante el signo = (igual).
$texto = "Hola mundo";
en esta instrucción PHP hemos creado una variable llamada $texto. A
partir de aquí, escribir el nombre de la variable es lo mismo que escribir
su valor o dato almacenado. por tanto, siguiendo el ejemplo anterior, la
instruccion:
echo $texto;
nos dará el mismo resultado que si escribimos:
echo "Hola mundo";
Es más, si escribimos el nombre de una variable dentro de una cadena
de texto, no veremos el nombre de la variable, sino su valor. por tanto si
escribimos , siguiendo con el ejemplo anterior, el texto
echo "Bienvenido a mi página, $texto";
nos dará el siguiente resultado en la página:
Tipos de variables
Las variables pueden ser de diferentes tipos en función del valor que
almacenan. los tipos de variables son:
Números enteros (integer)
Números enteros sin decimales. Ejemplo:
$num1 = 43
Números Reales (real)
Números reales, con decimales. Ejemplo:
$num2 = 12.56
Cadenas de texto (string)
Texto escrito con caracteres alfamuméricos. Van siempre delimitadas
por comillas al principio y al final de la cadena. Ejemplo:
$texto = "Esta variable es un texto."
Arrays o listas de elementos.
un array es un conjunto de elementos que están agrupados bajo una
única variable, y forman una lista. Si conoces el lenguaje Javascript ya
sabrás lo que son los arrays. La forma de trabajar con los arrays en PHP
es similar a Javascript, aunque no es idéntica. Veremos más adelante
como trabajar con arrays en PHP. Aunque más adelante se explicará con
más detalle, este es un ejemplo de como crear un Array
$array = array("primavera","verano","otoño","invierno");
Objetos
Las variables pueden guardar también otros elementos más
complejos que pueden crearse con el lenguaje PHP. Estos son los objetos.
Los veremos en temas posteriores.
Comentarios
Lo comentarios son anotaciones que hace el programador al margen
del código. No forman parte del código, pero ayudan a entender lo que se
está haciendo. Su sintaxis es la misma que en javascript. Tenemos dos
tipos de comentarios: los de una línea y los de varias líneas.
Los comentarios de una línea empiezan con dos barras inclinadas: //.
Todo lo que se ponga en la línea después de las dos barras inclinadas será
el comentario:
$a = "hola"; //definir la variable a
Después de la instrucción hemos puesto un comentario de una línea
para indicar lo que estamos haciendo.
Los comentarios de varias líneas empiezan por /* y terminan por */.
todo lo que escribamos entre estos signos será un comentario:
/*página de inicio
Creada por Anyelguti.*/
La mayoría de editores de texto para páginas web (como HTML-Kit)
suelen resaltar los comentarios en letra cursiva y de otro color. De esta
manera se distingue enseguida lo que es un comentario del código en sí.
2.3. Trabajar con variables
<?php
$variable = "23 años";
echo "esto es una variable: $variable<br/>";
setType($variable,"integer");
echo "La variable anterior convertida a entero: $variable";
?>
<?php
$variable = "23 años";
echo "esto es una variable: $variable<br/>";
$variable = (int) $variable;
echo "La variable anterior convertida a entero: $variable";
?>
Caracteres de escape
Al igual que en HTML o Javascript y otros lenguajes de programación,
existen una serie de caracteres que se utilizan para la propia
programación, y que no pueden escribirse directamente para que se vean
en la pantalla del ordenador, ya que serán interpretados como una
instrucción y no como lo que hay que escribir.
Por ejemplo, si en una cadena de texto queremos escribir el signo $
no podemos escribirlo directamente, ya que el programa PHP interpretará
que queremos escribir una variable, por tanto debemos indicar de alguna
manera que lo que escribimos no es una variable, sino el signo $.
La manera de indicarlo es escribir delante del signo la barra inclinada
inversa ( \ ). Para escribirla debemos pulsarla tecla " � " (esquina superior
izquierda del teclado) a la vez que la tecla "AltGr". Veamos un ejemplo :
$texto = "Esto es una variable";
echo "la variable \$texto tiene el valor: $texto";
Este código php lo veremos en el navegador de la siguiente manera:
Concatenar variables
Consiste en hacer que el valor de una variable se convierta en el
nombre de otra variable, para ello concatemamos los signos dolar. Es
decir si tenemos la variable $v1, podemos crear la variable $$v1. El nombre
de esta variable será el valor que le hayamos dado a la variable $v1.
Vamos a verlo con un ejemplo. Tenemos la variable $v1 = "tema1".
Este es su código php:
<?php $v1 = "tema1"; echo $v1; ?>
Y la veremos así:
tema1
Ahora creamos la variable $$v1 = "contenido del tema 1". Para ver el
valor de esta variable debemos escribir en el código: $tema1, es decir, el
valor de la variable de referencia. Veamos el código:
<?php $$v1 = "contenido del tema 1"; echo $tema1; ?>
El código anterior dará el siguiente resultado:
Variables vinculadas
Podemos hacer una copia de una variable de forma que dos variables
tengan el mismo valor. Para ello basta con igualar la segunda variable a
la primera:
<?php $v1="primera"; $v2=$v1 ?>
La variable $v2 tendrá el mismo valor que la variable $v1; lo cual lo
comprobamos con el siguiente código:
<?php echo "Valor de la variable \$v1: $v1.<br/>";
echo "Valor de la variable \$v2: $v2.<br/>"; ?>
El código PHP nos dará el siguiente resultado:
Valor de la variable $v1: primera.
Valor de la variable $v2: primera.
constantes
Enviar datos
Los formularios son la manera más común de recoger datos del
usuario. Si usamos sólo el lenguaje HTML La única forma posible de
mandarlos es por e-mail, tal como se explica en nuestro manual de HTML
/ 7. Formularios
También podemos recoger los datos de un formulario mediante
Javascript, pero éstos sólo los podemos utilizar en la propia página en que
están escritos, o pasarlos a otra página utilizando cookies. (Ver nuestro
curso de Javascript: Tema 7. Formularios y Tema 14. Cookies
Sin embargo, con PHP podemos enviar los datos directamente a otra
página, tal como veremos a continuacion, o podemos con PHP y MySQL
guardar los datos en una base de datos, para poder utilizarlos
posteriormente; esto lo veremos en temas posteriores.
En color azul hemos resaltado aquí el código PHP que hemos puesto
en esta segunda página.
El ejemplo anterior lo veremos funcionando en el siguiente enlace, en
la página se muestra el formulario, una vez relleno pulsas en enviar y
veremos la segunda página con los datos que hemos introducido en la
primera:
3. Formularios (II)
3.2 Campos de opciones
Botones checkbox
Los botones checkbox son independientes unos de otros, por tanto el
atributo name debe ser distinto e identificativo en cada uno de ellos. Para
poder pasar los datos a otra página estos botones deben llevar el
atributo name. El atributo value no es obligatiorio, aunque sí
recomendable. Veamos un ejemplo:
<input type="checkbox" name="musica"/> Música<br/>
<input type="checkbox" name="deportes" value="SI"/> Deportes
<br/>
Como en el caso anterior en la página de recogida de datos usaremos
la variable $_POST['valor_de_name'] en el código php:
<?php
echo "Musica: "; echo $_POST['musica']; echo "<br/>";
echo "Deportes: "; echo $_POST['deportes']; echo "<br/>";
?>
Si el botón no se ha seleccionado se devolvera como valor una
variable vacía, Si está seleccionado nos devolvera el valor "on" si no lleva
el atributo value. Si lleva este atributo el valor devuelto será el que éste
tenga.
Listas select
Las listas tipo "select" empiezan siempre por la etiqueta <select..>.
Es en esta etiqueta donde debemos poner el atributo name para
identificarla.
Recordemos que las distintas opciones que puede elegir el usuario
van marcadas por las etiquetas <option> ...</option>. veamos la siguiente
lista:
<select name="color">
<option>ninguno</option>
<option value="red">rojo</option>
<option value="blue">azul</option>
<option value="green">verde</option>
<option value="yellow">amarillo</option>
</select>
Metodo get
Podemos emplear también el metodo get para recoger los datos del
formulario, la forma es similar a la vista anteriormente.
En la etiqueta <form ... > pondremos en atributo: method="get"
<form action="pagina.php" method="get">
En los campos del formulario podremos la etiqueta name que nos
identificará el nombre del campo.
Para recoger los datos utilizaremos en la página PHP la
variable $_GET['valor_de_name'], de la misma forma vista para el método
POST.
Por último al principio de la página de recogida debemos poner el
siguiente script:
<?php
$HTTP_GET_VARS;
?>
Este script no es necesario con las versiones más recientes de PHP.
El metodo GET es menos recomendable ya que los datos pueden verse
también en la barra de navegación del navegador.
datos no guardados
Los datos aportados por las variables no se guardan, éstos
desaparecen al cerrar la página, ya que cualquier usuario al volver a
rellenar el formulario y enviarlo cambia los datos aportados. Sin embargo
nos pueden servir para mostrarlos o trabajar con ellos, como veremos
más adelante.
De momento lo importante es saber cómo recoger los datos que nos
aporta el usuario. Más adelante veremos cómo guardarlos y dónde.
3.3 Ejemplo de formulario
Formulario en HTML
Veremos aquí un ejemplo en el que aplicaremos lo visto hasta ahora
para recoger los datos de un formulario.
Lo primero es hacer un formulario en HTML. este es la página de
nuestro formulario de ejemplo.
</head>
<body>
<h1>Suscripción electronica a nuestro boletín.</h1>
<p>Nota: Este es un formulario de ejemplo en el que los datos aquí
escritos se
trasladan a otra página.</p>
<form action="comprobar.php" method="post"/>
</head>
<body>
<h1>Tus Datos de suscripción: </h1>
<p>Estos son los datos que nos has enviado:</p>
<?php
echo "Nombre: "; echo $_POST['nombre']; echo "<br/>";
echo "apellidos: "; echo $_POST['apellidos']; echo "<br/>";
echo "E-mail: "; echo $_POST['email']; echo "<br/>";
echo "contraseña: "; echo $_POST['contras']; echo "<br/>";
echo "Sexo: "; echo $_POST['sexo']; echo "<br/>";
echo "Estudios: "; echo $_POST['estudios']; echo "<br/>";
echo "Aficiones: \"on\" seleccionado, sin marcar, no seleccionado<br/>";
echo "Musica: "; echo $_POST['musica']; echo "<br/>";
echo "Deportes: "; echo $_POST['deportes']; echo "<br/>";
echo "Cine: "; echo $_POST['cine']; echo "<br/>";
echo "Libros: "; echo $_POST['libros']; echo "<br/>";
echo "Ciencia: "; echo $_POST['ciencia']; echo "<br/><br/>";
echo "Día de la semana: "; echo $_POST['dia']; echo "<br/>";
echo "Tu comentario: "; echo $_POST['comentario']; echo "<br/>";
?>
<p>Comprueba tus datos antes de enviarlos, si no están bien vuelve
a escribirlos.</p>
<p>Los datos son correctos: <a href="form.html">Enviar</a>
<p>Los datos no son correctos: <a href="enviar.html">Volver a
escribirlos</a>
</body>
</html>
P�r último colocaremos la página que nos dice que los datos han sido
enviados, para ello crearemos la sigiente página llamada "enviar.html