domingo, 6 de marzo de 2011

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.

sábado, 5 de marzo de 2011

con el servidor funcionando comenzaremos de a poco a programar una web 2.0

Bien, en el post anterior hemos visto cómo instalar XAMPP en nuestro ordenador y poner en funcionamiento Apache y MySQL. En este post lo que vamos a hacer es dar los primeros pasos en nuestra web 2.0, diseñando, programando y haciendo todo lo necesario para comenzar a darle vida.

En primer lugar, si ya tenemos el acceso directo a la carpeta htdocs en el escritorio, entramos allí y seleccionamos los archivos que esa carpeta contiene. Quita todo eso de allí, colócalo en una carpeta y guárdalo en otro lugar de tu ordenador. La carpeta quedar vacía pues ése será el lugar para nuestra web.

Es así que todo lo que coloquemos allí, podremos verlo desde nuestro navegador web con sólo tipear en nuestra barra de direcciones la palabra: localhost. Haremos esto una vez que comencemos a escribir nuestra web.

Ahora ya está todo listo, podemos crear una página web y programar PHP en ella, pero para programar necesitamos saber qué escribir.
Para saber qué escribir necesitamos pensar en la utilidad que va a tener el programa. Es decir, quiero que un programa realice tal actividad, entonces deberé escribir esto y aquello para que al ejecutarse el programa realice la actividad que yo pretendo. Ahora bien, para saber qué escribir, primero hay que aprender a escribir...
Sobre esto último, aprender a escribir en forma rudimentaria incluye leer los extensos manuales, ir comprendiendo metódicamente el significado de cada concepto y luego ir practicando en un orden creciente de complejidad. En general esta forma de aprender es muy útil pero es aburrida. Otra forma de aprender es echar manos a la obra e ir creando, sin tener todavía bien claras las cosas, pero logrando programas que funcionen. Uno no comprende muchas veces por qué el programa está resultando, pero lo ha conseguido. Este segundo método nos llevará a cometer muchos errores, pero bienvenidos los errores ! pues es una forma muy buena de aprender. Muchas veces equivocarse nos da grandes lecciones (en la vida en general). Aquí no hay consecuencias graves si uno se equivoca, simplemente te encuentras practicando y el código no funcionará o dará error. Entonces habrá una nueva oportunidad de seguir aprendiendo, corrigiendo los errores y consiguiendo que el código funcione. Tú eliges de qué forma aprender. Muchos te dirán que la mejor forma es la primera, otros te dirán otras cosas. En síntesis, en este blog vamos a ir aprendiendo programación de una forma "políticamente incorrecta". Esta forma será: pensar en una web 2.0 terminada (por ejemplo podría ser un blog o una red social) y comenzar a crearla, equivocándose mucho y resolviendo los problemas que se presenten. Ir avanzando en su programación y su diseño de esta forma, es una tarea muy entretenida !.

Entre las webs 2.0 que podríamos crear, lo más sencillo de comenzar podría ser un pequeño blog. Lo primero que debemos hacer es crear una página web en la que escribiremos código PHP dentro.

Es decir, un sitio web está formado por páginas web. Una página web es HTML, así que tenemos que primero crear una página web (usando código HTML) para luego utilizar esta página para escribir código PHP que transforme esas páginas en un sitio dinámico (2.0). Posteriormente vendrá AJAX para hacerlo más dinámico todavía.

Tanto una página web que contenga solamente HTML como una página web que contenga HTML y PHP pueden crearse simplemente con el block de notas de Windows. El código PHP va incrustado dentro del código HTML, sólo hay que avisarle al servidor en qué momento entramos y salimos del modo PHP.

Ahora bien, sabemos que el block de notas nos dará archivos que finalicen con la extensión TXT y nosotros necesitamos que finalicen con HTML o PHP.
Entonces, para que lo que escribimos pueda transformarse en un archivo html o php, debemos cambiar la extensión al txt que nos genera el block de notas. Para realizar esto vamos a cualquier carpeta (mis documentos o la que sea) y luego herramientas > opciones de carpeta. Allí dentro elige la pestaña "ver" y destilda la opción "ocultar las extensiones de archivo para tipos de archivos conocidos". De esta manera, tú podrás cambiar la extensión .txt que es típica del block de notas por la extensión HTML o PHP.
Ahora bien ¿cuál extensión elegimos? ¿html o php? Vamos a elegir PHP, porque si elegimos html y en el archivo hemos escrito código php, el servidor no interpretará el código. Entonces hemos aprendido dos cosas: que por un lado es necesario en la página html aclarar cuando iniciamos en modo php y cuando salimos de allí, y por otro lado es necesario que el archivo que tenga ese código termine en la extensión php y no html (y por supuesto no txt, eso nisiquiera es una página web).

