Crea tu propia página web desde cero (IV)

Seguimos con el tutorial para crear una página web desde cero con PHP. En los capítulos anteriores vimos la manera de empezar a teclear código HTML para montar un formulario sencillo y darle un estilo propio con CSS. En esta ocasión vamos a ver cómo podemos enviar los datos de ese formulario a una base de datos (en adelante BD), para tener un formulario de registro completo.

Lo primero que vamos a hacer es crear nuestra BD desde phpMyAdmin. A esta herramienta accedemos desde nuestro navegador, si instalamos en su día WAMP correctamente, yendo a localhost (o localhost:8080 si cambiamos el número de puerto, recordad los primeros pasos en el primer capítulo de este tutorial) en nuestro navegador, veremos la herramienta phpmyadmin en la sección Tools, o directamente en la dirección localhost/phpmyadmin. La página principal tiene un aspecto así:

En el menú de la izquierda vemos las BD que tenemos creadas. Para crear una nueva, hacemos click en Bases de datos en el menú superior, y en la siguiente pantalla escribimos el nombre que queramos darle, por ejemplo Ejemplo, por seguir el nombre que llevamos de la web. En cotejamiento recomiendo elegir utf8_bin para que reconozca caracteres que utilizamos en nuestro idioma, como los acentos o las eñes.

Una vez creada nuestra BD, la veremos en el menú de la izquierda. Hacemos click en ella, que se llamará ejemplo, y accederemos a la pantalla para configurar esta BD. El siguiente paso es crear las tablas. No vamos a entrar en demasiados detalles acerca de las BD, pues en la carrera esta materia abarca dos asignaturas enteras. Podéis buscar más por Internet acerca de las BD relacionales, que son las que vamos a utilizar. Básicamente debéis saber esto:

- Por cada clase de nuestra web, tendremos una tabla. Por ejemplo, un usuario es una clase, así que tendremos una tabla llamada usuario. Las clases no tienen por qué ser cosas tangibles del mundo real, también pueden ser cosas abstractas. Por ejemplo, un país, una asignatura, etc.

- Un objeto es una entidad concreta de una clase. Por ejemplo, de la clase usuario tendremos como objetos a usuarios concretos: el usuario pepito, manolito, etc. 

- Cada clase tiene atributos. Por ejemplo, un usuario puede tener nombre, apellidos, email, etc. Además, cada objeto se debe poder identificar y diferenciar del resto por uno de sus atributos de manera exclusiva. Por ejemplo, un usuario se puede identificar por su DNI, o por un identificador único. Este atributo identificativo y único será la clave primaria. Nosotros utilizaremos la ID, ya que no necesitamos DNI en nuestra web. Así, el usuario pepito podría ser el 1, el usuario manolito el 2... y nunca dos usuarios tendrán dos ID iguales. 

- Pueden existir relaciones entre dos o más tablas. Las relaciones pueden ser parte de, o pertenece a. Por ejemplo, un usuario puede pertenecer a un país. Para saber qué relaciones necesitamos, en principio basta con usar el sentido común, y saber qué clases vamos a utilizar en nuestra web. Una clase relacionada con otra deberá tener una clave ajena, que será la clave primaria (ID) de la otra tabla. Por ejemplo:

usuario [país : clave ajena] --- pertenece a --> país [ID : clave primaria]

Esta relación quiere decir que la tabla usuario tendrá un atributo país, cuyo valor será la ID de uno de los países según su tabla. Por ejemplo, el usuario pepito pertenece al país España, ¿cómo hacer esta relación? Pues si España tiene como clave primaria (su ID) el 1, entonces pepito tendrá en su atributo país el número 1. Además, dependiendo de lo que queramos en cada relación, podemos restringir el número de entidades relacionadas. En este ejemplo, puede haber muchos usuarios que pertenezcan a España (es lo normal), pero a la inversa no tiene por qué ser así. En este caso, si pepito pertenece a España, sólo puede pertenecer a España, ya que únicamente tendrá su número 1 en su campo país, y no puede tener otros valores.

