Está en la página 1de 9

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?

Formulario de ejemplo Recuerdas la base de datos que creamos páginas atrás? Vamos a crear un

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:

 

tuemail@correcto

http://www.tudirecciondepagina.w

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í:

 
 

Escribe tu nombre

 

tuemail@correcto

http://www.tudirecciondepagina.w

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:

Escribe tu nombre

 

tuemail@correcto

 

http://www.tudirecciondepagina.w

 

Botón de envio estandar

 

Bonito verdad? Je je je. Ya sabes que con imaginación, gusto y estilos! puedes dar un aspecto mucho mejor al formulario.

.....

y la hoja de

Uso de la información del formulario en otras páginas de la web

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.

 

Escribe tu nombre

   

tuemail@correcto

 

http://www.tudirecciondepagina.w

 

Botón de envio estandar

 

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.

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.

datos son muchos o muy largos el navegador no podrá leer los ultimos datos y perderías

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 llamado insertardatosentabla.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 tabla USUARIOS. 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.

Escribe tu nombre

tuemail@correcto

http://www.tudirecciondepagina.w

Botón de envio estandar