Category Archives: HTML5

How-to for HTML5

Setting Up Eclipse PDT with UniServer for PHP Development (Part 2 of 2)

Eclipse PDT, HTML5, Javascript, jQuery, mySQL, PHP

Eclipse PDT is an IDE for the development of PHP projects.

Installing Eclipse PDT is not a big challenge. However, Configuring Eclipse for Windows can be entertaining (to say the least). That is what part 2 of this series covers … installation and configuration for Eclipse PDT for Windows environment.

If you have a WAMP installed on your computer, you are ready to install Eclipse PDT. If not, return to part one of this article series to install a WAMP.

Finding Eclipse PDT

To find Eclipse PDT, head on over to http://www.zend.com/en/company/community/pdt/downloads and click download.

You will be required to register with the site, to join the community of users. However, the download is free.

Installing Eclipse PDT

Installation of Eclipse PDT is not a typical Windows install. The package comes as a simple zip file. You will choose a directory you would like to use as the tool’s home, and unpack the zip file into that directory. When done, go to the directory, find zend-eclipse-php.exe and create a link to this on your desktop. This shortcut will be your access to eclipse PDT.

Configuring Eclipse PDT

Configuring can be a nuisance for Eclipse PDT, but, here we go. Follow along and you should be fine.

In preparation, you need to determine a few facts:

  • What physical directory has been defined as your “localhost” by your WAMP?
  • What sub-directory of your WAMP localhost do you want as your development area? You will put all your projects in sub-directories of the development area.
  • What would you like to name your development area? Eclipse PDT will call this your workspace. Your projects will end up as sub-directories in the workspace

Now you are ready… begin:

  1. Define your workspace – if you have not yet defined a workspace

    • Click “File” in the toolbar.
    • Hover over “Switch Workspace” and click “Other.”
    • On the switch workplace screen, select browse and browse to the location you would like to make into a workplace. You may use the browse tool to create new directories, and select that directory as the directory to switch too.

    Be certain your new workspace is in the path defined as your development server.

  2. Configure Your General Preference

    • Click “Window” in the toolbar, a menu will pop-down.
    • Click Preferences in the drop down menu and a form will open.
    • Configure for PHP
      • Click “PHP” in the left column of drop down, a submenu will appear.
      • Click on “PHP Executables,” a list may appear … it may be blank.
      • If PHP 5 is not already listed, Click on “Add…,” a form will appear.

      • Fill in the Add PHP Executable” form with

        • PHP 5
        • (browse to and select your php.exe file)
        • CGI
        • XDebug

      • Click Debug, a new configurable set will open. Configure as follows:

        • XDebug
        • Default PHP Web Server
        • PHP 5
        • UTF-8
        • UTF-8
        • will already be set correctly, no need for change
        • click if you want to stop on first line for your debug purposes.
      • Click “PHP Servers,” a new configurable set will open. Assure the default PHP Web Server is mapped to http://localhost.” if not, either edit or add that information to the list of managed servers.

  3. Define a New Empty Project

    • Click “File” in the toolbar, the menu will dropdown.
    • Hover over “New,” and click the sub-option “Local PHP Project,” a form will pop up
    • Fill in the project name, the physical address of the directory to be used for the project, select to use either Basic or Zend Framework. The path must be in your workspace, and if you do know what a Zend Framework is … select Basic. Then, click “Next,” another form will appear.
    • On the new form, the host name should be fine, but, adjust the Base Path to include your path from the “localhost,” assuring that the “Project URL” on the page is correctly defined to location your project. Then, click “Next.”
    • On the Library Configuration page, select the usual libraries you use … typically, I select (a) JavaScript Web Project Support, (b) JQuery Library and (c) ExtJS Library. Then, Click Finish. The existing directory will be set up for use with Eclipse PDT.
    • If you would like to bring in files from other directories, do not simply copy them in, Import them or Eclipse will not recognize them.

  4. Create a project from an Existing Directory

    • Copy your files into a directory you would like to define as a new project directory
    • Click “File” in the toolbar, the menu will drop down.
    • Hover over “New,” and click the sub-option “PHP Project from Existing Directory, a form will pop up
    • Fill in the projects and the physical address of the project in a subdirectory of the workspace, a from will pop up. Then, click
      “Next.”
    • The host name should be fine, but, adjust the Base Path to include your path from the “localhost,” assuring that the Project URL on the page is correctly defined to location your project. Then, click “Next.”
    • On the Library Configuration page, select the usual libraries you use … typically, I select (a) JavaScript Web Project Support, (b) JQuery Library and (c) ExtJS Library. Then, Click “Finish.” The existing directory will be set up for use with Eclipse PDT.

  5. Configure Your Properties

    • Click “Project” in the toolbar, a menu will pop-down.
    • Click “Properties” in the drop down menu and a form will open.
    • Configure for PHP debugging
      • Click “PHP Debug” in the left column of drop down, Configurables will change in the right column.

      • Configure as follows:

        • XDebug
        • Default PHP Web Server
        • PHP 5
        • UTF-8
        • UTF-8
        • will already be set correctly, no need for change
        • click if you want to stop on first line for your debug purposes.

Setting Up Eclipse PDT with UniServer for PHP Development (Part 1 of 2)

Eclipse PDT, HTML5, Javascript, jQuery, mySQL, PHP

General Observations

Not the most convenient or intuitive IDE in the world, Eclipse is still a convenient IDE to use if you are not into spending big money on other developers … but, would like some very useful tools for development. If set up correctly, Eclipse PDT can help develop PHP projects with very useful debug options.

