Volver al índice Configuración de Eclipse PDT (1)

En esta lección se explica cómo configurar Eclipse PDT para crear y ejecutar archivos PHP o HTML y organizarlos en carpetas:


Elección del modo de trabajo

En Eclipse PDT los archivos PHP que editemos se agrupan en proyectos (en inglés, projects) que a su vez se agrupan en espacios de trabajo (en inglés, workspaces). Aunque se pueden tener definidos varios espacios de trabajo, cada vez se trabaja con sólo un espacio de trabajo.

Físicamente, cada espacio de trabajo se guarda en el disco duro del ordenador en una carpeta distinta. En la carpeta del espacio de trabajo, Eclipse PDT guarda los archivos de configuración de Eclipse y la información sobre los proyectos y sobre las carpetas y archivos incluidos en cada proyecto. Se podrían también guardar los archivos PHP (no sólo información sobre ellos), pero yo recomiendo guardarlos por separado, para facilitar la portabilidad.

En esta lección se explica los pasos a realizar para conseguir que:

teniendo en cuenta que:

Posteriormente, en el apartado Configurar Eclipse PDT y Apache en clase se indica cómo tendrá que hacerse en clase la configuración de Eclipse PDT y Apache para que varios alumnos puedan utilizar el mismo ordenador sin molestarse unos a otros.

Volver al principio de la página


Espacio de trabajo (Workspace)

Al iniciar Eclipse PDT mientras se carga el programa se muestra una imagen que indica la versión de Eclipse, en este caso Eclipse PDT Helios SR1.

Eclipse PDT - Inicio


Cada vez que se inicia Eclipse PDT se muestran los espacios de trabajo ya definidos y se solicita al usuario que elija uno de ellos (salvo si se marca la casilla de verificación para que utilice el espacio de trabajo actual como espacio predefinido y ya no lo pregunte más, lo que no es aconsejable).

En Windows:

Eclipse PDT - Selección de espacio de trabajo

En GNU/Linux:

Eclipse PDT - Selección de espacio de trabajo

En esta ventana inicial también se puede crear un nuevo espacio de trabajo, simplemente escribiendo una ruta válida distinta a las ya existentes. En el ejemplo siguiente se crea un nuevo espacio de trabajo llamado "workspace-nombre-alumno":

En Windows

Eclipse PDT - Selección de espacio de trabajo

En GNU/Linux:

Eclipse PDT - Selección de espacio de trabajo

Una vez iniciado Eclipse PDT, se puede cambiar de espacio de trabajo mediante el menú "File > Switch Workspace".

Volver al principio de la página


Banco de trabajo (Workbench) y perspectivas (Perspectives)

La primera vez que se abre Eclipse PDT se muestra la ventana inicial de la ayuda de Eclipse PDT, con enlaces a una presentación general de Eclipse PDT, novedades de la versión, ejemplos, tutoriales, etc. Se puede acceder en cuaquier momento a esta ventana mediante el menú Help > Welcome.

Eclipse PDT - Ventana inicial (Haz clic para ver la imagen completa)


Para acceder al banco de trabajo (Workbench), se puede hacer clic en el icono del extremo derecho de la ventana:

Eclipse PDT - Ventana inicial (Haz clic para ver la imagen completa)


Al abrir el banco de trabajo, este muestra una perspectiva, es decir, un conjunto de vistas (subventanas) y menús. Existen varias perspectivas predefinidas para distintos tipos de desarrollos (Java, PHP, CVS, etc).

Al abrir Eclipse PDT se muestra la perspectiva PHP, mostrando las vistas (subventanas) específicas para el desarrollo en PHP. Una perspectiva es un conjunto de vistas (subventanas) y menús. Existen varias perspectivas predefinidas para distintos tipos de desarrollos (Java, PHP, CVS, etc).

Eclipse PDT - Perspectiva PHP (Haz clic para ver la imagen completa)

Si por cualquier motivo no se abriera la perspectiva PHP, se puede abrir haciendo clic en el menú Window > Open Perspective > PHP o mediante el icono situado en el extremo derecho de la barra de herramientas.

Volver al principio de la página


Crear proyectos (Project)

Una vez abierta la perspectiva PHP, debe crearse un proyecto en la vista Explorador PHP (PHP Explorer), haciendo clic derecho y eligiendo la opción New > PHP Project.

Eclipse PDT - Creación de nuevo proyecto


