TomatoCart

TomatoCart Support Developer Guide Setting up Development Environment for TomatoCart

Overview

Setting up Development Environment for TomatoCart

  1. XAMPP Installation

    This chapter explains how to set up web environment & development environment for TomatoCart Development. XAMPP is a small and light Apache distribution containing the most common web development tools in a single package such as: apache web server, PHP, MySQL database, OpenSSL, PhpMyAdmin and etc. It is very easy to install and to use - just download, extract and start.
    XAMPP is available as a free download in two specific packages: full and lite. The latest full version of XAMPP 1.7.3 for windows can be obtains at: http://www.apachefriends.org. Download the EXE Self-extracting RAR archive from apachefriends.org; execute the executable file and extract the file to the directory you specified.
    After the installation you can start apache and MySQL from the XAMPP control panel and test if the XAMPP sets up correctly, go to address http://127.0.0.1 or http://localhost.

    Figure 1 XAMPP Welcome Window
    If welcome screen similar as above shows, it works. Choose the language “English” and click the “phpinfo()” node in the left menu tree. The detailed configurations about PHP similar show as bellow:

    Figure 2 phpinfo Page
    Note: the Minimum Version of the PHP required by TomatoCart is 5.1.6, you’d better choose it or greater.
  2. 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”.

    2. Figure 3 htdocs
    3. Setup TomatoCart from the web installation interface.

    4. Figure 4 TomatoCart Web Installation Interface
    5. Test store front with http://localhost and administration panel with http://localhost/admin

    Figure 5 Store Frontend

    Figure 6 Administration Panel
  3. 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.
  4. 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.

  5. Figure 8 PHP Perspective
  6. 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.

    3. Figure 9 PHP Debug
    4. 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.

    5. Figure 11 Debug Configuration
    6. 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.
  7. 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.

    2. Figure 15 Firebug debug information
    3. 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.

  8. Figure 17 Debug view for login process
Category: Developer Guide

Latest Blog Post

TomatoCart v1.1.7 to v1.1.8 Upgrade Guide!

The upgrade guide is a step-by-step tutorial to help users to upgrade TomatoCart v1.1.7 to v1.1.8. If you have not yet updated to v1.1.7, please review its upgrade guide before applying these changes. [...]

By TomatoCart | august 21, 2012

contact_us

info@tomatocart.com
partner@tomatocart.com
Facebook Google+ Linkedin Twitter

Newsletter Subscription

Fork us on GitHub