sábado, 31 de enero de 2015

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.

No hay comentarios:

Publicar un comentario