devxlogo

Developing PHP Applications with NetBeans and Eclipse

Developing PHP Applications with NetBeans and Eclipse

f you looked solely at the marketing for NetBeans and Eclipse, you might think you’d have no problems using either IDE with PHP, for example:

  • NetBeans: “A free, open-source Integrated Development Environment for software developers. You get all the tools you need to create professional desktop, enterprise, web, and mobile applications with the Java language, C/C++, and even dynamic languages such as PHP, JavaScript, Groovy, and Ruby. NetBeans IDE is easy to install and use straight out of the box and runs on many platforms including Windows, Linux, Mac OS X and Solaris.
  • Eclipse: “Eclipse is a collection of open source projects built on the Equinox OSGi run-time. Eclipse started as a Java IDE, but has since grown to be much, much more. Eclipse projects now cover static and dynamic languages; thick-client, thin-client, and server-side frameworks; modeling and business reporting; embedded and mobile; and, yes, we still have the best Java IDE.

Should PHP developers be impressed? You’ll find out in this article, which shows you the main PHP features of both NetBeans and Eclipse by walking you through a simple web application using each IDE. That way, you’ll be able to compare them, and decide for yourself if either meets your development needs. The downloadable sample web application acts as a search component for a virtual bookshop. Users will provide a book name, author, or ISBN, and the application returns search hits from a database. Implementing the application requires a range of technologies, including HTML, JavaScript (AJAX) and PHP, and a MySQL 5.0 database.

What You Need
  • NetBeans 6.5 for PHP
  • Eclipse PDT or Eclipse PDT 2.0
  • Java Development Kit (JDK) version 5 or 6
  • MySQL 5.0
  • PHP5
  • Apache HTTP Server 2.0

Author’s Note: I used Apache HTTP Server as the host server.

Introducing NetBeans IDE 6.5 for PHP

 
Figure 1. Downloading NetBeans 6.5 for PHP: Click the PHP row on the NetBeans download page.

I’ll start with NetBeans. To begin, download the NetBeans IDE from Sun (see Figure 1). To install it, just follow the installation wizard.

To run NetBeans for PHP, the standard Java Runtime Environment (JRE) is sufficient—you don’t need to install the full Java Development Kit (JDK). The latest version of the NetBeans IDE for PHP is 6.5. Some of its new features are:

  • PHP Source Code Editor
  • Remote and Local Project Development
  • Easy Code Navigation
  • PHP Debugging (you can inspect local variables, set watches, set breakpoints, and evaluate code live). The NetBeans IDE for PHP allows you to use XDebug, but using a debugger is optional. The recommended version is XDebug 2.0 as it is compatible with PHP5.
  • MySQL Integration

Creating the PHP Project

To begin implementing a PHP script/web application, you have to create a PHP project “stub”—an empty project that contains commonly used files and directories. IDEs typically use the “project” concept for any kind of application. NetBeans provides a dedicated wizard for configuring a new project. To create the sample booksPHP project, follow the steps below:

  1. Launch NetBeans.
  2. Select File ? New Project (this will open the New Project window).
  3. From the Categories panel, select PHP, and from the Projects panel, select PHP Application (notice that you also may choose to load and continue a PHP application begun outside of NetBeans). Click Next.
  4. On this page you enter a project name and location. For this project, in the Project Name field, type booksPHP, and choose a convenient location in the Source Folder field. Click Next.
  5. NetBeans supports running PHP applications on a local server (usually Apache HTTP Server), on a remote server (via FTP) or as a PHP script (using the PHP interpreter). As stated earlier, for this comparison, you’ll run the booksPHP application under Apache HTTP Server. Therefore, select the the Local Web Site item from the list. Next, enter the application’s URL in the Project URL field. Typically, the URL will be something like http://localhost/…. For example, for this project the URL might be http://localhost/php/booksPHP/ (obviously, you’ll need to adjust this URL for your particular configuration). Because you’re planning to run project on a local server, you need to provide a runtime location where NetBeans will copy the application source (which it does automatically to run the project). To do this, select the “Copy files from Sources Folder to another location” and specify the location in the “Copy to Folder” field (e.g., C:Program FilesApache GroupApache2htdocsphpooksPHP). Obviously, this action is necessary only when the project home folder and the local server home folder are different!
  6. Click the Finish button to close the New Project dialog.
