Archive for the ‘Programming’ Category


Developing Drupal websites on Zend Server CE

June 30, 2011

I used to locally develop Drupal websites on my machine using XAMPP for Windows, but I recently switched to Zend Server Community Edition. I mostly based my decision on other projects that involved the awesome Zend Framework and therefore I needed to run a Zend Server anyway and keeping an instance of XAMPP as well as an instance of Zend Server on the same machine appeared to be a tideous task.

Before I dive into describing the setup process I’d like to outline the benefits from running Drupal on Zend Server CE:

  • You get an awesome administrative user interface for toggling PHP extensions and managing directives.
    Much more compelling than manually reading through php.ini files or mangling with .htaccess all the time.
  • It comes with Zend Optimizer, making your Drupal site run faster than on an usual XAMPP installation.
  • No need to maintenance two versions of Apache, MySQL and PHP.
  • Also no running/stopping the appropiate services whenever switching to another non-Drupal project.

If those benefits do appeal to you, then read on. We’ll jump right into setting up our new workspace.

Step #1:
Go and download Zend Server Community Edition here. Choose the one that comes with PHP 5.2.x! This is essential when it comes to developing for Drupal 6. Though Drupal’s core is PHP 5.3 ready since core version 6.12, contributed modules are most-likely not.

Step #2:
Get rid of any remaining XAMPP installations and/or MySQL stand-alone installations now. Make sure to backup any remaining work :-)

Step #3:
Run the Zend Server CE installer and choose a custom install, so you are able to install the following extra components:

  • PHPmyAdmin
  • MySQL 5.1

If you’re going to develop using the Zend Framework on other projects, feel free to install it aswell.

Step #4:
Grab a fresh copy of Drupal 6 from and extract it somewhere you like, i.e. C:\projects\newdrupalsite.
Note that this should be where index.php etc. is located after extracting!

Step #5:
After successfully installing the Zend Server and all additional components, it’s time to set up a virtual host for accessing your up-coming Drupal website.

  1. Open the file httpd.conf in {YourZendFolder}/Apache2/conf in a text-editor. Note: on Windows 7 you might have to run the editor with administrative privileges!
  2. Look for these two lines and remove the leading hash in front of the Include line:# Virtual hosts
    # Include conf/extra/http-vhosts.conf
  3. Save and close httpd.conf
  4. Go to {YourZendFolder}/Apache2/conf/extra and open http-vhosts.conf. Note: again, on Windows 7 you might have to run the editor with administrative privileges!
  5. You can safely remove all directives from this file except this one:NameVirtualHost *:80
  6. After that directive add the following lines to create a virtual host entry for your new Drupal website:<VirtualHost *:80>
      ServerName {ProjectServerName}
      DocumentRoot "{FullPathToMyNewProject}"
      <Directory "{FullPathToMyNewProject}">
        DirectoryIndex index.php
        AllowOverride All
        Order allow,deny
        Allow from all
  7. Substitute {FullPathToMyNewProject} with the full path of your project, i.e. C:\projects\newdrupalsite
  8. Substitute {ProjectServerName} with a name you want to type into your browser’s address bar to access the Drupal website locally, i.e. newdrupalsite.local
  9. Save and close http-vhosts.conf

Step #6:
Open the hosts file in a text-editor. This one is hidden quite well within the windows folder structure. Look for it in {YourWindowsRootFolder}/system32/drivers/etc, might by system instead of system32 on pre-Windows XP versions, can’t remember, though.
Add the following line to it, again substituting {ProjectServerName} with the same name you used in the http-vhosts.conf file before: {ProjectServerName}

Save and close the hosts file.

Step #7:
Open your Zend Server administration interface and log in. This should be accessible by entering http://localhost:10081/ZendServer/Login.
Go to Server Setup -> Directives and open the accordion reading Error Handling and Logging.
Change display_errors to on, otherwise you’ll always get a HTTP 500 Internal Server Error for any error (out of memory etc.).

If you’re at it, you might also want to increase max_execution_time to 60 or even higher if you’re development machine isn’t a steaming beast of processing power – like mine ;-)

Step #8:
Log out and reboot your machine. This will re-read the hosts file, restart PHP and also restart the Apache server.

I hope this comes in handy. Feel free to comment!


Internet Explorer select (dropdown list) width fix

May 27, 2011

I recently stumbled upon one of the Internet Explorer’s many pitfalls.. again.
If you have created a wide variety of websites you probably have encountered this problem, too.
Upon setting a fixed width for a HTML dropdown box that i.e. is displayed in a floating sidebar next to your main content you may notice that the options do not expand to the necessary width to present the content to the end use – it will just be cut off in Internet Explorer (not so in Firefox).

You have several options and searching the web for a possible solution will bring up tons of possible solutions. My first guess before doing any search was to set the width of the <option> elements to auto – guess what? Doesn’t work either, yay!

So I came up with a JavaScript solution that depends on jQuery, but can be adapted to be used without it I guess, though I do love jQuery and I do not see any reason not to rely on it.
The trick is basically to alter the width of the <select> element whenever the user opens it, so IE will auto size the dropdown list to the appropiate width.

Here’s my code which I adapted from this post on stackoverflow:

if ($.browser.msie && $.browser.version < 9)
.bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
.bind('click', function() { if ($(this).hasClass('clicked')) { $(this).blur(); } $(this).toggleClass('clicked'); })
.bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
.bind('blur', function() { $(this).removeClass('expand clicked'); });

In your stylesheet you put these lines:

select.width-fix {
width: 200px; /* Just an example for a fixed width. */
z-index: 1000; /* Make sure to put the select and its options above all other HTML elements. */

select.expand {
width: auto; /* Let the browser handle it. */

In your HTML code:

<select class="width-fix">
... [options here]

I hope this helps somebody else, too. I have tested this piece of code with IE8/7 successfully.. I do not care for IE6 anymore.

Happy Coding!