Customización de nuestra primera web 2.0. Crearemos el libro de visitas (guestbook) del blog.

Bien, habíamos dicho en el post anterior que comenzaríamos a crear nuestra primer web 2.0. en otras palabras, nos habíamos propuesto diseñar y programar un blog.

En un blog, el autor del blog publica un post (entrada) y luego recibe los comentarios de los visitantes. Así es al menos en la mayoría de los casos.
Entonces tendremos que comenzar programando eso: el libro de visitas y el sistema que le permite al autor del blog publicar la entrada. Podríamos comenzar con cualquiera de los dos, pero creo que es más conveniente que comencemos con el libro de visitas.

Libro de visitas

Para programar un libro de visitas necesitamos un formulario en donde los visitantes puedan introducir el comentario y enviarlo. Este formulario lo podemos hacer con html, pero lo que sí vamos a hacer en php es un programa que capture los datos del formulario que envió el visitante y los introduzca en una base de datos. De esta manera, cada comentario se almacenará y luego con otro programa en php mostraremos esos comentarios.

Creando el formulario.

Un formulario en html se crea con las etiquetas <form> y </form>. Una etiqueta en html tiene atributos, que pueden ser de varios tipos. Uno de estos tipos de atributo es el atributo requerido. Es decir que cuando una etiqueta tiene un atributo requerido, debemos declararlo (decirlo). La etiqueta form tiene el atributo obligatorio action. Este atributo indica hacia dónde debe enviarse el formulario. Por ejemplo, si allí colocamos una dirección de correo electrónico, el formulario se enviará al mail ingresado. Nosotros por supuesto lo que haremos es colocar en el action una página php que contiene el programa que tomará la información y la meterá en la base de datos.

entonces:

<form action="guestbookprocess.php">
</form>

Nótese que para definir el atributo se coloca el signo igual y la definición entre doble comillas.
Ahora bien, hasta ahora el formulario está vacío. Para agregar campos en el formulario (los campos son esos espacios donde podemos llenar el formulario) debemos utilizar la etiqueta input

<input type="text" />

Nótese que esta etiqueta no tiene cierre. Es decir, termina así: /> y no así: </input>.

También puedes notar que he definido el atributo type. Éste es el tipo de campo. Text crea un campo para escribir texto. Si hubiese escrito checkbox me crearía un cuadrado para checkear (por ejemplo cuando debes decir en un formulario si estás de acuerdo con los términos y condiciones), etc.

Ahora vamos a agregar otro atributo que es el name. Esto es, cómo vamos a identificar al campo para que luego el programa php sepa de qué campo viene la información.

<input type="text" name="nombre"/>
<input type="text" name="correo"/>


Hemos entonces creado dos campos de texto, el primero lo llamaremos name y aquí escribirá el visitante su nombre y el segundo lo llamaremos correo y aquí el visitante escribirá su correo.


Entonces nos queda algo así:

<form action="guestbookprocess.php">
<input type="text" name="nombre"/>
<input type="text" name="correo"/>
</form>

Ahora vamos a colocar el campo para que el visitante pueda realizar los comentarios. El imput type text muestra un cuadro de texto donde se puede escribir una sóla línea y nosotros necesitamos en los comentarios que se pueda escribir varias líneas, entonces necesitamos la etiqueta <textarea>

Textarea crea un área de texto, tal como el nombre lo indica, donde el visitante puede escribir a gusto.
Entonces, abrimos y cerramos el textarea, y como la etiqueta tiene los atributos cols y rows como requerido, debemos especificarlos. rows significa filas y nos define el largo del textarea y cols significa columna y nos define el ancho. Así que crearemos un textarea con un largo de 7 filas y un ancho columnar de 50.

<textarea rows="7" cols="50"></textarea>

entre las etiquetas no escribimos nada, porque queremos que quede en blanco el campo.
Por último nos falta crear el botón para enviar el formulario. Dicho botón es un input type submit

<input type="submit" />

No definimos un name porque tenemos un sólo botón. Si tuviésemos varios y no definiésemos un nombre, al presionar uno es como si presionásemos todos. En ese caso cada botón debería tener su name. Por esta misma razón le pusimos name a los campos, para poder identificar a cada uno y poder tomar la información de quien queramos y no recibir información sin saber de qué campo ha venido.

El formulario entonces nos ha quedado así:

<form action="guestbookprocess.php">

<input type="text" name="nombre"/>

<input type="text" name="correo"/>

<textarea rows="7" cols="50"></textarea>

<input type="submit" />

</form>

Veámos lo que teníamos ayer y lo escrito en rojo es donde debes colocar lo que hemos escrito hoy


<html>
<head>
<title>mi primer blog</title>
</head>
<body>

<form action="">

<input type="text" name="nombre"/>

<input type="text" name="correo"/>

<textarea rows="7" cols="50"></textarea>

<input type="submit" />

</form>

<?php

?>
</body>
</html>


Nota que he quitado guestbookprocess.php porque como todavía no hemos creado ese programa, el formulario enviará allí la información y al no existir, dará un error. Al dejarlo en blanco el formulario simplemente envía los datos "hacia la nada" de modo que tú podrás probar cuando finalicemos el post de hoy, escribir datos en el formulario y enviarlos. Verás que los datos se "envían" y queda vacío el formulario para recibir nuevos datos. En realidad estos datos no se han almacenado en ningún sitio (por ahora).

Por último, no te preocupes por la apariencia realmente triste del formulario. Esto cambiará (y mucho) cuando comencemos a darle diseño con CSS. No sólo la apariencia sino la ubicación de cada elemento en la página y la separación entre ellos. Creéme que de esta forma lo estamos haciendo bien.

Hasta el próximo post.