XAMPP y Dreamweaver CS3/CS4

Categoría: Desarrollo Web, Tips | July 6, 2009

Dreamweaver una de las herramientas más conocidas, nos ofrece varias características con las que se puede comparar con cualquier IDE (Aptana, Zend Studio, Netbeans, etc.) y es conocídisimo por su editor WYSIWYG (What you see is what you get, lo que ves es lo que obtienes). Para utilizarlo con XAMPP (o cualquier otra solución WAMP) debemos crear un sitio dentro de Dreamweaver. Este video resume como configuré XAMPP y Dreamweaver (es aplicable a cualquier otra solución si no se cambiaron los puertos). En este caso utilicé una carpeta llamada “new_project” y todo con “New Project”, para ver como se cambia el Document Root pueden verlo acá.

(Acerca del Video: Utilicé Dreamweaver CS4 en inglés, véanlo con la opción FullScreen y por alguna rara razón se para en el segundo 27, asi que adelanten esa parte :S)

Estos son los pasos (con la carpeta y nombre de proyecto “Nuevo Proyecto“). Tenemos nuestros proyectos en un lugar separado. Creamos la carpeta de nuestro proyecto, en este caso será llamada “nuevo_proyecto” (eviten utilizar caracteres como espacios, tildes, etc).

Crear el sitio

Iniciamos DreamWeaver, Entramos a la opción Sitio -> Nuevo Sitio (Site -> New Site) y llenamos los datos de nuestro nuevo sitio en la pestaña “Avanzadas” (Advanced). Llenamos los campos:

  • Datos locales
    • Nombre del Sitio: Nuevo Proyecto
    • Carpeta raíz local: c:\www\nuevo_proyecto
    • Dirección HTTP: http://localhost/nuevo_proyecto
  • Servidor de Prueba
    • Modelo del servidor: PHP MySQL
    • Acceso: Local/red
    • Carpeta de servidor: c:\www\nuevo_proyecto
    • Prefijo de URL: http://localhost/nuevo_proyecto

1

Creamos un nuevo script llamado “index.php”, en el que colocamos lo siguiente

<?phpphpinfo();

Hacemos F12 (shortcut para hacer un preview en el browser). Desplegará la información del servidor Apache de XAMPP. Entonces tenemos la siguiente estructura de carpetas (imagen de DreamWeaver CS3):

2

Configurando MySQL

Primero debemos crear un nuevo Usuario (por seguridad) en MySQL. Ingresamos a http://localhost/phpmyadmin, si no cambiamos nada previamente en el nombre de usuario debemos colocar “root” y dejar vacío el campo de password. Una vez dentro de PHPMyAdmin vamos al campo Privilegios(se encuentra como opción debajo de Server: localhost) que es el lugar desde donde podemos crear un nuevo Usuario en MySQL. Dentro de privilegios se encuentra la opción:

6

Hacemos click y nos presentará un formulario el cual llenamos de la forma en que se muestra en la imagen. Abajo en “Privilegios Globales” (Global Privilegies), selecciona las opciones que podrá realizar el nuevo usuario en la base de datos, en este caso marca todas las opciones del primer y segundo bloque (Datos y Estructura (Data, Structure)).

14

Ahora crearemos una Base de Datos, volvemos a http://localhost/phpmyadmin y en la página inicial nos da la opción de crear una nueva base de datos, en este caso nuestra base de datos se llamará “nuevo_proyecto“.

4

Una vez creada, esta base de datos será seleccionada, ahora debemos crear al menos una tabla, la creamos con la opción que nos da debajo de “No se han encontrado tablas …”, colocamos un nombre, en este caso “coches” y creamos los campos de esta nueva tabla.

5

Después podemos llenar con algunos datos esa tabla.

Conexión de MySQL y DreamWeaver

Volvemos a DreamWeaver y creamos una nueva página, “nuevo_proyecto.php” y colocamos la vista de Diseño (Design). Para crear la conexión vamos a Ventana -> Bases de Datos (Window->Databases), lo cual nos abrirá un nuevo panel, junto con otros (Vinculaciones (Bindings),Bases de Datos (Databases), etc.), esos paneles nos ayudan a tener una perspectiva acerca de las conexiones, bases de datos utilizadas,etc, necesarias para desarrollar aplicaciones web.

