Un blog paso a paso con PHP y Dreamweaver

Icono de Dreamweaver

Vamos a crear un blog, weblog o bitácora. Se trata de que funcione pero que sea lo más básico posible.

Nuestros objetivos a cumplir son:

  • Crear un sistema de gestión de artículos, es decir, poder agregar, borrar o modificar artículos
  • Mostrar los artículos más recientes de 10 en 10
  • Clasificar los artículos por categorías
  • Clasificar los artículos por mes y año
  • Qué los usuarios puedan añadir comentarios a los artículos

Nota: Si queremos en nuestra web un weblog completo podríamos instalar WordPress. Este programa es software libre, está escrito en PHP y utiliza MySQL como base de datos. Es muy popular debido a su facilidad de uso y a la multitud de características interesantes que posee.

Páginas dinámicas (también llamadas páginas activas)

¿Qué son y para qué sirven?

  • Utilizaremos páginas PHP dónde antes utilizabamos páginas HTML
  • Las páginas PHP tienen incorporado un lenguaje de programación propio. El código PHP se ejecuta en el servidor. Es decir:
    • El código no se ejecuta en el cliente (en nuestro caso en el navegador Firefox).
    • El código se ejecuta en un módulo PHP del servidor web Apache.
  • Con PHP podemos realizar consultas y actualizaciones sobre la base de datos MySQL.
    • Con las consultas podemos obtener distintos informes aplicando distintos filtros y ordenaciones. Por ejemplo podríamos mostrar los artículos de deportes ordenados por fecha en orden descendente.
    • Con las actualizaciones podemos añadir, modificar y borrar registros (o filas) de las tablas de nuestra base de datos MySQL. Todo esto normalmente se realiza a través de formularios HTML.
  • La base de datos, así como el servidor web, se encuentra en el ordenador SERVIDOR.
  • Al navegador web (al Firefox) de la página PHP sólo le llega el código HTML. El código PHP genera código HTML. Por eso si hacemos "Menú→Ver Código fuente" en el Firefox sólo vemos HTML y nada del PHP.

Tecnologías principales de páginas dinámicas

Si compramos un hospedaje para nuestro dominio la empresa nos ofrecerá nos alternativas principalmente: Una con Linux y PHP y otra con Windows y ASP.

  Sistema operativo Servidor web Base de datos Lenguaje
Software privativo Microsoft Windows IIS Access ASP
Software libre Software libre Apache MySQL PHP

Como empresas que ofrecen hospedaje tenemos por ejemplo a nominalia.es y arsys.es

Pasos a seguir para realizar páginas dinámicas PHP

  1. Bajar un producto WAMP como el EasyPHP que nos instala todo en uno el Apache, MySQL y PHP.
  2. Ver cómo funciona el servidor web Apache y cómo configurarlo en Dreamweaver
  3. Ver cómo funciona el servidor de base de datos MySQL y cómo conectar con él en Dreamweaver
  4. En Dreamweaver crear las páginas PHP y utilizar los botones de "Aplicación" y las ventanas de "Base de datos", de "Vinculaciones" y de "Comportamientos del servidor" para generar todo el código.

Herramientas requeridas

Estos son los programas que vamos a necesitar:

  • Adobe (antes Macromedia) Dreamweaver (software privativo). Es el programa que usaremos para crear y diseñar el sitio web.
  • Un navegador web, por ejemplo Mozilla Firefox (software libre).
  • Un sistema WAMP, LAMP o MAMP dependiendo de qué sistema operativo tengamos: Microsoft Windows, GNU/Linux o Apple Mac/OS.

Nos vamos a decantar por un sistema WAMP puesto que Dreamweaver sólo funciona en Microsoft Windows.

Software Descripción Tipo Web
W Windows Sistema operativo software privativo  
A Apache Servidor web software libre www.apache.org
M MySQL Servidor de base de datos software libre www.mysql.com
P PHP Lenguaje de programación software libre www.php.net

Podemos instalar por separado uno por uno el Apache, MySQL y PHP o podemos decidirnos por una aplicación WAMP que haga este trabajo por nosotros. La ventaja de la aplicación WAMP es que todos los programas están ya integrados y su configuración está centralizada.

He probado dos aplicaciones WAMP que funcionan más o menos igual.

