Setting up Development Environment

INSTALL TOMATOCART

• After the XAMPP is installed, we are going to install TomatoCart on the server. 
  
  1. Download TomatoCart 1.0 from tomatocart.com and extract the files to folder “\xamp\htdocs”.
  Figure 3 htdocs
  1. Setup TomatoCart from the web installation interface.
  Figure 4 TomatoCart Web Installation Interface
  1. Test store front with http://localhost and administration panel with http://localhost/admin"
  Figure 5 Store Frontend
  Figure 6 Administration Panel

• DOWNLOAD AND INSTALL ECLIPSE PDT ALL-IN-ONE

  TomatoCart Team internally uses the PDT project for eclipse as our standard Integrated Development Environment. The PDT project provides a PHP Development Tools framework for the Eclipse platform including syntax highlighting, code completion, PHP documentation, phpDoc support, debugging and more.
  PDT can be found at the Eclipse PDT download page: http://www.eclipse.org/pdt/downloads/. Choose the latest PDT All-in-One package, and select the download for your platform. Once the download is complete, extract and move the 'eclipse' folder to your “Applications“ or “Program Files“ folder.

• CREATE A PHP PROJECT FOR TOMATOCART

  You can create a new PHP Project for TomatoCart from “File->New” menu. In the new PHP Project window please specify the project name and choose the project directory. In this case, the project directory is the web server location where TomatoCart is installed.
  
  Figure 7 New PHP Project Dialog
  Click the “Finish” button to create the project and start working with TomatoCart. Figure 8 is the PHP Perspective of TomatoCart in eclipse.

• DEBUGGING TOMATOCART USING PDT AND XDEBUG

  With a debugger you can set breakpoints, step through code, watch variables, and etc. It is quite useful when working with a big project. There are two debuggers available for PHP, one is XDebug and the other is Zend Debugger. XDebug is integrated in xampp and Eclipse PDT already has support for it, therefore we use XDebug as the debugger to debug TomatoCart.
  There is a pdf version document available at PDT official site; it introduces how to set up your environment in order to be able to perform debugging with PDT. The link is: 
  http://www.eclipse.org/pdt/articles/debugger/os-php-eclipse-pdt-debug-pdf.pdf
  1. Setting up XDebug
     The XDebug is integrated xampp and the XDebug extension DLL file is already in the PHP extension folder. This step is to modify the php.ini file to enable XDebug for PHP. The php.ini file is located in the “xampp\php” folder.
     In the [PECL] section remove the semicolon to uncomment the line: 
     zend_extension = “C:\xampp\php\ext\php_xdebug.dll” 
     In the [XDebug] section uncomment the following lines: 
     xdebug.remote_enable = On
     xdebug.remote_host = “localhost” 
     xdebug.remote_port = 9000
     xdebug.remote_handler = “dbgp”
  2. Configuring Eclipse for XDebug
     The step is to configure Eclipse as a debugging client. The PHP script is executed on the web server (Apache), Eclipse has to “hook in” the web server using the XDebug protocol to enable debug. Configuring Eclipse is fairly straightforward.
     Open up Eclipse’s preferences and go to PHP -> Debug, and ensure that XDebug is selected as the PHP debugger. The “Break at First Line” is unchecked, so it will not suspend or break at the first line of the PHP script.
  Figure 9 PHP Debug
  1. Start Debug TomatoCart
     First of all a new debug configuration for PHP web page has to be created. Click the down arrow beside the debug button in the toolbar and choose Debug Configurations:
     
     Figure 10 Debug Configurations
     In the debug configurations dialog double click on the “PHP Web Page” node to create a new configuration for PHP web Page as illustrated in Figure 11. Give a name for this debug and be sure that the XDebug is selected as the Server Debugger. In the “file” section the PHP script that is going to be debugged must be specified and the “URL” section is the URL associated with the debug script. Here we have “Break at First Line” checked so that the debugger will stop at the first line.
  Figure 11 Debug Configuration
  1. PHP Debug Perspective
     After finish the configuration, press the “Debug” button to start debugging. Figure 12 shows the “Debug View” of eclipse. As we seen from this figure, the debugger stops at the first line of “index.php” script. 
     $_SERVER[‘SCRIPT_FILENAME’] = __FILE__;
     
     Figure 12 Debug View
     The PHP debug perspective is made up of several views:
     Debug view
     The Debug View shows the debug stack trace and the debugging process. Developers can monitor and control the process with the buttons on the toolbar. The stack trace is very useful when learning a new project, it display all the function invocation hierarchy. 
     Variables View
     The Variable view shows the information about the relevant variables and parameters associated with the point the debugger reached.
     Breakpoints View
     The breakpoints view shows all the breakpoints in the application. You can enable and disable different breakpoints without going to the script.
     Browser View
     The browser view acts as a normal browser, it show the URL result.

• DEBUG AJAX APPLICATION WITH FIREBUG AND PDT

  TomatoCart administration panel is based on ExtJS rich internet application framework; it heavily utilizes Ajax to exchange data with server. The Firebug is a very powerful development extension for Firefox. It allows the debugging and editing CSS, HTML, DOM, and JavaScript. Since modern web applications heavily utilize Ajax, Firebug is a great tool to help development Ajax application.
  The eclipse uses internal web browser namely the browser view to debug web application. But Firefox is better than the internal web browser, because it contains many development extensions to simplify the development work. You can go to the Preferences->General->Web Browser to choose “Use external web browser” and check Firefox in the “External web browsers” as illustrated in Figure 13.
  Figure 13 Choose Web Browser
  1. Using Firebug & Echo to Debug Ajax
     Many developers are in favor of using echo, print and var_dump to output string to web client to debug simple bug. This debug technology can also be used to debug Ajax. Here we will use the admin login process as the example to explain how to use echo to output the username and password submitted to the server.
     The username and password validation code is in the /tomatocart/admin/includes/jsons/login.php. Below the global variable declaration code, uses the echo function to output the username and password submitted by client.
     function login() {
     global $toC_Json, $osC_Language, $osC_Database; 
     echo ‘username: ‘ . $_REQUEST[‘user_name’] . “\n”; 
     echo ‘password: ‘ . $_REQUEST[‘user_password’]; 
     Activate the firebug console in the Firefox as Figure 14 and input admin for both username and password. 
     
     Figure 14 Firebug console
     After submission an error occurs in the console says that “missing ) in parenthetical”. This error can be omitted because the client expect true or false from server instead of the debug information. In the response tab the debug information is displayed as in Figure 15.
  Figure 15 Firebug debug information
  1. Using XDebug to debug Ajax
     Simple echo debug method is not enough to debug some complicated bug. Here we again use the login process to illustrate how to use XDebug to debug Ajax. 
     Step 1: Set a break point in the login process
     
     Figure 16 the break point in the login process
     Step 2: Start Debugger, input username and password, click on the submit button. The debugger will stop at the break point as in Figure 17 and in the variables view the username and password submitted are displayed. We can debug the login process step by step and check the variables changes for each step.