Author’s Note If you choose to run the PHP application as a script, then you must indicate the location of the PHP interpreter (php.exe). Alternatively, if you choose to run on a remote web site (FTP) then you must enter a valid FTP connection, an upload directory, and an upload method.

At this point, NetBeans generates the project. You should see something like Figure 2.

 
Figure 2. Generated Project: After completing the New Project wizard, you’ll see the generated project “stub” appear in the NetBeans IDE.

Implementing the Project

With the project in place, you’re ready to begin implementing the booksPHP functionality. You’ll need some HTML for the presentation layer, some JavaScript to implement AJAX, and some PHP and database code for the business logic and persistence tasks. Because the application requires all the technologies in symbiosis, you’ll get to explore how well NetBeans handles each (with a focus on its PHP support).

Building the HTML Interface

Most of the HTML for this project resides in the index.php page, which NetBeans automatically created in the project stub. NetBeans lets you add HTML elegantly through the Palette tool. If this tool is not visible, you can activate it from the Window ? Palette menu. The Palette offers shortcuts to all the main HTML tabs, which you use by simply dragging-and-dropping the elements you need.

 
Figure 3. NetBeans Code Assistant: The Assistant provides help when inserting tags manually.

NetBeans require you to provide specific configurations for some tags before it adds them. For example, when you drag a

tag, you’ll be prompted for the number of rows, columns, and so on. I won’t go into further detail here—creating HTML code in NetBeans is pretty much a walk in the park. Therefore, use the Palette and drag and drop elements to modify the index.php as shown in Listing 1.

Some tags (such as and

) aren't available through the Palette, so you'll need to add them manually. You'll find the NetBeans code assistant helpful here (see Figure 3).

Adding the JavaScript AJAX Code

As Listing 1 shows, index.php uses a JavaScript module named AJAXjs.js. This module contains the AJAX code for the booksPHP application. In NetBeans, you create a JavaScript file like this:

  1. In the Projects view, expand the booksPHP node, and right-click on the Source Files node.
  2. Select the New ? Other option from the context menu.
  3. In the New File wizard, select the "Other" item from the Categories panel.
  4. In the same wizard, select the "JavaScript File" item from the File Types panel.
  5. Click the Next button.
  6. Provide a name for the new JavaScript file (for this example, the name is AJAXjs)
  7. Click the Finish button.

At this point, you'll see an empty JavaScript file in the NetBeans editor. Using the JavaScript code assistant, insert the self-explanatory code in Listing 2.

Author's Note: You'll find the bookanim.gif file mentioned in Listing 2 in the downloadable code for this article.

Implementing the PHP Code

Before implementing the PHP code for the booksPHP project, take a look at the complete list of NetBeans features for PHP developers.

You can explore every feature in that list while developing booksPHP! First, create a new PHP file, named search.php. This file will contain the PHP code to query a database containing a set of books stored by name, ISBN, author and price. Here's how to create the file:

  1. In the Projects view, expand the booksPHP node and right-click on the Source Files node.
  2. Select the New ? PHP File option from the context menu.
  3. Provide a name for the new PHP file (call it search).
  4. Click Finish.
Author's Note: NetBeans offers wizards for creating PHP web pages, classes, and interfaces—all available through the same context menu used above to create the PHP file.

Now you'll see an empty PHP file in the NetBeans editor. Use the code assistant, syntactic and semantic code highlighting, pop-up documentation, code formatting and folding, instant rename, code templates, and automatic code completion (including bracket completion), to create the code in Listing 3.