- Además, cada atributo debe ser de un tipo concreto de datos. Por ejemplo, el nombre puede ser una cadena de texto (string o varchar), la fecha de nacimiento será de tipo fecha (date), la ID (identificación) será un número entero (int)... 

Para entenderlo mejor, vamos a ver el diagrama de clases para la BD que vamos a utilizar:

¿Cómo interpretar este diagrama? Sin entrar en detalles de lo que es un diagrama de clases y cómo se utiliza, vemos que cada recuadro es una tabla. Tenemos cuatro tablas: usuario, país, asignatura, y usuario-asignatura. Cada tabla tiene sus atributos, con su nombre a la izquierda y su tipo de dato a la derecha. Además, los atributos que tienen un signo de exclamación a la izquierda son los identificadores utilizados como claves primarias, y que no se podrán repetir entre objetos de la misma clase. Los atributos subrayados indican que son claves ajenas, relaciones a otras tablas. ¿A qué tablas? A aquellas a las que van dirigidas las flechas. Por ejemplo, un usuario está relacionado con país, podríamos decir un usuario pertenece a un país. ¿Y por qué no al revés: un país pertenece a un usuario? Primero, porque no tiene sentido, y segundo, porque la relación va de su origen a su destino, el atributo país existe en usuario, y no el atributo usuario en país. Por último, tenemos una tabla un poco rara llamada usuario-asignatura, que nos servirá de intermediario entre usuario y asignatura, de manera que podamos hacer que un usuario pueda tener varias asignaturas, y viceversa, que una asignatura tenga varios alumnos (algo que no pasa con usuario y país). Así, podríamos tener para usuario-asignatura el usuario 1 con la asignatura 1, el usuario 1 con la asignatura 2, el usuario 3 con la asignatura 2... pero nunca dos pares iguales, sólo podrá existir una vez el par 1-1, el par 1-2, etc. Recordad que estos valores de 1, 2, 3... son los identificadores (ID) de la tabla usuario, país o asignatura.

Bueno, pero vayamos al grano. Ahora hay que transformar ese diagrama de arriba a algo que funcione en phpmyadmin. Por fin vamos a crear las tablas. Para ello, si habíamos hecho click en la BD ejemplo del menú de la izquierda, lo primero que aparece es la opción de crear una tabla. Vamos a empezar por la de usuario, así que le ponemos de nombre usuario, y número de columnas 7, ya que una columna es un atributo de los que vimos antes. Ahora hay que ir rellenando cada atributo/columna según vimos. Por ejemplo la primera se llamará id, y será de tipo int (entero), será clave primaria (índice: PRIMARY), y además lo marcaremos como autoincremental (A_I) para que la ID se ponga automáticamente por cada usuario creado más adelante, de manera incremental y empezando por el 1. En resumen, la tabla usuario os tiene que quedar así:

Los atributos que eran de tipo texto los hemos puesto de tipo varchar con una longitud máxima de 255 caracteres. La diferencia entre varchar y text, es que text sirve más para textos grandes, cosa que por ahora no necesitamos, pues para el nombre, email, password o foto (pondremos su URL) no necesitamos tanta longitud, así ahorramos espacio en la BD. Además, hemos marcado como Nulo los atributos fecha_nac, pais y foto, significando esto que estos tres atributos no son obligatorios, y podrán ser nulos. El resto sí que serán obligatorios, así que no los marcamos como nulos. Por último vemos que en el atributo pais hemos puesto índice INDEX, esto es porque lo utilizaremos como clave ajena para relacionarla con la tabla pais.