Se abrirá una ventana de creación del proyecto en el que basta con escribir el nombre (es mejor que este nombre no debe contenga espacios ni acentos, ya que Eclipse PDT lo utiliza para construir las URL) y hacer clic en Finish. Los proyectos se guardan de forma predeterminada en el espacio de trabajo. En el ejemplo, se ha escrito el nombre "miproyecto". La ventana de creación de proyectos tiene dos pantallas más con opciones de configuración que no se tratan aquí.

Eclipse PDT - Creación de nuevo proyecto


Una vez creado el proyecto, este aparece en la vista Explorador PHP.

Eclipse PDT - Creación de nuevo proyecto

Volver al principio de la página


Crear carpetas enlazadas (Linked folder)

Una vez creado el proyecto, debe crearse una carpeta enlazada (para que los archivos no tengan que estar en el espacio de trabajo, sino en cualquier otro sitio del disco duro). La carpeta se crea en la vista Explorador PHP (PHP Explorer), seleccionando el proyecto y haciendo clic derecho y eligiendo la opción New > Folder.

Eclipse PDT - Creación de carpeta enlazada


Se abrirá una ventana de creación de la carpeta en el que se debe escribir el nombre (es mejor que este nombre no contenga espacios ni acentos, ya que Eclipse PDT lo utiliza para construir las URL). En el ejemplo, se ha escrito el nombre "micarpeta".

Eclipse PDT - Creación de carpeta enlazada


En esta ventana hay que hacer clic en Advanced para mostrar más opciones. A continuación, se debe marcar la casilla "Link to folder in the file system" y hacer clic en Browse para elegir la carpeta donde se van a guardar los archivos PHP. En el ejemplo, se ha elegido la carpeta "C:\Documents and Settings\NombreDeUsuario\Mis documentos\PHP". Finalmente, hay que hacer clic en Finish.

En Windows:

Eclipse PDT - Creación de carpeta enlazada

En GNU/Linx:

Eclipse PDT - Creación de carpeta enlazada


Una vez creada la carpeta, esta aparece en la vista Explorador PHP (el icono de una carpeta enlazada muestra una flecha en la esquina inferior derecha).

Eclipse PDT - Creación de carpeta enlazada

Volver al principio de la página


Crear carpetas no enlazadas (Folder)

Una vez creada la carpeta enlazada, en ella se pueden crear todos los archivos y subcarpetas que se deseen. Estas carpetas ya no necesitan ser carpetas enlazadas.

Para crear una subcarpeta en la carpeta enlazada, hay que seleccionar la carpeta enlazada en la vista Explorador PHP (PHP Explorer), hacer clic derecho y elegir la opción New > Folder.

Eclipse PDT - Creación de carpeta no enlazada


Se abrirá una ventana de creación de la carpeta en el que se debe escribir el nombre (es mejor que este nombre no contenga espacios ni acentos, ya que Eclipse PDT lo utiliza para construir las URL) y hacer clic en Finish. En el ejemplo, se ha escrito el nombre "pruebas".

Eclipse PDT - Creación de carpeta no enlazada


Una vez creada la carpeta, esta aparece en la vista Explorador PHP (el icono de una carpeta no enlazada es distinto del de la carpeta enlazada).

Eclipse PDT - Creación de carpeta no enlazada

Volver al principio de la página


Crear archivos PHP (PHP File)

Para crear un archivo PHP, hay que seleccionar la carpeta en la que se quiera crear el archivo en la vista Explorador PHP (PHP Explorer), hacer clic derecho y elegir la opción New > PHP File.

Eclipse PDT - Creación de archivo PHP


Se abrirá una ventana de creación de archivo en el que se debe escribir el nombre (es mejor que este nombre no contenga espacios ni acentos, ya que Eclipse PDT lo utiliza para construir las URL) y hacer clic en Finish. En el ejemplo, se ha escrito el nombre "prueba_001.php".

Eclipse PDT - Creación de archivo PHP


Una vez creado el archivo, este aparece en la vista Explorador PHP y su contenido aparece en la vista Editor PHP.

Eclipse PDT - Creación de archivo PHP

En Windows, con el explorador puede comprobarse que se ha creado el archivo:

Eclipse PDT - Creación de archivo PHP

En GNU/Linux, con el navegador de archivos Nautilus puede comprobarse que se ha creado el archivo:

Eclipse PDT - Creación de archivo PHP

Volver al principio de la página


Configurar Apache

Para que los archivos PHP se puedan abrir en el servidor local en una vista de Eclipse PDT o en el navegador del sistema, se debe añadir un alias en el archivo de configuración de Apache httpd.conf.