3

En el panel de Bases de Datos(Databases) hacemos click en el +, lo cual nos abrirá una nueva opción para crear una nueva conexión MySQL. Hacemos click y nos desplegará una pantalla como la siguiente.

7

Creando un nuevo RecordSet

Nos dirigimos a Vinculaciones, y creamos un Juego de Registros (recordset)

9

Nos pedirá que escojamos una conexión.

10

Una vez configurada hacemos la prueba (click en el botón Prueba).

8

Probando la conexión

Antes que nada debemos aumentar una línea de código a la conexión, dado que PHPmyAdmin tiene por defectolas bases de datos con UTF8. Para solucionar este problema colocamos esta línea de código (acerca de conexión mysql_pconnect)

mysql_query("SET SESSION character_set_results = 'UTF8'");

Para hacer la prueba colocaremos una Tabla dinámica, la puedes encontrar en Insertar->Objetos de Datos -> Datos Dinámicos -> Tabla Dinámica:

11

La colocamos:

12

Y mediante el LiveView vemos los datos guardados:

13

Comentarios

  1. Hola tengo un problema sigo todos tus pasos al pie de la letra una y otra vez.. pero cuando oprimo f12 para ver la informacion del servidor.. me dice que no lo encuentra :S

    Anonymous — November 6, 2009 @ 4:28 am

  2. puede que esto afecte?

    #Listen 0.0.0.0:80
    #Listen [::]:80
    Listen 80

    Soy Jorge del mismo post de arriba

    Anonymous — November 6, 2009 @ 4:32 am

  3. Hola Jorge,

    Puede que el problema sea que en el tutorial yo tenía cambiado el "Document Root", lo cual lo tengo explidao en este post http://rene-silva.blogspot.com/2009/04/xampp-un-servidor-web-en-tu-computadora.html .

    En caso de que no veas nada al entrar a http://localhost puedes intentar lo siguiente:

    Para ver si funciona entra a http://localhost/ , si ves una pantalla en blanco cerciorate de que el servidor esté funcionando (en XAMPP, su panel de control te indica).
    Si está funcionando y aún no ves nada, entonces entra a "C:\WINDOWS\system32\drivers\etc\hosts" y verifica que este esta línea

    127.0.0.1 localhost

    Es línea indica que cualquier llamado a "localhost" tiene que ir a nuestra computadora (127.0.0.1 es el loopback virtual).

    Saludos

    René Silva — November 6, 2009 @ 8:09 am

  4. Hola Gracias.. ayer volvi a intentar todo pero cambia la carpte simplemente trabajare desde el htdocs y ps asi me funciono todo perfecto ahora estoy tratando de aprender como agregar eliminar y actulizar valores desde el Dreamweaver

    Exelente tu tutorial me ayudo muchisimo :D

    Jorge

    Anonymous — November 6, 2009 @ 3:36 pm

  5. Tengo el mismo problema que me dice que no lo encuentra al dar f12…
    pero tu post que pones dice que no existe
    Gracias!

    Paulina — July 12, 2011 @ 11:58 am

  6. hola no lo entiendo muy bien de como configurar para usarlo xampp y dreamweaver cs4 ya que quiero usarlo archivos de php si alguien me puede ayudar estare agradecido

    James — July 21, 2011 @ 4:22 pm

  7. Me gusta usar con MySQL – herramienta gratuita de Valentina Studio, hace todo lo que necesito, y lo hace muy bien http://www.valentina-db.com/en/valentina-studio-overview

    DENIS — November 19, 2013 @ 8:17 am

  8. Hola! Estoy aprendiendo a usar dreamweaver, me conseguí con este tutorial, y me di cuenta que al presionar sobre la dirección de localhost/phpmyadmin que tienes justo luego del subtítulo: Configurando MySQL; creo que entro en una sesión que está abierta de PHPMYADMIN… Repito, estoy aprendiendo pero eso es lo que veo… Hice un PrintScreen de lo que me salió, pero no sé a donde enviarlo para que lo chequee!!! Saludos…

    María — June 26, 2014 @ 1:49 pm

  9. que buen tutorial, GRACIAS hermano, de verdad me ayudo muchisimo!!!!!!!!!!!!1

    Fracker — August 19, 2014 @ 4:35 pm

Deja un comentario