Actions

Difference between revisions of "Configuring Eclipse for joomla development"

From Joomla! Documentation

(Download Eclipse=)
Line 73: Line 73:
  
 
At this point, Eclipse is set up and we can start working with PHP files.
 
At this point, Eclipse is set up and we can start working with PHP files.
 +
=Configure XDebug=
 +
''Note: Getting XDebug to work on some workstations can be difficult. XDebug is NOT required to be able to use Eclipse for PHP development. If you are new to Eclipse for PHP, you can skip this section and use Eclipse without XDebug if desired. You can install XDebug later if you need it.''
 +
 +
==Edit XDebug Eclipse Settings==
 +
The first thing we need to do is to tell Eclipse to use the XDebug we installed earlier. Navigate to Window / Preferences, as shown below. (Mac users: Eclipse / Preferences...)
 +
 +
[[Image:Window_preferences_menu.png]]
 +
 +
 +
This will open the Preferences dialog. Expand the PHP node on the left and select "Debug" to display the screen below.
 +
 +
[[Image:Debug_preferences.png]]
 +
 +
Notice that the "Break at first line" box is checked. This means that the debugger will always break or suspend execution at the first line of code. We'll see this later on when we run the debugger.
 +
 +
Select XDebug for the PHP Debugger. You might get the message below.
 +
 +
[[Image:Debug_port_message.png]]
 +
 +