Para saber qué alias hay que añadir, hay que comparar la dirección que genera Eclipse PDT (a partir del nombre del proyecto, del nombre de la carpeta enlazada y del nombre de carpetas y archivo) con la ruta en el disco del archivo.

En el ejemplo definido en esta lección y que se muestra en las capturas, el nombre del proyecto es "miproyecto", el nombre de la carpeta enlazada es "micarpeta", se ha creado una carpeta "pruebas" y el fichero se llama "prueba_001.php". La dirección que genera Eclipse PDT es entonces: "http://localhost/miproyecto/micarpeta/pruebas/prueba_001.php", como muestra la tabla siguiente:

Servidor Proyecto Carpeta enlazada Carpeta Fichero
Elementos
http://localhost/
miproyecto/
micarpeta/
pruebas/
prueba_001.php
Dirección generada por Eclipse
http://localhost/miproyecto/micarpeta/pruebas/prueba_001.php

A partir de esta dirección, Apache tiene que poder encontrar el documento en el disco. En el ejemplo definido en esta lección y que se muestra en las capturas, la ruta real del archivo es:

La dirección generada por Eclipse y la ruta real del archivo deben comparase de derecha a izquierda. La parte final común y el inicio de la dirección (http://localhost/) se pueden descartar. El resto es lo que se utiliza para crear el alias. En el ejemplo definido en esta lección y que se muestra en las capturas el alias enlazaría "miproyecto/micarpeta/" con "C:\Documents and Settings\NombreDeUsuario\Mis documentos\PHP", como muestra la tabla siguiente:

Dirección generada por Eclipse Servidor (se descarta) Parte no común (dirección) Parte común (se descarta)
http://localhost/
miproyecto/micarpeta/
pruebas/prueba_001.php
http://localhost/miproyecto/micarpeta/pruebas/prueba_001.php
Ruta real
C:\Documents and settings\NombreDeUsuario\Mis documentos\PHP\pruebas\prueba_001.php

      
C:\Documents and settings\NombreDeUsuario\Mis documentos\PHP\
pruebas\prueba_001.php
Parte no común (ruta real) Parte común (se descarta)

Así, en el ejemplo definido en esta lección y que se muestra en las capturas las líneas a añadir en el archivo httpd.conf serían las siguientes (resaltadas en negrita):

<IfModule alias_module>

   Alias "/miproyecto/micarpeta" "C:\Documents and Settings\NombreDeUsuario\Mis documentos\PHP"
   <Directory "C:\Documents and Settings\NombreDeUsuario\Mis documentos\PHP">
     Options Indexes FollowSymLinks Includes ExecCGI
     AllowOverride All
     Order allow,deny
     Allow from all
   </Directory>
ScriptAlias /cgi-bin/ "C:/xampp/cgi-bin/" </IfModule>

En la directiva Alias es necesario escribir entre comillas las rutas que contengan espacios en blanco. En el ejemplo anterior se han escrito las dos rutas entre comillas aunque no eran necesarias en la primera (/miproyecto/micarpeta).

Volver al principio de la página


Configurar Eclipse PDT y Apache en clase

La configuración recomendada para utilizar en clase es la siguiente:

Volver al principio de la página


Ejecutar archivos PHP

Los archivos PHP que se estén editando se pueden ejecutar en el servidor local y visualizar en el navegador interno de Eclipse PDT o en el navegador predeterminado del sistema. Este comportamiento se selecciona mediante el menú "Window > Web Browser", eligiendo la opción "Internal Web Browser" (navegador interno de Eclipse) o "Default system Web Browser" (navegador predeterminado del sistema). Yo recomiendo elegir el navegador del sistema (y que sea Firefox ;-).

Eclipse PDT - Menú Window > Web Browser

Para ejecutar un archivo PHP, hay que guardar el archivo, seleccionarlo en la vista Explorador PHP (PHP Explorer), hacer clic derecho y elegir la opción Run As > PHP Web Page.

Eclipse PDT - Ejecutar un archivo HTML


La primera vez que se ejecuta un archivo PHP, Eclipse PDT muestra la URL con la que se ejecutará el archivo. Esta URL se puede modificar, aunque si las carpetas se han creado correctamente y el servidor está configurado correctamente, no es necesario modificarla.

Eclipse PDT - Ejecutar un archivo HTML


La primera vez que se ejecuta un archivo PHP, el cortafuegos de Windows puede mostrar un aviso. Es necesario hacer clic en "Desbloquear" para poder ejecutar archivos desde Eclipse PDT.

Eclipse PDT - Ejecutar un archivo HTML


Al hacer clic en OK se abrirá una vista de navegador con el archivo seleccionado (en el caso de utilizar el navegador interno) o el navegador del sistema con el archivo seleccionado (en caso de utilizar el navegador del sistema).

Eclipse PDT - Ejecutar un archivo HTML

Volver al principio de la página


Crear archivos HTML

Para crear un archivo HTML, hay que seleccionar la carpeta en la que se quiera crear el archivo en la vista Explorador PHP (PHP Explorer), hacer clic derecho y elegir la opción New > HTML.

Eclipse PDT - Creación de archivo HTML


Se abrirá una ventana de creación de archivo en el que se debe escribir el nombre (es mejor que este nombre no contenga espacios ni acentos, ya que Eclipse PDT lo utiliza para construir las URL) y hacer clic en Next. En el ejemplo, se ha escrito el nombre "prueba_001.html".

Eclipse PDT - Creación de archivo HTML


En la segunda pantalla se debe elegir el tipo de documento HTML y hacer clic en Finish. En el ejemplo se ha elegido la plantilla XHTML 1.0 Strict.

Eclipse PDT - Creación de archivo HTML


Una vez creado el archivo, este aparece en la vista Explorador PHP y su contenido aparece en la vista Editor HTML.

Eclipse PDT - Creación de archivo HTML


En Mi PC puede comprobarse que se ha creado el archivo.

Eclipse PDT - Creación de archivo HTML

Volver al principio de la página


Ejecutar archivos HTML

Eclipse PDT no es capaz de ejecutar directamente en el servidor archivos HTML, pero se puede conseguir creando primero una herramienta externa (External Tool).

Creación de la herramienta externa

Para ello, hay que elegir el menú Run > External Tools > External Tools Configurations ....

Eclipse PDT - Ejecutar un archivo HTML


Se abrirá la ventana de administración de las configuraciones de herramientas externas. En ella hay que hacer clic en "Program".

Eclipse PDT - Ejecutar un archivo HTML


A continuación hay que hacer clic en el icono de "New launch configuration".

Eclipse PDT - Ejecutar un archivo HTML


Se mostrarán las opciones de configuración de las herramientas externas.

Eclipse PDT - Ejecutar un archivo HTML


Hay que escribir el nombre de herramienta (en el ejemplo, "HTML en Firefox"), la ruta de la herramienta (en el ejemplo se ha seleccionado el ejecutable firefox.exe del navegador Firefox haciendo clic en "Browse File System...") y los argumentos (en el ejemplo, "localhost${container_path}/${resource_name}"). Para finalizar hay que hacer clic en Apply.

Eclipse PDT - Ejecutar un archivo HTML


Se mostrará la nueva configuración de herramienta externa recién creada. Finalmente, hay que hacer clic en Run para ejecutar en el servidor el archivo HTML elegido al principio y que Eclipse recuerde que se ha utilizado la herramienta externa.

Eclipse PDT - Ejecutar un archivo HTML


Al hacer clic en Run, se abrirá Firefox mostrando el archivo en el servidor local:

Eclipse PDT - Ejecutar un archivo HTML

Igualmente, se pueden crear otras herramientas externas para ejecutar los archivos en otros navegadores (Internet Explorer, etc.)


Utilización de la herramienta externa

Una vez creada la herramienta externa, para ejecutar un archivo HTML, hay que seleccionarlo, abrir elegir el menú Run > External Tools y elegir la herramienta externa creada anteriormente (en el ejemplo, la herramienta se llama "HTML en Firefox")

Eclipse PDT - Ejecutar un archivo HTML


Al elegirla, se abrirá Firefox mostrando el archivo en el servidor local:

Eclipse PDT - Ejecutar un archivo HTML


También se puede ejecutar un archivo HTML seleccionando el archivo y haciendo clic en el botón de herramientas externas:

Eclipse PDT - Ejecutar un archivo HTML


El botón de herramientas externas aplica la última herramienta aplicada, pero haciendo clic en el desplegable se podrían ver todas las herramientas externas:

Eclipse PDT - Ejecutar un archivo HTML

Volver al principio de la página


Configurar un editor externo

Eclipse permite configurar un editor externo para un tipo determinado de archivos y abrir desde Eclipse los archivos en ese editor. Como ejemplo, se explica aquí como configurar Amaya como editor externo de los archivos HTML.

Para ello, hay que abrir el menú "Window > Preferences".

Eclipse PDT - Menú Window > Preferences

Completar

Volver al principio de la página

Esta página forma parte del curso "Páginas web con PHP" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 15 de abril de 2011

Creative Commons License
Esta obra está bajo una licencia de Creative Commons.