La web como la conocemos se encuentra constantemente en cambio; para bien o para mal siempre se esta moviendo y debemos ser capaces de seguir el ritmo para mantenernos a flote. Una de las formas mas practicas para mantener actualizada nuestra pagina web es el uso de un CMS mejor conocidos como Sistema de gestión de contenidos.

Algunos de los CMS mas utilizados y a los cuales solemos recurrir en mas de una ocasión, son foros, wikis, blogs, y mas, en este tutorial aprenderemos a crear un CMS con Dreamweaver y Wamp, el cual traerá los datos desde una base de datos directamente a un HTML en el cual se mostraran.

1.- Comenzaremos descargando e instalando Wamp Server (para los usuarios Mac sera Mamp Server). Su configuración es bastante rápida y sencilla, por lo cual no es necesario explicar este proceso.

2.- Daremos de alta los servicios de nuestro servidor y crearemos nuestra base de datos. En windows dando clic izquierdo sobre el icono del servidor en la barra de herramientas, podremos seleccionar “Start All Services“, y después “Put Online“. De esta forma nuestro servidor esta funcionando y al ir a nuestro localhost podremos verificar que efectivamente todo funciona.

3.- Dentro de phpMyAdmin crearemos una base de datos, a la cual podemos importar datos de otra base de datos o ingresar los datos manualmente. En este caso la tabla incluye 5 campos (id, nombre, creador, genero y sitio), relacionados a 5 series distintas.
En este caso importaremos la base de datos; para importar la base de datos iremos a phpMyAdmin donde crearemos una nueva base de nombre series, después iremos al menú importar, seleccionaremos nuestra base de datos y daremos clic al botón Continuar.

Descargar base de datos.

4.- Definiremos un nuevo sitio en Dreamweaver de modo que podamos configurar desde ahora el servidor con el que trabajaremos (en este caso local). Esto lo haremos en el menu Site -> New Site, aquí ingresaremos el nombre de nuestro sitio; para seleccionar la ruta donde se guardara nuestro sitio, iremos a C:\wamp\www donde crearemos una carpeta llamada demo (y que sera donde guardaremos nuestro proyecto) entramos dentro de esta carpeta y damos clic en Save.

5.-En esta misma ventana (donde estamos configurando nuestro sitio), definiremos nuestro servidor, especificamente en la pestaña Servers. Dando clic en el botón mas, añadiremos la información de nuestro servidor.

Antes de comenzar con nuestro archivo HTML, debemos hacer un ultimo cambio. En esta pestaña Servers, tenemos un servidor remoto configurado. Cambiaremos esto a un servidor de testeo, de-seleccionando el CheckBox Remote y seleccionaremos el CheckBox Testing.

6.- Crearemos un nuevo documento HTML (podemos hacerlo también en un documento creado con anterioridad, donde se desee mostrar dicha información) el cual guardaremos en nuestra carpeta demo. A continuación definiremos la forma en que se visualizaran estos datos dentro de nuestra pagina. Iremos al menú Window -> Insert para abrir nuestra ventana Insert, dentro de la cual seleccionaremos Data.

7.- Veremos como los componentes que podemos insertar cambian de acuerdo a la categoria Data. Seleccionaremos Master Detail Page Set. Ahora veremos un alerta el cual nos dice los siguientes pasos a seguir:

  1. Guardar el Documento
  2. Seleccionar un tipo de Servidor (Seleccionaremos PHP)
  3. Definir un Servidor (Como ya lo hicimos se palomeara después de seleccionar un tipo de servidor)
  4. Crear un Recordset (Como no hemos definido una conexión, cancelaremos este proceso)

8.- Con Window -> Databases abriremos el panel Databases, en el cual definiremos la conexión que se utilizara para conectarse a nuestro servidor y de esta manera obtener los datos. Daremos clic al botón con el signo mas dentro del panel.

  • Definiremos un nuevo usuario en nuestro phpMyAdmin en el menú Privilegios, de modo que tengamos un user y password para asignar a esta conexión.
  • Daremos clic al botón Test de manera que veamos una ventana que confirme la conexión realizada.
  • Finalmente daremos clic al botón OK y veremos como nuestro panel Databases ahora nos muestra la conexión que recién creamos.

9.- Ahora podemos seleccionar de nuevo Master Detail Page Set dentro del panel Insert, en la categoría Data. Crearemos un Recordset en el cual definiremos la conexión a utilizar y los datos a mostrar. Podemos también realizar un test de los resultados para comprobar que todo vaya bien.

Al dar clic en OK veremos como nos genera código PHP en nuestro documento. Y ademas de esto nos presenta una nueva ventana, de la cual solo modificicaremos el valor Detail Page Name, donde ingresaremos el nombre que pertenecerá a esta vista detallada (AnimeDetail) y que sera llamada por nuestro archivo principal.

Si visualizamos nuestra pagina en cualquier explorador, veremos una tabla donde se muestran los datos (la cantidad podemos modificarla nosotros mismos en Anime Detail).

10.- Por ultimo haremos que cuando el usuario de clic en cualquier dato de nuestra columna sitio, dicha pagina web se habrá en una nueva pestaña del navegador. Dentro del HTML de nuestra pagina principal, veremos una lista donde cada columna tiene como titulo el nombre de cada campo en nuestra base de datos. Podemos cambiarlo ya que por default se encontraran en minúsculas. Ahora, debajo de estas cabeceras se encuentran las filas; la ultima sera sitio la cual vamos a modificar.

Ahora solo muestra en nuestra tabla la dirección url, por lo cual meteremos dicha dirección dentro de un elemento a que tendra como href el mismo valor que estamos visualizando, de la siguiente forma:

De esta forma tenemos ya una forma de mostrar datos de forma dinámica sin invertir mucho tiempo en ello. Si realizamos algún cambio a los valores en nuestra base de datos (mientras incluyamos, modifiquemos o eliminemos datos) estos se actualizaran de forma correcta en nuestro sitio, cuando actualicemos la pagina.

A esta tabla podemos cambiarle los estilos como queramos, ademas de que dentro de la misma categoría Data dentro del panel Insert, nos provee de muchas otras formas y componentes con los cuales visualizar estos datos, Master Detail Page Set es uno de estos.