Initiation:
In this post, I am going to discuss how we can produce a neat looking and robust PHP sites using NetBeans 7.0 as a developing environment and WAMP server as executional environment.
First, we need to download the NetBeans IDE. Note that NetBeans IDE comes in different bundles, where each bundle is oriented toward a development context (e.g. Java, C/C++, PHP … etc). And if we want all NetBeans features and capabilities in one package we can download the Full Bundle that has simply everything. Right now, we are interested in the PHP Bundle:
http://download.netbeans.org/netbeans/7.0.1/final/bundles/netbeans-7.0.1-ml-php-windows.exe
Second, we want to download the WAMP Server. WAMP is a member of the AMP (Apache MySQL PHP) package servers, which is composed basically of the 3 mentioned kinds of technologies, and there are other AMP servers than WAMP, but we will use this one because it’s rather simple. Here is the download link:
http://sourceforge.net/projects/wampserver/files/WampServer%202/WampServer%202.2/WampServer2.2a-x32.exe/download (32Bit)
http://sourceforge.net/projects/wampserver/files/WampServer%202/WampServer%202.2/WampServer2.2a-x64.exe/download (64Bit)
Install the applications and get ready for some theory.
Concept:
Now that we have downloaded and installed the 2 packages. We need to clarify some ideas.
What’s nice about NetBeans (and exist in other IDEs as well) is that it can debug our PHP code. We will now explain how the debugging process goes in concept, then we will demonstrate how we can get it working in real life.
NetBeans edits our PHP code, WAMP interprets (executes) it … so, to debug the code in stepping mode, we need to establish the following scenario:
- NetBeans is pointing to the first line waiting our command, while WAMP is waiting on the first line waiting NetBeans’ command.
- I press “Step” in NetBeans. NetBeans sends a notification to WAMP that it can move a step.
- WAMP execute a step of code and tells NetBeans that it moved a step.
- NetBeans points to the new location in code and await our orders again.
Now, for that scenario to be achievable, we need a mean of Communication between NetBeans and WAMP. This communication facility is called “XDebug”.
XDebug, is a small part of WAMP. With the right configurations to both XDebug and NetBeans, WAMP can be able to communicate with NetBeans for debugging purposes.
In real life, NetBeans listen on a socket on a specific port (e.g. port 9000) so XDebug can make a connection to that socket using the specified port number and handle communication with NetBeans. On the other hand, there is a browser who is connected to WAMP server on default HTTP port 80 and viewing the results:
Configuring:
Before we can start debugging, there are some configurations to do. First, we want to define the port in NetBeans to which XDebug will try to connect. The default is (9000), but in case 9000 is already reserved, we can simply change it. Because I don’t want to use 9000, I chose 9010 instead, so we open the options and change the port if needed:
Netbeans –> “Tools” menu –> “Options” –> “PHP” page –> “General” tab –> Debugger port.
Now that we’ve finished configuring NetBeans, we need to configure WAMP. Lunch WAMP, go the “PHP” menu, and open the “PHP.ini” file.
To activate XDebug, we need to add some new lines in the PHP.ini file.
Scroll to the end of the file and you should find the following section:
[xdebug]
xdebug.profiler_enable = off
xdebug.profiler_enable_trigger = off
xdebug.profiler_output_name = cachegrind.out.%t.%p
xdebug.profiler_output_dir = “c:/wamp/tmp”
We need to add the following lines directly after the [xdebug] :
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost
xdebug.remote_port=9010
NOTE: remember that I’ve put xdebug.remote_port=9010 only because I set it to the same value in NetBeans previously.
Configuration is finished. In the next section we will debug a real PHP code in NetBeans.
Debugging:
Before we start, be sure that the WAMP Apache server is running. Check this kind of information for each service in WAMP through its menus.
Now we go back to NetBeans. From “File” menu, choose “New Project …”:
Here is one of the most important things in the process. It’s that we’ve set the “Sources Folder” to “C:\wamp\www\Testproject”. In default, when we browse the url (http://localhost/index.php), while WAMP is running, we are requesting the index.php file that is located in (C:\wamp\www\index.php). So www is the folder that has the website which the WAMP is serving. The path “C:\wamp\” may change but the “www” folder will always be the container of the served website. Now because I want WAMP to serve my php code, I need to put somewhere in the “www” folder, and that is why I pointed “Sources Folder” to the “www\TestProject” folder.
In the same time, files and data that is related to NetBeans it self and are not part of the project code can still reside anywhere, and the “Metadata Folder” points to it’s path.
So far so good. Now we want to “introduce” NetBeans to WAMP. Actually, we will not tell NetBeans that WAMP exist in the first place, we will only tell it that there is an AMP server on the machine, and it will be serving the code. One another option here is to point to some FTP server that holds your PHP website; actually, that’s out of the context of this article and can be discussed more when the website is hosted on some server on the internet. For now, we will host it “at home”! So we choose “Local Web Site”.
Note that the “Project URL” is the URL that will be given to the browser that will show your results while debugging. It should be compatible with what WAMP considers, and the one shown here is right for my setup.
Now, we will right some code:
And press “Run” or F6:
Results are good, WAMP is running smoothly!
If any error occurs at this point, so it means the WAMP isn’t responding well, or that you provided NetBeans with improper link to give to the browser.
Now we want to debug our line of code, so instead of pressing “Run” we will hit “Debug” or Ctrl+F5:
As soon as the project is ran in Debug mode, the WAMP will synchronize with NetBeans through XDebug module, and life goes happily ever after!
Press the “Stop” button to stop debugging.
I hope you enjoyed the Tutorial, and remember that comments are welcomed!
Read Full Post »
Developing PHP with NetBeans 7.0.1 and WAMP2.2 server
Posted in Computers and Internet, tagged Apache, article, browser, bundle, bundles, Check, code, comments, Communication, Concept, configuration, configurations, Connection, container, context, Ctrl, data, Debug, Debugger, development, Download, environment, error, features, File, files, folder, From, Full, General, Here, host, ideas, IDEs, index, Initiation, Install, Java, life, Local, localhost, location, Lunch, machine, member, menu, menus, Metadata, mode, module, MySQL, NetBeans, Note, notification, option, Options, orders, packages, path, port, Project, purposes, remote_port, results, scenario, Scroll, Second, self, server, servers, setup, Site, socket, sourceforge, Step, Stop, technologies, Testproject, theory, Tools, tutorial, WAMP, WampServer, website, XDebug on December 18, 2011| 71 Comments »
Initiation:
In this post, I am going to discuss how we can produce a neat looking and robust PHP sites using NetBeans 7.0 as a developing environment and WAMP server as executional environment.
First, we need to download the NetBeans IDE. Note that NetBeans IDE comes in different bundles, where each bundle is oriented toward a development context (e.g. Java, C/C++, PHP … etc). And if we want all NetBeans features and capabilities in one package we can download the Full Bundle that has simply everything. Right now, we are interested in the PHP Bundle:
http://download.netbeans.org/netbeans/7.0.1/final/bundles/netbeans-7.0.1-ml-php-windows.exe
Second, we want to download the WAMP Server. WAMP is a member of the AMP (Apache MySQL PHP) package servers, which is composed basically of the 3 mentioned kinds of technologies, and there are other AMP servers than WAMP, but we will use this one because it’s rather simple. Here is the download link:
http://sourceforge.net/projects/wampserver/files/WampServer%202/WampServer%202.2/WampServer2.2a-x32.exe/download (32Bit)
http://sourceforge.net/projects/wampserver/files/WampServer%202/WampServer%202.2/WampServer2.2a-x64.exe/download (64Bit)
Install the applications and get ready for some theory.
Concept:
Now that we have downloaded and installed the 2 packages. We need to clarify some ideas.
What’s nice about NetBeans (and exist in other IDEs as well) is that it can debug our PHP code. We will now explain how the debugging process goes in concept, then we will demonstrate how we can get it working in real life.
NetBeans edits our PHP code, WAMP interprets (executes) it … so, to debug the code in stepping mode, we need to establish the following scenario:
Now, for that scenario to be achievable, we need a mean of Communication between NetBeans and WAMP. This communication facility is called “XDebug”.
XDebug, is a small part of WAMP. With the right configurations to both XDebug and NetBeans, WAMP can be able to communicate with NetBeans for debugging purposes.
In real life, NetBeans listen on a socket on a specific port (e.g. port 9000) so XDebug can make a connection to that socket using the specified port number and handle communication with NetBeans. On the other hand, there is a browser who is connected to WAMP server on default HTTP port 80 and viewing the results:
Configuring:
Before we can start debugging, there are some configurations to do. First, we want to define the port in NetBeans to which XDebug will try to connect. The default is (9000), but in case 9000 is already reserved, we can simply change it. Because I don’t want to use 9000, I chose 9010 instead, so we open the options and change the port if needed:
Netbeans –> “Tools” menu –> “Options” –> “PHP” page –> “General” tab –> Debugger port.
Now that we’ve finished configuring NetBeans, we need to configure WAMP. Lunch WAMP, go the “PHP” menu, and open the “PHP.ini” file.
To activate XDebug, we need to add some new lines in the PHP.ini file.
Scroll to the end of the file and you should find the following section:
[xdebug]
xdebug.profiler_enable = off
xdebug.profiler_enable_trigger = off
xdebug.profiler_output_name = cachegrind.out.%t.%p
xdebug.profiler_output_dir = “c:/wamp/tmp”
We need to add the following lines directly after the [xdebug] :
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost
xdebug.remote_port=9010
NOTE: remember that I’ve put xdebug.remote_port=9010 only because I set it to the same value in NetBeans previously.
Configuration is finished. In the next section we will debug a real PHP code in NetBeans.
Debugging:
Before we start, be sure that the WAMP Apache server is running. Check this kind of information for each service in WAMP through its menus.
Now we go back to NetBeans. From “File” menu, choose “New Project …”:
Here is one of the most important things in the process. It’s that we’ve set the “Sources Folder” to “C:\wamp\www\Testproject”. In default, when we browse the url (http://localhost/index.php), while WAMP is running, we are requesting the index.php file that is located in (C:\wamp\www\index.php). So www is the folder that has the website which the WAMP is serving. The path “C:\wamp\” may change but the “www” folder will always be the container of the served website. Now because I want WAMP to serve my php code, I need to put somewhere in the “www” folder, and that is why I pointed “Sources Folder” to the “www\TestProject” folder.
In the same time, files and data that is related to NetBeans it self and are not part of the project code can still reside anywhere, and the “Metadata Folder” points to it’s path.
So far so good. Now we want to “introduce” NetBeans to WAMP. Actually, we will not tell NetBeans that WAMP exist in the first place, we will only tell it that there is an AMP server on the machine, and it will be serving the code. One another option here is to point to some FTP server that holds your PHP website; actually, that’s out of the context of this article and can be discussed more when the website is hosted on some server on the internet. For now, we will host it “at home”! So we choose “Local Web Site”.
Note that the “Project URL” is the URL that will be given to the browser that will show your results while debugging. It should be compatible with what WAMP considers, and the one shown here is right for my setup.
Now, we will right some code:
And press “Run” or F6:
Results are good, WAMP is running smoothly!
If any error occurs at this point, so it means the WAMP isn’t responding well, or that you provided NetBeans with improper link to give to the browser.
Now we want to debug our line of code, so instead of pressing “Run” we will hit “Debug” or Ctrl+F5:
As soon as the project is ran in Debug mode, the WAMP will synchronize with NetBeans through XDebug module, and life goes happily ever after!
Press the “Stop” button to stop debugging.
I hope you enjoyed the Tutorial, and remember that comments are welcomed!
Read Full Post »