manual php mysql
TRANSCRIPT
Qué es el Php?Podría darte una genial definición del lo que significan las sigles PHP, pero para eso
tienes la wikipedia, así que te vas a conformar con saber que es un lenguaje que se puede
usar en nuestras páginas web, similar al Html pero distinto pues usa otra forma de escribirse.
El código PHP que nosotros vamos a crear irá mezclado dentro del código Html pues ambos
pueden convivir muy bien juntos. Pues ya está, con eso te basta para seguir, je je.
Bueno hay algo que diferencia bastante al Php respecto del Html. Mientras que un
navegador cualquiera interpreta perfectamente (más quisieramos nosotros, que todos
interpretaran perfectamente, je je) el código Html, de Php no tienen ni idea, son así de
tontitos. Y entonces para qué nos vale? No pasa nada, el lenguaje Php no se inventó para
que lo entendieran los navegadores. Con el Php lo que hacemos es dar instrucciones a
nuestro servidor (el ordenador donde se aloja nuestra web) para que haga esta cosa y
aquella. Cuando ponemos código Php en una de nuestras páginas web y lo subimos al
servidor, el servidor lee ese codigo Php, interpreta lo que le estamos ordenando y muestra al
visitante el resultado, pero nunca el propio código Php.
Veámoslo con un ejemplo tonto. Con Php puedo hacer que mi servidor sume cuanto
es 10 + 10 escribiendo entre el Html de la página el código Php apropiado. Tras guardar la
página en mi ordenador y subirla a internet, ese código tan raro sería leido por nuestro
servidor que sí fué al colegio a aprender Php (o eso esperamos...). Nuestro servidor
entonces lee todo el código de la página y cuando llega a ese código raro que él sí entiende,
hace la suma de 10 + 10 y si no es idiota ni ha tenido ningún cortocircuito importante
obtendrá como resultado 20.
Ahora viene nuestro vecino al que le hemos dicho que por favor por favor por lo que
más quiera visite nuestra web y escribe (de mala gana) la dirección de nuestra página en su
navegador (que no sabe leer Php). A nuestro servidor le suena el timbre, alguien esta
tocando a la puerta y quiere ver nuestra web! Corriendo lee el código de la página, ve la línea
Php de la suma aquella, calcula que más o menos 10 y 10 son 20 y en lugar de mandarle al
vecino el código Php de la suma decide hacerle un favor (a él y a su navegador) y mostrarle
el resultado, 20, en código Html. Grandioso, verdad?
De esto podemos deducir ya algo. Si has seguido el curso paso a paso de Html de
CCTW o si has estado atento al Foro, sabrás que desde el navegador puedes ver el código
Html de cualquier página. Pues bien, si una página contiene código Php e intentas echar un
vistazo a su código, no vas a ver ni una sola línea de Php. Por qué? Pues te lo acabo de
contar.... porque los servidores traducen lo que les ordenamos en Php a código Html.
Lo malo de esto es que no podremos aprender mirándole las tripas a la web de un
amigo (o de la competencia) para ver cómo ha conseguido hacer esto o lo otro, pero no
temas, que aquí estamos para enseñarte sin tener que mirar tripas! je je.
Hay otro detalle que podrías deducir de lo anterior, pero como acabas de llegar mejor
te lo cuento yo que ya lo se (mi trabajo me costó, ja ja). Como el Php solo lo saben
interpretar los servidores y nuestros ordenadores no son servidores, si intentamos hacer vista
previa a una página con código Php no vamos a ver lo que realmente se vería en caso de
estar colgada en el servidor.... Eso si que es patético, verdad?
Existen, que yo sepa, dos opciones para trabajar con páginas con códigos Php y
poder ir viendo los resultados conforme la retocamos. Una es trabajar online, hacer nuestros
retoques, subir la página al servidor y visitarla para ver los resultados. Es un poco lento y nos
obliga a estar conectados todo el tiempo a internet, pero puede servirnos (yo uso esa
opción). La otra es convertir nuestro ordenador en un servidor. Para eso, tenemos que
instalar el Php en nuestro ordenata y hacer unas cuantas cosillas de configuración. Os lo
explicaré algún día, como siempre, paso a paso.
Requisitos para aprender y usar Php
Para poder usar código Php en tus páginas solo necesitas que el servidor donde alojes
la web tenga instalado este lenguaje. Existen varias versiones de PHP. La última en el
mercado es la 5.0 y la 6.0 está apunto de salir. En principio lo que aprendas acá te sirve en
cualquier caso. Si tu servidor no tiene Php instalado o no quieres trabajar conectado ya
sabes que puedes convertir tu ordenador en un servidor instalando Php y otras cosillas
necesarias en él, pero eso te lo explico en otra ocasión (cuando yo aprenda....).
También resulta casi imprescindible tener acceso a un archivo situado en la raiz del
servidor y llamado .htaccess. Algunas de las cosas que aquí veremos necesitarán poder
actualizar ese archivo o en caso de que no existe, poder crearlo y subirlo al servidor.
Inconvenientes en el uso del Php
No todo van a ser ventajas no? Para lo que te ha costado.... Las principales desventajas
que yo le encuentro al Php son, que no es un lenguaje tan común y por tanto no son tantos
los amigos a los que pedirles que te ayuden un poco, que el tema de las vistas previas no es
tan rápido como con Html, que quizás (aunque no es lo normal) nuestro servidor de toda la
vida no tiene Php instalado y por último, que el Php mal utilizado es un buen punto de acceso
para los piratas que intentan entrar en nuestras páginas para pintarles vigotes a los tios de
nuestras fotos, o cosas peores. En cualquier caso, bien utilizado es una joya. Por último y
esto si que es inevitable, es que como mediante Php es el servidor el que calcula, decide,
muestra, traduce, suma 10 + 10, etc según nuestras ordenes, lo tendremos mucho más
ocupado que cuando teníamos la web con solamente código Html, por lo que si nos pasamos
puede que el servidor se ralentice un poco, o puede que nuestro proveedor de hosting nos
invite a hacer trabajar a otro y que dejemos en paz a sus servidores (a mí ya me pasó una
vez...).
Otra pequeña pega es que en ocasiones las direcciones de las páginas hechas con
Php son rarísimas, llenas de símbolos raros y datos. Esto es malo para el posicionamiento
web pues con tanto símbolo raro Google (por ejemplo) no encuentra nuestras palabras clave
en la URL y termina aburriéndose de esas páginas. De todas formas últimamente parece que
Google va aprendiendo a leer esas direcciones. Por otro lado, existen formas de rehacer
esas direcciones para que sean bien leidas por los buscadores y en ocasiones, quedan
incluso mejor que las direcciones de páginas Html en cuanto a posicionamiento. Veremos
también este truco más adelante, con lo que esto último dejará de ser un problema.
No considero que ninguno de estos inconvenientes sea como para renunciar al Php,
pero creo que son cosas que has de saber.
Escribir Código Php
No tienes miedo aún? Con la que te viene encima, madre mía...je je je. Pues vamos a
escribir nuestro primer cacho de código Php en una página web de prueba, vale? Esto nos
servirá para repetir un poco algunas de las explicaciones anteriores para que aún te queden
más claras.
Cuando se inserta un trozo de código Php dentro de una página con código Html es
necesario indicar al servidor que esas líneas tan raras son código Php. De lo contrario
pensaría que sigue siendo Html o que estamos un poco borrachos, je je.
Al igual que cuando se escribe un párrafo en Html se encerraba este entre las etiquetas <p>
y </p>, cuando nos interese insertar código Php entre el código Html de una de nuestras
páginas usaremos las etiquetas <?php al principio y ?> al final.
<html>
<head>
<title>Mi quinta página con php</title>
</head>
<body>
<h1>Mi quinto ejemplo Php</h1>
<p>Este es mi quinto ejemplo con partes de Php</p>
</body>
</html>
El código Html de arriba representa una página puramente hecha con Html, más bien
simplificada pero que nos vale para ver cómo funciona el Php. Sí, he puesto "mi quinto".
Realmente es "mi primer..." pero de este modo si alguien nos ve ahora mismo pensará que
debemos ser unos genios ya en Php, je je je je. Será otro secreto entre nosotros, vale? He
visto tantos ejemplos ya con el típico mensaje de "Hola Mundo!" que me da un poco de
angustia usarlo yo también así que.... seamos originales.
Aplicando lo dicho un par de párrafos más arriba, vamos a introducir un bloque vacio
de código Php. Para ello colocamos los símbolos que indican inicio y fín de código Php y no
pondremos, por ahora, nada dentro. Quedaría así:
<html>
<head>
<title>Mi quinta página con php</title>
</head>
<body>
<h1>Mi quinto ejemplo Php</h1>
<p>Este es mi quinto ejemplo con partes de Php</p>
<?php
?>
</body>
</html>
Puedes guardarla con el nombre test01.php No te dolió verdad? je je je je. Ahora sobre
esa base aprenderemos las cosas básicas del Php.
Ojo!: El código php solo puede ser ejecutado por el servidor en páginas con
extensión .php, a menos que le indiquemos al servidor que ejecute php también en páginas
con extensión .html. En breve os enseñare a hacer que los servidores puedan ejecutar ese
código php en paginas con extensión .html, oki?
Recuerda lo comentado antes. Si guardas un archivo con ese código dentro con
extensión .php e intentas hacer vista previa no conseguirás ver lo que hace la parte de
código de Php a no ser que tengas el Php instalado en tu ordenador (a no ser que tu
ordenador esté funcionando como servidor). Lo más cómodo es subir ese archivo a tu
servidor y hacer la vista previa allí. Es decir, lo subes y visitas su dirección para ver el
resultado, que sería algo así. (este lo puedes ver por que está en un servidor con php, claro).
Deja también que te recuerde que si haces clic en el enlace anterior para ver el
resultado y accedes a su código Html, no verás nada del código Php, sino solo sus
resultados ya en Html. Ya sabes por qué, no? Como te decía al principio el Php lo lee el
servidor, lo ejecuta y manda el resutado al navegador, pero se queda el código Php. Poco a
poco lo vamos entendiendo todo, no? Dime que sí! je je je.
Mostrar texto en Php en la página web
A partir de ahora llamaremos sentencia a las ordenes que demos en Php, oki? Una de
lassentencias que más usaremos en Php es la que ordena que se muestre un contenido en
la página web. Esa sentencia se llama echo y se usa escribiéndola dentro de la zona de php
(entre las etiquetas de principio y final) seguida del mensaje a mostrar encerrado entre
dobles comillas, así:
echo "Esta es mi quinta frase hecha con Php!" ;
Ves que hemos colocado un punto y coma al final? Pues ya sabes una cosa más,
todas las sentencias terminan en un punto y coma; Si no se coloca nos dará un error.
Si añades esa línea, perdón, esa sentencia ;) el código anterior nos quedaría así:
<html>
<head>
<title>Mi quinta página con php</title>
</head>
<body>
<h1>Mi quinto ejemplo Php</h1>
<p>Este es mi quinto ejemplo con partes de Php</p>
<?php
echo "Esta es mi quinta frase hecha con Php!" ;
?>
</body>
</html>
Qué va a ocurrir al subir este archivo a la red? Si lo subimos y visitamos la página
veremos este resultado:
Mi quinto ejemplo Php
Este es mi quinto ejemplo con partes de Php
Esta es mi quinta frase hecha con Php!
Si ahora miras su código Html no verás las líneas de Php que habíamos escrito, sino
que verás solo el Html que el servidor ha traducido a partir del código con Php, es decir,
verías esto:
<html>
<head>
<title>Mi quinta página con php</title>
</head>
<body>
<h1>Mi quinto ejemplo Php</h1>
<p>Este es mi quinto ejemplo con partes de Php</p>
Esta es mi quinta frase hecha con Php!
</body>
</html>
Como ves, la sentencia echo lo único que hace es colocar dentro del código Html lo
que hay dentro de las dobles comillas. No es mucho, pero para ser nuestro primer día con
Php.... no? Espero que esto no te defraude, es solo un principio muy muy básico, je je je.
Como a nosotros nos gusta tener nuestro código Html bien limpito y bien estructurado,
vamos a incluir dentro de esas dobles comillas las etiquetas <p> y </p>, no? Así el código de
nuestra página php sería este:
<html>
<head>
<title>Mi quinta página con php</title>
</head>
<body>
<h1>Mi quinto ejemplo Php</h1>
<p>Este es mi quinto ejemplo con partes de Php</p>
<?php
echo "<p>Esta es mi quinta frase hecha con Php!</p>" ;
?>
</body>
</html>
Y el resultado final que ve el visitante sería en ese caso este otro:
<html>
<head>
<title>Mi quinta página con php</title>
</head>
<body>
<h1>Mi quinto ejemplo Php</h1>
<p>Este es mi quinto ejemplo con partes de Php</p>
<p>Esta es mi quinta frase hecha con Php!</p>
</body>
</html>
La única diferencia es que ahora esa frase está dentro de un párrafo, como tiene que
ser.
Usando las primeras variables php en la página
web
La sentencia anterior no nos parece ni mucho menos extraordinaria, pues es algo que
ya sabíamos hacer usando solo Html, pero verás como más adelante la usas un montón de
veces y de modos más especiales y resultones. El siguiente paso para adentrarnos en el Php
va a ser conocer las variables que amplian bastante lo que podemos hacer con este nuevo
lenguaje.
De nuevo, para saber bien bien lo que significa el término variable, ve a la wikipedia, je
je. Aquí lo explicamos para gente de la calle o al menos lo intentaremos. Vamos a ver...
Digamos que una variable es un nombre al que le asignamos un valor. El nombre puede ser
una sola letra, una palabra o incluso varias palabras unidas por guiones bajos. Estos son
ejemplos de variables:
$a, $variable, $notas_de_matematicas, $matricula112,.....
Por otro lado, los valores que puede tomar una variable pueden ser números, letras,
palabras o incluso otras variables. Lo veremos más adelante.
Los nombres que le damos a las variables deberían tener algún sentido para nosotros
para saber en cualquier momento de qué se trata. Si las llamamos como $a, $b, etc, nos va a
ser dificil recordar qué valor guardaban.
Quizás sea mejor llamarlas como $nota_de_matematicas, $telefono, $apellidos, etc,
etc, no crees?
No obstante, no podemos dar el nombre que nos de la gana, tenemos que seguir
ciertas normas como por ejemplo:
- Siempre empiezan con el símbolo del dolar. Buen símbolo verdad? je je je.
- Justo después del símbolo dolar no puedes poner un número. Tras el dolar solo se puede
poner una letra mayúscula o minúscula. En realidad se pueden usar algunos símbolos más,
pero para no liarnos nos limitamos a esto,letras y números si estos no están justo tras el
dolar. Cuando seas profesional podrás usar algún símbolo más, je je je.
Según esto, NO serían válidas estas variables:
variable (no tiene el símbolo de dolar)
$5direccion (no puede empezar con un número)
$matrícula (sabes que odio los acentos... php también, je je je)
$nota de matematicas (No! no pongas espacios en blanco!!!)
$nota-de-matematicas (usa mejor guiones bajos para... evitar_problemas)
Pero SÍ valdrían estas otras:
$sueldo, $apellido2, $a1234, $variable, $notadematematicas, $nota_de_matematicas, etc..
Los valores que podemos dar a cada una de estas variables puede ser como hemos
dicho un número de una o varias cifras, una letra o palabra o incluso otra variable (en ese
caso la variable valdría lo que valga la otra variable, claro).
Para usar una variable dentro de una página web lo primero que tenemos que hacer
es colocar las etiquetas de apertura y cierre de código Php y después indicar la variable a
usar y el valor que queremos que tenga. Por ejemplo,así:
<html>
<head>
<title>Mi quinta página con php</title>
</head>
<body>
<h1>Mi quinto ejemplo Php</h1>
<p>Este es mi quinto ejemplo con partes de Php</p>
<?php
echo "<p>Esta es mi quinta frase hecha con Php!</p>" ;
$miprimeravariable = "sorpresa" ;
?>
</body>
</html>
Guau, esto ya va pareciendo profesional. Seguro que si ahora tu madre pasa por tu
habitación y ve lo que estás escribiendo piensa que vas directamente a la NASA!!! ja ja ja.
Igual no llegamos tan lejos, pero nos acercaremos bastante, je je je je.
Ahora tenemos una página web bien sencillita, con un párrafo en Html, otro en Php y
una variable definida que... que no usamos para nada, aún.
Comentarios y Notas dentro del Código Php
Recuerdas como en Html podíamos añadir comentarios dentro del código para guiarnos
un poco? Pues en Php también podemos hacerlo. Eso sí, al ser lenguajes distintos el código
que indica comentarios también es diferente.
Dentro del código Php, es decir, entre las etiquetas de apertura y cierre de Php,
podemos escribir comentarios nuestros (simples notas que no afectan en nada) sin más que
añadir antes de la nota el símbolo # o dos barras como estas //. A partir de esos símbolos el
resto de la línea de código no es leida por el servidor (recuerda que al navegador no le llega
el código Php sino su resultado tras ser ejecutado por el servidor).
Si usas esos símbolos no tienes que usar símbolo de cierre de comentario, pues el
servidor deja de leer toda la línea de código a partír de ese signo hasta el final de esa línea.
Los siguientes son ejemplos de comentarios, usados sobre la página de ejemplo que
estabamos creando:
<html> <head> <title>Mi quinta página con php</title> </head> <body> <h1>Mi quinto ejemplo Php</h1> <p>Este es mi quinto ejemplo con partes de Php</p> /* Hasta aquí es Html */ <?php // Aquí empieza el codigo Php echo "<p>Esta es mi quinta frase hecha con Php!</p>" ; $miprimeravariable = "sorpresa" ; // Esta línea da valor a una variable ###################################
#También puedo poner esta tonteria ################################### ?> </body></html>
Mostrar el valor de una variable Php en una
página web
Ahora que tenemos una variable con un valor asignado ($miprimeravariable
= "sorpresa"), vamos a ver cómo conseguir que aparezca en la página web ese
valor. Esto lo vamos a hacer con la función echo que vimos antes. Esto es
bastante sencillo, basta con colocar después del echo la variable cuyo valor
queremos mostrar, de este modo:
<?php
echo "<p>Esta es mi quinta frase hecha con Php!</p>" ;
$miprimeravariable = "sorpresa" ;
echo $miprimeravariable ;
?>
Este trozo de código Php imprimirá en la pantalla del navegador estas dos
frases:
Esta es mi quinta frase hecha con Php!
sorpresa
Aunque claro, la palabra sorpresa no quedará entre las etiquetas <p> y
</p> porque no se lo hemos indicado en ningún lado. Para conseguir que
sorpresa quede entre esas etiquetas tenemos dos opciones. La primera es colocar
las etiquetas de apertura y cierre de párrafo dentro del valor de
$miprimeravariable, pero no es la mejor opción. Me gusta más la segunda
alternativa, que es incluir las etiquetas dentro del echo, de este modo:
<?php
echo "<p>Esta es mi quinta frase hecha con Php!</p>" ;
$miprimeravariable = "sorpresa" ;
echo "<p>$miprimeravariable</p>" ;
?>
Verás como para mostrar en la pantalla solamente el valor de una variable
podemos escribir echo seguido simplemente de la variable, con su símbolo de
dolar, claro, pero sin las comillas dobles. En cambio si queremos mostrar en
pantalla algo más que el valor de una variable necesitamos encerrar todo el
contenido a mostrar entre comillas dobles " (no simples '). Más adelante veremos
la diferencia entre usar comillas simples y dobles.
Dentro de esas comillas, simples o dobles, se puede insertar código Html.
Así, cuando el servidor traduzca el código Php devolverá al navegador del
visitante lo que haya dentro de las comillas, es decir código Html que sí sabe
interpretar el navegador de nuestro querido visitante. Lo pillas?
Como ejemplo te dejo esta otra sentencia:
echo "<p>El valor de mi primera variable es $miprimeravariable.</p>" ;
Fíjate en varias cosas en este ejemplo que te servirán para recordar cosas
dichas hasta ahora:
- Usamos echo para mostrar algo en la pantalla del visitante.
- Ese algo lo encerramos entre comillas y esta vez las he usado dobles ".
- Como lo de dentro de las comillas va directo al código Html de la web, coloco ya
las etiquetas de párrafo, <p> y </p>.
- Como he puesto comillas puedo insertar más cosas además del nombre de la
variable, es decir, las etiquetas Html de párrafo y un poco de texto.
- El nombre de la variable a mostrar lo pongo con su símbolo de dolar ($).
- Como toda sentencia, la termino con un punto y coma;
El resultado de esa sentencia Php mostraría en la pantalla del navegador del
visitante esta línea:
El valor de mi primera variable es sorpresa.
Pero qué ocurre si ahora quiero que la palabra sorpresa de la línea de arriba
aparezca entre comillas? A primera vista podría intentarlo con esta sentencia;
echo "<p>El valor de mi primera variable es "$miprimeravariable".</p>" ;
Y qué problema tendremos con esto? Sí! Muy inteligente! Que ahora el
servidor va a pensar que lo que el echo tiene que mostrar termina en la segunda
comilla doble que encuentra, la que hay justo antes de $miprimeravariable y no
hará caso del resto de la sentencia o lo que es peor, nos dará un error, que horror!
Para evitar esto Php ya tiene su truco. Recuerdas como para mostrar una acento
en Html se usaba un código especial? (á para á, é para é, etc),
pues en Php para mostrar unas comillas sin que sean interpretadas como final o
inicio hay que escribirlas con la barra invertida delante. Para las comillas dobles
usaremos \" y para las comilas simples esto otro \'. Existen otros símbolos que se
escriben correctamente también con esta contrabarra delante, pero los veremos
conforme nos hagan falta para no llenar el disco duro de vuestro cerebrillo tan
pronto, je je je. Por cierto, por si os interesa profundizar ya en este tema, el
señalar ciertos carácteres para evitar que los interprete el navegador de un modo
que no deseamos se suele llamar "escape de símbolos", por si queréis buscarlo
en Google.
El código anterior escrito correctamente sería:
echo "<p>El valor de mi primera variable es \"$miprimeravariable\".</p>" ;
Y es ahora cuando os cuento la diferencia entre el uso de comillas simples '
' y dobles " " para encerrar el contenido de unecho. Cuando se usan comillas
dobles el servidor cambiará los nombres de las variables por sus valores reales,
por lo quie valen (si $variable vale sorpresa mostrará sorpresa), mientras que si
usamos las comillas simples escribirá el nombre de la variable y no su valor
(mostrará $variable, tal cuál), y con su símbolo dolar al principio, como si se
tratara de un texto más.
La sentencia anterior al estar escrita con comillas dobles mostaría esto en el
navegador del visitante:
El valor de mi primera variable es "sorpresa".
Mientras que escrita con comillas simples, es decir, así:
echo '<p>El valor de mi primera variable es \"$miprimeravariable\".</p>' ;
mostraría esto otro:
El valor de mi primera variable es $miprimeravariable.
Esta diferencia es muy importante, pues usaremos uno u otro tipo de
comillas según queramos que las variables sean o no sustituidas por sus valores
correspondientes. Recuérdalo siempre!
Las principales operaciones del Php
De poco nos sirve tener variables si no sabemos hacerles trastadas, es decir, sumarles
alguna cantidad, restarles otra, dividirlas, multiplicarlas, etc, etc. Si en lugar de valer
números, las variables contienen letras o palabras también estará bien poder jugar con ellas
quitándoles letras, poniendo en mayúsculas las minúsculas, colocando una palabra de una
variable pegada a otra palabra de otra variable, eliminar los acentos,.... en definitiva,
trastearlas de todas las formas posibles, somos así de malos!
En adelante vamos a aprender a realizar unas cuantas operaciones pues nos servirán
más tarde para crear lo que nos de la gana. No es necesario aprenderse todo de memoria
(bastante teneis con las asignaturas de clase, je je je). Os pasaré una chuleta con todo esto
para no tener que estudiaros nada, vale? Pues vamos a ver cómo se hacen estas
operaciones en Php.
Suma de variables en Php
No te asustes. El título parece un poco técnico (cosa que sabes que odio) pero
realmente no es más que sumar dos variables que tienen números en los valores. Imagina
que tenemos dos variables como estas:
$nota_primer_examen = 10 ;
$nota_segundo_examen = 8 ;
Advertencia: Los valores de las notas anteriores son ficticias, cualquier parecido con
la realidad son pura coincidencia, ja ja ja ja ja, más hubiera querido yo, ja ja ja.
Apúntate que para dar valores numéricos a una variable no se le ponen comillas de
ningún tipo. Solo se ponen comillas al dar valores a una variable si se trata de textos (letras)
o si se trata de números pero queremos tratarlos como un carácter más, como si fueran
letras, como por ejemplo..... a ver... no caigo en ninguna ahora mismo...
Ah ya! Por ejemplo,
$numero_jesucristo = '888' ;
$numero_diablo = "666" ;
Casi seguro que los valores de estas variables no los vais a sumar ni multiplicar ni
nada de eso, de modo que cabe la opción de declarar esos valores como texto (un número
también puede ser un texto, no?). Fíjate que en este caso da igual usar comillas dobles o
simples.
Pues volviendo al tema de la suma, para mostrar en pantalla el resultado de las notas
de los dos exámenes, podemos usar el echo del siguiente modo:
echo $nota_primer_examen + $nota_segundo_examen ;
Al tratarse de variables no es necesario colocar las comillas. Ahora vamos a añadirlas
para insertar dentro del echo algún comentario. Y como queremos que el servidor coloque los
valores en lugar de los nombres de las variables, usaremos las comillas dobles. Ves como al
final todo tiene su sentido?
El echo anterior con los comentarios quedaría así:
echo "La suma de mis dos notas es $nota_primer_examen + $nota_segundo_examen." ;
Tenemos aún otra opción que es crear otra variable, darle el valor de la suma de las
otras dos y luego colocar el resultado de esa nueva en el echo. Creo que con un ejemplo lo
verás mejor....
$resultado = $nota_primer_examen + $nota_segundo_examen ;
echo "La suma de mis dos notas es $resultado" ;
Quizás todo esto del Php te esté pareciendo un rollo tremendo... pero aguanta un poco
más y empezarás a verle la gracia, de verdad. Lo que ocurre es que antes de entrar a fondo
hay que saber algunas cosas básicas imprescindibles. Los ejemplos vistos hasta ahora, y
algunos de los que siguen, no tienen mucho sentido. Decirle a una web que sume dos y dos
cuando sabemos que son... cuatro (son cuatro no? je je je) no es muy interesante, pero con
esto aprendemos a hacer operaciones con variables y luego, cuando lleguemos a la sección
de formularios y a las bases de datos todo esto tendrá bastante sentido. Te fe! y paciencia!
Además de sumar valores de variables, podemos multiplicarlos, dividirlos, etc, etc, etc,
pero por el momento no nos va a hacer falta y prefiero ir viendo eso conforme sea necesario.
Ahora quiero enseñarte unas cuantas herramientas bastante más potentes.
Herramientas de Control Php
Sí, ya, ya, se que no te gustan los términos técnicos, a mí tampoco pero te prometo que
el nombre real es aún más feo. Las herramientas de control de variables nos permiten hacer
algo si se cumple la condición que indiquemos.
Por ejemplo, podemos hacer que una frase se muestre 20 veces una detrás de la otra,
o que se vean en pantalla los números del 20 al 30, o mostrar un mensaje al visitante si es
por la mañana, otro si es por la tarde y otro distinto si es de noche, o podemos hacer cosas
más complicadas como dejar ver una parte de la web si y solo si el usuario se ha registrado,
o mostrar los mensajes escritos por él en un foro, o hacer que aparezcan en la portada las
novedades de los últimos X días de forma automática.... todo esto y mucho más se consigue
dominando estas herramientas de control. Las más usadas son solo cuatro o cinco y una vez
entiendes una se comprenden bien las demás, así que vamos a aprender a usar esas cuatro
o cinco y podremos avanzar bastante, vale? Asi me gusta, con decisión!
La herramienta de control If () Else {} de Php
El funcionamiento de esta herramienta es bastante intuitivo. Usaremos la herramienta
de controlif else siempre que queramos hacer funcionar una o varias sentencias de código
cuando se cumpla una condición.
Ya sabes lo que son sentencias de código verdad? Son simplemente líneas de código
Php o Html que hacen algo. Y una condición también sabes lo que es, por ejemplo, el que la
variable$nota_primer_examen sea mayor que 5. Pues bien, al usar la herramienta if else
podríamos hacer que se nos mostrara en el navegador el mensaje "Enhorabuena, has
aprobado!" si el valor de esa variable es mayor que cinco y "Qué fracaso! Has
suspendido!" si el valor es menor que 5.
Esto ya es otra cosa verdad? Aunque sigue sin merecer la pena aprender Php para
conseguir solo esto, claro. Más adelante verás como podemos hacer cosas más
interesantes, pero necesitamos estos conocimientos mínimos para alcanzar cosas más
interesantes con Php.
Para escribir el código del ejemplo este de las notas, valdría lo siguiente:
<?php
echo "<p>Voy a ver mis notas!</p>" ;
$nota_primer_examen = 8;
if ($nota_primer_examen < 5 )
{
echo "<p>Qué fracaso! Has suspendido con un
$nota_primer_examen.</p>" ;
}
else
{
echo "<p>Enhorabuena, has aprobado con un
$nota_primer_examen!</p>" ;
}
?>
Ahora que has visto el código vamos a explicarlo paso a paso. Como ves, todo el trozo
de código Php lo encerramos entre sus etiquetas de apertura y cierre de Php, como siempre,
y usamos echo para mostrar mensajes. La herramienta if elseempieza con la palabra if
seguida de la condición que queremos que se cumpla que se pone entre paréntesis ( ), es
decir,
if (condición que quiero que se cumpla)
Después de eso, se coloca lo que quiero que ocurra si se cumple esa condición, y lo
pongo entre corchetes { },
if (condición que quiero que se cumpla) {lo que quiero que ocurra si se cumple la condición}
Tras eso, escribimos la segunda palabra mágica, else y seguidamente y entre
corchetes { } otra vez, escribimos lo que queremos que ocurra si NO se cumple la condición
que pusimos, es decir,
if (condición que quiero que se cumpla) {lo que quiero que ocurra si se cumple la condición}
else { y si no se cumple ocurrirá esto otro}
Imagino que ahora verás más claro el código Php del ejemplo que pusimos al
principio. Si lees detenidamente verás como lo primero que ocurre es que se muestra en el
navegador el mensaje "Voy a ver mis notas!". Después, el servidor lee la tercera línea y ve
una variable llamada $nota_primer_examen que vale 8. Lo memoriza y sigue leyendo.
Seguidamente, se encuentra con la palabra mágica if y busca la condición entre los
paréntesis. En nuestro ejemplo pone que el valor de la nota debe ser menor que 5 (el signo <
significa menor que). Como el servidor sabe que el 8 no es menor que cinco, decide que la
condición no se ha cumplido y que por tanto debe hacer lo que ponga en el segundo par de
corchetes justo detras de else. Entonces lee lo que hay dentro y encuentra el mensaje de
enhorabuena y lo muestra en el navegador. A lo que hay dentro del primer par de corchetes
no le hace ningún caso, pues la condición no se cumplía. Además, como el echo que va a
ejecutar está entre comillas dobles sustituirá el nombre de la variable de la nota por su valor.
Si ahora retocamos el código y ponemos un 2 donde estaba el 8, el servidor mostrará el
mensaje de fracaso, pues el 2 es menor que 5.
Este ejemplo, aunque creo que ilustra bastante bien cómo funciona la herramienta if
else, no nos causa ningún asombro, no es nada del otro mundo la verdad, pues la nota ya la
teniamos puesta dentro del código y sabíamos cuál sería el resultado. Pero pronto
aprenderemos a crear formularios y será entonces cuando sean los propios visitantes los que
puedan rellenar sus notas en tu web y ver qué les dice el servidor! No? Tampoco es algo
grandioso? Y si en lugar de las notas de clase escriben en el formulario una clave y el
servidor les deja entrar en la web? Eso si es grande! Pues esto que acabas de aprender con
el if else es la base de eso, así que, vamos por buen camino!!!
La herramienta de control Switch de Php
Esta otra herramienta parecida a la anterior ejecutará un trozo de código u otro según lo
que valga una variable. Vamos a verlo de nuevo con un ejemplo:
<?php
switch ( $nota_primer_examen )
{
case 0: echo "Imposible estudiar menos." ; break ;
case 1: echo "Casi no has abierto el libro." ; break ;
case 2: echo "A este paso no vamos bien." ; break ;
case 3: echo "Solo estudiaste un día?" ; break ;
case 4: echo "Hui! Te faltó muy poco!" ; break ;
case 5: echo "Bien, aprobaste por los pelos." ; break ;
default: echo "Eres un buen estudiante." ;
}
?>
Fíjate que estas herramientas no terminan con punto y coma, pues no son sentencias.
Las sentencias son las que van dentro de sus corchetes y en esas sí ponemos punto y coma.
Estas herramientas terminan con su corchete y listo.
Como puedes adivinar, cuando usamos el switch podemos hacer que el servidor
ejecute unas sentencias u otras según el valor que tenga la variable que pondremos entre los
paréntesis, en este caso, en función de lo que valga$nota_primer_examen.
Después de escribir la palabra mágica switch y colocar entre los paréntesis ( ) el nombre de
la variable, abrimos unos corchetes { } para escribir dentro todos los casos que queremos
tener en cuenta. En el ejemplo se han escrito sentencias para cuando el valor de la nota
fuera igual a 0, 1, 2, 3, 4 y 5. Después de la palabra mágica default podemos aún poner lo
que queremos que ocurra si el valor de la variable no coincide con ningúno de los anteriores,
aunque podemos no poner el caso default si definimos lo que queremos que ocurra para
cada uno de los casos, para cada valor de la nota, del 0 al 10.
Después de escribir la palabra mágica case, se pone uno de los valores de la nota,
luego dos punto y seguidamente la sentencia o sentencias que queremos que se cumplan en
ese caso concreto. Al terminar de escribir esas sentencias colocamos, como siempre, el
punto y coma y la palabra mágica break, que indica al servidor que ya puede dejar de buscar
entre el resto de casos e irse directamente fuera del switch.
En este ejemplo si la variable de la nota vale 2, se mostrará en el navegador el
mensaje "A este paso no vamos bien", y si por ejemplo la nota es superior a 5 se irá a
default y mostrará "Eres un buen estudiante".
Esta vez no he colocado las etiquetas Html de comienzo y principio de párrafo dentro
de las comillas de cada echo para que veas el código Php más clarito, pero conviene ponerlo
para que el texto aparezca como tú deseas.
La herramienta de control While de Php
Con la herramienta while podemos hacer que se ejecute una sentencia o varias
mientras que se esté cumpliendo la condición que le digamos. Con esto, en un foro por
ejemplo podríamos decirle al sevidor que vaya mostrando mensajes mientras que el número
de mensajes ya mostrados no sea mayor que 20, para no llenar la pantalla de mensajes
quedando demasiado larga. O en ese mismo foro podríamos permitir a un usuario fallar X
veces antes de decirle que se vaya a buscar su contraseña. Pero se pueden hacer muchas
más cosas, claro.
Como hicimos antes, vamos a verlo sobre un ejemplo.
<?php
$x = 25 ;
$y = 50 ;
while ( $x < $y )
{
echo "<p>Vamos por el número $x.</p>" ;
$x = $x + 1 ;
}
?>
Al principio del código Php de arriba, hemos creado dos variables, una llamada x que
vale 25 y otra llamada y que vale 50. Después nos encontramos con la palabra mágica while
(que podríamos traducir como "mientras que...") seguida de una condición, que el valor de x
sea menor que el valor de y.
Si se cumple la condición entonces se ejecuta lo que haya dentro de los corchetes {y},
es decir, las dos líneas siguientes. La primera ya la conoces muy bien. Es un echo que
muestra en pantalla el mensaje "Vamos por el número 25."
La sentencia que va después es nueva. En esa línea le decimos al servidor que la
variable $x ahora va a valer lo que valía antes más una unidad, y por tanto ahora su valor
será 26. Como siempre, cerramos la sentencia con un punto y coma y como no queremos
hacer nada más cerramos también el corchete.
Cuando el servidor llega al corchete regresa de nuevo a leer la condición. Ve que la
variable $x que ahora vale 26 aún sigue siendo menor que 50, de modo que ejecuta otra vez
esas dos líneas. Muestra el mensaje "Vamos por el número 26." y vuelve a sumarle uno a
$x, valiendo ahora 27.
Todo esto se repite una y otra vez hasta que $x tenga un valor de 50. En ese caso
como 50 no es menor que $y, no ejecuta más las sentencias de dentro de los corchetes y
termina el asunto. Se iría a seguir leyendo el resto del programa, es decir, se iría tras el
corchete de cierre del While.
Si aún recuerdas lo que te conté páginas atrás sabrás que si hubiera puesto los valores 25
y 50 entre comillas el servidor las habría interpretado como texto y este trozo de código no
funcionaría, pues a la palabra 25 no le podemos sumar 1 siendo un texto (solo podemos
sumarle si 25 es un número).
Te habrás dado cuenta que tienes que aprender un par de cosas para poder expresar
tus ideas en forma de código Php. Por un lado tienes que aprender a escribir condiciones
para poder hacer cosas cuando quieras que una variable sea mayor que otra, o menor, o
igual, o mayor o igual, etc, etc. Por otro lado debes aprender a crear funciones. Una función
es algo que transforma un valor en otro, como la línea $x = $x + 1. De todas formas,
intentaremos explicarlo conforme lo necesitemos.
La herramienta de control For de Php
Esta otra herramienta de control es muy similar a la anterior. Se encarga de
repetir una o varias sentencias mientras va creciendo (o decreciendo) el valor de
una variable. Esas sentencias se seguirán repitiendo hasta que se cumpla cierta
condición. Lo vemos con otro ejemplo?
<?php
for ( $contador = 25 ; $contador < 50 ; $contador =
$contador + 1)
{
echo "<p>Vamos por el número $contador.</p>" ;
}
?>
Esta otra herramienta hace lo mismo que la anterior escrita con la
herramienta while. La forma de escribirla es la siguiente:
for (valor inicial ; mientras que se cumpla esto ;
incremento) {código a ejecutar}
Es decir, se escribe primero la palabra mágica for y después entre
paréntesis ( ) se colocan tres datos. El primero es lo que queremos que valga al
principio la variable que controla las veces que se va a ejecutar esto. Luego se
escribe la condición que se ha de cumplir para seguir ejecutanto el código de los
corchetes. Después se escribe cuánto quiero que aumente la variable de control
cada paso. Estas tres cosas como ves hay que separarlas con punto y coma entre
ellas ($contador=25 ;$contador<50 ; $contador=$contador+1).
En el caso del ejemplo, el servidor se encuentra con la palabra mágica for y
busca esos tres datos dentro de los paréntesis. Encuentra que la variable
$contador vale 25. Luego lee que tiene que ejecutar el código de los corchetes
mientras que esa variable sea menor que 50 y finalmente lee que cada vuelta que
se dé tiene que sumarle 1 a la variable de control $contador.
La primera vez $contador vale 25, y como es menor que 50 se muestra en
pantalla el mensaje "Vamos por el número 25.". Enseguida el servidor le da a
$contador el valor 26 (le suma uno), muestra "Vamos por el número 26" y
vuelve a sumarle uno a la variable de control. Así hasta que $contador tenga un
valor de 50. En ese momento como $contador NO es menor que 50 (sino igual)
deja de ejecutar el código y termina. Complicado? No, verdad?
Pues con esto terminamos por el momento de ver herramientas de control
de variables, vale? Esto es suficiente para seguir avanzando en nuestro camino.
Pasamos a otra cosa más interesante y ya ampliaremos cuando nos haga falta. Ya
eres casi una máquina de programar!
Las Bases de Datos
Para hacerte una idea de lo que es una base de datos, imagínate una tabla. No, no una tabla de
madera no, me refiero a algo como esto:
Columna
1
Columna
2
Columna
3
Fila 1 dato 1 dato 2 dato 3
Fila 2 dato 4 dato 5 dato 6
Fila 3 dato 7 dato 8 dato 9
Fila 4 dato 10 dato 11 dato 12
Esto de arriba es una tabla de datos. Solo tiene dos características y son el disponer
de unas cuantas filas (4 en el ejemplo) y unas cuantas columnas (3 en este caso). Una fila es
toda una línea de datos horizontal mientras que una columna es lo mismo pero en vertical.
Recuerda las columnas romanas, que siempre van de arriba a abajo (bueno hay algunas en
ruinas que se han caido, pero esas no cuentan...).
Estos inventos nos van a servir para guardar datos y usarlos más tarde. Estos datos
pueden haber sido colocados por nosotros mismos o bien podemos dejar a los visitantes
(quizás solo a los registrados o quizás a todo el mundo que quiera) que añadan datos a
nuestra tabla.
Imagina por ejemplo que a partir de un formulario pedimos a los visitantes sus datos
personales. Una buena forma de guardarlos es usando una tabla como esta. Cuáles serían
los datos personales que nos pueden interesar? Seguramente su nombre, apellido, dirección
e-mail, dirección de página web y si está registrado o no.
En una tabla de datos, las columnas representan cada uno de los datos que
pediremos a los visitantes, mientras que en cada fila se almacenan todos los datos de un
visitante en concreto.
La tabla del ejemplo, vacia, sería como esta:
Id nombre apellidodirección
dirección
web
Está
registrado?
En la primera columna se suele guardar el número de la fila. Se suele llamar esta columna Id, de
identificador. Si ahora a través de por ejemplo un formulario un par de visitantes introducen sus datos,
la tabla quedaría por ejemplo así:
Id nombre apellido dirección email dirección webEstá
registrado?
1 Ana Lopezanalopez@webmail
.comwww.analopez.com si
2 Juan Garciajuangarcia@webm
ail.com
www.juangarcia.co
mno
Una tabla de datos tiene un número concreto de columnas (aunque siempre podemos
añadir o quitar las que queramos) pero no tiene un número definido de filas. Estas van
aumentando conforme los visitantes vayan introduciendo datos y más datos.
Una vez que tenemos una tabla con datos, podemos hacer bastantes operaciones
para obtener la información que deseamos en cada momento. Por ejemplo podríamos hacer
que ordenara la tabla por orden alfabetico de los nombres, o que solo mostrara a todos los
Juanes, o nos enseñara las direcciones de páginas web que terminen en .com, etc, etc, etc.
También, a través de códigos Php podríamos hacer llegar un E-Mail a los visitantes
registrados, o una invitación de registro a los no registrados. De nuevo el límite de
aplicaciones de tablas de datos los marca tu imaginación. Tienes? Pues entonces no
tendremos problemas! je je je.
En las páginas siguientes vamos a aprender a crear una base de datos en nuestro
servidor, a crear tablas, definir sus datos y a llenarla de datos procedentes de formularios,
etc. Y para terminar, cuando controlemos todo eso empezaremos a jugar con todos esos
datos para crear aplicaciones interesantes para nuestras páginas web.
PhpMyAdmin
El Phpmyadmin es un programa que suele estar instalado en los servidores decentes y
que nos ayuda a crear y modificar bases de datos e incluso consultar, añadir, modificar o
eliminar los datos guardados en ellas con mucha facilidad. No todos los servidores gratuitos
disponen de este programa, de hecho algunos no te ofrecen ni siquiera una base de datos,
con lo cuál no te haría falta el Phpmyadmin, claro. Pero cada día que pasa son más lo que ya
lo están ofreciendo. En cuanto a los servidores de pago, casi todos te ofrecen algunas bases
de datos para usar y acceso al Phpmyadmin. En la sección Hosting y Dominios de CCTW
puedes ver algunos servicios de hosting que sí te ofrecen todo esto. En cualquier caso,
puedes consultar con tu hosting actual si dispones estas cosas.
Para acceder al Phpmyadmin has de entrar primero al panel de control de tu servicio
de hosting. Con suerte el panel será del tipo Cpanel que es el que vamos a explicar en
CCTW. De todas formas, si es otro distinto no variará mucho y te servirán igual todas estas
explicaciones. El Phpmyadmin es el mismo sea cual sea el panel de control del hosting.
Para acceder entonces al Phpmyadmin hay que entrar antes al panel de control de tu
servidor. Normalmente puedes acceder a tu panel de control Cpanel escribiendo la dirección
de tu web seguida de /cpanel. Si lo escribes en tu navegador te aparecerá una ventana
preguntándote el nombre de usuario y la contraseña de tu hosting.
Si has adivinado tu contraseña entrarás a tu Cpanel y verás a la derecha un montón
de iconos. Busca y haz clic en el que te señalo aquí debajo:
Al hacer clic allí te aparezca otra pantalla del Cpanel desde la que puedes crear una
base de datos y un usuario con clave para acceder a la misma. La pantalla es esta:
Escribe ese nombre para la base de datos y pulsa sen "Create Database". Tras unos
segundos Cpanel te comunica que la base de datos ha sido creada con este mensaje:
Ya está creada nuestra primera base de datos para hacer pruebas. Si en la misma
ventana que tenemos arriba pulsamos en "Go Back" que significa "volver" y nos encontramos
con esto:
He señalado con un círculo rojo el nombre de la base de datos recien creada. Como
ves, su nombre completo está formado por el nombre de usuario que tienes para acceder al
panel de control seguido de un guión bajo y después el nombre que le diste a la base de
datos hace unos segundos. Recuerda esto cuando en alguna parte te pidan dar el nombre de
la base de datos pues no es solo el que tú pusiste sino que va precedido del nombre de
usuario del panel de control más el guión bajo.
Otra cosa de la que me acabo de dar cuenta. No te molestes en colocar guiones bajos
pues se los salta y coloca las palabras juntas. Tras unas pruebas he visto también que si
dejas un espacio en blanco no hace caso de lo que hay detrás de este. Así que escribe el
nombre de la base de datos todo junto y sin guiones y listo.
Justo al lado derecho del círculo rojo tienes una opción (Delete) para borrar la base de
datos con todo su contenido (ahora mismo no tiene contenido), la opción de chequearla
(Check) y la opción de reparala (Repair). Debajo de todo eso vuelves a tener el recuadro
anterior por si quieres crear otra base de datos más.
Más abajo aún tenemos más opciones. La siguiente nos permite crear usuarios para
acceder (no al panel de control del hosting sino) a la base de datos que le indiquemos más
tarde. Ahí por el momento solo creamos usuarios y más tarde indicamos qué usuarios
pueden acceder a qué bases de datos.
Vamos a crear ahora un usuario. Para ello es suficiente con escribir el nombre de
usuario y la contraseña en este recuadro de abajo:
Para no hacerte un lío, más te vale que te vayas apuntando en un papelito tu nombre
de usuario y contraseña de tu panel de control y por otro lado el nombre de usuario y
contraseña para esta base de datos. De lo contrario quizás se te olvide. Como siempre, el
nombre de usuarios no tendra símbolos raros ni acentos ni mayúsculas ni espacios en blanco
ni guiones, para evitar problemas.
Una vez que pulsas "Create User" que significa "Crear Usuario" te aparece una
pantalla de confirmación como esta:
Ale, usuario creado. Después de pulsar de nuevo en "Go Back", que ya sabes lo que
significa, verás como aparece el usuario... pero... anda! Igual que ocurre con la base de
datos, al usuario se le antepone también el nombre de usuario del panel de control seguido
de un guión bajo. Recuérdalo vale? En este ejemplo por tanto el usuario creado tiene el
nombre cartago_pepe.
Pasamos a la tercera parte. Ahora hay que decir qué usuario puede acceder a qué
base de datos y qué poderes va a tener sobre ella. Ahora mismo esto no tiene mucho
sentido, pues solo tenemos una base de datos y un solo usuario, pero cuando tienes varias
bases y usuarios tiene su sentido.
Esto se hace en la siguiente ventana de aquí abajo:
Esto es fácil también, donde pone "user" eliges el usuario (solo tienes uno, te será fácil
saber cuál escoger, no?), donde pone "database" escoges la base de datos a la que quieres
que pueda acceder ese usuario y debajo te aparecen todas las cosas que le dejas hacer, los
permisos que va a tener. Normalmente este usuario es para tí, por lo que te puedes y debes
dar todos los poderes. Y como en inglés todo se escribe "All", marcas esa casilla y listo, es
como si hubieras marcado todas las de la derecha.
Quizás en un futuro quieras crear otro usuario para que acceda un amigo, o un
visitante. En ese caso puedes volver a hacer lo mismo pero limitando los permisos,
marcándo solo lo que le dejas hacer en la parte de la izquierda, donde están todas esas
opciones. Te comento rápidamente lo que significa cada una, pero no creo que lo uses, al
menos por ahora.
Select es para seleccionar datos solamente, insert para insertar datos en la base de
datos, update para cambiar el valor de los datos, delete para elimimar, create permite crear
tablas, drop creo que vaciarlas, lock bloquearlas y el resto.... aún no lo se... ;( para qué te voy
a engañar, no?
Tras activar la casilla de All haz clic en "Add User To Database" que significa "Asociar
al usuario a la base de datos" y listo, todo preparado para continuar.
Conectar con la Base de Datos
Este punto es muy interesante tanto para seguir con las explicaciones como para alguna
vez instalar un foro en tu servidor tipo PhpBB, SMF, vBulletin, o cualquier otro de esos que
vienen hechos, o para instalar un blog, o un albúm de fotos, o cualquier aplicación que te
pida tener una base de datos activa, así que, presta atención.
Los datos que tienes ahora para acceder a la base de datos son los siguientes:
Nombre de la base de datos:
nombredeusuariodelpaneldecontrol_nombredelabasededatos
Nombre de usuario de la base de datos:
nombredeusuariodelpaneldecontrol_nombredeusuariodelabased
edatos
Contraseña:
la que has puesto, tal cuál (esto no va con el nombre de usuario
delante).
Host:
localhost (el 95% de las veces vale con poner localhost
Si alguna vez instalas algún programa en tu hosting o servidor y te pide tener una
base de datos, estos son los datos que has de darle, vale?
En el caso del ejemplo que os he puesto estos datos serían:
Nombre de la base de datos: cartago_basedepruebas
Nombre de usuario de la base de datos: cartago_pepe
Contraseña: noteladigo
Host: localhost
Acceder al PhpMyAdmin
Bueno, ahora que sabemos un poquito de Php y tenemos la base de datos creada
podemos ya aprender a insertar datos en ella. Primero veremos cómo incluir datos usando el
PhpMyAdmin y más tarde crearemos unos formularios en Php para hacer lo mismo pero de
un modo más cómodo, desde nuestra propia web.
Para acceder al PhpMyAdmin tienes que entrar en el panel de control de tu servidor. Si
dispone de Cpanel encontrarás el icono de acceso a PhpMyAdmin que es como este (el de
abajo de la imagen):
Recuerda que para entrar en tu Cpanel tienes que escribir en tu navegador la
dirección completa de tu web (tu dominio) seguido de /cpanel y rellenar tu nombre de usuario
del hosting (no el de la base de datos aún) y la contraseña correspondiente.
Al entrar verás una pantalla como esta:
Tachaaaan!! Espero que tengas suerte y está en español, je je je. Si lo tienes en inglés
no te será muy dificil seguir el curso creo, pues te mostraré dónde has de hacer clic y pondrá
algo parecido.
En la parte izquierda de esa ventana, la parte oscura, puedes ver una lista de las
bases de datos existentes. En mi caso, la imagen de arriba, aparece la que hemos creado
siguiendo las instrucciones de antes y otra que debe ser de alguna aplicación del servidor, no
estoy seguro, así que la dejo ahí tranquila.
El número que aparece entre paréntesis a la derecha de cada base de datos de esa
columna representa la cantidad de tablas que contiene esa base de datos. Nuestra base de
datos de ejemplo está vacia y por eso pone (0). La otra como ves si tiene varias tablas.
Del resto de enlaces y opciones que vemos en la parte de la derecha no vamos a usar
nada aún, lo haremos todo desde la base de datos de pruebas, llamada
cartago_basedepruebas en mi caso y tunombreusuario_basedepruebas en el tuyo.
Para empezar a jugar tenemos que crear la primera tabla de datos, vamos allá.
Crear la Base de Datos
Por si no te lo he dicho, una base de datos está formada por una o varias tablas de
datos. Luego, cada tabla de la base de datos contiene datos. Nosotros ya tenemos creada la
base de datos, pero nos falta crearle tablas dentro donde guadar los datos.
Para crear una tabla nueva en la base de datos basedepruebas primero hacemos clic
(con un solo clic es suficiente) en el nombre de la base de datos de prueba, en la lista de la
izquierda de la ventana del PhpMyAdmin. Aparece esto:
Lo siguiente parece sencillo, verdad? Escribimos el nombre de la nueva tabla en el
hueco en blanco que hay a la derecha de Nombre y ponemos el número de campos en el
recuadro de al lado. Luego pulsamos en Continuar y listo. Vamos a escribir siempre los
nombres de las tablas con todas las letras en mayúscula, oki? Se pueden usar también las
minúsculas, pero asi las distinguiremos mejor dentro de los códigos Php. Recuérdalo.
A esta primera tabla la llamaremos USUARIOS y le colocaremos 4 campos. Pero qué
es un campo? Pues no, no es un montón de tierra con arbolitos y tal, lo siento. Los campos
son las distintas informaciones que queremos guardar. Por ejemplo, si queremos guardar en
una tabla el nombre de los usuarios, su e-milio, su dirección web y su estado (activo o
inactivo), cada una de estas informaciones distintas es un campo. Por tanto, para esos datos
que comento necesitaríamos 4 campos, o mejor, 5 campos si añadimos uno más que
usaremos para almacenar el número de usuario, algo así como su número de socio. Vamos a
crear entonces esa tabla de USUARIOS con sus 5 campos escribiendo esto que ves en la
imagen de abajo:
Tras pulsar en "Continuar" veremos esto:
Ufff, esto si que suena a chino, ja ja ja ja. Nos aparecen un montón de datos a rellenar
para cada uno de esos 5 campos que queremos para la nueva tabla. En la imagen de arriba
puedes ver unos cuantos, pero si mueves la barra de desplazamiento de tu navegador en tu
PhpMyAdmin hacia la derecha aún verás unos pocos más. Vamos a ver lo que significa cada
uno de esos huecos para poder rellenarlos, oki? Una vez relleno no hay que tocarlo más, así
que merece la pena seguir.
Campo
En esta primera columna escribiremos el nombre que queremos para identificar a ese
campo concreto. Nosotros queríamos crear los campos nombre de usuario, dirección de
correo, dirección de la página web del usuario y si está activo o no (por si queremos
desactivar a alguno que se porte mal.... je je je) por tanto los nombres que pondremos serán
estos:
Al igual que con los nombres de las tablas, los escribiremos en mayúsculas y sin
espacios en blanco. Cuando sea necesario separar lo haremos con guiones bajos pero
intentaremos evitarlo. El primero de los campos lo he llamado ID (de Identificador) y es
donde guardaremos el número de usuario.
Tipos
Los datos que podemos guardar en una base se pueden clasificar en
distintos tipos. Como no se consideran igual una fecha, que un número, ni un
texto de unas pocas letras a un texto largo, ni un número entero que uno decimal,
se han creado varios tipos distintos. En esta columna de PhpMyAdmin debemos
seleccionar el tipo que queremos para cada uno de los campos creados.
El asignar un tipo a cada campo es para optimizar la base de datos y
agilizarla. Al igual que es una tonteria tener un garaje para guardar un patinete,
sería un desperdicio reservar un hueco grande de memoria para almacenar un
dato que suele ser pequeño. Es por eso que interesa asignar a cada campo el tipo
adecuado, para no desaprovechar.
Vamos a ver de una pasada rápida estos tipos:
Juas!!! De verdad que yo ceia que había menos tipos de tipos! ja ja ja, me
he asustado cuando he abierto el desplegable, madre mía... Bueno, si te parece
bien (dí que sí por favor, ja ja ja) solo explicaré aquí los que vamos a usar en este
ejemplo e iremos viendo algún otro conforme lo usemos más adelante. Si no no
terminamos las explicaciones nunca, je je je, qué disparate.
Bueno, pues por eso de aprovechar al máximo, daremos a cada uno de esos
campos el tipo de dato adecuado al máximo valor que cada campo pueda tener, o
lo que es lo mismo, si el coche más grande que puedo llegar a tener puede tener
5 metros de largo, escogeré un garaje de 5 metros de largo como mucho, para no
desperdiciar espacio.
El campo ID va a ser entonces un número entero (entero significa sin parte
decimal, sin comas) y como mucho imagino que tendremos unos 9999 usuarios
registrados (no estaría mal para empezar verdad? je je je). Le asignamos
entonces un tipo de dato que acepte números enteros de hasta 9.999, es decir,
números de hasta cuatro cifras. Un tipo correcto para este dato será SMALLINT
que significa "pequeño entero" y acepta valores de números enteros hasta el
65535... y eso que es SMALL! je je je.
Al campo NOMBRE le asignaremos un tipo de dato que acepte letras y como
máximo tendrá unos 50 carácteres (espacios) así que le daremos el tipo
VARCHAR. Es un tipo de dato que admite valores de hasta 255 carácteres de largo
y que ocupará un espacio proporcional a la cantidad de letras que tenga.
El campo EMAIL solo se diferencia del anterior en la arroba, y como se
admite como carácter usaremos también el tipo VARCHAR para él. Aplicaremos
también VARCHAR para el campo URL.
El campo ESTADO es solo para saber si el usuario está activo (si puede
entrar en la web) o si por el contrario ha sido desactivado, por mal
comportamiento o por lo que sea. Para saber el estado solo necesito dos valores
que pueden ser "Activo" e "Inactivo" por lo que usaremos el tipo ENUM. Los tipos
ENUM se usan cuando se va poder elegir de entre una serie de valores ya
conocidos, en nuestro caso, Activo e Inactivo nada más.
Por ahora nos quedamos con con solo esos tipos, ya veremos otros más
adelante. La columna donde asignamos los tipos a cada campo quedará entonces
así:
Longitud y Valores
Esta columna no es tan complicada. Aquí se coloca la longitud máxima que puede
llegar a tener un dato de cada uno de los campos. Existen casos en los que podemos elegir
qué valores concretos puede tomar un campo. Por ejemplo, aceptar solo los valores
"soltero", "casado", "viudo", "divorciado" y "separado". En esos casos sería aquí también
donde se indicarían esos valores posibles, pero eso lo vemos mejor con el ejemplo del
ESTADO Activo e Inactivo.
Colocamos aquí entonces la longitud máxima del valor más largo que creemos que
podemos llegar a tener. No se refiere al valor máximo, sino a lo largo que va a ser el datos
más largo en ese campo. Por ejemplo, el número 10000 es 5 cifras de largo, el 3 es de una
cifra de largo, la palabra "capicúa" es de 7 carácteres de largo, no? Pues ese es el dato a
poner en esta tabla, el largo máximo que podría llegar a tener un valor.
Si te fijas en lo que hemos puesto en el último campo verás que en lugar de la longitud
hemos escrito todos los valores que permitimos que pueda tener el campo ESTADO, es
decir, Activo e Inactivo. Para escribir en ese hueco los valores posibles hay que hacerlo
separando cada uno con una coma y encerrando cada uno con comillas simples, que se
escriben con la tecla que hay junto al cero en el teclado. Ahora ya sabe que si intentas poner
otro valor distinto a esos te saldrá un error.
Qué, a que parece que se mucho de esto? Ja ja ja, lo cierto es que lo acabo de leer en
la parte de abajo de esa misma pantalla del PhpNyAdmin, je je je je. Mira, pone esto:
No te preocupes mucho por ninguno de los valores de todas estas características pues
se pueden modificar más adelante.
Cotejamiento
Esta palabra tan rara es para indicar qué tipo de codificación queremos usar
para los valores de estos campos. Si fueras chino necesitarias codificar los datos
con un tipo de cotejamiento que admitiera los símbolos chinos, al igual que si
fueras musulman o en definitiva si quisieras escribir con signos raros. Nosotros no
somos tan normales tampoco, pues querremos aceptar la ñ o los acentos en
nuestros valores (aunque no suelas usarlos... je je je), así que tendremos que
escoger el tipo de cotejamiento adecuado.
Si abres el desplegable verás que se muestran un montón de tipos que por
supuesto no voy a explicar uno por uno, je je je. Nos conformaremos con saber
que tomando uno de ellos no tendremos problemas con nuestros valores.
Escogeremos el tipo de cotejamiento "utf8_spanish_ci" quedando así nuestro
ejemplo:
O mejor aún, dejamos esos huecos en blanco y escogemos el cotejamiento
utf8_spanish_ci pero en la parte de abajo. En esa parte indicamos el cotejamiento
de toda la tabla, con lo que dejará de ser necesario indicar el cotejamiento de
cada campo. Te indico en la imagen de abajo dónde escojer el cotejamiento para
toda la tabla:
Atributos
Atributos es el nombre de la siguiente columna. Si haces clic en su desplegable verás
los valores que podemos dar en esa columna a cada campo. Nos son demasiados, gracias
a.... Rasmus Lerdorf!!, creador del PHP. Qué cultos somos en CCTW verdad? (y que bueno
es saber buscar en Google, je je je je je).
Estos atributos, opcionales siempre, significan lo siguiente:
Binary: Este atributo no lo controlo demasiado aún. Creo que sirve para ordenar
campos de texto no por su orden alfabético sino según su valor binario... cosas raras como
ves, je je je. Lo olvidaremos por el momento, oki?
Unsigned: Significa que los valores son siempre positivos, sin signo negativo. Gracias
a esto, su un tipo de campo solo puede tener valores desde -255 hasta +255, eliminando el
signo podría tomar los valores desde el 0 hasta el 510. Se usa con los tipos de datos
numéricos.
Unsigned Zerofill: Además decumplir lo anterior, rellena con ceros todos los espacios
a la izquierda del número. Así, si un campo es de tipo numerico de hasta tres carácteres, en
lugar de representarlos como 1, 14 o 97, les daría los valores 001, 014 y 097
respectivamente.
On Update Current_Timestamp: Se usa para tipos de fecha. Si se escoje este
atributo y el campo es del tipo fecha, si no se rellena este dato el servidor le asignará la fecha
y hora que tenía el servidor en ese momento. Puede servir si interesa conocer la fecha y hora
de cuando se insertó ese dato en la base de datos.
Visto lo visto..... qué atributo asignamos a nuestros cinco campos? Solo se me ocurre
asignar el atributo Unsigned Zerofill al campo ID, pues es un valor numérico, no tiene sentido
que sea negativo y.... no viene mal que tenga ceros a su izquierda, no? Los demás los
dejaremos en blanco y esa columna quedaría así:
Nulo
No, no es a tí, tú no eres nulo!! je je je, tú eres ya un pedazo de Webmaster, je je. Con
nulo me refiero a la siguiente columna que tenemos que rellenar. Esta no es complicada. Los
valores que podemos dar en este caso son o "null" o "not null" que significa "acepto datos
nulos o vacios" o "no acepto datos nulos, vacios". Si colocamos el valor "nulo" en uno de
estos campos significará que es un dato obligatorio, que no se puede dejar en blanco. Por
ejemplo, los valores del campo NOMBRE o el de ID o ESTADO deberían ser siempre no
nulos, en cambio los valores de url de nuestro ejemplo podemos dejarlo en null, lo que
significa que se puede dejar en blanco, que acepta el valor nulo o valor en blanco. Esto es
lógico pues habrá usuarios que no tengan página web y por tanto no podemos obligarles a
que escriban la dirección en el campo URL, pero en cambio un nombre sí que han de tener y
por eso lo dejamos en "not null" pues no debe dejarse vacio.
Dejaremos por tanto estos valores (borro el resto de columnas en la imagen para
hacer hueco...):
Predeterminado
Esta tampoco es dificil. En la columna de "predeterminado" podemos escribir el valor
que queremos que tenga cada campo cuando aún no le hemos escrito otro distinto. Por
ejemplo, si usamos esta tabla para pedir la información a los usuarios a través de un
formulario, los valores que no escriba el visitante en el formulario serán sustituidos por los
valores por defecto o predeterminados que señalemos aquí.
Optaremos por colocar Activo de forma predeterminada en el campo ESTADO de
forma que a menos que cambiemos el valor por Inactivo, el usuario será Activo de forma
predeterminada. Además escribimos http:// en el campo URL. En el resto no se me ocurre
poner nada ahora mismo. Quedaría así entonces:
Extra, AI o AutoIncrementoNo sufras, ya queda menos, je je je. Míralo por el lado bueno, y es que ya has
aprendido un montón de cosas de bases de datos, no? En la columna "Extra" solo tenemos
una opción que tomar. Si abres el desplegable verás que solo podemos escoger el valor
"auto_increment". Esta característica indica que cada vez que se introduzca un valor en la
tabla, este valor se generará automáticamente sumando uno al último valor que existe en la
base de datos.
Según la versión de PhpMyAdmin que tengas, quizás no te aparezca eso de Extra,
sino otro campo llamado A_I o AutoIncrement. Pero todas ellas significan y funcionan del
mismo modo.
Por ejemplo, si uno de los campos es un número y le activamos el "auto_increment", si
el primer valor de la tabla tiene el número uno el siguiente que introduzcamos tomará el
número dos automáticamente y así sucesivamente. Lo usaremos en el campo ID. Así, sin
necesidad de darle ningún valor, el servidor le irá dando números consecutivos, desde el
001.
En el resto de campos no tiene sentido así que lo dejamos en blanco para el resto.
Primaria, Indice, Unico y Texto CompletoCon esto casi terminamos. Después de la columna "Extra" tenemos varias opciones
que podemos activar o no. Si dejas el puntero del ratón sobre cada uno de esos 4 nuevos
iconos verás que aparece un cartelito indicando "Primaria", "Indice", "Unico" y "Texto
Completo". Solo podemos activar uno de los tres primeros valores, no nos permite activar
dos o tres de esos valores a la vez. También aparece una columna con tres guiones "---" que
significa que no damos ninguno de estos valores a ese campo. Veamos lo que significa cada
uno.
Primaria: Para no liarnos, diremos que en cada tabla debe haber un campo más
importante que el resto. Debe ser uno que sea diferente cada vez que introducimos los datos
de otro usuario y que sea bastante representativo. En nuestro caso pienso que el campo
NOMBRE sería el idoneo para ser la clave Primaria, pues no hay (o no debe haber) dos
iguales y es bastante representativo.
Como es obligatorio que en cada tabla haya un campo (y solamente uno) con la clave
Primaria activada, lo pondremos activo en el campo NOMBRE. Está claro que si NOMBRE
es la clave primaria no puede aceptar valores en blanco o valores nulos, verdad?
Indice: Los indices se utilizan para mejorar y agilizar la búsqueda de datos dentro de
la tabla.
Unico: Esta clave significa que no pueden haber dos o más datos con el mismo valor.
--- : Esta casilla aparecerá activada si no se ha escogido ninguna de las tres anteriores.
Texto Completo: Esta aún no se lo que es...
Y los Comentarios
No, no es que os vaya a comentar algo ahora, ya he escrito bastante, no? Je je je.
Comentarios es el nombre de la última (por fin!) columna de valores que hay que definir al
crear una tabla nueva. Afortunadamente esta columna no es obligatorio completarla. Se usa
para añadir alguna nota tuya que te sirva para aclararte un poco. Por el momento no la
vamos a utilizar, ya está bien, y tenemos ganas de terminar esta parte de una vez, verdad) ja
ja ja. Pues eso, la dejamos en blanco.
Insertar Datos en la Base
Ahora que tenemos la tabla de datos lista llega la hora de empezar a añadirle datos.
Se me ocurren dos formas de insertar datos en la tabla, la primera es a través del panel de
PhpMyAdmin y la segunda forma es diseñando unos formularios en el que tras escribir los
datos que queremos sean mandados a la base de datos sin más que pulsar un botón.
En esta sección vamos a ver la primera forma, usando el panel de PhpMyAdmin pues
en ocasiones nos vendrá muy bien. Después os explico cómo hacerlo a través de un
formulario.
Tienes abierto el PhpMyAdmin? Abrelo y pulsa primero sobre el nombre de la tabla en
la que quieres insertar datos, de la lista de tablas que aparece a la izquierda y luego clic de
nuevo donde pone "Insertar" en la parte de arriba:
En ese momento te aparecerá una ventana en la que puedes insertar los valores de la
nueva fila de datos. Tú tienes que rellenar los recuadros que hay bajo la columna llamada
"Valores",
Una vez rellenos los datos pulsa sobre el botón en el que pone "Continuar" o bien ve
más abajo donde encontrarás otro recuadro igual por si quieres insertar datos de otra fila
más. Cuando termines pulsa en "Continuar" y los dato quedaran guardados en la tabla.
Qué es un Formulario
Como hemos visto anteriormente, podemos insertar nuevos datos en la tabla de la
base de datos a través del PhpMyAdmin pero, qué ocurre si queremos que sean los usuarios
los que rellenen esos datos? Vamos a tener que darles acceso al PhpMyAdmin? Te fias? je je
je je.
Además.Te imaginas tener que añadir los datos directamente usando el MySql? Uno a
uno? Qué horror! Con lo fácil que sería rellear un formulario y hacer que séa este el que
incorpore los datos a la base de datos, no?
Para evitar todo eso podemos funcionar con los formularios. Así y sin necesidad de
acceder al PhpMyAdmin tanto los usuarios como nosotros mismos podremos añadir datos a
la tabla desde cualquier parte en la que dispongamos de conexión a internet. Será cosa de
rellenar recuadros, hacer clic en un botón y.... listo! Base de Datos rellenada!
Pues vamos allá con las lecciones sobre cómo crear un formulario para el envio de
datos a la base de datos desde una página web. Todas estas instrucciones son igualmente
válidas para la creación de formularios de cualquier otro tipo, como envío de correos, etc. A
ver si consigo explicarlo bien y te gusta como ha quedado.
Crear un Formulario
Realmente los formularios se hacen con lenguaje Html. El Php lo usaremos para jugar
con los datos que se obtienen, pero el formulario en sí está hecho con código Html. Vamos a
ver como se construye y qué opciones tenemos para que nuestros amigos puedan enviarnos
datos o para rellenarlos nosotros mismos.
Al igual que un párrafo se define en Html colocando la etiqueta de apertura <p> y
termina con su correspondiente etiqueta de cierre </p>, los formularios empiezan y terminan
con las etiquetas Html<form> y </form>.
Dentro de la etiqueta de apertura se pueden indicar algunas cosas, pero las que nos
interesan ahora son:
action: que indica la url a la que enviar los datos del formulario, es decir, la página que tiene
las instrucciones de qué hacer con los datos obtenidos desde el formulario.
method: Puede tomar los valores get o post. Existen varias diferencias entre ambos aunque
funcionan igual. La diferencia es que usando get los datos del formulario se ven en la url de
la página siguiente y el número de valores está limitado. En cambio usando post no se ven
los valores en la dirección de la web y además no hay tal límite de valores a recopilar. Así
que, por ahora, usaremos siempre post, vale?
Con lo que acabamos de ver, un ejemplo de formulario vacio sería:
......
<form method="post" action="mostrardatosenpagina.php">
......
</form>
.......
Seguimos? Ahora que tenemos preparado el formulario vamos a ver qué tipo de
recuadros donde insertar información podemos colocar dentro. Existen varios tipos o formas
y puedes y debes elegir la que más se amolde a los datos de la tabla o base de datos,
veamos.
Campos de Datos
Como te he dicho, dentro de un formulario puedes encontrar distintas formas de pedir
los datos. Puedes pedir al visitante que indique uno o varios de entre un conjunto de valores,
que introduzca una palabra, una frase corta o incluso un buen trozo de texto, o una clave o
contraseña, y hasta archivos, claro. A continuación veremos cada uno de esos tipos. Fíjate
que todos ellos tiene un código muy similar:
<input type="tipodedato" name="nombredelcampo"
value="Escribe Aquí" size="20" maxlengh="20" />
- Empiezan con el código <input, su etiqueta.
- Están seguido de una indicacion del tipo de información que se pide, type="tipodedatos". En
lugar de tipodedatos nosotros colocaremos ahí qué tipo de datos vamos a pedir al usuario.
Lo veremos más adelante.
- Seguido del nombre de ese campo de información name="nombredelcampo", que es el
nombre que daremos a lo que el usuario escriba y que nos sirve para poder usarlo más
tarde.
- Después se indica el valor que queremos que aparezca por defecto en el formulario
value="Escribe Aquí". Si se deja en blando el cuadro o campo del formulario saldrá en
blanco, pero si escribimos dentro de las comillas de value, por ejemplo"escribe acá tu
comentario", será eso lo que aparezca escrito cuando el usuario visualice el formulario. Por
supuesto, podrá borrarlo para ecribir su comentario.
- Tamaño del recuadro donde se pide la información size="100". Es simplemente el ancho del
recuadro. Que lo escojamos pequeño no significa que el visitante no pueda escribir muchos
carácteres en él, eso viene definido por la siguiente característica,
- Longitud máxima que podemos dar a ese datos maxlegth="20", que es la máxima cantidad
de carácteres que vamos a guardar de lo que el usuario escriba. Si le ponemos 20 a
maxlength solo guardaremos los 20 primeros carácteres que escriba y al resto no le haremos
ni caso, se pierden.
Y finalmente se cierra la etiqueta del input con /> En este caso como ves no hay etiqueta de
cierre con </input> nunca. Recuérdalo.
Campos de Texto
Es el típico recuadro para insertar datos en los que cabe una línea de texto solamente.
Eso significa que si te pones a escribir dentro de ese recuadro, si le das al Enter o Intro de tu
teclado no vas a conseguir un salto de línea para seguir escribiendo más texto.
El código Html para incluir un recuadro de estos en tu página web sería como este:
<input type="text" name="nombredelcampo" value="Valor por
defecto" size="20" maxlength="20" >
El aspecto del código de arriba sería este:
No necesita mucha explicación, pero por si acaso...
La linea comienza con la etiqueta input, que indica que vamos a colocar un recuadro
para introducir datos. Luego aparecetype="text" con lo que señalamos que ese recuadro será
para introducir texto. Con name="nombredelcampo" la damos un valor a ese recuadro, que
nos servirá para poder manejar el valor introducido después. Con value="valor por
defecto"podemos indicar el valor que queremos que aparezca dentro del recuadro en cuanto
el visitante vea esa página, si es que queremos que aparezca algo. Si no, podemos dejarlo
en blanco y el campo aparecerá vacio, claro. Para terminar tenemossize="20" que indica el
tamaño o anchura del recuadro y maxlength="20" que pone un límite a la cantidad de texto
que dejaremos que el usuario escriba en el formulario y que en este caso será de 20
carácteres. No parece muy complicado, no? Je je je je.
Campos de Contraseña
Este tipo de campo es muy similar al anterior, pero en este caso indicamos
que la información a insertar va a ser una contraseña y por lo tanto queremos que
cuando el visitante la vaya escribiendo se vayan monstrando asteríscos (*) en
lugar de la contraseña real. Esto es para evitar que alguien pueda leer la
contraseña mientras que nuestro amigo visitante escribe los datos del formulario.
Su código es este otro:
<input type="password" name="nombredelcampo" value="Valor por defecto" size="20" maxlengh="20" />
Y este es su aspecto. Intenta escribir en ese recuadro y verás los asteríscos que te decía.
Personalmente me parece una chorrada como un piano de grande, je je je, pero en fin, es lo que hay. Por supuesto puedes usar un campo de texto normal si quieres lo mismo pero viendo el resultado. Como no estamos en un cajero de un banco, igual no necesitamos esos asteríscos, no? je je je.
Hey, has merendado ya? Me hace ruido la barriga! je je je. Un bocado y seguimos, oki?
Botones de Opción
Cuando quieras mostrar al visitante una lista de valores de entre los que
tiene que elegir uno solo, tienes que usar botones de opción. Dentro del código
Html que define este botón de opción tendrás que indicar cada uno de esos
valores, claro.
Es importante que recuerdes que con este tipo de formulario el visitante SOLO puede
escoger uno de los valores, es decir, es imposible activar dos o más valores. Si lo que
quieres es dar la opción de que el visitante pueda seleccionar más de una de las opciones,
tendrás que buscar otro modo, que explicaremos más adelante.
Veamos el código de un botón de opción de ejemplo para verlo más claro:
<INPUT type="radio"
name="mibotondeopcion" checked value="1">Estudiante<br />
<INPUT type="radio" name="mibotondeopcion"
value="2">Astronauta<br />
<INPUT type="radio" name="mibotondeopcion"
value="3">Médico<br />
<INPUT type="radio" name="mibotondeopcion"
value="4">Webmaster<br>
Las características de los botones de opción son las siguientes:
- Dentro de type hay que indicar "radio" que significa botón de opción (no, no es para
escuchar música...)
- Todos han de tener el mismo valor dentro de name para que el navegador sepa que todas
estas líneas corresponden a opciones de ese botón.
- checked. Esto se coloca solamente en una de las líneas, en la que tú quieras pero solo en
una, pues indica la opción que aparecerá activada por defecto. Si no lo indicas en ninguna no
aparece ninguna de esas opciones marcada de antemano. Es opcional.
- Dentro de las comillas de value indicas el valor que quieres que tenga esa opción. Puede
ser un número o el texto de esa opción. Está claro que deberian ser distintos esos valores en
cada opción.
- El texto que hay antes de <br> es el texto que aparece en el navegador Puedes escribir lo
que quieras que el visitante vea como opción, pero el valor que recogerás del formulario una
vez que se envíe será el que hay dentro de value, no este.
- Finalmente tenemos la etiqueta Html <br> que como sabes sirve para bajar una línea. La
ponemos para que no aparezcan todas las opciones pegadas una tras otra. Esto es opcional
y lo puedes hacer de cualquier otro modo, a tu gusto.
El código que te he mostrado arriba para los botones de opción mostraría esto de abajo:
Estudiante
Astronauta
Médico
Webmaster
Fíjate como la opción Estudiante aparece ya marcada por defecto. Esto es porque hemos
puesto checked en esa línea.
Casillas de Verificación
Es muy parecido a los botones de opción pero en este caso ofreces la opción de poder
seleccionar varios de los valores en lugar de solamente uno. Lo único que cambia en el
código Html es que ponemos el tipo "checkbox" dentro de type, que significa casillas de
verificación.
Y claro, como podemos tomar uno o más valores, o todos, también nos permite dejar
activadas ninguna, una o varias casillas escribiendo la palabra mágica checked en las líneas
de código correspondientes.
<input type="checkbox" name="micasilladeverificacion"
checked value="1" />Estudiante<br />
<input type="checkbox" name="micasilladeverificacion" value="2"
/>Astronauta<br />
<input type="checkbox" name="micasilladeverificacion" value="3"
/>Médico<br />
<input type="checkbox" name="micasilladeverificacion" checked
value="4" />Webmaster<br />
El código de arriba crearía unas casillas de verificación o Checkbox como estas de abajo:
Estudiante
Astronauta
Médico
Webmaster
Date cuenta en el código de arriba, que he colocado la etiqueta <br /> al final de cada línea.
Recuerdas para qué? Si, significan saltos de línea y las he colocado para que la casillas
aparezcan una en cada línea y no una tras otra en una sola línea. Solo era para recordártelo.
De nuevo puedes ver como aparecen activas ya las casillas en las que pusimos la palabra
mágina checked. Aún así, el usuario puede desactivarlas y marcar otras distintas si quiere.
Carga de Archivos
Esta seguro que os gusta pues es una pregunta que he leido muchas veces en el foro.
Ahora se responderla, je je je, así que ahí va. El botón de carga de archivos nos permite
mostrar al visitante su explorador de archivos, una ventana desde la que puede buscar los
archivos de su ordenador, seleccionar uno de ellos y mandárnoslo a nosotros o a nuestra
página a través del formulario. Mola, no?
El código para este objeto del formulario es el siguiente:
<input type="file" name="imagendemilogotipo"
accept="image/*.gif ">
donde con accept se indica el tipo (MIME) de archivo que acepta el formulario. En el
caso del ejemplo de arriba solo se aceptarian archivos de imagen del tipo gif (pues hemos
puesto *.gif). Veremos con más detalle todo esto más adelante. Por el momento nos
quedamos con la línea de código necesaria para insertar esa opción en el formulario.
Como ves, poco a poco vamos aprendiendo nuevas herramientas sorprendentes.
Podrías imaginar ya cuáles de estas herramientas usa tu foro favorito, o alguna web de
descarga e incluso algún juego online, verdad? Dominando Php y MySql podrías crear
cualquier cosa.
Listas de Datos
En esta ocasión se muestra al visitante una lista de opciones, que o bien puede ser
desplegable (cuando el visitante pulsa el icono de la flechita se despliega la lista de opciones
de entre las que puede elegir) o bien puede aparecer ya desplegada, con barra de
desplazamiento si fuera necesario.
En este caso algunas de las palabras mágicas que definen a este objeto de formulario
cambian un poco de significado. Por ejemplo size en este caso indica la cantidad de
opciones que queremos mostrar a la vez en la lista. Si ponemos valor 1 la lista será
desplegable.
Aparece una palabra mágica nueva, "multiple" que indica si se pueden o no tomar más
de una de las opciones. Si la lista es desplegable no se puede usar multiple pues una lista
desplegable no nos permite seleccionar varios valores (lo has intentado alguna vez? La lista
se cierra al hacer clic en una de las opciones y te impide escoger otra).
En las listas, si queremos indicar un valor seleccionado por defecto tenemos que usar la
palabra mágica selected, nochecked como en las casillas de verificación, pues aquí
seleccionamos, no marcamos.
Vamos a ver un ejemplo para terminar de entender todo esto, vale?
<select name="comidapreferida" size=1>
<option value="tortilla">Las tortillas</option>
<option value="paella">La paella</option>
<option value="pizza">Las pizzas</option>
</select>
Con este código de arriba obtenemos esta lista de abajo:
Las tortillas La paella Las pizzas
Como le hemos puesto en el código size=1, obtenemos una lista desplegable. Dijimos
que size indicaba la cantidad de opciones que queríamos mostrar a la vez. Si ponemos por
tanto size=2 veremos dos opciones o items (también se llama así a cada elemento en los
libros esos de listillos...) y el resto se ve desplazando la barra de desplazamiento:
Las tortillas La paella Las pizzas
Poniendo 3 se vería entera, desplegada totalmente y claro, no aparecería la barra de
desplazamiento vertical:
Las tortillas La paella Las pizzas
Recuerda que lo que ve el visitante es lo que hay justo ants de </option> mientras que
lo que tú recibes del formulario es el valor que has colocado dentro de las comillas del
value="....".
Pues ya sabes un montón sobre formularios! je je je. Ya me puedes ayudar a
responder a los compañeros del foro que tengan dudas! ja ja ja. Gracias en ese caso!
Seguimos un poco más?
Campo Multilínea
Los objetos de formularios en los que preguntamos el nombre, apellidos, etc, etc
pueden ser de una sola lína de longitud, como los que hemos visto al principio. Pero y si
queremos que el visitante nos escriba un mensaje de varias líneas? En ese caso no nos sirve
el campo de texto anterior pues al pulsar el Enter o Intro no aparece una nueva línea.
En estos casos definiremos un tipo distinto de objeto de formulario, los campos de
texto de varias líneas. Original el nombre, verdad? je je je.
En este caso en lugar de usar <input..... usarmos la palabra mágica <textarea... que
significa area de texto. Las características que le podemos indicar a un area de texto son, el
nombre del objeto con name; la anchura del area donde el usuario puede escribir,con cols; la
altura de ese area con rows y la palabra mágica wrap que veremos más adelante.
Un ejemplo de area de texto de varias líneas sería este código Html:
<textarea rows="10" cols="20" wrap="soft">Texto que aparece ya
escrito de antemano</textarea>
La palabra mágica wrap puede tomar solo tres valores de los que has de elegir uno.
Presta atención porque quizá sea un poco complicado de entender (y de explicar... je je je)
Los valores que les puedes dar son:
- off: El texto escrito por el usuario lo recibes tal cuál lo ha escrito, con los saltos de línea (lo
que ocurre cuando presiona Intro o Enter) tal cuál él los dió. Si tu area de texto es más
estrecha que su frase, la frase continúa sin pasar a verse en la línea de abajo. Lo pillas?
Sigue leyendo las otras opciones y lo verás más claro.
- soft: En este caso si la frase que escribe el colega visitante es más larga que el ancho de tu
area de texto, la frase continua en la línea de debajo, aunque tú recibirás el texto tal cuál el
visitante pretendía escribirla, solamente con los saltos de línea que él pulsó, no con los saltos
que aparentemente le marca el area de texto para que todas las frases se vean dentro de la
ventana.
- hard: Y como última opción, tenemos "hard". Si escoges esta opción, el visitante se pondrá
a escribir frases más largas que el ancho del textarea y estas frases se dividirán conforme se
alcance la anchura de la ventana, pero tú recibirás el texto con los saltos de línea justo en
esos margenes, aunque el visitante no haya pulsado el Intro o Enter en su teclado para
indicar una nueva línea.
Era complicado verdad? je je. Quizás tengas que leerlo de nuevo para enterarte, no he
estado muy fino conla explicación, je je je. Te recomiendo la opción "soft" así que si no te has
enterado de mucho elije esa siempre y listo.
Campos Ocultos
Como hemos visto en CCTW, usando PHP podemos crear algunas variables en las
que almacenar algunos datos. En ocasiones nos interesa que junto con los datos del
formulario que rellena el usuario nos venga también algún dato extra que nos sea de interés.
Imagina por ejemplo que el visitante rellena el formulario y lo envía al servidor.
Podríamos guardar la IP del usuario en una variable e indicar en el formulario que nos sea
enviado el valor de esa variable (la IP) junto con el resto de los datos. Con esto sabríamos si
se han rellenado varios formularios desde la misma IP, no? Pero seguramente no queramos
que el visitante vea todo lo que intentamos captar.... habría de ser, invisible!
O imagina que el formulario es para insertar un mensaje en un foro. Un dato
interesante y necesario a guardar junto con el mensaje sería el nombre de usuario, no? Pero
estos no son datos que tenga que rellenar el visitante sino datos que podemos recopilar sin
necesidad de que el que rellena el formulario sepa nada, por eso se llaman campos ocultos.
En ejemplo de definición de un campo oculto en un formulario sería el siguiente:
<input type="hidden" name="valorocultoarescatar"
value="$variable">
Con hidden dentro de type indicamos que se trata de un objeto de formulario del tipo
oculto (el usuario no lo ve pero nos llega ese dato).
Por supuesto, como en este caso el usuario no escribe nada, el valor se lo tenemos que
indicar nosotros. En el caso del ejemplo de arriba tomará el valor que tenga la variable
$variable, que podría ser el nombre de usuario, la IP o cualquier otro dato interesante que
queramos.
Justo debajo de esta línea te dejo algunos campos ocultos como ejemplo. Cómo? Que
no los ves? Pues claro! No te he dicho que son ocultos? ja ja ja ja. Ya los veremos junto con
todo lo demás en ejemplos prácticos más tarde, oki?
Botón de Envío
Ya hemos visto todas las formas que hay de captar información a partir de un
formulario, pero de nada nos sirven esos datos si se quedan ahí, pululando por la red.
Necesitamos rescatarlos y para ello hay que añadir al formulario unos botones de envio.
Cuando el usuario pulse en ellos toda la información se pondrá en marcha.
Existen tres tipos de botón de envío y se definen indicando submit, image o button
dentro de las comillas del type en la línea de cada input (ya empezamos a hablar como
auténticos Frikis! ja ja ja).
<input type="submit"....
<input type="image"....
<input type="button"...
El botón submit se define con las palabrás mágicas name en el que le colocaremos un
nombre para identificarlo y valuedonde escribiremos la acción que se llevará a cabo al hacer
clic sobre él. Un ejemplo sería este:
<input type="submit" value="Botón de envio estandar"
name="Enviar la información al servidor" />
El botón image es similar al anterior, pero en este caso no se muestra en el navegador
un botón como en el caso anterior, sino una imagen que bien pudiera ser un botón más mono
dibujado por tí. Está claro que en este caso se usarían las palabras mágicas del submit más
algo (la ruta por ejemplo) que indique dónde está la imagen que vamos a usar como botón.
<input type="image" value="Botón de envio personalizado" name="Enviar la información al
servidor" SRC="/objetos/imagendeboton.gif" />
Dentro de las comillas de src has de indicar la ruta del archivo de la imagen que
quieres usar como botón.
El tecero de estos botones es el button. Este otro es similar al anterior, pero en este
caso no hay ninguna cosa predeterminada que se vaya a hacer cuando se pulsa sobre él.
Tenemos que indicar nosotros qué debe ocurrir cuando ese botón sea pulsado. Esto se
indica con líneas de JavaScript por ejemplo, así que por el momento no lo usaremos, que de
eso no tenemos (aún) mucha idea. Nos quedamos con los dos anteriores, oki? Que son
facilitos y suficientes para lo que queremos por el momento.
Envío de la información de un formulario
Ahora sí que tenemos el formulario completo. Bueno, tenemos lo que se ve del
formulario, pero nos falta ver qué hacemos con la información recopilada y es aquí donde
entra a jugar el lenguaje PHP que estamos aprendiendo.
Con los datos que ha rellenado nuestro amigo el visitante en el formulario podemos
hacer tres cosas. La primera y más sencilla es no hacer nada, cómo no, je je, la segunda es
mandarla a la página siguiente de nuestra web para que juegue con esos datos y la tercera
es enviarlos a una base de datos donde quedarán guardados para su uso en el futuro.
En las siguientes páginas vamos a ver los dos últimos modos y te dejo a tí el primer
modo para que lo pienses, a ver si eres capaz ;=)
Hey, te das cuenta de cuánto sabes ya? No es genial? je je je.
Formulario de ejemplo
Recuerdas la base de datos que creamos páginas atrás? Vamos a crear un formulario
en el que pediremos al visitante los datos de aquella tabla USUARIOS que habíamos creado
en el ejemplo aquél. Los campos que teníamos en esa tabla eran NOMBRE, EMAIL, URL y
ACTIVO. Teníamos un campo más llamado ESTADO. Obviamente este no será un campo a
relenar por el usuario, así que podemos establecerlo nosotros con el valor Activo y ya más
tarde si se porta mal lo ponemos como Inactivo. Este sería una buena ocasión para aplicar lo
del campo oculto, verdad? Añadiremos este campo como oculto en el formulario con el valor
de Activo entonces. Sin más rollo vamos a ver cómo pasamos todo eso a código Html.
Damos por hecho que ya tienes creada la base de datos del ejemplo que dejamos
atrás, con la tabla aquella llamada USUARIOS con los campos NOMBRE, EMAIL, URL y
ESTADO.
Para empezar escribimos las etiquetas de inicio y fin del formulario:
<form method="post" action="mostrardatosenpagina.php">
</form>
Ahora colocamos dentro los códigos Html correspondientes a cada uno de los
campos. Para NOMBRE por ejemplo, que es una cadena de texto de una sola línea,
pondremos estas líneas:
<input type="text" name="Nombre" value="Escribe tu nombre" size=30 maxlength=50 />
Si recuerdas, cuando creamos hace unas cuantas páginas la tabla USUARIOS
indicabamos en el PhpMyAdmin que el campo Nombre debía tener como máximo 50
carácteres. Lo pusimos en esta tabla, te acuerdas?
Así que en el código del formulario pondremos un maxlenght de 50. De este modo no
nos dejará escribir más que esos carácteres. Total, tampoco los tomaría la base de datos.
El valor de SIZE en cambio no varia ni recorta ese valor por largo que sea, solo indica
la anchura del recuadro del formulario, así que lo dejamos en por ejemplo 30.
<form method="post" action="mostrardatosenpagina.php">
<input type="text" name="Nombre" value="Escribe tu nombre" size=30 maxlength=50 />
</form>
Pasamos a los siguientes campos, EMAIL y URL. Son iguales que el campo NOMBRE
anterior, por lo que modificamos solamente el valor VALUE para indicar lo que queremos que
aparezca junto con el formulario en cada hueco. Quedaría así:
<form method="post" action="mostrardatosenpagina.php">
<input type="text" name="NOMBRE" value="Escribe tu nombre" size=30 maxlength=50 />
<input type="text" name="EMAIL" value="tuemail@correcto" size=30 maxlength=50 />
<input type="text" name="URL" value="http://www.tudirecciondepagina.web" size=30
maxlength=50 />
</form>
Nos falta solo el campo oculto en cuyo código ponemos ya que tenga el valor ACTIVO,
quedando así el código hasta ahora:
<form method="POST" ACTION="mostrardatosenpagina.php">
<input type="text" name="NOMBRE" value="Escribe tu nombre" size=30 maxlength=50 />
<input type="text" name="EMAIL" value="tuemail@correcto" size=30 maxlength=50 />
<input type="text" name="URL" value="http://www.tudirecciondepagina.web" size=30
maxlength=50 />
<input type="hidden" name="ESTADO" value="Activo" />
</form>
El aspecto del formulario sería este:
Y si queremos que aparezcan esos recuadros uno bajo el otro podremos una etiqueta
<br /> que indica salto de línea, al final de cada línea de INPUT, quedando así:
Hey! Le faltan los botones aún! je je. Veamos, con las líneas de código del botón de
envío quedaría así:
<form method="POST" action="mostrardatosenpagina.php">
<input type="TEXT" name="NOMBRE" value="Escribe tu nombre" size=30
maxlength=50><br />
<input type="TEXT" name="EMAIL" value="tuemail@correcto" size=30
maxlength=50><br />
<input type="TEXT" name="URL" value="http://www.tudirecciondepagina.web" size=30
maxlength=50><br />
<input type="HIDDEN" name="ESTADO" value="Activo">
<input type="SUBMIT" value="Botón de envio estandar" name="Enviar la información al
servidor"><br />
</form>
Y el aspecto sería este:
Bonito verdad? Je je je. Ya sabes que con imaginación, gusto y..... y la hoja de estilos!
puedes dar un aspecto mucho mejor al formulario.
Uso de la información del formulario en otras
páginas de la we
Botón de envio estandar
Qué hace realmente este formulario cuando se pulsa el botón de envío? Te lo cuento
paso a paso, oki? Tras pulsar el botón, los tres valores o mejor dicho, los cuatro valores
(también tenemos el valor oculto!) se quedan guardados en una variable del tipo cadena.
Un tipo cadena significa que esos cuatro valores se quedan guardados "en cadena", es
decir, uno detrás de otro. La variable que los guarda mantiene esos datos así:
NOMBRE, Escribe tu nombre,
EMAIL, tuemail@correcto,
URL, http://www.tudirecciondepagina.web,
ESTADO, Activo
Como ves, están en cadena. Se queda guardado el nombre (NAME) del botón junto
con el valor que se haya escrito en el formulario. Verás también como se ha guardado el
campo oculto, con su nombre ESTADO y el valor que hemos puesto predeterminado en el
código del formulario, Activo.
Para recuperar esa información o mejor, para imprimirla en la ventana del navegador
tenemos que hacer un echo, como siempre, y llamar a la variable que contiene esos datos
con la siguiente línea de código Php:
<?php
echo $_POST[NAME];
?>
donde en lugar de NAME tenemos que colocar el nombre de ese campo, como por
ejemplo, NOMBRE, ESTADO, URL o EMAIL. Por ejemplo, para el código Php de arriba se
mostraría en la ventana del navegador esto:
Francisco Gonzalez
suponiendo claro que se escribió ese nombre en el formulario antes de pulsar el boton
de envío.
Si en lugar de haber puesto el valor POST en la primera línea del código del
formulario, hubieramos escrito GET (te dije que podiamos usar cualquiera de los dos,
recuerdas?) los datos del formulario se habrían guardado no en la variable POST sino en la
variable GET, por lo que para imprimir los datos del formulario tendríamos que haber escrito
este otro código Php:
<?php
echo $_GET[NAME];
?>
Además de eso, el usuario vería en la dirección de la página de destino no solo la
información que escribió, sino también los valores de campos ocultos y eso a veces no es
deseable, no? El formulario siguiente es igual que el anterior pero con GET en lugar de
POST. Pulsa el botón de envío y verás esa información al final de la dirección que muestra tu
navegador.
Y como te decía al principio de estas lecciones, como los navegadores normalmente
no son capaces de leer una dirección o URL demasiado larga, si los datos son muchos o muy
largos el navegador no podrá leer los ultimos datos y perderías información del formulario.
Así que, por el momento seguiremos usando POST en lugar de GET y tan contentos.
Al pulsar sobre los botones de envío de estos ejemplos anteriores, se te dirije a una
pagina escrita en Php cuyo único contenido es este:
<?php
echo "Hey, que esto aún no está terminado!" ;
echo $_POST[ESTADO] ;
?>
De forma que se ve en el navegador el mensaje "Hey, que esto aún no está
terminado!" seguido de lo que vale la variable ESTADO, es decir, Activo.
Esta página se llama mostrardatosenpagina.php y es la que aparece en la primera
línea del código Php de estos formularios de ejemplo. Osea, que la página que pongamos allí
será la que reciba los datos del formulario. Que hacer con esos datos ya es otro cantar,
verdad? En este ejemplo lo que hemos hecho con los datos del formulario ha sido
simplemente mostrar en pantalla el valor del campo oculto ESTADO. Más adelante en lugar
de esa tontería lo que aprenderemos es a guardar todos ellos en una base de datos.
Botón de envio estandar
Guardar la información de formulario en una base de
datos
Antes vimos cómo aprovechar la información del formulario para imprimir alguno de
sus datos en una página web. Ahora lo que vamos a aprender es a que tras pulsar el botón
de envío, todos esos datos queden guardados en una base de datos que tendremos ya
creada y preparada para recibir esa información.
El formulario va a ser el mismo que antes, sin cambiarle nada. La novedad en este
caso será el indicar al servidor que guarde los valores de la variable POST en nuestra base
de datos de ejemplo, la que vimos al principio.
Bueno sí cambia una cosilla, el nombre del archivo php de la primera línea del código
del formulario. Antes era la página mostrardatosenpagina.php y contenía instrucciones para
mostrar una frase y el valor del campo oculto mientras que ahora será otro archivo distinto
llamado por ejemplo insertardatosentabla.php y que será el que vamos a crear ahora y que
contiene las instrucciones para que el servidor guarde los datos del formulario recibidos a
través del POST, en la tabla USUARIOS de nuestra querida base de datos.
Y a estas alturas siento decirte que.... ya no eres normal. Ahora empiezas a ser
todo un friki programador, de esos que no hay quien los entienda, ja ja ja ja. Es
broma!! Solo tú te libras! ja ja ja ja. Hey, qué tal un paseito (no virtual, que te veo
venir!) para mover el esqueleto antes de continuar?
Jugando con los Datos
Para poder jugar con la información de una base de datos es imprescindible primero
conectar con ella. Con jugar con la información me refiero a mostrar, insertar, crear, modificar
o eliminar datos. Nosotros tenemos ya preparados los datos en la variable post que vimos,
pero antes de insertar esos datos en la base de datos necesitamos conectar con ella.
Los datos de conexión los tenemos ya y si me has hecho caso, los tendrás a mano escritos
en algún papelito por tu mesa. Si no es así, te los recuerdo:
Nombre de la base de datos: cartago_basedepruebas
Nombre de usuario de la base de datos: cartago_pepe
Contraseña: noteladigo
Host: localhost
En tu caso, en lugar de cartago tendrás que poner tu nombre de usuario del Cpanel tal
y como te dije, además de tu propia contraseña, claro.
Lás líneas de código Php que has de poner para abrir la conexión con esa base de
datos son estas (en adelante coloreo de gris aquellas líneas que no son más que
comentarios aclaratorios, oki? Para distinguirlo del resto de código php):
<?php
// Rellena los espacios ente comillas de abajo con los datos que te da
// el servidor al activar la base de datos.
// Este dato de abajo suele ser localhost casi siempre:
$server="localhost";
// Aqui abajo escribe el nombre de la base de datos.
// Si tu servidor tiene cpanel normalmente va primero tu nombre de username,
// por ejemplo: username_nombredelabasededatos
$database = "cartago_basedepruebas";
// Aqui abajo el nombre de username de la base de datos para acceder a ella.
$db_user = "cartago_pepito";
// Y ahora la contraseña:
$db_pass = "servicio23";
?>
Las líneas de código realmente importantes son solo las que no llevan el símbolo //
delante, pues esas son simples comentarios que si quieres puedes mantener (te lo
recomiendo) para recordar para que sirve cada una de ellas. Realmente son solo cuatro las
lineas importantes y en ellas se guardan en variables los datos de conexión.
Podrías pensar que es un poco arriesgado dejar guardados los datos de la base de
datos, con la contraseña y todo, en un archivo colgado en internet, pero como es código Php
no hay riesgo alguno. Por qué?
Si recuerdas lo que te comentaba al principio de hablarte del Php, es un código que
solo lee el servidor de forma que, como no tenemos ningún echo en estas líneas, el resultado
de todo este código en un navegador será nada, cero, ninguno. Esos datos son leidos por el
servidor, pero es imposible que cualquier usuario pueda leerlos, así que tranquilo.
Para no tener que escribir esas líneas cada vez que queramos abrir la conexión a la
base de datos lo que haremos es guardar todo ese código en un archivo que llamaremos
config.php y al que llamaremos cada vez que queramos abrir la base de datos (ya te digo
cómo).
Abre por tanto tu block de notas, escribe todo ese código dentro, cambia los valores
por los tuyos (la contraseña y la palabra cartago por tu nombre de usuario en el Cpanel) y
guarda el archivo con la extensión .php en la raiz de la carpeta en la que estés haciendo este
ejemplo, vale? Ahora crea otro archivo más, también con extensión .php
llamadoinsertardatosentabla.php
Como ese archivo es Php puedes ya escribir sus etiquetas de apertura y cierre. Ya
dijimos que las páginas Html empezaban con la etiqueta <html> y terminaban con </html> y
que en cambio los archivos Php empezaban con <?php y terminaban con ?> así que escribe
eso dentro y guarda los cambios.
En este archivo llamado insertardatosentabla.php escribiremos el código Php
necesario para incluir los datos guardados en la variable post dentro de la base de datos de
ejemplo. Como adivinarás, lo primero es conectar con la base de datos.
Para ello deberíamos escribir el código Php que habíamos guardado en el archivo
config.php pero como lo tenemos en aquél archivo, basta con indicar que añada todo su
contenido en esta otra página. Esto se hace muy rapidamente usando la palabra mágica
include tal y como te muestro abajo:
<?php include("config.php") ; ?>
Con esto el servidor leerá el contenido de config.php cuando vea la línea del include
y de este modo nos ahorramos escribir ese código cada dos por tres. Una vez que lo ha leido
ya conoce las claves para la conexión. Ahora le indicamos que conecte con estas otras
líneas:
<?php
// leer datos de usuario y contraseña de la base de datos
include("config.php") ;
// Conexión con el servidor
mysql_connect($server, $db_user, $db_pass) or die ("error1".mysql_error());
// Selección de Base de Datos
mysql_select_db($database) or die ("error2".mysql_error());
?>
Los comentarios (las he diferenciado con otro tono de color arriba), es decir, las líneas
que empiezan por // hablan por si solas, no? La primera nueva línea conecta con el servidor y
la segunda con la base de datos.
Si por algún motivo falla la conexión con el servidor, se mostrará en el navegador el
mensaje "error1" y se deberá seguramente a haber puesto mal el nombre del servidor, de
usuario o la contraseña en el archivo config.php
Si lo que falla es la selección de la base de datos, aparecerá en la pantalla "error2" y
será seguramente por haber escrito mal el nombre de la base de datos en el archivo
config.php
Si no aparece ninguno de esos mensajes será que todo ha ido como esperabamos,
aunque no lo notaremos por el momento. Lo importante será saber que la conexión está
hecha!!!
Solo nos queda indicar al servidor mediante el código Php que inserte los datos
guardados en POST en la tablaUSUARIOS. Esto se hace con esta sencilla línea de código:
mysql_query (" INSERT INTO base.tabla (nombre de los campos) values (datos
correspondientes) ");
que en nuestro caso tomaría la forma siguiente:
mysql_query ("INSERT INTO `cartago_basedepruebas`.`USUARIOS` (`NOMBRE`, `EMAIL`,
`URL`, `ESTADO`) VALUES ('$_POST[NOMBRE]', '$_POST[EMAIL]', '$_POST[URL]',
'$_POST[ESTADO]') ");
En esa línea no hay nada raro, no? Se pone el nombre de tu base de datos, un punto,
el nombre de la tabla y luego dentro del primer paréntesis el nombre de los campos y dentro
del segundo paréntesis las palabras mágicas $_POST[nombre de campo], una para cada
campo que rescatamos del formulario.
Pues con eso queda guardada la información del formulario en nuesta base de datos.
Qué tal? Te ha parecido muy complicado? Imagino que no. Quizás muy diferente a trabajar
con Html, no? Pero te aseguro que hace tres días no sabia nada de Php, bases de datos ni
de formularios y mira, aquí estoy explicándote cómo se usan, je je. Es cierto, tras unos
cuantos ejemplos y testeos se me ha quedado bien grabado en la cabeza, no es muy dificil.
Aún se pueden hacer miles de cosas con los valores guardados en la base de datos.
Solo necesitamos aprender un poco más y podremos crear nuestros propios foros, sistemas
de mensajes, de noticias, hacer más dinámicas nuestras webs dotándolas de registro de
usuarios, etc, etc, etc. Pero sigamos poco a poco, je je je.
Botón de envio estandar
Curso de JavaScript
Dedicamos esta sección al JavaScript. No te resultará nada complicado si ya conoces
un poco de Php pues ambos se escriben de un modo muy similar.
Por el momento encontrarás dos apartados en esta sección a los que puedes acceder
desde la barra naranja de arriba
En una de ellas podrás encontrar algunos Scripts hechos. Pequeños trucos para
añadir a tu página web para conseguir algunos ejemplos. No abuses de ellos pues terminan
cansando un poco a los visitantes.
En la otra sección encontrarás un curso básico de JavaScript, para que aprendas a
crear tus propias aplicaciones. Estáte atento pues voy ampliando sus contenidos poco a
poco.
Espero que sean de tu agrado. No olvides comentarnos todo lo que se te ocurra sobre
esta sección en nuestro Foro CCTW,oki? Un abrazo y ánimo!
JavaScript Básico
Mientras que el Php era un lenguaje inserto en una página web y que era interpretado
por el servidor, devolviendo éste los resultados al navegador, el Javascript es un lenguaje
que será ejecutado directamente por el navegador (no por el servidor en este caso). Eso
supone que al trabajar con Javascript liberamos de trabajo al servidor, pero dependemos de
cómo vaya el navegador a interpretar lo que queremos transmitirle.
Dicen que una vez que sabes programar con un cierto lenguaje todos los demás
resultan muy similares. Pues vamos a ver si es cierto, je je je.
Con lo dicho hasta ahora, que no es mucho, podemos adivinar que el uso de
Javascript puede tener ciertas ventajas respecto al Php y al Html que vimos en las otras
lecciones. Se me ocurren estas ventajas:
Son ejecutados por los navegadores (en el cliente) por lo que no haces trabajar a
tu servidor ni necesitas que éste sepa interpretarlo y ejecutarlo.
Permite dotar a tus web de dinamismo, frente a lo estáticas que son las páginas
en Html puro.
También quieres desventajas? je je je:
Necesitas saber Html y CSS antes de aprovecharlo a tope en tus páginas web. Un
buen javascript sin pilares robustos de Html y CSS no sirve de mucho.
Permite dotar a tus web de dinamismo, frente a lo estáticas que son las páginas
en Html puro.
Cualquier visitante puede ver el código JavaScript de tu página, pues va inserto
dentro del código Html.
Hay que tener cuidado con lo que se programa para no dejar puertas abiertas a
personas con, mala idea, que pueda colar algún código extra en tu web.
Intentaremos ponernos las pilas en temas de seguridad antes de entrar de lleno en
JavaScript, por si acaso..
Cómo se indica que va a empezar el código
JavaScript?
El código Javascript va inserto dentro de los documentos Html o páginas web al igual
que pasaba con el código Php. En aquél caso se advertía al servidor que iba a empezar el
código con las etiquetas de apertura y cierre <?php y ?>. En el caso de código Javascript
también usaremos un par de etiquetas de apertura y cierre para avisar, en este caso, al
navegador (no al servidor) que será el que como hemos dicho se encarga de ejecutar código
Javascript. Esas etiquetas son las siguientes:
<html>
<head>
</head>
<body>
<script language="javascript">
................
</script>
</body>
</html>
Así me gusta, empezar despacito y con buena letra, je je je. Por el momento no parece
complicado, verdad? Por supuesto, hay que seguir algunas reglas a la hora de escribir
código Javascript si queremos que todo funcione sin problemas. Te las cuento a
continuación.
Mostrando Mensajitos
De nuevo usando similitudes pasamos a ver cómo se consigue mostrar texto usando
JavaScript. Si recuerdas (espero que sí....) para mostrar texto en Html podíamos usar por
ejemplo la etiqueta <p> y para mostrar texto en pantalla utilizando Php usabamos el echo. Te
vas centrando? je je. Pues para conseguir que aparezcan mensajes en el navegador usando
JavaScrip tenemos el comando write, que pertenece al objeto document. Veremos más tarde
eso de comandos y sus objetos. Por el momento nos vale con saber que para estos
menesteres usaremos la palabra mágica document.write('Texto del Mensaje'); que habremos
de poner por supuesto entre las etiquetas de apertura y cierre de código JavaCript, es decir,
entre<script language="javascript"> y </script>.
Para verlo en un ejemplo veamos cuál sería el código de una pequeña página web en
la que queremos que aparezca simplemente el texto "Voy a ser un genio en JavaScript":
<html>
<head>
</head>
<body>
<script language="javascript">
document.write('Voy a ser un genio en JavaScript');
</script>
</body>
</html>
Analizamos lo que llevamos por el momento, vale? Vemos que para avisar al
navegador que ha empezado o terminado la parte de código JavaScript se han colocado las
etiquetas de apertura y cierre correspondientes, <script language="javascript"> y </script>.
Vemos que igual que ocurría con el código Php, en JavaScript también se coloca un
punto y coma al terminar cada línea de código. Recuérdalo.
El formato del document.write('Texto del Mensaje'); ya lo ves, se coloca el texto entre
comillas simples y a su vez entre paréntesis.
Es muy importante que sepas desde ya que para JavaScript una letra mayúscula y
otra minúscula son distintas, por lo que no será lo mismo WRITE que write. Escribirémos
siempre en minúsculas y así evitamos tener que recordar si a una variable por ejemplo la
habiamos nombrado con o sin mayúsculas.
Bien, ya sabemos escribir! je je je.
Y el Siguiente Paso?
Pues toca esperar a que publique nuevas lecciones, claro. Para estar informado
puedes o bien visitarnos frecuentemente y ver las novedades en el cuadrito de la portada
donde aparecen los nuevos artículos añadidos a CCTW, o bien puedessindicarte a CCTW.
Para aprender lo que es la Sindicación de Contenidos puedes leer estas notas.
Nos leemos muy pronto!
Jorgens
Scripts Prefabricados
En esta sección encontrarás un montón (poco a poco abrá más...) de cosillas que
darán un toque especial a tu página web. A veces ese toque será tan especial que dara asco
visitarla, je je je, así que mucho cuidado y no abuseis de estas cosas, pues acaban
desesperando a los visitantes.
En cualquier caso, ahí los dejo. Todo es bueno si no se abusa....
Si sabes de algún Script interesante, dínoslo en el Foro y lo incluiremos en esta
sección encantados. oki?
Un saludo y que aproveche!
Qué es un script?
Para que nos entendamos, un script podría ser una serie de líneas de código que son
leidas por el servidor (por el ordenador del hosting donde están nuestras páginas) y que
causan una serie de acciones que deseamos. Cada una de estas acciones pueden ocasionar
efectos distintos según algunas variables de modo que cada vez que se ejecuten los
resultados pueden ser distintos. Esto es básicamente lo que diferencia lo que conseguirmos
con html y lo que conseguimos con Scripts, pues en html el resultado siempre es el mismo,
mientras que como acabo de decir, usando Scripts cada vez pueden resultar cosas distintas.
Vamos a verlo con un ejemplo.
Usando Html puedo conseguir que en la página web aparezca este texto:
Hoy es 12 de febrero de 2008.
Esto se consigue con este código html:
<p>Hoy es 12 de febrero de 2008</p>
Tanto si visitas la web hoy como si la visitas cualquier otro día, el resultado es siempre
el mismo, un resultado estático (no cambia), la misma fecha, el mismo texto. No obstante,
usando Scripts podemos conseguir resultados dinámicos (que varian, pues cada día es un
resultado distnto), o lo que es lo mismo, que se muestre la fecha actual.
<?
echo date ( "h:i:s" , $fecha );
?>
Esa es la diferencia básica entre Html y Scripts.
Por su puesto, la diferencia no queda simplemente en fechas autoactualizables. Hay
cientos de acciones que podemos conseguir sisabemos cómo. En estas páginas no creo que
lo veamos todo, pero al menos aprenderás lo básico para hacer tus primeros pinitos y lo justo
para poder investigar por tu cuenta lo que no encuentres acá.
Script de efecto Nevada
Aunque el efecto original es el de una gran nevada, este script puede usarse con
cualquier símbolo e inlcuso texto. El efecto nieve se consigue con un asterisco "*", pero
puedes cambiarlo por una letra o palabra para conseguir otros efectos distintos.
Basta copiar este código justo después de la línea del <body...> para conseguir el
efecto.
<script> // numero de copos de nieve (maximo 35) var snowmax=35 // colores para la nieve.
puedes poner varios var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD") // fuente
para los copos de nieve. puedes poner varios var snowtype=new Array("Arial Black","Arial
Narrow","Times","Comic Sans MS") // coloca la letra que hara de copo, normalmente un
asterisco * var snowletter="*" // velocidad de la nieve. se recomienda entre 0.2 a 2 var
sinkspeed=0.6 // tamaño maximo para los copos de nieve var snowmaxsize=22 // tamaño
minimo para los copos de nieve var snowminsize=8 // Aqui selecciona el modo de nive. pon 1
para que la nieve caiga por todos lados // 2 para que venga de la izquierda, 3 desde la
derecha y 4 desde arriba. var snowingzone=3 // lo siguiente no se debe variar var snow=new
Array() var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var
crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var
ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var
ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var
browserok=ie5||ns6||opera function randommaker(range)
{ rand=Math.floor(range*Math.random()) return rand } function initsnow() { if (ie5 || opera)
{ marginbottom = document.body.clientHeight marginright = document.body.clientWidth } else
if (ns6) { marginbottom = window.innerHeight marginright = window.innerWidth } var
snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] =
Math.random()*15; x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1)
{snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2)
{snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3)
{snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4)
{snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left=snow[i].posx snow[i].style.top=snow[i].posy } movesnow() } function
movesnow() { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]); snow[i].style.top=snow[i].posy if
(snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-
3*lftrght[i])){ if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if
(snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if
(snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if
(snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i++)
{ document.write("<span id='s"+i+"'
style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } if (browserok)
{ window.onload=initsnow } </script>
Puedes personalizarlo un poco. Se pueden cambiar los colores, velocidad de caida, etc.
Script para página de inicio
Con este otro código podrás colocar un enlace de estos que cuando el visitante hace
clic sobre él tu página web pasará a ser su página de inicio en su navegador.
No se hasta que punto puede ser interesante. Quizás se algo pesado. ¿A tí te gusta
encontrártelo en las webs que visitas? Si la respuesta es no.... ya sabes.
Basta copiar este código donde deseas que aparezca el enlace. En el código de abajo
has de cambiar donde pone "http://tu-direccion.com" por la URL de tu página.
<a class="estilo" href
onclick="this.style.behavior='url(#default#homepage)';this.setHo
mePage('http://tu-direccion.com');" style="cursor: hand">Página
de inicio?</a>
Puedes personalizarlo un poco aprendiendo a definir las propiedades de estilo, y
colocándolas en la hoja de estilo o bien en la cabecera de la página. Este es un ejemplo:
.estilo {text-decoration:none; color:blue; background-color:plate; }
Esto es un ejemplo de lo que os saldría (Si hacéis clic seré vuestra página de Inicio, je
je):
Página de inicio?
Si tienes algún problema ya sabes que puedes contar con nosotros en el Foro. Nos leemos
allí !
Efecto Enlace Parpadeante
Nota: Funciona en iExplorer, pero no en Firefox.
Mediante este script puedes conseguir que un simple texto de enlace aparezca
parpadeante cuando pasas el cursor por encima.
Basta copiar este código justo antes de la línea </head> en cada una de las páginas
donde quieras que el enlace parpadee.
<script language=JavaScript src="parpadeante.js"
type=text/javascript></script>
Además, has de colocar en la raiz del directorio de tu web este archivo que tiene
extensión js. Para crearlo abre tu Notepad o Block de Notas de Windows, copia el código,
pégalo en ese archivo de texto y al guardarlo (directamente en la carpeta de tu web) le pones
el nombre "parpadeante.js". Puedes personalizarlo un poco, pero tendrás que investigar tu
mismo..... Se pueden cambiar los colores, velocidad, etc.
/************* **** <config> **/ startColor = "#808000"; // MouseOut
link color endColor = "#FFFFFF"; // MouseOver link color stepIn =
50; // delay when fading in stepOut = 30; // delay when fading
out /* ** set to true or false; true will ** cause all links to fade
automatically ***/ autoFade = true; /* ** set to true or false; true
will cause all CSS ** classes with "fade" in them to fade
onmouseover ***/ sloppyClass = true; /** **** </config>
**************/ /************* **** <install> ** ** **** </install>
**************/ hexa = new makearray(16); for(var i = 0; i < 10; i++)
hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
document.onmouseover = domouseover; document.onmouseout
= domouseout; startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase()); var fadeId = new
Array(); var timerID = 0; var
theElement,theTagName,theClassName,theUniqueID function
dehexize(Color){ var colorArr = new makearray(3); for (i=1; i<7; i+
+){ for (j=0; j<16; j++){ if (Color.charAt(i) == hexa[j]){ if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16; else colorArr[Math.floor((i-
1)/2)]+=eval(j); } } } return colorArr; } function domouseover()
{ if(document.all) { clearTimeout(timerID); theElement =
event.srcElement; theTagName = theElement.tagName;
theClassName = theElement.className; theUniqueID =
theElement.uniqueID; if ((theTagName == "A" && autoFade) ||
theClassName == "fade" || (sloppyClass &&
theClassName.indexOf("fade") != -1)) { //alert(theElement);
fade(startColor,endColor,theUniqueID,stepIn); timerID =
setTimeout('pulsedown()',20); } } } function pulseup()
{ if(document.all) { clearTimeout(timerID); if ((theTagName == "A"
&& autoFade) || theClassName == "fade" || (sloppyClass &&
theClassName.indexOf("fade") != -1)) { //alert(theElement);
fade(startColor,endColor,theUniqueID,stepIn); timerID =
setTimeout('pulsedown(theElement)',20); } } } function
pulsedown(theElement) { if (document.all)
{ clearTimeout(timerID); if ((theTagName == "A" && autoFade) ||
theClassName == "fade" || (sloppyClass &&
theClassName.indexOf("fade") != -1)) { //alert(theElement);
fade(endColor,startColor,theUniqueID,stepOut); timerID =
setTimeout('pulseup()',20); } } } function domouseout() { if
(document.all) { clearTimeout(timerID); var srcElement =
event.srcElement; if ((srcElement.tagName == "A" && autoFade)
|| srcElement.className == "fade" || (sloppyClass &&
srcElement.className.indexOf("fade") != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut); } }
function makearray(n) { this.length = n; for(var i = 1; i <= n; i++)
this[i] = 0; return this; } function hex(i) { if (i < 0) return "00"; else if
(i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i
%16];} function setColor(r, g, b, element) { var hr = hex(r); var hg
= hex(g); var hb = hex(b); element.style.color = "#"+hr+hg+hb; }
function fade(s,e, element,step){ var sr = s[0]; var sg = s[1]; var
sb = s[2]; var er = e[0]; var eg = e[1]; var eb = e[2]; if (fadeId[0] !=
null && fade[0] != element){ setColor(sr,sg,sb,eval(fadeId[0])); var
i = 1; while(i < fadeId.length){ clearTimeout(fadeId[i]); i++; } }
for(var i = 0; i <= step; i++) { fadeId[i+1] =
setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ "
+step+ " ) + " +er+ " * (" +i+ "/" + step+ ")),Math.floor(" +sg+ " * (( "
+step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ "
* (" +i+ "/" +step+ ")),"+element+");",i*step); } fadeId[0] =
element; }
Puedes personalizarlo un poco, pero tendrás que investigar tu mismo..... Se pueden
cambiar los colores, velocidad, etc.
El efecto es este.
Curso de jQuery
JQuery es una libreria de JavaScript que facilita el manejo de los objetos una página
web (enlaces, capas, títulos, párrafos....)y establecer ciertas acciones sobre ellos
(movimiento, ocultación, etc). Pero no te asustes, que aunque es recomendable conocer algo
de JavaScript, no es imprescindible para aprovechar estas lecciones. Para eso estoy yo aquí,
no? ;=) Si es necesario en cambio saber Html y algo de CSS.
Has necesitado alguna vez crear una función en Php para realizar algún tipo de acción
sobre algún elemento de una página web? Has deseado que el fondo cambiara de color al
colocar el ratón sobre él, que se desplace un elemento de un menú desplegable, que
aparezca un texto de repente en alguna parte de la web como por arte de magia, aplicar
efectos de atenuación a imágenes, tratar los datos de un formulario sin necesidad de
recargar la página.... Pues en cuanto conozcas un poquito de jQuery, verás como hay
disponibles un montón de funciones ya hechas, esperando a que tú las apliques en tus
páginas con tan solo llamarlas, sin necesidad de programar un montón de líneas, y lo más
importante! Con la seguridad de que producirán el mismo efecto sea cual sea el navegador
que use el visitante!!
Para seguir cómodamente este rápido y eficaz curso de jQuery, deberías conocer bien
al menos lo explicado en el curso de Html de esta web. Además, saber aplicar estilos CSS es
bastante recomendable antes de empezar este otro. No es necesario saber nada más, ni Php
ni tan siguiera JavaScript, aunque si ya lo conoces te será más fácil seguir las lecciones de
jQuery.
Ante todo, no te asustes! No estás solo. Eres capaz de aprender esto en dos patadas,
ya lo verás. Te animas? Recuerda, las dudas a la sección del foro "Curso de jQuery"!
Introdución al jQuery
Imaginas un botón capaz de hacerte la cama con solo apretarlo? Je je je. Veo que
ahora sí que te interesa esto! ja ja ja. Digamos que con JavaScript puedes definir retirar las
sabanas arrugadas, colocar la nueva, cuadrarla bien sobre la cama, meter los bordes por
debajo del colchón... Eso está muy bien pero... con jQuery nos bastará con escribir "hacer la
cama" y listo, nos importas un pepino los pasos. Esos pasos ya están definidos en un
pequeño archivo ya hecho que veremos más adelante. Esto se logra de modo tal que ya se
trate de un camastro pequeño, una cama de suite nupcial, una litera o lo que sea, el asunto
funcionará igual o, volviendo ahora a la triste realidad, la aplicación funcionará en cualquier
navegador, sin necesidad de ajustes. La cama, no te confundas, te la vas a seguir haciendo
igual que esta mañana, pero las webs las vas a hacer más profesionales y mucho más
rápido, je je je.
Ese montón de funciones ya definidas están recogidas en un archivo que ya está
hecho para que no tengas que trabajar mucho. Bastará con bajárnoslo gratuitamente del sitio
oficial. Esto nos garantiza que no contiene virus ni cosas malas, que está en perfectas
condiciones y nos asegura además disponer de la última versión.
Una vez que tenemos el archivo en nuestro poder, lo tenemos que subir a nuestro
servidor para que las páginas que allí tenemos puedan leerlo y aprendérselo. O mejor dicho,
para que los navegadores con los que los usuarios te visiten, sepan cuáles son esas
instrucciones que deben seguir cuando encuentren las ordenes dentro de tus páginas. Esto
lo haremos del mismo modo que indicábamos en la cabecera dónde estaba y cómo se
llamaba la hoja de estilos. Te acuerdas aún? Una simple línea en la cabecera de las páginas
y, listo!
En las siguientes páginas hablamos sobre ese pequeño "archivo de instrucciones" del
jQuery, oki?
Añadiendo jQuery a las Páginas de una Web
Así, como decía en la página anterior, en lugar de programar acciones que deseamos
aplicar en nuestra web (mover capa de aquí a allá, colorear enlace, hacer desaparecer
textos..), será suficiente con nombrarlas. El navegador ya sabrá qué es lo que queremos,
pues habrá leido las instrucciones de funcionamiento en ese pequeño archivo.
Para esto, para que los navegadores aprendan jQuery, colocaremos en cada una de
las páginas de nuestra web en las que vayamos a usar este tipo de funciones una línea de
código señalando dónde está y cómo se llama ese archivo. La línea sería esta:
<script type="text/javascript" src="mijquery.js"></script>
El archivo lo puedes conseguir desde esta dirección:
http://docs.jquery.com/Downloading_jQuery
Es el sitio oficial de jQuery y está en inglés, pero te será fácil encontrar el archivo. Mira
donde ponga Current Release y encontrarás un archivo llamado Release Notes (en el que
aparecen notas sobre esa versión, en inglés, y que no nos hace falta si no es para cotillear),
un enlace para descargarse la versión Minifiel del archivo y, otro para descargar el archivo
llamado Uncompressed.
Si no se te descarga de forma normal sino que simplemente ves un montón de código
raro en la página que se te abre al intentar descargar.........
...puedes copiar todo ese código y pegarlo en el notepad de windows, para guardarlo luego
con el nombre mijquery.js, de acuerdo? Y lo guardas en la carpeta en la que vayas a hacer
experimentos.
Qué archivo de jQuery elegir?
El archivo de jQuery que vamos a colocar en nuestro servidor será el Minifield.
Contiene el mismo contenido que el archivo llamado Uncompressed, pero al primero le han
quitado toda la morralla, lo que no vale para nada (comentarios, espacios en blanco, etc).
Pondremos el resumido (minifield) en el servidor para que pese menos el archivo que ha de
leer el navegador cuando nos visite. El otro está más clarito por si le queremos echar un
vistazo por dentro. Mirar directamente el comprimido se hace algo complicado.
Pero aclaro, el único que nos hace falta tener en el servidor es el comprimido (el otro
también funciona, claro, pero como decia, ocupa algo más).
Es interesante saber que ese mismo archivo lo puedes colocar también en la carpeta
de tu ordenador donde quieras hacer experimentos con jQuery. De ese modo, al abrir las
páginas de testeo desde tu web funcionarán los efectos jQuery. Es como la hoja de estilos
css. Si la eliminas de la carpeta, no se ven sus efectos, verdad?
Incluso el archivo de jQuery comprimido ocupa unos pocos kilobytes. Podrías pensar
en un principio que tus páginas van a ir mucho más lentas, pero tenemos que tener en
cuenta por un lado, que las conexiones hoy en día son bastante rápidas y no se apreciará
mucho. Por otro lado hay que tener en cuenta que ese archivo solo se lo descarga el usuario
que accede a tu web por primera vez (de forma automática, sin que se de cuenta) y que una
vez lo tiene en el caché de su ordenador no necesitará descargarlo más. Razón de más para
que no nos importe mucho el peso de ese archivo, verdad?
Nombrando al archivo jQuery
El archivo que nos bajemos (la versión resumida, Minifield) tendrá un nombre,
normalmente jquery seguido de la versión correspondiente (jquery-1.7.min.js o algo así) y
finalizado con la extensión .js
Cuando lo tengas en tu ordenador, modifica su nombre y ponle "mijquery.js" para que
coincida con la línea que te he propuesto colocar dentro del head, que era esta:
<script type="text/javascript" src="mijquery.js"></script>
Aclaro que si en lugar de descargártelo, has copiado su contenido y lo has pegado en
el block de notas, ya lo habrás guardado con el nombre que te digo y esto quizás no tenga
sentido.
De ese modo, si alguna vez encuentras una versión posterior, te bastará bajar el
nuevo archivo y ponerle de nuevo el nombre mijquery.js antes de subirlo al servidor para no
tener que modificar esa línea en cada una de tus webs. Otra opción claro, sería copiar el
contenido de la nueva versión y añadirlo en el archivo existente en el servidor, o incluso
respetar el nombre que tenga y modificar todas esas líneas en las páginas de tu web, como
tú desees. Yo, para estas lecciones preferiré nombrarlo como mijquery.js y listo.
Recuerda también tu estructura de carpetas a la hora de escribir las rutas en esa línea
que tienes que añadir en los heads. Si el archivo lo guardas en el mismo lugar que los
archivos de las páginas, la ruta será simplemente escribir el nombre de ese archivo mágico.
Si en cambio lo colocas en una carpeta llamada "comunes" (por ejemplo), la ruta ya sabes
que será otra:
<script type="text/javascript" src="comunes/mijquery.js"></script>
Una vez que todas las páginas de nuestra web contienen esa línea de acceso al
archivo mágico de jQuery, ya estarán listas para ejecutar las nuevas ordenes. Veamos
entonces ya de una vez cuáles son esas órdenes, para qué sirven y cómo se usan, oki?
Es necesario precargar el Html de la página web
La característica más importante quizás del jQuery es que permite que los elementos
de una página web cobren vida, hagan algo más que simplemente estar ahí, como cosas
estáticas, quietas, sosas, bien dándoles movimiento, giros, cambios de tono o dandoles
sensación de transparencia, etc, etc. Para esto es lógico pensar que los elementos han de
existir, han de estar ahí en la página cuando el navegador recibe las ordenes de jQuery.
Qué ocurriría si el navegador recibe la orden de mover cierta capa si ésta aún no se
ha cargado? Seguro que tendremos algun tipo de error de esos que no gustan nada a
nuestros visitantes. Ten en cuenta que el navegador, normalmente, va mostrando los
elementos conforme los va cargando, por lo que es posible que ocurra esto que os comento.
Para evitarlo podemos darle una orden antes de que empiece a actuar el jQuery.
Podemos indicar al navegador del visitante que no empiece a ejecutar el código jQuery hasta
que no haya cargado al menos el Html. En ese momento ya están todos los elementos a la
vista y no nos va a ocurrir el fallo aquél.
Para conseguir esto y, es una cosa que podríamos hacer siempre y dejarla ya en
nuestra plantilla si es que la tenemos, bastaría con añadir el siguiente código a nuestras
páginas web:
<script>
$(document).ready(function(){ ORDENES EN JQUERY });
</script>
Aún no sabemos descifrar esta línea tan rara, pero si la lees tranquilamente podrías
adivinar que indica al documento (document, la página web) que cuando esté preparada o
cargada (ready) realice lo que hay entre los corchetes { y }. Quizás sea necesario tener
mucha imaginación, je je je, pero, más o menos se adivina, no? Tómalo con un acto de fé
pues esa línea, al igual que la primera que vimos para relacionar el archivo mágico, será
siempre igual y estará o debería estar en todas las páginas de tu web en las que quieras
aplicar estos hechizos. Poco a poco te irás familiarizando con este lenguaje tan rarito, oki?
Ten fe.
Archivo Html sobre el que aplicar los ejemplos
Te muestro ahora la estructura completa de una página web sencilla (y tan sencilla,
como que no tiene nada dentro...) con el código, también sencillo (mmm...) del jQuery para
que veas dónde va el último código que te he mostrado:
<html>
<head>
<title>Ejemplo jQuery</title>
<script type="text/javascript" src="mijquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ });
</script>
</head>
<body>
Casi ná
</body>
</html>
Si copias este código en un archivo, lo llamas index, con extensión .html, y le haces
doble clic para abrirlo con tu navegador, verás un gran resultado... o quizás no tanto, aún, je
je je. Eso sí, recuerda colocar en esa misma carpeta el archivo mijquery.js del que hablamos
al principio de estas lecciones, oki?
Los siguientes pasos serán, por un lado añadir más elementos a la web. Elementos
Html me refiero, tales como párrafos, capas, listas, etc, etc. Una vez tengamos unos pocos
para aplicarles jQuery a modo de ejemplos, iremos añadiendo ordenes jQuery dentro de los
corchetes de la línea $(document).ready(function(){ }); Esas ordenes serán las que el
navegador ejecutará sobre los elementos que nosotros queramos. Sencillo, no? Pues lo es!
Separando Archivos
Aún podemos hacer una cosilla para aligerar ese archivo Html de ejemplo. Se trata de
retirar toda la parte de código jQuery, y colocarlo en un archivo aparte que podríamos llamar
funciones.jspor ejemplo. De ese modo al abrir el archivo Html con un editor (con el block de
notas por ejemplo, o Notepad), lo veríamos todo más clarito. Lo hacemos?
Para separar el código jQuery en un archivo aparte, basta con añadir una línea similar
a la que pusimos inicialmente para el archivo mágico aquél, solo que en esta ocasión
colocariamos el nombre de este segundo archivo, funciones.js.
Aprovechando ya, hacemos lo mismo para la futura hoja de estilos css, oki? Esta hoja
la vamos a llamar estilos.css y con esta última llamada el código Html anterior nos queda así:
<html>
<head>
<title>Ejemplo jQuery</title>
<script type="text/javascript" src="mijquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<link type="text/css" href="estilos.css" media="all" rel="stylesheet" />
</head>
<body>
Casi ná
</body>
</html>
Y el contenido de funciones.js sería, por ahora, este:
$(document).ready(function()
{
});
Crea ya también el archivo estilos.css en esa misma carpeta, sin nada de contenido
aún, es decir, vacio. Después edita con el mismo block de notas el archivo index.html para
añadirle algunos elementos básicos, un par de enlaces, por ejemplo, en puro y duro html.
<html>
<head>
<title>Ejemplo jQuery</title>
<script type="text/javascript" src="mijquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<link type="text/css" href="estilos.css" media="all" rel="stylesheet" />
</head>
<body>
<div id="contenido">
<h1>Titular de mi web</h1>
<p>Este es el primer párrafo de mi <a href="#">web</a>. Espero que me apliquen un
montón de trucos estos webmasters del universo</p>
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<ul>
<li>Item Uno</li>
<li>Item Dos</li>
</ul>
<li>Cuarto</li>
</ul>
<p>Se acabó el contenido por el momento. <a href="#">Adios!</a></p>
</div>
</body>
</html>
Espero que ya te leyeras el curso de Html y el curso de CSS. Si no lo hiciste aún estás
a tiempo, pues acá no voy a poder deternerme en detalle sobre esos códigos. Solo te llevará
unas muy poquitas horas y verás estas lecciones mucho más claras. En cualquier caso,
como ves (como deberías ver....) es una página web bien sencillita.
En la cabecera aparecen las tres líneas que llaman respectivamente al archivo mágico
que contiene las definiciones que usaremos durante el curso, al archivo funciones.js donde
insertaremos lo que queremos que hagan los elementos de la web y, la famosa hoja de
estilos, con la que daremos un toque de color a todo esto.
Posteriormente, ya en el body del archivo, nos encontramos con una capa que lo
engloba todo. Un titular h1, un párrafo inicial de introdución, una lista multiple (una lista con
otra lista dentro, para hacer subniveles) y un último párrafo de despedida.
Tanto en el primero como en el último párrafo hemos colocado algún enlace. Nos
servirán para los experimentos que vamos a realizar a continuación y con los que vamos a
aprender y comprender mejor el uso del jQuery.
El primer Ejemplo con jQuery
Llevamos unas pocas páginas y aun no le hemos visto el sentido a esto, je je je.
Vamos allá.
Te contaba al principio que jQuery disponde de acciones ya definidas y que se pueden
aplicar a los elementos de la página web. Veamos para empezar cómo aplicar algo sobre..
los enlaces.
Para ello editamos el archivo funciones.js y añadimos un par de líneas hasta dejarlo
así:
$(document).ready(function()
{
$("a").click(function(evento)
{
alert("Has pulsado el enlace");
});
});
Creo que es importante aclararse un poco con tanto paréntesis, corchetes, puntos y
comas, etc, etc. Se que dan mucho miedo, pero seguro que tras la explicación se lo vamos a
perder bastante.
La primera línea de todas es la que vimos al principio, y que habíamos decidido
colocar siempre para evitar que una acción se pusiera en marcha antes de que se cargaran
los elementos a los que se les habría que aplicar esa acción o acciones.
Empieza por el símbolo del dolar $. Podríamos decir que el símbolo dolar se usa para
seleccionar lo que aparece dentro de su paréntesis. Por tanto, si vemos $(document)
sabremos que se ha seleccionado el documento para aplicale algo, lo que viene después. Se
entiende? Si quisiera seleccionar un refresco, escribiría $(refresco) y seguidamente le
aplicaría algo, seguramente, bebérmelo! De modo que tenemos el documento seleccionado.
El documento será siempre la página web en sí o, más bien, su código Html. Si te das
cuenta, tras el dolar se abre el paréntesis, se coloca lo que queremos seleccionar e
inmediatamente después se cierra ese paréntesis que teníamos abierto. Ya no hay más
paréntesis que cerrar a menos que abramos otros. Esto nos obliga un poco a estar alerta, de
modo que siempre que abramos un paréntesis, corchete o comillas, tendremos que recordar
cerrarla, colocar su pareja, o se nos escapará lo que queremos encerrar y tendremos errores
algo complicados de encontrar después. De acuerdo?
Tras cerrar los paréntesis de ese dolar nos encontramos con un punto. Esto no tiene
mucho que explicar. Por el momento nos quedamos con que tras cerrar el paréntesis de un
dolar, colocamos un punto antes de indicar la acción a realizar.
Ready es eso, la acción a realizar. Podría haber sido cualquiera de las demás funciones que
tenemos disponible pero en este caso es esa, ready. Como decía antes, lo que hace es
esperar a que el documento se haya cargado completamente y cuando eso ocurra se
ejecutará el código que aparece entre los corchetes que tiene a continuación { }.
Detalles del Ejemplo jQuery
Si llevamos la cuenta sabremos que no tenemos ningún paréntesis ni corchete
pendiente de cerrar. Se abrió uno tras el dolar, pero ya se cerró, de modo que estamos a
cero. Pero después de la palabra ready hemos abierto uno y tendremos que cerrarlo en
algún momento.
Dentro de los paréntesis de ready, encontramos la palabra function que además abre
y cierra sus paréntesis sin nada dentro. Eso significa que aún debemos cerrar alguna vez el
paréntesis delready, correcto? Acabamos de ver uno de cierre, pero corresponde al que abrió
la palabra function.
Y seguidamente nos encontramos con un corchete de apertura {. Tenemos pendiente
por tanto cerrar un parentesis y luego un corchete. Esto es un rollo, pero si lo entiendes no
tendrás que analizar tanto. Pero como no se cuál es tu nivel, prefiero remarcarlo un poco.
Más adelante no te daré tanto la bara, je je je.
Entre los corchetes encontramos otra selección de elemento. En este caso se usa el
dolar para seleccionar "a". Y qué es a? Cómo? Que no lo sabes? mmm... Claro! es la
etiqueta que se usa para colocar enlaces en Html! Bien por tí! De modo que estamos
seleccionando los enlaces. Tras esa selección, que como ves ha cerrado su paréntesis como
debe ser, encontramos el punto y el método click. Podríamos decir con lo que llevamos visto,
que (tras cargarse todo el Html de la página), en todos los enlaces (que tienen la etiqueta
<a>) si hacemos click sobre ellos, ocurrirá lo que se defina entre los corchetes que le siguen
a ese trozo de código tan raro.
Y qué es lo que tenemos entre los corchetes? Tenemos la línea siguiente:
alert("Has pulsado el enlace");
Esa línea es lo que queremos que pase cuando se haga clic en un enlace, correcto?
Alert lo que hace es mostrar una ventanita de aviso en el navegador, indicando el texto que
escribamos entre sus paréntesis y entre dobles comillas.
Aunque para este primer ejemplo solo vamos a querer que se ejecute esa sentencia u
orden, podríamos poner un montón más. Cada una de esas ordenes o sentencias hay que
terminarla con un punto y coma, para no mezclarlas, oki?
Pues colocado ese punto y coma, solo nos queda pendiente colocar el corchete de
cierre que llevábamos pendiente, el paréntesis de cierre del ready y para terminar, otro punto
y coma.
$(document).ready(function()
{
$("a").click(function(evento)
{
alert("Ha sido todo un éxito!");
});
});
No te preocupes por tantos símbolos. En cuanto tengamos unos cuantos ejemplos
hechos verás como te vas familiarizando con esta forma de escribir. Si todo ha salido bien,
escribimos eso en el archivo funciones.js, lo guardamos y hacemos doble clic en (o
recargamos si tenemos abierto) el index.html, debería aparecer la misma web sencilla de
antes, pero....
Pero ahora, si hacemos un clic sobre cualquiera de los dos enlaces existentes, nos
aparecerá esa ventana mágica con el texto "Ha sido todo un éxito!". Te salió! guau! Te
saliste!! je je je.
Te das cuenta? con un par de líneas de código (bien raro, eso si es verdad) hemos
conseguido algo que con Html y Css solamente nos habría costado horrores! Por no hablar
del ahorro de tiempo diseñando y dando estilos a la ventanita que aparece, que ya está
hecha y terminada! O el trabajo que nos habría costado colocar en ella el botoncito de
Aceptar, etc, etc.
Si si, se que es mucho rollo para este resultado tan tan pobretón, je je je, pero es la
base para entender esta nueva tecnología. Cuando dominemos un poco más, podrás hacer
cualquier cosa que se te ocurra con tu página web en cuanto a movimientos, carga de
formularios y un sin fin de cosas, ya lo verás.
Tras pulsar el botón de esa nueva ventanita se vuelve a ver la misma página de la que
partíamos. Sabes ya por qué? Normal, porque en la ruta del archivo o mejor dicho, entre las
comillas donde se escribe la ruta, hemos escrito una almohadilla "#". Eso es como anular el
enlace, no te dirige a ninguna parte.
Personalizando la ventana y añadiendo enlaces
Para darle un poco más de sentido, vamos a ponerle la dirección de una gran web y
veamos qué ocurre. Dejemos el código Html de este otro modo modificando tan solo el
enlace de abajo en el archivo index.html:
<p>Se acabó el contenido por el momento. <a href="http://www.comocreartuweb.com">
Visita ComoCrearTuWeb!</a></p>
También vamos a modificar esta otra línea del archivo funciones.js:
$(document).ready(function()
{
$("a").click(function(evento)
{
alert("Te diriges a una gran página, CCTW!");
});
});
Adivinas qué va a pasar ahora? Si guardas el archivo index.html tras esa modificación,
lo vuelves a ejecutar y haces clic en ese enlace, aparecerá la ventana pero ahora con el
mensaje "Te diriges a una gran página, CCTW!". Además, tras aceptar, el navegador se
dirigirá a ComoCrearTuWeb, no es así? Va teniendo más utilidad, no? Pero esto no es nada,
claro. Sigamos haciendo experimentos con el jQuery.
Este cambio que hemos realizado nos hace darnos cuenta de algo. Si hacemos clic en
el enlace de arriba, también nos aparece ahora la misma ventana (eso si, no nos dirige a
CCTW pues no le hemos puesto ruta ninguna). En principio, parece un fallo el no poder
definir ese comportamiento tan solo al enlace de abajo, no? Si la web tuviera decenas de
enlaces... ocuriría lo mismo en todos ellos, que rollo, no es lo que queremos. Y entonces?
Limitar la acción de jQuery a clases de elementos
Trabajando con jQuery podemos definir acciones a solo determinados elementos. La
forma de hacerlo es muy similar a lo que hacíamos con los estilos CSS (ves como hay que
leer esa parte antes?), cuando definíamos un estilo para solamente una clase determinada
de elementos.
<a class="enlacesuperior" href="#">Enlace Uno</a>
<a class="enlacemedio" href="#">Enlace Uno</a>
<a class="enlaceinferior" href="#">Enlace Uno</a>
o bien con el id famoso:
<a id="enlacesuperior" href="#">Enlace Uno</a>
<a id="enlacemedio" href="#">Enlace Uno</a>
<a id="enlaceinferior" href="#">Enlace Uno</a>
Pues para aplicar acciones a uno u otro elemento de la página web, no solo es muy
similar, sino que se hace exáctamente del mismo modo, aprovechando esos tipos o clases
definidos a esos elementos.
Por ejemplo. Digamos que solo quiero aplicar la acción de la ventanita del ejemplo
anterior al enlace de abajo. Bastaría, por un lado con definirle un tipo de estilo o mejor dicho,
un identificador, a dicho enlace. Eso se hacía así:
<p>Se acabó el contenido por el momento. <a id="enlacetipocctw"
href="http://www.comocreartuweb.com">Visita ComoCrearTuWeb!</a></p>
Y por otro lado, tendríamos que indicar también en el archivo funciones.js, que la
acción va dirigida no a todos los enlaces (etiquetas a) sino tan solo al identificado como
"enlacetipocctw". Esto se logra con este codigo:
$(document).ready(function()
{
$("a#enlacetipocctw").click(function(evento)
{
alert("Te diriges a una gran página, CCTW!");
});
});
Si modificamos tal que así, la acción definida en el archivo funciones.js solo se
aplicará a los enlaces con ese tipo de estilo. Por supuesto, si en lugar de definirlo con un id,
hubieramos definido una clase de estilo, con class="enlacetipocctw" en el Html, en el archivo
funciones.js la modificación habría tenido que ser así:
$(document).ready(function()
{
$("a.enlacetipocctw").click(function(evento)
{
alert("Te diriges a una gran página, CCTW!");
});
});
es decir, con un punto en lugar de la almohadilla, tal y como se hace con los estilos CSS,
claro.
jQuery para toda una clase de estilos
Otra opción es no colocar la a de etiqueta de enlace en el código del archivo
funciones.js (en adelante, me referiré al código de ese archivo como el script, oki?) de modo
que la acción quedaría definida para todos los elementos con esa clase de estilo. Quedaría
así el "script":
$(document).ready(function()
{
$(".enlacetipocctw").click(function(evento)
{
alert("Te diriges a una gran página, CCTW!");
});
});
y en este caso, la acción no solo ocurriría para los enlaces de esa clase, sino también
a otros elementos del Html. Porque fíjate que cosa... si dejamos el script tal y como
acabamos de decir, y le colocamos esa clase también a, por ejemplo, al elemento "Item Dos",
que no es un enlace....
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<ul>
<li>Item Uno</li>
<li class="cctw">Item Dos</li>
</ul>
<li>Cuarto</li>
</ul>
también aparecería la ventana al hacer clic sobre su texto! Claro, no te envía a ninguna
página, pues no es un enlace, pero no deja de ser curioso que aparezca la ventana al hacer
clic en el, en un elemento de lista sin enlace, verdad? Curioso, si. Y algún día útil para alguna
aplicación, como veremos.
Date cuenta de una cosa más. Recuerdas que con solo cambiar la hoja de estilos CSS
podíamos modificar la apariencia completa de la página web? Pues con esto del jQuery nos
ocurre lo mismo. Una vez definidos los elementos del Html, es decir, una vez colocado el
identificador id="loquesea" o la clase con class="loquequiera" a los elementos que queramos,
con solo modificar el archivo del script (el archivo funciones.js) seremos capaces de modificar
de un plumazo las acciones que van a sufrir. Esto es porque al igual que con la hoja de estilo,
el archivo funciones.js puede (y suele) ser común para todas las páginas de la web, o al
menos, para todas aquellas en las que queramos que ocurran las acciones en él definidas.
Un segundo enlace de ejemplo en jQuery
No se qué te estarán pareciendo estas lecciones de jQuery... espero que todo esté
clarito. Si no es así avísame con un mensaje en el foro CCTW, oki? He creado una sección
dedicada al jQuery en él. E intento explicarlo mejor. En cualquier caso, creo que es sencillo.
Poco a poco se irá complicando un pelín más, pero a la vez, conforme hagamos más
ejemplos, te irás familiarizando seguro con este nuevo lenguaje y podrás ver acciones mucho
más interesantes que las que hemos visto hasta ahora.
Como ejercicio para reforzar lo aprendido, vamos a diseñar una ventana con un
mensaje distinto para el enlace de arriba, oki? En esta ocasión dirigirá al usuario al foro. Para
eso tenemos primero que colocarle la ruta al enlace en el código Html, además de colocarle
la clase "forocctw" a esa línea de código:
<p>En el <a class="forocctw" href="http://www.comocreartuweb.com/consultas">foro de
CCTW</a> espero que me expliquen un montón de trucos estos webmasters del
universo.</p>
Ahora tenemos que añadir la acción que queremos en el archivo funciones.js,
quedando el codigo del script así:
$(document).ready(function()
{
$(".cctw").click(function(evento)
{
alert("Te diriges a una gran página, CCTW!");
});
$(".forocctw").click(function(evento)
{
alert("Te diriges al foro de CCTW!");
});
});
Date cuenta de que niguna de esas dos acciones se va a realizar hasta que todo el
codigo Html se haya cargado, pues ambas acciones están entre los corchetes que recogen lo
que debe esperar a que el document (la página web) esté ready(cargada completamente).
Si quisieramos que currieran más cosas al hacer clic en uno u otro enlace, bastaría
con añadirlo entre los corchetes del script de una u otra de las acciones definidas en el
archivo funciones.js
Modificando Estilos CSS con jQuery
Con jQuery también podemos modificar los estilos de los elementos de página web.
Vamos a ver un ejemplo definiendo primero un color de fondo a la página web. Ya sabes
cómo no? Editamos la hoja de estilos llamada estilos.css y le añadimos esta línea:
body {background-color:green}
Si lo guardas y recargas la index.html, verás que el fondo se torna odiosamente verde,
je je je (ya me conocéis y sabéis que cuando Dios repartió el buen gusto yo estaba
aprendiendo Html y no pillé ni cachito! ja ja ja).
Ahora vamos a añadir una acción más al color de fondo del enlace que nos dirige al
foro. Lo haremos dentro del script, dejándolo así:
$(document).ready(function()
{
$(".cctw").click(function(evento)
{
alert("Te diriges a una gran página, CCTW!");
});
$(".forocctw").click(function(evento)
{
$(".forocctw").css({"background-color" : "red", "color" : "white" }) ;
alert("Te diriges al foro de CCTW!");
});
});
Invitamos a la fiesta a una acción más que no conocíamos llamada .css. Como ves, el
funcionamiento es más o menos como hasta ahora. Si nos fijamos en la línea que acabamos
de añadir...
$(".forocctw").css({"background-color" : "red", "color" : "white" }) ;
vemos como seleccionamos con el dolar la clase .forocctw y le aplicamos un estilo con
la palabra mágica .css seguido de los estilos que queremos aplicarle cuando se haga clic
sobre ese elemento. Los estilos se escriben entre los paréntesis de.css y a su vez entre esos
corchetes que ves. Luego, una vez dentro de los corchetes, se ponen entre comillas las
propiedades a cambiar o añadir y sus valores separados por dos puntos y también entre
comillas. Esto es una auténtica pesadez, pero no fui yo quien invento esto! ja ja ja. Es
cuestión de hacerse una chuletilla, apuntarlo en alguna parte para acordarse del modo
correcto de escribir cada cosa.
Y cuál es la acción que esperamos con esto? Pues que tras hacer clic sobre ese
enlace (no sobre el otro, claro) el fondo del vínculo se volverá rojo y el color del texto del
enlace blanco. Haz la prueba y lo verás. Esto es una chorrada como un piano de grande,
pero nos sirve muy bien para ver de lo que es capaz jQuery (y nosotros!).
Efectos jQuery en otros elementos
Además, el cambio de estilo puede ordenarse no solo sobre el elemento sobre el que
producimos el clic, sino sobre cualquier elemento de la web. Si por ejemplo, añadimos esta
línea en el script del enlace de abajo:
$(document).ready(function() {
$(".cctw").click(function(evento)
{
$("body").css("background-color","yellow");
alert("Te diriges a una gran página, CCTW!");
});
$(".forocctw").click(function(evento)
{
$(".forocctw").css({"background-color" : "red", "color" : "white" }) ;
alert("Te diriges al foro de CCTW!");
});
});
el resultado que obtenemos es que (fíjate, sin tocar para nada el index.html) al hacer clic
sobre el enlace, el fondo de la página, del body concretamente, se vuelve amarillo. Esa
nueva línea de código está clara, no? Es igual que la anterior. con el dolar seleccionamos el
body y le aplicamos el estilo de color de fondo amarillo aprovechando la palabra mágica .css
¿No es genial?
Podrías definir por ejemplo, una clase de estilo a cada uno de los <li> de la lista, y
asignar un color de fondo de página según se pulsara sobre uno u otro elemento de esa lista.
Genial, no? No? Cierto, no es gran cosa, tienes razón. Pero seguro que tu imaginación
comienza a despertar y ya piensas en buenas aplicaciones que puedes contarnos en el gran
foro de CCTW, verdad? Je je je.
Otros efectos que se pueden conseguir conjQuery
Quieres ver ahora algo de movimiento? Sonries? ja ja ja. Ya verás qué divertido es
esto. Mucho más que los estilos CSS, y mira que me dejaron alucinando cuando los conocí.
Esto es una verdadera pasada. Vamos a ver por último como hacer un fade out al body, es
decir, a todo lo que contiene el body que es... todo. Un fade out, para el que no lo sepa, es
una transición de un estado a otro, que disminuye poco a poco en el tiempo. En nuestro caso
con la palabra mágica fadeout haremos que el contenido desaparezca poco a poco. Basta,
para que veas lo sencillo que es hacer estos cambios, con añadir esta nueva línea al script
de, por ejemplo, el link del foro:
$(document).ready(function()
{
$(".cctw").click(function(evento)
{
$("body").css("background-color","ffff00");
alert("Te diriges a una gran página, CCTW!");
});
$(".forocctw").click(function(evento)
{
$('body').fadeOut(3000);
$(".forocctw").css({"background-color" : "red", "color" : "white" }) ;
alert("Te diriges al foro de CCTW!");
});
});
Si guardas el archivo funciones.js y recargas la index.html, verás que tras pulsar sobre
el botón de aceptar de la ventanita, el texto de la página desaparece. Magia de nuevo! y con
tan solo poner una línea más!
No voy a explicar ahora cómo se define ese fade out, oki? Creo que a estas alturas,
con estos ejemplos, ya podemos pasar a definir cada uno de los estados para los que
podemos definir acciones y, a ver todos esos tipos de acciones posibles uno por uno.
Algunos los verás tontos, pero te aseguro que después de conocerlos todos podrás
plantearte hacerte un menú desplegable con cantidad de efectos, con pocas líneas de código
y, válido para todos los navegadores, que no es poco. Por supuesto además de menús
desplegables, existen otras muchas aplicaciones que tienen que ver con formularios y con
cientos de cosas más. Poco a poco, eh? Si te fijas en las poquitas líneas que tienen la hoja
de estilos, el archivo funciones.js e incluso el index.html te darás cuenta de cuánto podemos
estropear una página..... ups perdón, de cuántas cosas podemos hacer en una web con muy
muy poco trabajo.
Si te gustó, si encontraste algo que quieres que expliquemos mejor, o sencillamente
para saludarnos, no dejes de visitar nuestro foro CCTW, en la sección "Curso de jQuery".
Hasta ahora solo he querido mostraros un poquito de lo que podemos hacer con jQuery, para
que veais cómo funciona, como se escribe y tal. En la siguiente sección vamos a ver todas
las opciones que nos permite el jQuery uno por uno y con más detalle.
Hasta dentro de muy poco!!