The code in Listing 3 uses a database.php file. This is a simple PHP file that provides a connection to the books database. You can create the code using the same procedure listed above to create search.php:

   Fatal server error!");      $select = mysql_select_db("books", $id)      or die ("Fatal server error!");   ?>
 
Figure 4. Connecting to MySQL Server: From the Services tab in NetBeans, you can find and connect to databases.

Creating the Database

Obviously, the database connection code shown in the previous section requires a books database. You can use NetBeans to create the database as well:

  1. Start MySQL Server.
  2. In NetBeans, switch to Services view (if this view is not visible, then make it visible using the Window menu).
  3. Expand the Database node, navigate to the MySQL Server node, and from the context menu choose Connect (see Figure 4).
  4. Author's Note If you need to configure your MySQL server properties, choose Properties from the same context menu shown in Figure 4.

  5. NetBeans establishes the connection. Now, under the MySQL Server node, you'll see a list containing the available databases.
  6.  
    Figure 5. Creating a MySQL Database: Enter a database name and choose which user(s) or groups you want to provide access to.
  7. You can create new databases as well. To create the books database, right-click on the MySQL Server node and select the Create Database option.
  8. In the Create MySQL Database dialog box, provide the database name (books) and grant full access to the desired user (for all users use *@localhost as shown in Figure 5).

Populating the Database

With the books database created, follow this procedure to connect to it and create some sample data:

 
Figure 6. Making the Database Connection: Insert the username and password you want to use to connect to the books database.
  1. Connect to the new books database by right-clicking on the books node (which should appear now under the MySQL Server node) and select Connect from the context menu.
  2. In the Connect window, type root for the User name, and leave the Password field blank. Click OK (see Figure 6).
  3. NetBeans adds a new connection node named jdbc:mysql://localhost:3306/books to the Databases tree.
  4. Expand the jdbc:mysql://localhost:3306/books node, and right-click on Tables. Select the Create Table item from the context menu.
  5. In the Create Table wizard, type bookstore as the table name, and specify its structure as shown in Figure 7.
  6.  
    Figure 7. Create Table: Use the Create Table dialog to define the sample bookstore table structure.

  7. Click OK.
  8. Right-click on the jdbc:mysql://localhost:3306/books node, and choose Execute Command from the context menu.
  9. An SQL Command window opens. You can use this window to populate the bookstore table with a few records for test purposes. To do that, enter and execute the following SQL statements. To execute an SQL statement, click on the Run SQL button (first button from the left), on the SQL Command toolbar:
   insert into bookstore values (1,       'Introduction to PHP', 'Mark User',       '3334-4424-334-3433', 500)   insert into bookstore values (2,       'DHTML and CSS', 'Teague Sanders',       '4545-23-23-23-23232', 1500)   insert into bookstore values (3,       'Introduction to PHP', 'Weeling Tom',       '4334-2323-23233-434', 300)   insert into bookstore values (4,       'Web design', 'Weeling Tom',       '4334-2323-23233-434', 600)   insert into bookstore values (5,       'PHP 5', 'Weeling Tom',       '444-87-67665-678678', 600)   insert into bookstore values (6,       'JavaServer Pages', 'Tick Own',       '897-9898-987-099', 800)

The database is now ready, so switch back to Projects view.

Running booksPHP from NetBeans

Finally, you can run and test the booksPHP application. Make sure MySQL and Apache HTTP Server are running, and then select Run ? Run Project. A web browser launches, and you should see the application interface as shown in Figure 8.

 
Figure 8. The booksPHP program In Action: Here's the booksPHP sample application running in a browser.

Installing Eclipse PDT for PHP

The PDT project creates open source PHP development tools for the Eclipse platform. To run PDT 2.0 for Eclipse you must have the JDK or JRE installed on your computer (the minimum required version is 5.0). Then download the latest released PDT All-In-One Package from the link (select the package for Windows) (see Figure 9). Unzip the downloaded archive in a convenient folder and then run the eclipse.exe file to install the package.

 
Figure 9. Download PDT 2.0: Click the Download button and then select the Windows package.

