Introducción

El desarrollo de aplicaciones web con PHP y MySQL siempre ha estado relacionado con LINUX, tal vez porque ese fue su ambiente de origen. Sin embargo, lo que mucha gente no sabe es que es perfectamente posible desarrollar este tipo de aplicaciones y sitios en nuestro Windows favorito. ¡Y con nuestra herramienta favorita! (Léase Dreamweaver MX).

En este tutorial vamos a cubrir la instalación de las herramientas que necesitamos para desarrollar, la configuración de Dreamweaver MX, la creación de una página que que acceda a una base de datos y muestre los datos y un formulario que permita agregar más datos.

Instalación de la plataforma de Desarrollo

Para comenzar, necesitamos descargar alguno de los varios paquetes integrados que existen hoy día.

Cualquiera de estos paquetes instalarán, como mínimo, las herramientas que necesitamos, todas con licencia GNU/GPL (Gratuitas):

• Servidor Web Apache
• Lenguaje PHP
• Base de Datos MySQL
• Administrador de Base de Datos phpMyAdmin

Podríamos instalar cada uno de ellos por separado, descargándolo de sus respectivos sitios, pero en tal caso, deberíamos realizar toda la configuración manualmente, lo cual puede ser muy engorroso. La ventaja de estos paquetes es que ya están preconfigurados para funcionar correctamente en Windows.

Para este tutorial elegimos AppServ. La versión 1.8.0 (la última en el momento de escribir esto) ocupa sólamente 18 Mb para descargar en un único ejecutable.

Comenzamos la instalación y seleccionamos el directorio por defecto: C:\AppServ, y la instalación típica que se nos informa que ocupará 62 Mb en nuestro disco.

En Server Information, nos aseguramos de dejar el nombre del servidor como 'localhost'. La dirección de correo no es importante.

La pantalla siguiente nos pedirá la información de usuario y contraseña para las bases de datos MySQL. En User Name ponemos 'mmug', y en Password 'argentina' (asegurarse de tipear bien, y de anotar los datos en algún lado). Dejar el juego de caracteres (charset) en su valor por defecto.

Luego de esto el programa de instalación procederá a copiar los archivos en nuestro rígido. Al finalizar la copia, nos mostrará la última pantalla donde debemos activar los casilleros 'Start Apache' y 'Start MySQL'.

Si todo ha salido bien, veremos un par de ventanas que aparecen y desaparecen, y en la barra de tareas se agregará un ícono con un semáforo en verde que indica que MySQL está funcionando.

Para comprobar que Apache funciona, abrimos el Explorer (o el navegador preferido) y escribimos: http:\\localhost en la barra de direcciones. Si todo está perfecto cargará la página de bienvenida que vemos a la derecha. ¡Estamos 'navegando' en nuestra propia PC!

Si investigamos en nuestro disco rígido hallaremos que dentro de la carpeta C:\AppServ\ hay una carpeta llamada www. Allí deben ubicarse las páginas de nuestros sitios. (El archivo index.php que allí ven es la página de bienvenida que veíamos antes).

Para ser ordenados, dentro de la carpeta C:\AppServ\www\ crearemos una subcarpeta para cada uno de los sitios que creemos, de otra forma tendríamos todo mezclado. Para nuestro ejemplo vamos a crear una carpeta llamada tutorial allí dentro, como se muestra en la figura.

Configuración del Sitio en Dreamweaver MX

Ahora necesitamos informarle a Dreamweaver de nuestra nueva forma de trabajar, y de la ubicación de los archivos. Vamos a usar el servidor Apache local como Servidor de Testing (Testing Server).

Elegimos la opción Site/New Site... y nos aseguramos de estar en el modo 'Basic', y completamos el Asistente:

1. El nombre de nuestro sitio será Tutorial.
2. En el segundo paso elegimos 'Yes, I want to use a server technology', y en la lista desplegable seleccionamos 'PHP MySQL'.
3. En el tercer paso seleccionamos la primera opción: 'Edit an test locally (my testing server is on this computer)'. Luego vamos a buscar la carpeta que creamos antes (C:\AppServ\www\tutorial\).
4. En el cuarto paso debemos seleccionar cómo accedemos a nuestro sitio por HTTP, o sea, desde el Explorer. Ponemos: http://localhost/tutorial
5. En el quinto paso para este ejemplo le diremos que No. Aquí deberían completar si piensan subir los archivos a la web, por ejemplo.

Finalizamos. Si editamos la definición de nuestro sitio y observamos en 'Advanced', las pantallas de Local Info y Testing Server deberían ser similares a estas:

Creando la Base de Datos

Ahora necesitamos crear la base de datos. Para ello vamos a usar la herramienta de administración, llamada phpMyAdmin. ¿Donde la encontramos? No busquen un ícono... abran el Explorer y escriban: http://localhost/phpMyAdmin/, y se abrirá la página inicial de esta potente herramienta.

La ventana está dividida en 2 partes: A la izquierda, tenemos un selector de base de datos para trabajar con una ya creada. A la derecha, tenemos las opciones para crear una base nueva. Escribimos 'prueba' como nombre de la base y hacemos clic en el botón Crear.

La base se ha creado, pero no tiene ninguna tabla aún. phpMyAdmin automáticamente me deja en la pantalla de creación de tablas.

Vamos a crear una tabla llamada empleados, con 5 campos (la cantidad de campos podemos modificarla luego como sea necesario).

Al continuar se nos presenta la pantalla donde definimos los campos de la tabla. Vamos a completarla siguiendo la imagen de abajo. Por cuestiones de espacio se muestran sólamente los lugares donde debemos introducir valores.

Finalmente hacemos clic en el botón 'Grabar' y se crea la tabla. Aquí terminamos con phpMyAdmin en este tutorial.

Accediendo a la Base de Datos desde Dreamweaver MX

Volvemos a Dreamweaver, creamos una página en blanco (File/New... y luego elegimos Dynamic Page y PHP) y la guardamos como index.php dentro de nuestro sitio (C:\AppServ\www\tutorial\).

Ahora vamos a incorporar el acceso a la base de datos a nuestra página. Vamos al menú Window / Database, y se mostrará la ventana acoplable que vemos en la figura. Los primeros tres pasos deben ya tener el tilde, pues definimos todo esto al configurar nuestro sitio, unos momentos atrás.

Sólo nos falta el último paso, crear una conección a la base.

Hacemos clic en el signo + y elegimos MySQL Connection.

En la ventana que aparece completamos los datos como se muestra abajo. El nombre de la conexión (Connection Name) puede ser cualquiera que se nos ocurra. El User Name y Password son los que elegimos al instalar AppServ.

Si presionamos el botón Select, podremos ver todas las bases almacenadas en nuestra PC. Una vez seleccionada la base podemos hacer clic en el botón Test para verificar que todo esté bien.

Ahora la ventana acoplable Database mostrará el contenido de nuestra base, con la tabla Empleados en su interior.

Creando nuestra página

Ahora es cuando veremos la potencia de Dreamweaver para crear código por nosotros. Vamos a hacer una página que en la parte superior tenga un formulario de carga de datos, y en la parte inferior el listado de los datos cargados.

Realmente Dreamweaver MX nos lo hace fácil.

Primero creamos el formulario de carga de datos. Elegimos Insert / Application Objects / Record Insertion Form. Aparece la siguiente ventana, que debemos completar como sigue:

Debemos tener cuidado con 2 cosas:

• En el campo After Inserting, Goto: Esta es la página a donde se dirigirá después de insertar los datos en la base. Elegimos esta misma página porque mostramos los resultados aquí mismo, lo normal sería, quizás, redirigir a una página de agradecimiento, o algo parecido.
• En la lista de campos (Form Fields), debemos eliminar el campo id (con el botón -) porque es un valor que se incrementa automáticamente al crearse el registro en la base, y provocará un error si queremos introducir otro valor allí.

Aceptamos y vemos como Dreamweaver crea un formulario listo para usar.

Sólamente nos queda mostrar el contenido de la base, en una Tabla Dinámica.

Para ello debemos definir un Recordset, es decir una consulta que defina qué datos queremos traer, y de qué tabla (podríamos tener muchas, o realizar una consulta que traiga datos de varias tablas).

Vamos al menú Window / Bindings para mostrar la ventana acoplable que nos permitirá realizar la tarea. Similar a lo anterior, sólo tenemos que hacer clic en el signo + y elegir Recordset (Query) para crear la consulta.

En la ventana que aparece completamos los datos como se muestra abajo. El nombre del Recordset (Name) puede ser cualquiera que se nos ocurra. En la lista Table se muestran todas las tablas de la base prueba, en este caso sólo tenemos una.

Una vez elegidas las opciones podemos hacer clic en el botón Test para verificar que todo esté bien, aunque por esta vez no nos mostrará ningún dato, ya que no cargamos nada en la tabla empleados.

Ahora la ventana acoplable Bindings mostrará la consulta que acabamos de crear, con los campos que seleccionamos. Podemos crear todos los Recordsets que necesitemos, con diferentes consultas a la base.

Ahora insertamos la Tabla Dinámica. Elegimos Insert / Application Objects / Dynamic Table y veremos la siguiente ventana:

Al aceptar veremos como Dreamweaver inserta la tabla dinámica.

Sólo nos falta un detalle: Cuando tengamos más registros que la cantidad que especificamos (10 en el ejemplo), vamos a necesitar agregar unos links para avanzar y retroceder por el listado.

Vamos Window / Server Behaviors. La ventana acoplable Server Behaviors ya está mostrando algunos elementos que se crearon en los pasos anteriores.

1. Posicionamos el cursor al final de la tabla que acabamos de insertar.
2. Hacemos clic en el botón +
3. Seleccionamos Recodset Paging / Move To First Record.
4. Aceptamos y Dreamweaver creará el link.
5. Repetimos los pasos anteriores para los otros 3 links: Move To Previous Record, Move To Next Record y Move To Last Record.

Ahora, sería lógico que estos enlaces aparecan sólo cuando sea necesario, es decir, First y Previous no deberían aparecer en la primer hoja de datos, y Next y Last no deberían aparecer en la última hoja de datos, para no confundir al usuario.

Dreamweaver MX nuevamente nos da la solución sin tocar el código:

• Seleccionamos los links First y Previous con el cursor.
• Vamos nuevamente a la ventana acoplable Server Behaviors y agregamos Show Region / Show Region If Not First Record.

Ahora hacemos lo mismo con los otros 2 links:

• Seleccionamos los links Next y Last con el cursor.
• Vamos nuevamente a la ventana acoplable Server Behaviors y agregamos Show Region / Show Region If Not Last Record.

La ventana de diseño de Dreamweaver debería mostrarse así:

¡Listo! Presionamos F12 para probarlo en el explorador, y veremos cómo todas las herramientas que hemos instalado hacen su trabajo y nuestra página dinámica funciona perfectamente.

Nos queda como tarea de diseñadores darle la apariencia gráfica que deseemos.

Espero que este tutorial les sirva para descubrir un mundo que a veces parece demasiado complicado, como es el mundo de la programación, pero que gracias a Dreamweaver MX, se nos hace muy fácil.