Una vez que hemos comprendido todo esto, es momento de abrir el block de notas y escribir lo siguiente:

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


Esto es un html básico. Con el tiempo iremos agregando más cosas. <html> es la marca que abre un documento html, desde allí escribiremos html. El html se divide en dos grandes partes que son el head y el body. En el head va información como el título de la página y otras cosas más que por el momento no detallaremos. En el body va el contenido de la página. Lo único que vamos a colocar en el header por ahora es el titulo de la página, entonces colocamos <title> luego el título y finalmente cerramos la etiqueta. También cerramos la etiqueta head cuando terminamos de ecribir el head y lo mismo cuando terminamos con el body. Finalmente cuando terminamos la página cerramos la etiqueta html.

Ahora bien, entre las etiquetas body vamos a colocar las etiquetas de php. Este es el modo de entrar y salir de php.
La etiqueta de apertura es: <?php
La etiqueta de cierre es: ?>
Recordemos que si el archivo no finaliza con la extensión php, todo lo escrito entre estas dos etiquetas no será interpretado.
Agrega lo marcado en verde:

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

<?php
?>
</body>
</html>


Entonces, entre el: <?php y el: ?> podremos comenzar a escribir código PHP.
Ahora una vez que tienes en tu block de notas este ultimo código, guarda el archivo colocándole de nombre: index, cambia la extensión TXT por PHP y guárdalo en htdocs (debe quedarte index.php). Ahora entra a tu navegador web y teclea: localhost. Deberás ver una página completamente en blanco. Si has logrado esto, significa que el servidor está funcionando y que la página web se está leyendo correctamente. En el próximo post continuaremos customizando esta página.

viernes, 4 de marzo de 2011

Primer paso. Descargaremos el XAMPP para poder ejecutar PHP en nuestro ordenador

Para comenzar a aprender, lo que vamos a hacer es descargar un programa, que se llama XAMPP, a nuestro ordenador que nos permitirá tener el servidor apache y la base de datos MySQL. Trae otras cosas pero esto es lo que más utilizaremos por ahora.
El servidor apache lo que hace es, cuando nosotros escribimos un programa en PHP, lo interpreta y le sirve al visitante de nuestro sitio el programa funcionando. MySQL es una base de datos, una base de datos es un lugar donde se almacenan datos (información). Utilizaremos las bases de datos entonces para almacenar datos, como podrían ser los usuarios y contraseñas de los miembros de nuestro sitio.
Entonces ahora queda claro para qué vamos a descargar este programa, es para que nuestras pruebas puedan ser realizadas en nuestro propio ordenador y no necesitemos contratar un hosting, que además de gastar dinero nos llevaría más tiempo subir los archivos cada vez que necesitemos probar algo. De esta manera nosotros somos el hosting y el visitante, a la vez !

Entonces lo primero que haremos es descargar el XAMPP. Si no tienes Windows como sistema operativo, puedes buscar aquí el XAMPP para tu sistema operativo.

Para instalar el programa, abrimos el archivo ejecutable y se nos desplegará la ventana de instalación como en la mayoría de los programas.





















Es importante mantener el directorio por defecto donde se va a instalar XAMPP, que es el c:\xampp\
Luego un par de clicks más y ya el programa se ha instalado.

Ahora bien, dos opciones.
En la primer opción, sólo haremos correr el XAMPP cuando queramos probar nuestros códigos PHP. En la segunda opción, el XAMPP iniciará junto con Windows.
Veámos como elegir la opción 1 o 2:
En primer lugar, vamos a inicio y buscamos este programa que hemos instalado. Hacemos click y se nos abre esta ventana:





















Aquí le damos click a start APACHE y luego start MySQL. Cuando estén funcionando aparecerá en resaltado en verde "running" y los botones cambiarán a stop. Esto de buscar el programa, ejecutarlo y luego activar apache y mysql debemos hacerlo cada vez que queramos correr nuestros programas escritos en PHP, esto es la primera opción que mencionábamos antes, cabe aclarar que quedan encendidos hasta apagar el ordenador; si reiniciamos debes hacerlo de nuevo. La segunda opción era que todo esto suceda automáticamente al iniciar Windows, entonces nos evitamos hacer esto cada vez que iniciemos nuestro día de prácticas. Para esto debes tildar svc en APACHE y en MySQL y listo. Si quieres volver a la opción uno debes ir a incio, ejecutar el programa y destildar los svc.

A partir de ahora podremos crear nuestros programas en PHP, comenzaremos con ésto a partir del próximo post.