Creating a PHP Project with Eclipse

The PHP Development Tools Project, or PDT, offers these features:

  • Intuitive and easy to learn
  • Seamless integration with other Eclipse projects
  • Adherence to Eclipse standards
  • Extensibility
  • Continuous support of PHP developments
  • Support for XDebug or Zend Debugger to boost your productivity when fixing bugs in PHP applications
  • Code assistant and syntax highlighting

Developing the Sample Project

 
Figure 10. New Eclipse PHP Project: Here are the settings you should use when creating the PHP project stub using Eclipse.

This section walks you through the process of developing the same PHP project, booksPHP, that you created earlier with NetBeans, but this time, you'll use Eclipse. The process is similar. Start by creating a project stub as follows:

  1. Launch Eclipse.
  2. From the File main menu select the New ? Other option (the New window appears).
  3. Expand the PHP node and select the PHP Project option. Then click Next.
  4. In the New Project window enter a project name, the target PHP version, and select the project layout and JavaScript support settings. For this project, type booksPHP in the Project name field, and activate the "Enable JavaScript support for this project" option. In addition, click the "Create project from existing source" radio button, because you don't want to use the default workspace. Instead, use the server workspace (Apache HTTP Server in this case). Use the Browse button to navigate to your server deployment folder. Leave everything else set to the default (see Figure 10). Click Next to continue.
  5. Author's Note: Make sure that the deployment folder you choose is empty, because Eclipse will try to associate every file and folder to the selected deployment folder. As a tip, for this project, create an empty folder under the deployment folder named booksPHP, especially for this project. Then set the Directory field to point to the booksPHP folder, as shown in Figure 10.

  6. On the next page, configure the PHP include path. Here you can specify files, projects and libraries to be included in your project. You don't need such resources for booksPHP, therefore leave everything set to the default and just click Next.
  7. You'll see a build path screen where you can specify resources to be included in build process. For now, leave everything set to the default, and click Finish.

Eclipse generates the stub booksPHP project, which appears in the Eclipse Project Explorer view.

Implementing Index.php—Eclipse Style

You've already seen exactly what index.html contains (see Listing 1), so you can jump directly to the implementation. The Eclipse steps to accomplish this are:

 
Figure 11. Eclipse Code Assistant: Here's the Eclipse code assistant in action after typing an initial opening-tag angle bracket.
  1. In the Project Explorer view, right-click on the project name and select the New ? Other option.
  2. In the New window, expand the Web node and select the HTML leaf. Click Next.
  3. On the next screen, specify the page name (index.html) in the File name field. Click Next.
  4. Select a template for the initial content in the HTML page. For example, you can select New HTML file (4.01 transitional). Click Finish.

Eclipse will generate and open the new index.html file. Alter its content the same way you did in the NetBeans project (see Listing 1). Like NetBeans, when you're entering HTML, Eclipse provides a code assistant (see Figure 11).

PHP Perspectives and Views

As you may know, Eclipse uses a set of views that support various technologies. Each set of views is called a "perspective." The connection between perspectives and their views is just a logical connection, therefore you can display any desired view in any perspective whenever you like. For PHP, Eclipse offers two perspectives:

  • PHP Perspective: Provides a set of views used for the development stage
  • PHP Debug Perspective: Provides a set of views used for debugging

You can activate either perspective from the Window ? Open Perspective ? Other menu. Selecting that opens a wizard that displays all the available perspectives. Select the one you want, and click OK. For now, activate the PHP perspective, which will reveal the following PHP-dedicated views:

  • PHP Explorer: This tree view represents a PHP application.
  • PHP Functions: This view contains a list with core PHP functions. By double-clicking on a function you can insert it in your PHP code, while right-clicking on a function and selecting the "Open Manual" option, opens the PHP manual directly to the corresponding section.
  •  
    Figure 12. Activate the PHP Perspective: The figure shows the activated views in Eclipse's PHP perspective.
  • PHP Project Outline: Represents an outline view useful for large projects that's split into three sections: Classes, Constants and Functions.
  • Parameter Stack: Displays parameters when stepping into a function during the debugging process.
  • Browser Output: Shows the browser output.
  • Debug Output: Shows debug output.