If so, just ignore it and press OK. (We're going to change the ports now anyway.)
 +
 +
In order to ensure compatability with php.ini, press the "Configure" link for the PHP Debugger to display the screen below.
 +
 +
[[Image:Installed_debuggers.png]]
 +
 +
Highlight the XDebug line and press Configure to display the screen below.
 +
 +
[[Image: Xdebug port.png]]
 +
 +
Change the port number to "10000" as shown, to match what we put in the "php.ini" file earlier. (I also changed the port number for the Zend debugger to "10001" just to get rid of the port 9000 warning message.)
 +
 +
On some systems, you may get Javascript errors like the following: <blockquote>''A Runtime Error has occurred. Do you wish to Debug? Line: 1 Error: Syntax error''</blockquote>
 +
 +
If so, you can eliminate these messages by changing the "Output Capture Settings / Capture stdout" from "copy" to "off".
 +
 +
==Set Debug Options==
 +
Next, we need to set some options. Select the menu Window / Preferences to open the Preferences dialog. Expand PHP and Debug and select "Workbench Options", as shown below.
 +
 +
[[Image:workbench_options.png]]
 +
 +
Change the settings as shown above. You can experiment with these settings to make Eclipse best for you.
 +
 +
Next, select the "PHP Servers" item on the tree to display the screen shown below.
 +
 +
[[Image:php_servers.png]]
 +
 +
 +
Select the "Default PHP Web Server" (the only one in the list) and press the Edit button to display the Edit Server dialog shown below.
 +
 +
[[Image:edit_server.png]]
 +
 +
Recall that we created our workspace, called "joomla_development", under the "c:\xampp\htdocs" directory. So the URLs to the HTML and PHP files in our project will need to include the "joomla_development" directory name (for example, "http://localhost/joomla_development/Test Project/test.php"). If we change this here, Eclipse will create the URLs for us automatically. So complete the screen as shown above and press OK.
 +
 +
== Test XDebug ==
 +
Now we finally get to have some fun. We're going to write a simple PHP script and run and debug it to test that Eclipse is set up correctly. If you are already familiar with Eclipse, you can just skip over this section. If not, we'll go through some basics.
 +
 +
==Eclipse Terminology==
 +
First, some quick Eclipse terminology. In Eclipse, we talk about the workbench, perspectives, and views. The workbench is just the whole screen. It has an edit area, where we will edit our PHP files, and a series of views around the outside. A view is an area that displays information about a file or some other resource. A perspective is just a pre-packaged layout of views designed for a specific purpose. When we're writing PHP programs, two perspectives are of interest: the PHP perspective and the PHP Debug perspective.
 +
 +
Let's open the PHP perspective. We can select Window / Open Perspective / PHP, as shown below.
 +
 +
[[Image:Php_perspectieve_menu.png]]
 +
 +
Now the workbench displays a different set of views, including the PHP Explorer, in the upper left, and three views in the lower left. Note that Eclipse has pretty good Help, which you can access by pressing F1 or selecting Help / Help Contents from the menu. The screen below shows some of the contents available, including Getting Started, Basic Tutorials, and other useful information.
 +
 +
[[Image:Php_help.png]]
 +
 +
==Create a Project==
 +
Remember that we created a workspace when we launched Eclipse. Before we can write any code, we need to create a project. A project stores a group of related program files. For example, the entire Joomla! application will be one project. We're going to create a test project that we can use to test our setup. We'll select the menu File / New / PHP Project, as shown below.
 +
 +
[[Image:New_project_1.png]]
 +
 +
This will open the first screen in the new project wizard, shown below. Enter the project name, in this case "Test Debug", and press Finish.
 +
 +
[[Image:New_project_2.png]]
 +
 +
Our new project will now show in the PHP Explorer view.
 +
 +
==Create and Run a PHP File==
 +
Next, we need to create a PHP file. Select the "Test Debug" project, right click, select New / PHP File, as shown below.
 +
 +
[[Image:New_php_file.png]]
 +
 +
Press the Browse button and select the "Test Project" for the source folder. The New PHP File wizard will display, as shown below. Enter "test.php" for the file name, and press Finish.
 +
 +
[[Image:New_php_file_2.png]]
 +
 +
An empty PHP file will now display in the editor. Enter the code shown below, and press the Save button in the upper left toolbar to save the "test.php" file.
 +
 +
[[Image:Php_test_file.png]]
 +
 +
Now, we're going to execute the script. We'll select the file "test.php" and right-click and select Run As / PHP Web Page, as shown below.
 +
 +
[[Image:Run_as_menu.png]]
 +
 +
The script will be run in your default browser, and should display as shown below.
 +
 +
If your php files are set by default to open in a text editor, you may get an error.  If so, go to Window/Preferences/General/Web Browser and explicitly select your preferred option.
 +
 +
[[Image:Run_test_php.png]]
 +
 +
Note that the "phpinfo()" command displays information about your PHP configuration. This is the same screen we saw earlier, when we clicked on the "phpinfo()" link in the XAMPP home page.
 +
 +
==Debug a PHP File==
 +
Now, let's try debugging this script. Again, select the "test.php" file and right-click, but this time select "Debug As / PHP Web Page", as shown below.
 +
 +
[[Image:Debug_as_web_page.png]]
 +
 +
This time, the browser opens and suspends. (Note: If Eclipse does not suspend at the first line, try closing Eclipse and re-starting it.)
 +
 +
Go back to Eclipse and open the PHP Debug perspective by selecting Window / Open Perspective / PHP Debug, as shown below.
 +
 +
[[Image:Open_debug_perspective.png]]
 +
 +
This opens the Debug Perspective, with the "test.php" file suspended, as shown below.
 +
 +
[[Image:Debug_perspective.png]]
 +
 +
Recall from earlier that the "Break at first line" option was selected. This is why the debugger has suspended here, on the first line in our program.
 +
 +
There is a lot going on in this screen. The Debug view in the upper left shows the "frame" information. In this case, we are suspended on line 2. The editor window is now in the middle of the screen. A small blue arrow shows where the program is suspended.
 +
 +
In the upper right is the Variables view. This shows the variables that are in scope at this point in the program.
 +
 +
The toolbar in the Debug perspective is important. The tools are labeled below.
 +
 +
[[Image:Debug_toolbar.png]]
 +
 +
*Resume: Resume execution until the next breakpoint or until the program is finished.
 +
*Terminate: Terminate the debug session. It is important to always terminate the session before trying to run a new session. This must be done even if the browser is closed.
 +
*Step Into: Used to step into a called function.
 +
*Step Over: Used to step to the next line.
 +
 +
If you are familiar with debuggers from other IDEs, these commands will probably be familiar. If not, you can read more about it in the Eclipse help documentation and experiment on your own.
 +
 +
To finish, let's press the Step Over button. The Debug view and editor now show that we are on line 3. Note that this means that we are about to execute line 3. Also, note the change in the Variables view. Now the variable $mytest has a value of "this is a test" because line 2 has now executed.
 +
 +
Press Step Over again. Now we're on line 4. Look at the browser window. It should now say "this is a test", since now line 3 has executed. Press Step Over again and look at the browser window. Now it shows the output of "phpinfo()".
 +
 +
Finally, press Resume. Notice that the program is no longer suspended and the browser no longer shows that it is waiting to complete the page. The script has completed, but our debugger session is still running.
 +
 +
To close the debugger, select the "Remote Launch" in the Debug view and press the Terminate button. Two things happen. In the browser, a new window launches showing a terminate message. In Eclipse, the PHP perspective automatically displays. This is because we set this in the Debug preferences.
 +
 +
Now we had to manually open the Debug perspective, which is an extra step. We can tell Eclipse to do this automatically for us. We just go to Window / Preferences / Run/Debug / Perspectives, select "PHP Web Page", and check "Always" for "Open the associated perspective when launching", as shown below.
 +
 +
[[Image:Php_debug_preferences.png]]
 +
 +
At this point, the XDebug is working correctly in Eclipse.
 +
 +
==Troubleshooting Tips==
 +
===Debugger Doesn't Stop at Breakpoint===
 +
This can happen if another application is using the port you chose for XDebug. If you experience this problem, try changing the port from 10000 to 10002 or some other value. You have to change the port number in your <code>php.ini</code> file as well as in the Eclipse preferences. You also have to re-start your Apache server to make the change effective.

Revision as of 11:37, 10 August 2012

Contents

Install Eclipse

Install Java

Eclipse is written in Java, so before you can install Eclipse, you need to make sure you have a recent version of Java running. Note that many Linux distributions include third-party Java runtimes (or JVM's for "Java Virtual Machine"), some of which don't work with Eclipse. The safest thing is to make sure you are running the Sun JRE (Jave Runtime Environment). You can download the latest Java version at www.java.com. If you already have a recent version of the Sun JRE (for example, 1.5 or 1.6), you can skip this step.

Another option for Mac OS X Snow Leopard users is to download the OS X packages from http://www.open.collab.net/downloads/community/ for Subversion after you've installed Subclipse. This will install the appropriate JavaHL library to make the installed JVM work properly.

Download Eclipse

The next step is to download Eclipse. Unfortunately, as of Eclipse 3.7 (code name Helios), the old "all-in-one" PHP version is no longer maintained. So, the easiest thing is to download and install the Eclipse IDE for JavaScript Web Developers from here. There are downloads for Windows, Linux, and Mac OS X. When you download, you will be asked to pick a download mirror. At the time of this writing, the name of the Windows 64-bit download is "eclipse-javascript-indigo-SR2-win32-x86_64.zip" and is 132mb.

Installing Eclipse is very easy -- you just unzip the file to a target directory. In Windows, it is best to use a third-party "zip" program to do the unzipping. In some cases, Windows Explorer will not correctly unzip this archive and Eclipse won't run correctly. One good option is 7 Zip, available here.

I created a directory called "c:\eclipse_php" for the target. When the file is extracted, you will see a folder called "eclipse" and under that folder 5 folders and six files.

Once you have the basic Eclipse IDE for JavaScript Web Developers version installed, you then need to use the Eclipse Help system to add PHP and Git support. See Installing Eclipse with PHP and Git for detailed instructions.

Eclipse will use the default Java JVM for your system. In Windows, this is normally the right one (from Sun). In some Linux distributions, the default JVM may be a third-party program that doesn't work correctly with Eclipse. In this case, you can specify the JVM to use by editing the eclipse.ini file in the eclipse folder as as follows, substituting the correct path to your installed Sun version of the Java JVM:

-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
512M
-vm
/usr/lib/jvm/java-1.5.0-sun/jre/bin/java
-vmargs
-Xms512m
-Xmx512m

Note that the path to the JVM goes on the line below the "-vm". Also note that the file ends with a blank line.

At this point, you should be able to start up Eclipse. Just find the "eclipse.exe" file inside the eclipse folder and double-click to execute it. In Linux: /path/to/your/eclipse/folder/eclipse

Eclipse download for Ubuntu

Eclipse can be found in the Ubuntu Software Centre (or Synaptic Package Manager) and when installed from there it places a menu item in the 'Programming' menu.

Alternative (Easy) Installation

An alternative way to install Eclipse with the phpEclipse environment is to use EasyEclipse for PHP. This includes everything you need (including Subclipse) in one simple install for most platforms. The following instructions are not applicable for EasyEclipse for PHP.

Create an Eclipse Workspace

The first time you launch Eclipse, the screen below displays.

Eclipse workspace default.png

Before we can start using Eclipse, we need to create a workspace. This is the folder where all of the Eclipse files and project information will be stored. Since we will be working on web-based projects, we want our project PHP and HTML files to be visible to XAMPP. So we will create our workspace in the "c:\xampp\htdocs" folder (in linux: "/opt/lampp/htdocs").

To do this, press the Browse button, navigate to the "c:\xampp\htdocs" or "/opt/lampp/htdocs" folder, and press the New Folder button. Create a directory called something like "joomla_development" and make sure it says the same thing in the Folder field. (You can click on a different folder and then click on the new folder to get the name in the Folder field.) The screen should look like the one below.

Eclipse workspace new.png

Press OK. Then we go back to the Workspace Launcher, as shown below.

Eclipse workspace created.png

Before pressing OK, you can check the box so that you won't need to go through this screen each time you start Eclipse.

Now you should see a splash screen and then a "Welcome to Eclipse" screen, as shown below.

Eclipse welcome.png

Close this window and the normal Eclipse workbench will display, as shown below.

Eclipse workbench.png

At this point, Eclipse is installed.

Configure Eclipse

Set Newline Character (Windows/Mac Only)

Let's do one final configuration setting, which only applies if you are running Windows or Mac. As you may know, Windows and Linux use different characters to terminate lines in text files. Since the Joomla! source code repository is on a Linux machine, we need to tell Eclipse to create Linux-style patch files. Although Mac is Unix based, for the sake of standardization, Mac users should use these settings too. To do this, we'll navigate to Window / Preferences, expand the General tree, and select "Workspace". This is shown in the screenshot below.

Workspace preferences.png

Make two changes. Select Other / UTF-8 for the Text file encoding and Other / Unix for the New text file line delimiter, as shown above. Press OK.

At this point, Eclipse is set up and we can start working with PHP files.

Configure XDebug

Note: Getting XDebug to work on some workstations can be difficult. XDebug is NOT required to be able to use Eclipse for PHP development. If you are new to Eclipse for PHP, you can skip this section and use Eclipse without XDebug if desired. You can install XDebug later if you need it.

Edit XDebug Eclipse Settings

The first thing we need to do is to tell Eclipse to use the XDebug we installed earlier. Navigate to Window / Preferences, as shown below. (Mac users: Eclipse / Preferences...)

Window preferences menu.png


This will open the Preferences dialog. Expand the PHP node on the left and select "Debug" to display the screen below.

Debug preferences.png

Notice that the "Break at first line" box is checked. This means that the debugger will always break or suspend execution at the first line of code. We'll see this later on when we run the debugger.

Select XDebug for the PHP Debugger. You might get the message below.

Debug port message.png

If so, just ignore it and press OK. (We're going to change the ports now anyway.)

In order to ensure compatability with php.ini, press the "Configure" link for the PHP Debugger to display the screen below.

Installed debuggers.png

Highlight the XDebug line and press Configure to display the screen below.

Xdebug port.png

Change the port number to "10000" as shown, to match what we put in the "php.ini" file earlier. (I also changed the port number for the Zend debugger to "10001" just to get rid of the port 9000 warning message.)

On some systems, you may get Javascript errors like the following:

A Runtime Error has occurred. Do you wish to Debug? Line: 1 Error: Syntax error

If so, you can eliminate these messages by changing the "Output Capture Settings / Capture stdout" from "copy" to "off".

Set Debug Options

Next, we need to set some options. Select the menu Window / Preferences to open the Preferences dialog. Expand PHP and Debug and select "Workbench Options", as shown below.

Workbench options.png

Change the settings as shown above. You can experiment with these settings to make Eclipse best for you.

Next, select the "PHP Servers" item on the tree to display the screen shown below.

Php servers.png


Select the "Default PHP Web Server" (the only one in the list) and press the Edit button to display the Edit Server dialog shown below.

Edit server.png

Recall that we created our workspace, called "joomla_development", under the "c:\xampp\htdocs" directory. So the URLs to the HTML and PHP files in our project will need to include the "joomla_development" directory name (for example, "http://localhost/joomla_development/Test Project/test.php"). If we change this here, Eclipse will create the URLs for us automatically. So complete the screen as shown above and press OK.

Test XDebug

Now we finally get to have some fun. We're going to write a simple PHP script and run and debug it to test that Eclipse is set up correctly. If you are already familiar with Eclipse, you can just skip over this section. If not, we'll go through some basics.

Eclipse Terminology

First, some quick Eclipse terminology. In Eclipse, we talk about the workbench, perspectives, and views. The workbench is just the whole screen. It has an edit area, where we will edit our PHP files, and a series of views around the outside. A view is an area that displays information about a file or some other resource. A perspective is just a pre-packaged layout of views designed for a specific purpose. When we're writing PHP programs, two perspectives are of interest: the PHP perspective and the PHP Debug perspective.

Let's open the PHP perspective. We can select Window / Open Perspective / PHP, as shown below.

Php perspectieve menu.png

Now the workbench displays a different set of views, including the PHP Explorer, in the upper left, and three views in the lower left. Note that Eclipse has pretty good Help, which you can access by pressing F1 or selecting Help / Help Contents from the menu. The screen below shows some of the contents available, including Getting Started, Basic Tutorials, and other useful information.

Php help.png

Create a Project

Remember that we created a workspace when we launched Eclipse. Before we can write any code, we need to create a project. A project stores a group of related program files. For example, the entire Joomla! application will be one project. We're going to create a test project that we can use to test our setup. We'll select the menu File / New / PHP Project, as shown below.

New project 1.png

This will open the first screen in the new project wizard, shown below. Enter the project name, in this case "Test Debug", and press Finish.

New project 2.png

Our new project will now show in the PHP Explorer view.

Create and Run a PHP File

Next, we need to create a PHP file. Select the "Test Debug" project, right click, select New / PHP File, as shown below.

New php file.png

Press the Browse button and select the "Test Project" for the source folder. The New PHP File wizard will display, as shown below. Enter "test.php" for the file name, and press Finish.

New php file 2.png

An empty PHP file will now display in the editor. Enter the code shown below, and press the Save button in the upper left toolbar to save the "test.php" file.

Php test file.png

Now, we're going to execute the script. We'll select the file "test.php" and right-click and select Run As / PHP Web Page, as shown below.

Run as menu.png

The script will be run in your default browser, and should display as shown below.

If your php files are set by default to open in a text editor, you may get an error. If so, go to Window/Preferences/General/Web Browser and explicitly select your preferred option.

Run test php.png

Note that the "phpinfo()" command displays information about your PHP configuration. This is the same screen we saw earlier, when we clicked on the "phpinfo()" link in the XAMPP home page.

Debug a PHP File

Now, let's try debugging this script. Again, select the "test.php" file and right-click, but this time select "Debug As / PHP Web Page", as shown below.

Debug as web page.png

This time, the browser opens and suspends. (Note: If Eclipse does not suspend at the first line, try closing Eclipse and re-starting it.)

Go back to Eclipse and open the PHP Debug perspective by selecting Window / Open Perspective / PHP Debug, as shown below.

Open debug perspective.png

This opens the Debug Perspective, with the "test.php" file suspended, as shown below.

Debug perspective.png

Recall from earlier that the "Break at first line" option was selected. This is why the debugger has suspended here, on the first line in our program.

There is a lot going on in this screen. The Debug view in the upper left shows the "frame" information. In this case, we are suspended on line 2. The editor window is now in the middle of the screen. A small blue arrow shows where the program is suspended.

In the upper right is the Variables view. This shows the variables that are in scope at this point in the program.

The toolbar in the Debug perspective is important. The tools are labeled below.

Debug toolbar.png

  • Resume: Resume execution until the next breakpoint or until the program is finished.
  • Terminate: Terminate the debug session. It is important to always terminate the session before trying to run a new session. This must be done even if the browser is closed.
  • Step Into: Used to step into a called function.
  • Step Over: Used to step to the next line.

If you are familiar with debuggers from other IDEs, these commands will probably be familiar. If not, you can read more about it in the Eclipse help documentation and experiment on your own.

To finish, let's press the Step Over button. The Debug view and editor now show that we are on line 3. Note that this means that we are about to execute line 3. Also, note the change in the Variables view. Now the variable $mytest has a value of "this is a test" because line 2 has now executed.

Press Step Over again. Now we're on line 4. Look at the browser window. It should now say "this is a test", since now line 3 has executed. Press Step Over again and look at the browser window. Now it shows the output of "phpinfo()".

Finally, press Resume. Notice that the program is no longer suspended and the browser no longer shows that it is waiting to complete the page. The script has completed, but our debugger session is still running.

To close the debugger, select the "Remote Launch" in the Debug view and press the Terminate button. Two things happen. In the browser, a new window launches showing a terminate message. In Eclipse, the PHP perspective automatically displays. This is because we set this in the Debug preferences.

Now we had to manually open the Debug perspective, which is an extra step. We can tell Eclipse to do this automatically for us. We just go to Window / Preferences / Run/Debug / Perspectives, select "PHP Web Page", and check "Always" for "Open the associated perspective when launching", as shown below.

Php debug preferences.png

At this point, the XDebug is working correctly in Eclipse.

Troubleshooting Tips

Debugger Doesn't Stop at Breakpoint

This can happen if another application is using the port you chose for XDebug. If you experience this problem, try changing the port from 10000 to 10002 or some other value. You have to change the port number in your php.ini file as well as in the Eclipse preferences. You also have to re-start your Apache server to make the change effective.