Ahora creamos las otras tres tablas de la misma manera, siguiendo el modelo del diagrama de clases. Las tablas pais y asignatura serán iguales, teniendo su id como en usuario, y el nombre será también varchar de longitud 255. Para la tabla usuario_asignatura tenemos dos atributos que de tipo int, y ambos serán de índice INDEX para relacionar cada uno con usuario y con asignatura respectivamente.

Una vez creadas las cuatro tablas, vamos a relacionarlas. Empezamos yendo a la tabla usuario haciendo click en ella en el menú de la izquierda, y después hacemos click en la opción Vista de relaciones que hay bajo la tabla con sus siete atributos. En la siguiente pantalla, vemos que el atributo pais tiene un desplegable para elegir su relación, así que elegimos la relación pais.id, pues será la ID del país con quien estará relacionado:

Guardamos los cambios y vamos ahora a la tabla usuario_asignatura para hacer lo mismo, desde Vista de relaciones, relacionamos usuario con usuario.id, y asignatura con asignatura.id. Puede darse el caso de que alguno de estos dos atributos no tenga su desplegable y no podamos elegir su relación. Esto suele ocurrir porque no se guarda bien el índice INDEX que pusimos anteriormente al crear la tabla. Para solucionarlo, desde la pantalla de la tabla, ponemos el cursor sobre la palabra Más que hay a la derecha del todo, y hacemos click en Agregar índice en el atributo donde nos falte:

Volvemos a Vista de relaciones de usuario_asignatura y añadimos las dos relaciones como hemos comentado antes, y guardamos. Las opciones extra que vemos al crear relaciones (on delete 'restrict', on update 'restrict') las dejamos como están, esto servirá para restringir el borrado de tablas si hay relaciones. Por ejemplo, si queremos borrar el país España pero hay usuarios que pertenecen a España, no podremos borrar este país. Primero habría que borrar los usuarios que pertenecen a España, y luego el país.

Y con todo esto ya tenemos creada nuestra BD Ejemplo, aunque por ahora sólo tenemos el esquema, y ningún dato aún. Podemos añadir datos a mano desde phpmyadmin haciendo click en Insertar en el menú superior que hay por cada tabla, o mediante código SQL en la opción con el mismo nombre, pero no vamos a entrar en estos detalles, ya que los datos los meteremos desde la web. Además siempre podemos añadir más tablas, atributos y relaciones, pero por ahora lo dejamos así, algo sencillo para hacer que nuestra web nos sirva para gestionar una lista de usuarios por asignaturas y países. 

En el siguiente capítulo veremos cómo programar con código PHP la funcionalidad de añadir los datos del formulario a la BD que hemos creado, y cómo consultar estos datos desde la web.

Crea tu propia página web desde cero (I)

Crea tu propia página web desde cero (II)

Crea tu propia página web desde cero (III)

Crea tu propia página web desde cero (I)

A continuación vamos a ver cómo crear una página web desde cero, es decir, sin utilizar ninguna herramienta predefinida, ni Wordpress ni nada por el estilo. Bastará con tener instalado un servidor local al principio, para poder probar en nuestra máquina antes de tener terminada la web, y un editor de textos para escribir el código. Paso a paso veremos cómo ir construyendo nuestra web, de manera que en cada momento sabremos lo que estamos haciendo y cómo funcionan los entresijos y el código que hay detrás, que con otras herramientas no sería posible.

Vamos a trabajar en Windows, con un servidor Apache, un motor de base de datos MySQL y PHP para la programación del lado del servidor. Si juntamos todas esas iniciales tenemos WAMP, que es precisamente la herramienta que nos vamos a instalar y que reúne todos estos servicios necesarios para construir nuestra web. 

1. Descargar WAMP. Así pues, lo primero que haremos será descargarnos el WAMP de su página oficial eligiendo la versión de 32 o 64 bits según nuestro sistema operativo. El equivalente para Linux sería el XAMP. En esa misma página se explica con un vídeo-tutorial cómo instalarlo. Es muy sencillo, como en casi cualquier instalador, hay que seguir los pasos.