You can activate any of these views from the Window ? Show View ? Other ? PHP Tools menu item. As an example, activate all of them under the PHP perspective, and then drag and drop to arrange them in a convenient manner, as in Figure 12.

Eclipse remembers these settings, so the arrangement in Figure 12 will reappear the next time you use the PHP perspective.

Implementing booksPHP Code in Eclipse

As you know, the booksPHP project contains two additional PHP pages, named database.php and search.php. To create a PHP page in Eclipse follow next steps:

  1. In the Project Explorer view, right-click on the project name and select New ? Other from the context menu.
  2. In the New window, expand the PHP node and select the "PHP File" leaf item. Click Next.
  3. On the next page, set the Source Folder to your project location, and enter database.php (or search.php) in the File Name field. Click Next.
  4. Finally, select a template for the initial content. In this case, select the "New simple PHP file" and option, and click Finish.

While implementing PHP code don't forget to take advantages of Eclipse's PHP views and the code assistant.

Implementing AJAXjs.js—Eclipse Style

To complete the project code, you need to implement the JavaScript AJAX portion. To create a JavaScript file in Eclipse:

 
Figure 13. Eclipse Code Entry Features: You can see some code highlighting and code assistance features in action in this figure.
  1. In the Project Explorer view, right-click on the project name and select New ? Other from the context menu.
  2. In the New window, expand the JavaScript node and select the JavaScript Source File item. Click Next.
  3. On the next page, specify the page name in the File name field (AJAXjs.js in this case), and click Finish.

Eclipse adds the new JavaScript file and opens it in the editor. Before entering the code, you should know that Eclipse offers a JavaScript perspective and a set of dedicated views that you can activate from the Window ? Open Perspective ? Other ? JavaScript menu.

Author's Note: Eclipse also provides a JavaScript validator (reachable through the Window ? Preferences ? JavaScript ? Validator menu); however, I don't recommend using it right now, because the validator has problems understanding JavaScript code.

While typing the AJAXjs.js code, be sure to take advantage of Eclipse's code highlighting and code assistance features (see Figure 13).

Create the Books Database—Eclipse Style

 
Figure 14. Installing the Database Development Perspective: In the Available Software panel, find the Ganymede Update Site, check it, and it will populate a list of plug-ins, among which you'll find Database Development. Check that and click Install to download and install the plug-in.

The Eclipse PDT doesn't offer support for database development. But Eclipse has many plug-ins, among which is the Eclipse Data Tools Platform. According to the Eclipse site, this feature "provides extensible frameworks and exemplary tools, enabling a diverse set of plug-in offerings specific to particular data-centric technologies and supported by the DTP ecosystem." For the purposes of this project, you should know that DTP adds (among other things), a new perspective, named Database Development, that will help you develop the books database. Installing this feature is a simple task that you can accomplish as follows:

  1. From the Help menu, select Software Updates.
  2. Switch to the Available Software tab.
  3. In the Available Software panel, locate the Ganymede Update Site entry (if it is not in this list, then click the Manage Sites button and activate it from that list).
  4. Check the Ganymede Update Sites item and wait for it to populate the list (you should see something similar to Figure 14).
  5. Select the Database Development checkbox and click the Install button.
  6. You'll see a dialog similar to Figure 15.
  7.  
    Figure 15. Database Development Items: Check the items that you want to install.

  8. Select all the checkboxes and click Next. From this point, the install process is clear and intuitive, so I won't go into more detail here. Just as a reminder, though, when the installation completes, restart Eclipse before you continue.

If you get here, then you probably successfully installed DTP, and you're ready to develop the books database. To begin, launch the Database Development perspective by clicking the Window ? Open Perspective ? Other ? Database Development menu item.