Some of the problems with Eclipse PDT include:

  • Setup can be a pain, it is definitely not load and go
  • Extra effort my be needed if you are not using Zend Server
  • You define your projects, but, deleting projects is a nuisance to do

I should mention, I am not an Eclipse expert. Definitely, it was a massive effort to hunt and peck my way through the installation. This article is to help me remember the process the next time I need to go through the process. It has a bit of rambling side information for those of you that find this articles and are curious why I have elected to do some of the setup that I do to use Eclipse. I hope it helps you too.

Preparation to use Eclipse PDT

To use Eclipse PDT, you must have the ability to run PHP. This implies the availability of a Server environment. Preparation suggests you install an AMP environment. In the case of this article, I have a WAMP environment.

I am developing on a WAMP environment; Windows, Apache, MySql & PHP. To maintain the database, I like using phpMyAdmin. To meet my needs for Apache and mySQL, I have tried using Zend Server.

Zend Server is an interesting, having lots of bells and whistles, but, I find that it is a pain to install phpMyAdmin on Zend Server hosted on Windows. Zend Server has a “simple” button press “deployment” of phpMyAdmin on their Zend Server, but, it fails in Windows. Notes around the internet indicate it works in Unix and Linux but, phpMyAdmin does not deploy conveniently on Windows at this time … true.

Even more inconvenient, uninstall of Zend Server does not do a complete uninstall. Zend Server installs IBM DB2 Server, but, does not remove it in the uninstall. This incomplete uninstall leaves the IBM DB server blocking access to port 3306 for other WAMP package installs. If you want to use port 3306, for the database servers with some other WAMP package like Uniserver, Wampserver, UmAmp … you will need to be aware and uninstall the DB2 server separately. Failure to uninstall IBM DB2 results in the failure of other WAMP packages to install completely. In the future, I may try Zend Server again using a Linux environment, but, not on Windows … until they solve their Windows compatibility problem with phpMyAdmin.

On Windows, I find the Uniform Server (UniServer) extremely convenient to install. I have used UniServer for about 10 years and never have had problems with Uniserver. The installation is quick, simple, and always works. UniServer includes mySQL, PHP and phpMyAdmin and meets my development needs nicely. Load and go in a Windows development environment.

If you are looking to use Eclipse, I assume you have an AMP package installed. If you have a AMP package installed, you can skip to Installing Eclipse PDT. If you are using Windows and need a WAMP package, the following two short sections will help.

Find Uniform Server

Uniform Server can be found at http://www.uniformserver.com/. Go on over to the UniServer site and click Download to retrieve the latest version of UniServer.

Installation of UniServer

To install UniServer:

  • Choose a where you would like to install UniServer. Some would choose the “Windows File” directory, but, I prefer to place it elsewhere. Your development files will be placed in a subdirectory below this and I do not like my development files stored below the Windows/Program Files subdirectory.
  • run the unZip for the uniserver package into the chosen . A will be created, but, standard Windows install with registry is not used by the UniServer package. (The name of the server_subdirectory changes with version, so I will call that )
  • Create a shortcut on your desktop to /UniController.exe. This will be your access to the UniServer control panel.

You are now ready to move on to the hard part … installing and configuring Eclipse PDT.

Head on over to the next article to find details of the Eclipse PDT installation and configuration.

Drupal 7: stop insertion of <br/> in formated text

Drupal, HTML5

Folks,

If you are using Drupal 7 with full HTML enabled, you may notice that you begin having <br/> tags inserted in your HTML in locations that you do not want these tags. To prevent this, go to:

— admin/config/content/formats/full_html

Under “Enabled filters,” unclick “Convert line breaks into HTML (i.e. <br> and <p>).

Hopefully, this will resolve your problem.

FYI: <script defer

HTML5, Javascript

Are you aware of the script attribute “defer?” If you have and external file, you may use:

  • <script src=”the external file.js” defer=”defer”></script>

If you use a script defer at the top of the file with other script requests, that JavaScript will not be processed until the page has finished parsing. This can be an interesting alternative to placing your JavaScript in footers (as many people seem to do). This assures that all objects exist at the time that the JavaScript is executed …

The defer attribute is supported by all major browsers.

Consider using scripts with external files in the header with defer more frequently!

SilverStripe editor need more Tags? Fix it!

HTML5, PHP, SilverStripe

SilverStripe

If you are having the problem that SilverStripe editor is striping out tags that you would like to use, fix it.

This article explains. SilverStripe uses the TinyMCE editor. SilverStripe has set up to permit you to add content to the /mysite/_config.php file and extend the tags that are accepted by the SilverStripe editor.

In the /mysite/_config.php file, add the following statement:


  HtmlEditorConfig::get('cms')->setOption(
    'extended_valid_elements',
    'img[id|class|src|alt|title|hspace|vspace|width|height|' .
    'align|onmouseover|onmouseout|name|usemap],' .
    'iframe[id|class|src|name|width|height|title|align|allowfullscreen|' .
    'frameborder|marginwidth|marginheight|scrolling],' .
    'object[classid|codebase|width|height|data|type],' . 
    'embed[id|class|src|type|pluginspage|width|height|autoplay],' .
    'param[name|value],' .
    'map[class|name|id],' .
    'area[shape|coords|href|target|alt],' . 
    'article[id|class|name|width|style],' .
    'section[id|class|name|width|style],' .
    'aside[id|class|name|width|style],' .
    'article[id|class|name|width|style],' .
    'ol[id|class|start|type]') ;

Use the format above to extend the editor to use any tags and tag attributes that you would like available to the editor. Above you see various tags and attributes being included, including HTML5 tags and attributes. You can include just the tags and attributes you believe you’ll need to support your use of the SilverStripe editor.