2. Instalar WAMP. Cuando veamos la pantalla en la que nos pide introducir la ruta de instalación, es recomendable dejarlo como está, en c:\wamp. En esta ruta será donde se alojen las páginas webs que vayamos a crear más adelante. Si vemos alguna pantalla que nos pida algún dato más, simplemente le damos a siguiente todo el rato, dejando las cosas por defecto.

Una vez instalado, confirmamos que queremos lanzar WAMP Server en nuestra máquina. Comprobamos que las versiones de cada tecnología es la correcta (al menos que sean las versiones que aparecen en la siguiente captura).

3. Configurar WAMP. Idealmente todo arrancaría correctamente, mostrando un icono verde de WAMP en la barra de tareas de Windows. Pero muchas veces el icono es rojo, lo que significa que hay algún error de configuración de Apache o PHP generalmente. Si tu icono es verde, puedes saltarte las siguientes dos secciones y escribir directamente la dirección localhost en el navegador, y si ves la pantalla principal de WAMP (ver captura más adelante en la sección 4), es que todo funciona correctamente. Si no, puedes configurar Apache y PHP:

3.1 Apache: Es el servidor que hará que nuestra web se muestre en nuestro navegador. Inicialmente vamos a trabajar en nuestra máquina local, por lo que en el navegador la url que usaremos será localhost (o la IP privada que tengamos configurada en nuestra red local). 

Cuando la web esté acabada ya veremos cómo migrarla a un servidor remoto con un nombre de dominio tipo www.ejemplo.com. Pero para que Apache funcione, debe estar configurado. En principio, lo básico es su número de puerto y directorio raíz. Si hemos instalado WAMP en c:\wamp, el directorio raíz debería estar ya bien configurado y puesto en c:\wamp\www, y el puerto por defecto es el 80. Esto significa que por ejemplo el proyecto web Ejemplo estará ubicado físicamente en c:\wamp\www\Ejemplo, y para ver nuestra web accederíamos desde el navegador a localhost:80/Ejemplo, aunque al ser el puerto 80 el predeterminado para la navegación web, no haría falta poner el número de puerto, bastaría con localhost/Ejemplo. El problema viene si anteriormente ya teníamos reservado ese puerto 80 para otro servidor, como por ejemplo el IIS de Windows. En ese caso tendremos que decirle a Apache que utilice otro número, normalmente por tradición se suele usar el 8080 por similitud con el 80. 

Para configurar tanto el directorio raíz como el número de puerto, hay que hacer click en el icono de WAMP de nuestra barra de tareas de Windows. Hay una sección por cada servicio, y en Apache vemos un apartado que dice httpd.conf. Ese es el nombre del fichero de configuración de Apache, por lo que pinchamos en él y accedemos al fichero de texto con toda su configuración. Hay que andarse con cuidado de no trastear indebidamente, pues cualquier configuración errónea hará que no funcione el servidor, así que es aconsejable guardarse una copia del fichero original, que se encuentra en c:\wamp\bin\apache\apache2.4.2\conf\httpd.conf. Puedes encontrar mucha información y ayuda sobre cómo configurar este archivo, pero en principio basta con asegurarse de que el directorio raíz es el c:\wamp\www (suponiendo que instalamos ahí el WAMP), y que el puerto es el 80, o el que vayamos a utilizar. En la siguiente captura vemos en qué líneas se encuentran estas configuraciones:

La sección DocumentRoot nos indica entre comillas la ruta donde tenemos el directorio raíz, y para el número de puerto hay que buscar la línea Listen 80, donde 80 será el número de puerto que usemos. También podemos configurar más cosas, como la privacidad de cada uno de los directorios de nuestra web, para decidir si se puede entrar a ellos desde otras máquinas remotas, etc. pero no vamos a entrar en más detalles por ahora. Para más información, consultar en Google. Una vez hechos los cambios, guardamos ese fichero de texto y reiniciamos el servidor, haciendo click en el icono de WAMP y pulsando en Restart All Services.