Author's Note: Eclipse needs a special driver to connect to a RDBMS such as MySQL, PostgreSQL, etc. You can download the MySQL Connector/J driver for this purpose (MySQL Connector/J is the official JDBC driver for MySQL). After unzipping the driver, you should obtain a Java Archive named mysql-connector-java-5.1.7-bin.This archive should be located in a convenient place on your machine (in the MySQL home folder can be a solution).

Now, in the left side of the screen you should see the Data Source Explorer view. Because you just installed DTP, you don't have any database connections yet, so here's how to create a connection to MySQL:

  1. Start your MySQL server.
  2.  
    Figure 16. Define New Database Driver: Click the New Driver Definition button to define and configure a driver for MySQL.
  3. In the Data Source Explorer view, right-click on Database Connections and select New from the context menu.
  4. In the New Connection Profile wizard, select MySQL from the list of connection profile types, and click Next. You may optionally type a name and a description for this profile.
  5. Next select a driver for MySQL. Because you won't find one defined by default, configure it like this:
  6. Click the New Driver Definition icon (see Figure 16).
  7. In the New Driver Definition window, on the Name/Type tab, select "MySQL JDBC Driver for 5.0 system version." (If you don't see the driver templates, expand the Database node.)
  8.  
    Figure 17. Driver Details: Enter the MySQL driver details as shown here.
  9. Switch to the Jar List tab and remove all the driver files from the corresponding list (use the Clear All button).
  10. Click Add JAR/Zip button and point to the MySQL Connector/J driver you downloaded earlier.
  11. Switch to the Properties tab and set the properties as shown in Figure 17:
  12. Click OK.
  13. Click Finish.

In a few moments, if no errors occurred, you should see something similar to Figure 18 in the Data Source Explorer:

 
Figure 18. New Database Connection: After adding the MySQL driver and configuring the connection, the new connection appears under the Database Connections node.

 
Figure 19. Creating and Populating the Books Database: Here's the SQL to create and populate the books database in the Eclipse Open SQL Scrapbook.

Once again, you need to execute some SQL to create the books database, the bookstore table, and populate that table. To do that, right-click on the MySQL_books connection and select the Open SQL Scrapbook item. That launches an SQL editor where you can enter/edit the desired SQL statements (see Figure 19).

Save this file as books.sql under your project root.

Finally, execute the SQL statements. To do that, switch back to the PHP perspective. In the PHP Explorer view, expand the booksPHP node and right-click on the books.sql file. Select Execute SQL files from the context menu and wait until the database is created. The execution status gets reported in SQL Results view, which you can activate by clicking Window ? Show View ? Other ? Data Management.

Author's Note: To connect or disconnect from a database, select the Connect/Disconnect option from the context menu that appears when you right-click on a database connection in the Data Source Explorer view in the Database Development perspective.

Run booksPHP—Eclipse Style

Running the application is simple. First, ensure that Apache HTTP Server and MySQL Server are running properly. Next, select index.php in PHP Explorer view and select Run ? Run As ? PHP Web Page from the menu. You will be prompted for the URL (which for this example is http://localhost/php/booksPHP/index.php), and you should see the application open in a browser.

Author's Note: From the Run ? Run As menu you can also elect to run PHP scripts using the PHP interpreter.

In closing, it's important to mention two things: First, this article is not a NetBeans vs. Eclipse for PHP comparison piece. Instead, I've chosen to simply provide walkthroughs, and leave it to developers to choose which IDE is best for them. Second, I've intentionally skipped debugging, because the topic is too large, and trying to include it here wouldn't do it justice.

Finally, because I just told you what this article is not, let me revisit what it is! The goal of this article was to present some of the main PHP features in NetBeans and Eclipse. You saw how to capitalize on some of the most convenient features, such as creating new projects, using auto-completion, connecting to MySQL, creating and modifying databases directly from the IDE, and deploying and running PHP applications in easy and elegant ways. Whichever IDE you choose, you'll find that it will improve your development.

devx-admin

Share the Post: