DreamWeaver CS5 y CS6 Cursosindustriales. Curso de DreamWeaver CS6 1
DREAMWEAVER CS5. DISEÑO DE PÁGINAS DINÁMICAS. En esta segunda sección de diseño de páginas Web con Dreamweaver CS, vamos a hablar sobre los servidores Web y los programas que nos ayudan a desarrollar proyectos Web dinámicos que harán que nuestro contenido Web se modifique él solo sin que tengamos que cambiarlo en nuestra página Web y sin volver a subir la página Web al servidor. Está claro que la cuando hablamos de páginas dinámicas, estamos haciendo una referencia a páginas que cambian su contenido de manera que el administrador solo cambie una parte desde, por norma general un Script o una base de datos. Pero no creas que cambia el contenido al antojo de la Web, no. Es el administrador el que facilita el cambio del contenido, actualizándolo o modificándolo a su gusto, y el servidor el que se encarga de efectuar ese cambio. Así el administrador de la Web solo tiene que aplicar el cambio desde la base de datos, o desde el servidor sin que tenga que actualizar la página Web. En este sentido, el propio Dreamweaver CS5, nos facilita algunas herramientas que nos harán posible y más cómodo la actualización de la Web, por lo que aprenderemos a usarlas para poder crear nuestras páginas dinámicas. Este curso está redactado, diseñado, compilado y distribuido por Cursosindustriales.net. El autor del mismo te da derecho a compartirlo, imprimirlo, usarlo y modificarlo siempre que referencies la procedencia del curso y que en este caso es de Cursosindustriales.net y su autor Deimos_hack. Si has conseguido este curso y has tenido que pagar por ello, envíame un correo a administrador@cursosindustriales.net y enseguida me pondré en contacto contigo. Si quieres ayudar al proyecto Cursosindustriales, haz una donación mediante PayPal en los puntos autorizados de la Web. Cursosindustriales. Curso de DreamWeaver CS6 2
SERVIDOR XAMPP Antes de aprender los comandos PHP necesarios, y las herramientas que nos proporciona Dreamweaver CS5 para crear páginas dinámicas, tenemos que disponer de un servidor de pruebas en nuestro ordenador, ya que no todo el mundo se puede permitir tener un servidor de Hosting en el cual efectuar las pruebas. En este caso he elegido como primera opción, el servidor XAMPP que te puedes bajar desde la dirección: http://www.apachefriends.org/es/xampp.html El servidor XAMPP está basado en tecnología Apache y adaptada para varios sistemas operativos entre los cuales están los sistemas de Microsoft, Windows. El programa nos permitirá instalar en nuestro Pc un servidor local que actuará como si fuese un propio servidor de Internet y así podemos visualizar nuestras páginas dinámicas (además de las páginas normales en.html). No cabe recordar que el servidor XAMPP que vamos a instalar en el curso estará disponible para Windows, por lo que si tienes otro sistema operativo en tu ordenador, deberás de bajarte la versión adecuada a tu sistema. Por lo que para Windows, tendrás que bajarte desde esta página: http://www.apachefriends.org/en/xampp-windows.html En dicha página observas una descripción del producto que te vas a bajar y las características del mismo. Además te ofrece diversos apartados para que conozcas el producto. Además tienes varias opciones de descarga: Para descargar el ejecutable (.EXE) presiona sobre el primer enlace y se dirigirá la página directamente a la zona de descargas de XAMPP. En ella, tienes tres opciones por defecto: Cursosindustriales. Curso de DreamWeaver CS6 3
El Instaler ZIP 7ZIP Pulsa sobre el Instaler para que se te descargue el ejecutable y se auto instale por defecto. Cuando se te esté instalando, se abrirá una ventana de consola de comandos en la cual se empezará a instalar la aplicación. Cuando se haya instalado te pedirá que rellenes una serie de preguntas relacionadas con la configuración inicial del servidor Apache en Windows. Deja por defecto las respuestas como se muestran y pulsa intro hasta que te indique que se te ha instalado el servidor Xampp. NOTA: Aunque no lo he mencionado, por defecto Xampp instalará el servidor dentro de la carpeta principal del disco duro en el cual se instale el propio servidor local. Por tanto, deberás de tener el Xampp instalado en C:\. Esta ruta corta y directa se ha hecho para que puedas localizar rápidamente los archivos que más tarde aprenderemos a usar y colocar en nuestro servidor. Si el programa de instalación te muestra otra ruta, te aconsejo que cambies a la carpeta principal para que luego no tengas que estar buscando en otras carpetas. Cuando lo tengas instalado, se te creará un icono en el escritorio con la siguiente forma pulsa doble clic para que se abra la aplicación: Cursosindustriales. Curso de DreamWeaver CS6 4
La aplicación de Xampp no solo no se ejecuta de instalar el servidor propiamente dicho, sino que además te instala los módulos necesarios para poder trabajar con base de datos MySQL, te instala un módulo cliente de FileZilla, para que puedas subir tus archivos al servidor Web, y un cliente de correo que deberás de configurar por tu propia cuenta si te interesa, porque no afecta en nada al desarrollo de éste curso y por lo tanto no me voy a entretener en indicarte cómo funciona. Los controles que más vas a usar en tus páginas dinámicas son los módulos de Apache, y el de MySQL que son los módulos del servidor local (lo habilita) y el de las bases de datos (para que puedas crear, manipular, modificar), tus bases de datos MySQL y que más tarde usaremos en las páginas Web. Los controles CheckBox situados junto a cada módulo, llamados SVC, al dejarlos pulsados, habilitan al inicio de Windows los módulos pertinentes; por lo que si dejas pulsado el CheckBox del módulo de Apache, cuando arranque Windows lo tendrás habilitado por defecto y no tendrás que ejecutar el programa. Yo te recomiendo que lo dejes desmarcado, ya que si tienes un ordenador un poco chungo, ésta opción chupa mucha memoria del ordenador al inicio y hace que te tarde mucho más en encender el ordenador. Cursosindustriales. Curso de DreamWeaver CS6 5
MÓDULO APACHE. Cuando pulsas sobre Administrar, se te muestra la ventana principal de la aplicación. En un primer uso, se muestra la ventana de selección de idioma. Selecciona el castellano, o el chino (si quieres): Cuando selecciones el idioma se te cargará la página principal de la aplicación: Cursosindustriales. Curso de DreamWeaver CS6 6
En ella podrás ver todas las herramientas que dispones dentro de tu servidor Web Apache y los accesos directos a cada una de ellas, y el estado de la aplicación principal. De momento no vamos a utilizar esta página principal. Ahora que ya tienes habilitado y activado tu servidor Web Apache, puedes abrir tu navegador Web y en la barra de dirección poner la dirección del ordenador en local, es decir 127.0.0.1, o simplemente poner localhost/. NOTA: Es importante poner la barra final de localhost, en la barra del navegador; eso se debe a que el ordenador que está conectado a Internet, realizaría una búsqueda con la palabra localhost de no ser porque está la barra invertida que le indica al navegador que es un directorio local. Te mostrará la página anterior. Lo que nos importa ahora es ir directamente a la carpeta de instalación de Xampp para empezar a crear los archivos necesarios. Recuerdas en el primer tema del curso como creábamos un nuevo sitio para guardar nuestras páginas Web? Repasa Tema1. Pues ahora, lo que tenemos que hacer es copiar ese sitio a nuestro servidor Xampp para que así se pueda ejecutar directamente a través de él y no lo hagamos directamente a través del servidor. Recuerda que nuestro sitio se llamaba Pruebas y que lo teníamos localizado en el escritorio esa carpeta. Bien, ahora lo que vamos a hacer es copiarla y moverla a nuestro servidor Xampp. Para ello, clic derecho y sobre el menú que se te muestra pulsa sobre Copiar. Cursosindustriales. Curso de DreamWeaver CS6 7
Ahora vamos al directorio raíz en el cual se ha instalado nuestro servidor local y localizamos la carpeta Xampp y abrimos la carpeta: Como puedes ver aquí tienes todas las carpetas que hacen posible que tanto el servidor como los programas anexos funcionen correctamente, ya que están los archivos de configuración de cada aplicación. Pero de momento solo nos fijaremos en una carpeta especial y que es similar a la carpeta que tienen muchos servidores de internet en su interior y que es la carpeta llamada htdocs. Cursosindustriales. Curso de DreamWeaver CS6 8
En esta carpeta se almacenarán los sitios que creemos en nuestro Dreamweaver CS5 para poder ejecutarlos en nuestro servidor simulando así un servidor de Internet. Por lo tanto abriremos la carpeta Htdocs, que por defecto tiene ya una carpeta y algunos archivos que hacen posible que funcione el servidor ya que, como verás tienes ahí la carpeta de Xampp que es el sitio principal cuando ejecutes el localhost/. Pega la carpeta y ahora se te abra pegado en el directorio de htdocs, con lo que ya podrás ejecutar el sitio Web desde tu servidor local como si de internet se tratase. Ahora lo que queda hacer es modificar el sitio desde Dreamweaver CS5, ya que, recuerda que el sitio estaba asignado a la carpeta del escritorio, y ahora la hemos cambiado de lugar (al servidor local). Esto nos ocasiona que tengamos que configurar el sitio para que se cargue desde la nueva ubicación del servidor local. Eso es tan fácil como Barra de Menús, Menú Sitio, y en el submenú que se muestra pulsar sobre Administrar Sitios. Selecciona el Sitio de Pruebas (que todavía tiene el Escritorio como ventana principal), y pulsa sobre el botón Editar. Cursosindustriales. Curso de DreamWeaver CS6 9
Como puedes ver, en la pestaña Sitio de la ventana que se te muestra, puedes cambiar el nombre del sitio, y también la carpeta local en la cual se acumula el sitio. Pulsa sobre el icono de carpeta de éste último menú y selecciona la ubicación en la cual has copiado la carpeta Pruebas en el directorio de Xampp. Es importante que la dirección de la carpeta local termine con el identificador de directorio (\), ya que de no disponer de él, Xampp y Dreamweaver CS5 importaría todo el contenido de la carpeta anterior htdocs, es decir, que para que Dreamweaver CS5 tuviese en cuenta el contenido de la carpeta Pruebas, tiene que terminar en \. Cuando pulsemos sobre Guardar, Dreamweaver cargará todos los archivos y carpetas que existan dentro del nuevo sitio Pruebas. Como puedes ver en la ventana de servidores, yo no tengo ningún archivo ni carpeta por lo que está vacío. Cursosindustriales. Curso de DreamWeaver CS6 10
CREAR NUEVO ARCHIVO PHP. Originalmente, cuando creábamos un archivo HTML, Dreamweaver CS5 nos posibilitaba que pudiésemos visualizarlo y ejecutarlo, ya que abría nuestro navegador y nos mostraba nuestra página Web. El hecho de que hayamos cambiado el sitio del servidor, no impide que se sigan mostrando páginas Web HTML ya que Dreamweaver abre el navegador instalado en el sistema operativo y le dice que cargue el documento. De hecho, si desconectas el servidor Xampp y ejecutas un archivo Web en formato HTML, se abrirá la página Web como si nada. Imagina que tenemos en la carpeta Pruebas un archivo llamado Index.html. Cuando ejecutemos la aplicación se abrirá la página Index.html a pesar de que tenemos el servidor Xampp desconectado. Cursosindustriales. Curso de DreamWeaver CS6 11
El resultado es que te muestra la página Index.html. El problema y la magia de tener un servidor local son para realizar pruebas de páginas Web que por defecto el navegador no puede abrir. Esas son las páginas en PHP. PHP es un lenguaje del lado del servidor, por lo que el navegador no entiende el lenguaje PHP. El navegador no entiende PHP; y aunque PHP es un lenguaje de Script, el navegador no lo puede interpretar, con lo que si tuviésemos una página en PHP y tuviésemos Xampp desactivado, solo se cargaría en la página, todo el código HTML que contuviese y el código PHP no se mostraría. Además antes de cargar la página, Dreamweaver CS5 te mostraría el siguiente mensaje: Cursosindustriales. Curso de DreamWeaver CS6 12
Por lo que a continuación vamos a crear nuestro servidor de pruebas local, para que nos cargue todo el código PHP que introduzcamos en nuestra Web. Servidor de pruebas. En la ventana anterior, pulsa sobre Si, o si no en la barra de Menús, el menú Sitio, y Administrar Sitios. Selecciona el sitio en cuestión (en este caso Pruebas), y pulsa sobre Editar. En la ventana que se muestra selecciona la pestaña Servidores, tal y como se muestra en pantalla: Dreamweaver CS5 requiere de un servidor Remoto para poder cargar las páginas Webs en cualquier formato. Pero en PHP se utiliza también otro tipo de servidor para realizar la conexión a bases de datos MySQL; este servidor, servidor de prueba sirve para poder manipular bases de datos MySQL y ejecutar páginas PHP. Cursosindustriales. Curso de DreamWeaver CS6 13
Por tanto, siempre que definamos un servidor de prueba, definiremos también un servidor Remoto que realizará la conexión a la base de datos que utilicemos en nuestra aplicación. De momento solo vamos a crear un servidor de pruebas. Pulsa sobre el símbolo (+) que existe abajo de la ventana principal. Se te abre la ventana de Nuevo servidor. Existen varios tipos de conexiones: La primera y la segunda están definidas principalmente para subir los archivos al servidor de Internet. Aunque existen varias formas de subir los archivos al servidor, se puede definir un servidor FTP para ello. Principalmente usaremos la conexión Local/red para manipular nuestros archivos. Esta conexión también nos permite subir los archivos a nuestro servidor de Internet. Cursosindustriales. Curso de DreamWeaver CS6 14
Por tanto seleccionaremos en Conectar usando, el Ítem Local/red. Como después definiremos otro servidor para MySQL, podemos establecer el nombre de este servidor como Servidor de pruebas, por ejemplo. En la carpeta del servidor, debes de seleccionar la carpeta propia del sitio, acabando siempre con la barra invertida. Ten en cuenta que en la URL Web debes de poner siempre la dirección del servidor Xampp seguido de la raíz del sitio y terminado con la barra invertida. De no hacerlo así, el servidor Remoto no funcionaría para cargar Páginas. Cursosindustriales. Curso de DreamWeaver CS6 15
Puedes ver cómo queda una vez pulsado el botón Guardar: Por desgracia, cuando configures un servidor Remoto, deberás de habilitar Xampp para poder comprobar páginas Web a través de Dreamweaver CS5, ya que a partir de entonces requiere procesar todo tipo de páginas a través del mismo. Crear página en PHP. Ahora que tenemos un servidor Remoto estamos a disposición de crear una página en PHP que se ejecutará en nuestro navegador a través de Xampp. Selecciona Menú Archivo, Y después Nuevo. En la ventana que se te muestra selecciona Nuevo página PHP y pulsa sobre Crear. Pulsa sobre Ctrl + MAYS+ S para guardar el documento y guárdalo con el nombre de Index.php. PHP es un lenguaje de programación especial y de momento no voy a entrar en detalle con él, simplemente copia el código que te muestro para que puedas guardar tu primera página en PHP y ejecutarla en tu ordenador. Pero eso sí, antes de realizar el código, créate un servidor de pruebas de la misma manera que el anterior, pero llámalo esta vez, servidor php, como se muestra en la imagen. Ahora escribe el código: Pulsa Ctrl + S para guardar el documento y ejecuta la página. Cursosindustriales. Curso de DreamWeaver CS6 16
Recuerda que tienes que tener activado Xampp para que se muestre la página, sino te saldrá el mensaje siguiente: Pero si lo tienes activado, verás en la pantalla de tu ordenador se muestra una página en blanco con un texto que dice "Bienvenido a mi página Web". Enhorabuena!! Ya has creado tu primera página Web en PHP. Más tarde en los siguiente capítulos veremos cómo crear tablas y asignar datos para que se muestren en nuestra página dinámica y se actualicen automáticamente cuando nosotros modifiquemos esos datos. Cursosindustriales. Curso de DreamWeaver CS6 17