3.2 PHP: también es necesario configurar PHP, y en ocasiones una mala configuración puede suponer un quebradero de cabeza, pero en principio debería bastar con configurar la variable de entorno Path. Esto le sirve a Windows para saber en cada momento en qué ruta está instalado PHP, para cuando lo tenga que utilizar. Para configurarlo, hay que hacer click derecho en Este equipo del escritorio (el clásico Mi PC) y pinchar en Propiedades. En la pestaña Opciones avanzadas, hacemos click en el botón Variables de entorno, y en la nueva ventana veremos la sección de variables del usuario y las variables del sistema, que es donde tenemos la variable Path. Hacemos doble click en este valor (o un click y después en Editar), y podremos escribir un valor para la ruta. Debería haber ya rutas de otras aplicaciones, por lo que no debemos borrar nada. Simplemente hay que añadir la nueva ruta, separada por punto y coma, como se muestra en la siguiente captura. En este ejemplo, PHP está instalado en C:\wamp\bin\php\php5.4.3, por lo que añadimos esa ruta tal cual al final del todo (asegúrate de cuál es tu ruta exacta dentro de la carpeta de WAMP, comprobando tu versión de PHP), siempre separado por un punto y coma del resto de rutas. Posteriormente se podrían añadir más rutas de otras aplicaciones.

Pero además de esta configuración para PHP, se pueden configurar más cosas, al igual que con Apache, desde un fichero de texto. En este caso se encuentra haciendo click en el icono de WAMP, y después en la sección PHP, el fichero php.ini. De nuevo, hay que tener cuidado al configurar este archivo, y se puede encontrar mucha información en internet, dependiendo de los errores que tengamos o lo que queramos configurar. Al finalizar de guardar los cambios de PHP, hay que reiniciar los servicios de WAMP para que los cambios en la configuración hagan efecto. 

4. ¿Todo correcto? Para ver por fin si todo funciona correctamente, lo primero es comprobar que el icono de WAMP de la barra de tareas es de color verde. Si es así, podemos abrir nuestro navegador y escribir la dirección localhost, o localhost:8080 o el número de puerto que tuviéramos configurado. Si todo es correcto, deberíamos ver la página de inicio de nuestro servidor:

En la sección phpinfo() podemos ver la información y versión de nuestro PHP. En phpmyadmin podremos acceder al sistema de gestión de bases de datos, que veremos próximamente para crear nuestra propia base de datos con MySQL para utilizar en nuestra web. Y en la sección Your projects podemos ver nuestros proyectos web, que inicialmente estarán vacíos.

5. Nuestra primera web. Ahora, por fin, vamos a crear nuestro primer proyecto web. Para ello basta con ir a nuestro directorio raíz c:\wamp\www, y aquí crear una nueva carpeta con el nombre que queramos dar a la web. En nuestro caso será Ejemplo. Y la primera página de la web será por defecto un archivo index.html, que es por donde suelen empezar las webs cuando un usuario entra. Así pues, en nuestra carpeta c:\wamp\www\Ejemplo creamos un archivo HTML llamado index.html, y lo editamos. Recomiendo un editor razonable que permita editar código con comodidad, y no el bloc de notas de Windows. Personalmente recomiendo Notepad++, aunque hay muchos más, pero siempre editores de texto sin formato, nada de procesadores de texto tipo Word o LibreOffice, etc. Si usamos Notepad++, podemos crear ahí un nuevo documento, escribir código y guardar como tipo HTML:

Ahora es donde entra en juego los conocimientos de HTML, que veremos en siguientes posts. Pero por ahora basta con que sepamos que una página web es un fichero con un código que interpreta el navegador para visualizarlo con una estructura y diseño determinados. La página entera debe estar contenida entre las etiquetas <html> y </html>, y dentro suele haber dos secciones importantes, el encabezado, contenido entre <head> y </head>, que contendrá información acerca de la página, como su título (<title>Título</title>), autor, o la codificación del texto. La sección head puede estar vacía por el momento, aunque basta con copiar el código siguiente y servirá (al igual que la primera línea <!DOCTYPE html>, que indica que estamos trabajando con HTML5). Y el cuerpo principal de la web, entre <body> y </body>, que será lo que veamos realmente en la página. Por ejemplo, si escribimos el siguiente código:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="description">

<meta name="keywords" content="keywords">

<meta name="author" content="author">

<link rel="icon" href="images/favicon.ico">

<title>Ejemplo</title>

</head>

<body>

<h1>¡Hola mundo!</h1>

</body>

</html>

y guardamos los cambios, al acceder a localhost/Ejemplo nos mostrará esta página principal index.html, de la siguiente manera:

Como vemos, por ahora la web es un simple mensaje de bienvenida. Ese ¡Hola mundo! está contenido dentro del cuerpo, y es lo único que hay. Y además, está entre las etiquetas <h1></h1>, lo que significa que tendrán un estilo de título grande. Existen también etiquetas h2, h3, h4, h5 y h6, a cada cual un poco más pequeña que la anterior. Y si queremos escribir un párrafo normal y corriente, lo haríamos con la etiqueta p. En el siguiente ejemplo vemos algo un poco más elaborado (sólo se incluye la sección del cuerpo):

<body>
<h1>¡Hola mundo!</h1>
<h2>Esta es mi primera web</h2>
<p>
He estado siguiendo los pasos del post que hay en el blog <i>consejosinformaticos.blogspot.com</i> y he llegado hasta aquí. 
<b>¡Un saludo a todos!</b>
</p>
<h3>Alberto</h3>
</body>

y el resultado es el siguiente:

Vemos como cada línea tiene un estilo distinto. La primera está entre h1, lo que le da el aspecto de título grande, siguiendo la tradición de los periódicos. La segunda es un h2, que viene a ser un subtítulo. La tercera es un simple párrafo, contenido entre la etiqueta p. Pero además en esta misma línea vemos una parte en cursiva y otra en negrita. Para ello, lo que queramos resaltar como tal debemos encerrarlo entre las etiquetas i para cursiva y b para negrita, tal y como se ve más arriba en el código ejemplo. Y por último, la última línea es un h3.

6. Continuará. Por ahora esto es todo. Lo más complicado y pesado son los primeros pasos, configurar el servidor, corregir posibles errores y configurar cosas. Aquí hemos comentado lo típico que se debe tocar antes de empezar a usar WAMP, pero es posible que a cada usuario le aparezcan distintos errores que ahora mismo no he contemplado. Siempre se puede buscar en internet, o preguntar aquí en comentarios para solucionarlos. Y el primer ejemplo de web que hemos visto es muy sencillo, únicamente texto y sin formato. Más adelante veremos cómo añadir más elementos, como botones o cuadros de texto, y cómo darles otro aspecto más atractivo. También veremos cómo crear nuestra propia base de datos para poder introducir y manejar datos desde nuestra web.

ATENCIÓN: Si has tenido problemas con la instalación de WAMP, o no te funciona el servidor Apache o PHP y no sabes qué hacer y no te quieres complicar la vida, puedes probar cualquier código HTML que veamos sin necesidad de instalar nada, gracias al editor de W3Schools:

Tryit Editor

Si tienes todo bien instalado en tu equipo, para probar los códigos basta con que los guardes en un fichero .html, y tras guardar cada cambio, cargues de nuevo la dirección localhost en tu navegador. Pero el editor anterior te sirve para probar códigos online, sin instalarte nada. No podrás decir que tengas un proyecto web, pero al menos te servirá para probar código.


Extra:

WAMP Server
Configuración de Apache
Configuración de PHP
Notepad++
Notación HTML