Nos bajamos el que nos parezca y lo instalamos en el ordenador. Una vez que arranque este programa nos mostrará una ventana indicando que el servidor Apache y el servidor MySQL están en marcha (los semáforos son de color verde). Le damos al botón de minimizar y vemos que aparece un pequeño icono al lado de la hora. Si pulsamos ahí con el botón primario o secundario del ratón nos mostrará un menú con las opciones disponibles.

Ahora vamos a dedicarnos a ver qué podemos hacer con las nuevas herramientas que poseemos.

Uso del Apache

El Apache es el servidor web. El navegador web (pongamos que Mozilla Firefox) se comunica con el servidor web. El navegador pide páginas web (archivos html, jpg, gif, png, css, etc) y el servidor web le va proporcionando los ficheros. El navegador web se comunica con el servidor web utilizando el protocolo HTTP. Dicho protocolo es un lenguaje entre dos ordenadores para que se puedan entender. Uno de los ordenadores hace el papel de cliente y el otro de servidor. Este protocolo está especializado en transferir páginas web. El protocolo HTTP suele usar el puerto de comunicaciones 80.

Pasos a seguir:

  • Para que funcione el Apache nos hemos de asegurar que la aplicación WAMP está funcionando y que el semáforo que indica el servicio del Apache está de color verde
  • Hemos de conocer dónde está la carpeta del sitio web que está sirviendo el Apache
    • EasyPHPc:\Archivos de programa\EasyPHP\www
    • Wamp Serverc:\wamp\www
    Los archivos que hay en la carpeta www se pueden borrar con total libertad.
  • En Dreamweaver configuraremos nuestro sitio web, iremos a la categoría Servidor de pruebas y suministraremos la siguiente información:
    • Modelo del servidor → MySQL PHP
    • Acceso → Local o red
    • Ruta servidor → La ruta completa de la carpeta www.
  • Hay que copiar todos los archivos de nuestro sitio a la carpeta www. Para ello en Dreamweaver subiremos nuestro sitio al servidor de pruebas:
    • En la panel Archivos (Menú→Ventana→Archivo) seleccionamos la vista Servidor de pruebas (carpetas de color rojo)
    • Luego seleccionamos la Vista Local (carpetas de color verde)
    • Seleccionamos la carpeta raíz y le damos al botón colocar (flecha azul que apunta hacia arriba)
  • Una vez subido el sitio debemos comprobar que el Apache está sirviendo el sitio web que hemos subido a la carpeta www. En el Firefox vamos a la dirección http://localhost o bien a http://127.0.0.1 Para estar seguro que estamos viendo la página actual, tendremos que pulsar el botón de recargar del navegador.
    • Notas adicionales:
      • Si estamos en una red local podríamos poner cómo dirección el nombre del ordenador: http://nombre
      • Si queremos que nuestro servidor se vea desde Internet necesitamos saber cual es nuestra IP pública en Internet. Desde un ordenador en Internet y conociendo esta dirección IP podremos ver el sitio web que está sirviendo nuestro Apache. Si estamos en una red local tendremos que configurar el router para que redirija las peticiones web (las que vienen por el puerto 80) al ordenador que esté corriendo el Apache (la IP local del ordenador). Si tenemos un cortafuegos nos hemos de asegurar que no nos esté bloqueando el puerto 80 (el cortafuegos puede encontrarse en el sistema operativo y en el router). Si tenemos IP dinámica podríamos probar no-ip para evitar el uso directo de nuestra IP pública.

Uso de MySQL

Diseño de la base de datos

Antes de nada hemos de pensar el diseño de la base de datos que queremos crear.

  • Nombre de la base de datos → blog
  • Cotejamiento (Collation) → Uno que ponga Spanish: latin1_spanish_ci o utf8_spanish_ci
  • Campos de la tabla articulos:
    Nombre Tipo de datos Obligatorio Indice
    id INT (autoincrement) NOT NULL PRIMARY KEY
    titulo VARCHAR(100) NOT NULL  
    contenido TEXT NOT NULL  
    fecha DATE NOT NULL  
    categoria VARCHAR(50) NOT NULL  
  • Campos de la tabla comentarios:
    Nombre Tipo de datos Obligatorio Indice
    id INT (autoincrement) NOT NULL PRIMARY KEY
    autor VARCHAR(50) NOT NULL  
    comentario TEXT NOT NULL  
    articulo_id INT NOT NULL  
  • En el nombre de la base de datos, de las tablas y de los campos conviene escribir todo en minúsculas, sin acentos, sin la eñe, sin caracteres especiales y además usar el símbolo guión bajo "_" en vez del espacio en blanco.
  • El nombre de la tabla se escribe en plural y el nombre de los campos en singular.
  • Toda tabla ha de tener cómo primer campo el id que es un número entero (sin decimales) y autoincremental que sirve para identificar cada registro. Por ejemplo: a cada artículo de la tabla artículos le corresponderá un número único. Así podremos estar seguro de a qué artículo de todos los que hay nos estamos refiriendo.
  • Hay que observar que en la tabla comentarios se encuentra el campo articulo_id que sirve para saber a qué artículo corresponde cada comentario. Esto es una relación entre ambas tablas.

Pasos a seguir

  • Nos aseguramos que está funcionando el servidor MySQL, para ello observamos que nos dice nuestra aplicación WAMP, que se encuentra iconizado cerca de la hora.
  • Iremos al phpMyAdmin y allí crearemos la base de datos con sus tablas y campos. El phpMyAdmin lo encontraremos en http://localhost/mysql/ o picando en el programa WAMP. (En vez del phpMyAdmin podríamos usar el MySQL Administrator que se encuentra en la web oficial del MySQL). Podemos ver capturas de pantalla de la creación del la tabla artículos y de la tabla comentarios. El código SQL sería:
    CREATE DATABASE blog; 
    USE blog;
    CREATE TABLE articulos (
      id int NOT NULL auto_increment,
      titulo varchar(100) NOT NULL,
      contenido text NOT NULL,
      fecha date NOT NULL,
      categoria varchar(50) NOT NULL,
      PRIMARY KEY  (id)
    );
    CREATE TABLE comentarios (
      id int NOT NULL auto_increment,
      autor varchar(50) NOT NULL,
      comentario text NOT NULL,
      articulo_id int(11) NOT NULL,
      PRIMARY KEY  (id)
    );
    
  • Una vez hemos finalizado podremos cerrar sin ningún problema el phpMyAdmin.
  • Es bueno saber donde paran los archivos de la base de datos. Se encuentran en la carpeta data: "c:\Archivos de programa\EasyPHP\mysql\data" o bien "c:\wamp\mysql\data".
  • Hasta que no creemos una política de seguridad en nuestro MySQL el usuario es root sin contraseña.

Comentarios

  1. 1 Barinas 2007-01-31 Hace 10 años
    Tu tutorial se ve que sera super completo, espero que te animes a completarlo, ya tengo este link en la mira, gracias por tu aporte
  2. 2 ExLabordiner 2007-04-13 Hace 10 años
    Please, give me contact address (email or msn) of this site administrator...
    Thanks!
  3. 3 carlos 2007-04-26 Hace 10 años
    Yo necesito insertar código PHP en dreamweaver. Como lograrlo.
    saludos
  4. 4 luis 2007-05-29 Hace 10 años
    Hola, tengo el easyphp 1.7 y quiero insertar imagenes mediante el mismo EASYPHP. Como hago? que tipo de datos es la imagen? como hago para cargarla. El código para mostrarla en la pagina web yo lo tengo, pero lo unico que no se es insertar la imagen por medio de EASYPHP. Solo quiero saber el tipo de datos. Te agradezco muchisimo tu ayuda
  5. 5 Charletis 2009-02-04 Hace 8 años
    Hola, me ha sido muy util lo que has publicado hasta ahora, pero me interesaría conocer más, de como integrarlo en dreamweaver, puesto que tengo que crear un blog en mi empresa.
    Anímate que está muy bien explicado
  6. 6 NANDDO 2010-10-10 Hace 7 años
    TIENES QUE TERMINAR ESTE TUTORIAL!!! POR FAVOR!!
  7. 7 appliance repair 2011-09-20 Hace 6 años
    Es evidente que hay mucho que aprender acerca de esto. Creo que hizo algunas cosas buenas en características también. Sigue trabajando, gran trabajo!
  8. 8 Forex For Lunch 2011-11-11 Hace 6 años
    Grandes cosas de ti, hombre. He leído tus cosas antes y usted es demasiado impresionante. Me encanta lo que usted ha llegado hasta aquí, el amor lo que estás diciendo y cómo lo dice. Usted lo hace entretenido y que todavía se las arreglan para mantener la elegancia. No puedo esperar a leer más de usted. Esto es realmente un gran blog.
Proinf.net, ©2003-2017 ci 3.1.5 (CC) Esta obra está bajo una licencia de Creative Commons Este software está sujeto a la CC-GNU GPL