Henrik Sjökvist

Asset pipeline woes on Heroku

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Thu, 22 Mar 2012 00:00:00 -0700

I ran into a confusing issue on Heroku where Devise/ActiveAdmin makes a DB call during the precompile process. On Heroku the DB isn't available at that point, causing the precompilation to fail.

-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       rake aborted!
       could not connect to server: Connection refused
       Is the server running on host "127.0.0.1" and accepting
       TCP/IP connections on port 5432?

You can work around this in two ways. Either precompile locally and deploy the precompiled assets, or turn on the labs feature in Heroku. This makes the DB available during the precompilation, and also let's you use a more recent ruby. 1.9.3-p125 was the latest one available as I'm writing this.

$ heroku plugins:install https://github.com/heroku/heroku-labs.git
$ heroku labs:enable user_env_compile -a myapp
$ heroku config:add RUBY_VERSION=ruby-1.9.3-p125

Deploying with rbenv and Capistrano

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Mon, 20 Feb 2012 00:00:00 -0800

UPDATE: I've updated the post to reflect changes in rbenv 0.4.0.

I've recently decided to move away from RVM in favor of rbenv. I thought RVM was a bit too finicky to use in production and I wanted something simpler that I could wrap my head around.

This post is more or less an attempt to collect what I figured out from reading an issue thread on GitHub, George Ornbo's great post about rbenv and the rbenv wiki page on deployment.

On the server

As the deployment user (in my case deploy), run the rbenv-installer:

$ curl -L https://raw.github.com/fesplugas/rbenv-installer/master/bin/rbenv-installer | bash

Add rbenv to your PATH. The second command adds shims and autocompletion:

$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.profile
$ echo 'eval "$(rbenv init -)"' >> ~/.profile

Reload the profile, install one or more rubies and then rehash to refresh the shims:

$ source ~/.profile
$ rbenv install 1.9.3-p327
$ rbenv rehash

Set your new rbenv ruby as the new system-wide default ruby for this user:

$ rbenv global 1.9.3-p327

Now it's time to go ahead and install your Passenger, Unicorn, or what have you.

Capistrano

Now, let's turn our attention to Capistrano and our deploy.rb.

We want Bundler to handle our gems and we want it to package everything locally with the app. The --binstubs flag means any gem executables will be added to <app>/bin.

require "bundler/capistrano"
set :bundle_flags, "--deployment --quiet --binstubs"

If you don't want to use a globally installed Bundler, you need to add a binstub for it manually and tell Capistrano to use that:

set (:bundle_cmd) { "#{release_path}/bin/bundle" }

The binstub itself (<app>/bin/bundle) should look like this:

#!/usr/bin/env ruby

require 'rubygems'
version = ">= 0"

if ARGV.first =~ /^_(.*)_$/ and Gem::Version.correct? $1 then
  version = $1
  ARGV.shift
end

gem 'bundler', version
load Gem.bin_path('bundler', 'bundle', version)

Since the .profile PATH settings we added earlier won't get run by Capistrano we need to add the rbenv paths to our deploy.rb. Note that we add the shims folder directly here instead of running rbenv init -. It's easier and autocomplete is wasted on Capistrano.

set :default_environment, {
  'PATH' => "$HOME/.rbenv/shims:$HOME/.rbenv/bin:$PATH"
}

That's pretty much it.

Module Puppy - Giving Hubot a drop of Drupal knowledge

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Tue, 31 Jan 2012 00:00:00 -0800

We've been using the delightful Hubot chat bot with Campfire for a while now and I've been looking to ways to add Drupal-related features to it.

One idea was to add a module me <query> command that searches for modules. Unfortunately drupal.org doesn't offer an API, but the update module uses a humongous XML file that contains some useful information like name, short name, creator and url for all projects hosted on drupal.org.

I wrote a little Sinatra app called Module Puppy that pulls down and parses relevant data from this XML file and makes it available via a simple JSON API. The app is hosted on Heroku which uses PostgreSQL as the default database. This meant that I could use the very nice multi-column search feature in PostgreSQL (easy with the texticle gem).

Hubot talks to the Sinatra app using a small CoffeeScript plugin, part of the hubot-scripts community scripts collection.

This makes Hubot listen for the phrase:

there's a module for <something>

and also, the more direct command:

<bot name> module me <something>

In practice, it looks like this:

Powered by Jekyll

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Tue, 17 Jan 2012 00:00:00 -0800

In line with my recent infatuation with all things Ruby, I went ahead and migrated my old Drupal blog to Jekyll. Hopefully having a more lightweight blogging solution will compel me to actually finish and post some more stuff here. Time will tell...

Safari960 - A 960.gs grid overlay extension for Safari

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Tue, 06 Jul 2010 00:00:00 -0700

I've used various grid bookmarklets in the past, but they always do a lot more than I need and I never like the defaults. Yesterday I finally decided to roll up my sleeves and scratch my itch by making a very simple 960.gs grid overlay extension for Safari.

It's available for download here and the code is on GitHub. If you like it, help me improve it!

Update: Changed the download link to point to the project page.

IE testing in your local dev environment using VirtualBox

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Thu, 01 Jul 2010 00:00:00 -0700

I do my web development on my laptop and set up each site as a virtual hosts (e.g. site1.localhost, site2.localhost). In every project you eventually need to do the dreaded IE testing, but how do you access these sites from a virtualized Windows running in VirtualBox?

The (physical) host (in VirtualBox terminology) machine can be accessed from (virtual) guests using the IP 10.0.2.2. To access individual virtual hosts on the host machine you need to use the same host name on the Windows box.

In Windows, fire up Notepad as Administrator and edit the hosts file located at: %windir%\system32\drivers\etc\hosts.

We add a line with our virtual hosts and save it:

10.0.2.2    site1.localhost site2.localhost

You should now be able to access site1.localhost and site2.localhost from Windows.

I've set up a convenient shortcut on the Windows desktop for editing the hosts file. Here's how you do it:

Create a shortcut to Notepad on your desktop and change its name to "hosts".
Right-click it, select Properties.
Go to the Shortcut tab and change the Target path to: %windir%\system32\notepad.exe %windir%\system32\drivers\etc\hosts
Click Advanced and check "Run as Administrator". Click OK in both dialogs to save your settings.

Your hosts file is now just a double-click away.

Joomla has a security problem: The benefits of centralized contrib hosting

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Tue, 01 Jun 2010 00:00:00 -0700

I'm helping a client do a security audit of one of their servers. A couple of their sites are running Joomla, which I have very little experience with, so as part of this I set out to compile a list of available exploits to compare against their Joomla versions and installed components. What I discovered was frankly stunning.

Platform	Number of exploits
Drupal	9
Typo3	2
Wordpress	70
Joomla	637

Source: The Exploit Database

It's important to emphasize that just one critical hole in your site is enough, so running Drupal or Typo3 might still get you hacked. However, it's clear that the Joomla community has a very serious security problem. Judging from the number of SQL injection exploits on the list it seems like it might be a question of educating contributors.

I believe that Drupal's low number is a strong testament to the benefits of hosting contributed code on drupal.org. This approach means that:

You need to apply for a CVS account and as part of that your first contributed code will get vetted by someone experienced.
Hosted code is audited by the drupal.org Security Team.

A low bar of entry for new contributors is great, but can be dangerous without a strong security support structure.

Note: A Swedish version of this entry is available over at the Searchfactory blog.

Serving the same H.264 video file to everyone, from Internet Explorer to iPhone

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Thu, 15 Oct 2009 00:00:00 -0700

In a comment on my previous post Using the HTML5 <video> tag with a Flash fallback, Rob Colburn suggested serving everyone the same H.264 video file.

The big upside is that we only need to convert the video into one format. The downside is that we lose legacy Flash compatibility and Firefox 3.5+ and Opera 10+ users get Flash instead of HTML5 video.

This can be accomplished the following JavaScript code. Note that also I've replaced JWPlayer with Flashy, a GPL-licensed alternative.

<script type="text/javascript">
  $(document).ready(function() {
    var v = document.createElement("video"); // Are we dealing with a browser that supports <video>? 
    if ( !v.play || $.browser.mozilla || $.browser.opera) { // If no, or Firefox or Opera, use Flash.
      var params = {
        allowFullScreen: "true"
      };
      var flashvars = {
        video: "video.m4v",
        poster: "snapshot.jpg",
        maintainAspectRatio: "false"
      };
      swfobject.embedSWF("videoPlayer.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
    }
  });
</script>

Here's the example in action.

Getting a Huawei E220 3G modem to work under Snow Leopard

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Fri, 25 Sep 2009 00:00:00 -0700

I had some problems getting my Huawei E220 3G USB modem running under Snow Leopard. The drivers from Telia and huawei.com didn't work. Turns out Huawei has another site over at huaweidevice.com with updated drivers.

Here are the steps I took.

Note that I don't use the Mobile Connect application. I stuck my SIM card in a mobile phone and disabled the PIN. That way I don't need Mobile Connect to enter it.

Download the latest MobileConnectDriver Mac package from Huawei
Install it and reboot.
Plug in the modem and wait for the light to go blue. It should be automatically detected as a new network interface by Mac OS X.
Open System preferences and the Network pane. Select the HUAWEI Mobile interface in the list and enter *99# as the telephone number. Then click Advanced. Set Model to GRPS GSM/3G, set the APN to whatever your provider uses (Telia uses online.telia.se) and hit Apply.

Voilà, you can now click the Connect button to connect. I recommend enabling the Show modem status in menu bar option for easy access.

Updated the driver link.

A DiggBar Killer/Blocker for Drupal

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Sun, 12 Apr 2009 00:00:00 -0700

In the interest of web hygiene I've created a simple module based on Faruk Ateş DiggBar remover script that removes the bar and optionally redirects the user to a specific page.

Check it out here.

Using the HTML5

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Fri, 27 Feb 2009 00:00:00 -0800

The HTML5 <video> tag makes it possible to embed video clips in web pages much like how the <img> tag works for images. The browser itself provides the playback functionality without any need for plugins like Quicktime or Flash.

Update: Firefox 3.5+ doesn't like the .ogm extension for the Ogg Theora video file, I've changed it to .ogg.

In it's simplest form, the tag can look like this:

<video src="someclip.mp4" controls />

Safari (version 3.1 onwards) and Firefox 3.1b2 support <video>. Opera has released experimental builds demonstrating preliminary support.

Safari plays back MPEG4 (and at least on the Mac, anything that QuickTime can play). Firefox currently only supports Ogg Theora.

This lack of (default) codec support overlap can be overcome by providing both formats in the same <video> tag:

<video controls>
 <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
 <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
</video>

For legacy browsers that don't support <video> we need to use an alternative. An easy solution is to degrade to Flash using SWFObject.

Here's the HTML:

<div id="demo-video-flash">
  <video id="demo-video" poster="snapshot.jpg" controls>
    <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
    <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
  </video>
</div>

We place the <video> tag inside the <div> that we use to attach the SWFObject object.

Now for some JavaScript:

<script type="text/javascript">
  $(document).ready(function() { // ... a dash of jQuery.
    var v = document.createElement("video"); // Are we dealing with a browser that supports <video>?
    if ( !v.play ) { // If no, use Flash.
      var params = {
        allowfullscreen: "true",
        allowscriptaccess: "always"
      };
      var flashvars = {
        file: "video.f4v",
        image: "snapshot.jpg"
      };
      swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
    }
  });
</script>

The browser support detection is done by creating a video element and attempting to play it. If this fails, the Flash player is inserted using SWFObject.

Here's the example in action.

A downside to this approach as opposed to using Flash or another plugin is obviously that we currently need to provide three versions of every clip we want to embed (MPEG4, Ogg and FLV).

Hopefully the browser makers will have settled on a baseline codec by the time the final versions of Firefox 3.1 and Opera 10 (or whatever version finally brings the support) are released.

A Markdown WYSIWYM solution for Drupal (or: Markdown for clients that don't sport neck beards)

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Tue, 27 Jan 2009 00:00:00 -0800

UPDATE: This project was removed from drupal.org because the security team had concerns about using a client-side markdown parser. I didn't share those concerns (nor, apparently, do GitHub and StackExchange who are both using Showdown.js), but whatever, the Dude abides.

WYSIWYG editors like FCKeditor and TinyMCE are popular, but in some ways they do more harm than good.

They generate lots of unnecessary HTML

You may think to yourself "Sure, but I'll just filter that stuff out using an input filter". While that will clean up your output somewhat, that unholy mess will still get saved in your database and can cause problems down the line if you want to repurpose your content. Also, if you display the content in teaser form somewhere on your site filtering is necessary since Drupal could potentially insert a teaser break before a closing </div> generated by the WYSIWYG causing your layout to fall apart.

Pasting from MS Word makes for awful results

Pasting content from Word often generates atrocious results even when using the "Paste from Word" functions. A good example is bullet lists which both FCKeditor and TinyMCE turn into a series of lines preceded by • entities instead of a proper HTML unordered list. This is obviously very unfortunate since it often looks identical to a properly formatted list in the browser. Many people like to do their writing in Word and it's hard to convince a client to paste the stuff into Windows Notepad as an extra step just to remove cruft that they can't even see, not to mention making your implementation seem very primitive.

An easier Markdown

Markdown is a simple plain text formatting syntax. Markdown syntax can be translated into HTML in Drupal using an input filter with the Markdown filter module. This means less clutter in your database compared to pure HTML and an easier syntax to learn for end-users. It also means that the user is encouraged to focus on semantic rather than aesthetic qualities when formatting the text.

While Markdown is simple compared to HTML, you still need to learn a the syntax which can make it a hard sell when building a site for a non-technical client.

We can alleviate this using a combination of modules:

BUEditor is an plain text editor with a customizable toolbar. By default BUEditor provides shortcut buttons for HTML.
Markdown Editor for BUEditor is an add-on for BUEditor that provides a set of Markdown buttons.
That covers the WYM of our WYSIWYM. For the WYS part, Markdown Preview (by yours truly) inserts a pane below the textarea field that displays a live preview of the HTML output as you type. This is accomplished using the Showdown JavaScript Markdown implementation by John Fraser (the end result of this combination of modules is actually very similar to Fraser's (possibly abandoned) WMD editor). Note that while Markdown filter and Markdown Editor for BUEditor support Markdown Extra, Showdown and Markdown Preview only support original Markdown.

Check out the demo to see it in action.

Spruce up your Drupal search box for Safari users (Updated for Drupal 6)

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Fri, 29 Aug 2008 00:00:00 -0700

My favourite browser Safari has support for a snazzy custom input field type called "search". This gives the field a rounded look and the ability to remember search history (amongst other things). The major drawback is of course that the HTML will no longer validate since this feature isn't part of the official spec.

In order get around this problem I whipped up a jQuery snippet that dynamically changes the Drupal search input field to a Safari search field if the visitor uses Safari. You can see it in action in the right sidebar on this site.

This goes into template.php:

drupal_add_js(path_to_theme() .'/fancysearch.js', 'theme');

This goes into fancysearch.js in your theme folder:

Drupal.behaviors.fancySearch = function(context) {
  if (jQuery.browser.safari) {
    // jQuery 1.2.x doesn't support type alteration.
    var input = document.getElementById('edit-search-block-form-1');
    input.type = 'search';
    $('#edit-search-block-form-1').attr({ 
              autosave: 'net.henriksjokvist.search',
              results: '9',
            });
    $('#block-search-0 :submit').hide();
  }
};

You will probably need to change the ids #block-search-0 (the form's containing div) and #edit-search-block-form-1 (the id of the input field) to whatever ids your theme uses. autosave is the name under which the search history is stored and should be unique for your site, results is the number of past searches to remember and placeholder is the placeholder text inside the field.

Duplicate id attributes for submit buttons in Drupal 5.x

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Thu, 31 Jul 2008 00:00:00 -0700

Drupal 5 doesn't generate unique id attributes for form submit buttons. This means that if there's both a login form and a search box on the same page they will both use the same edit-submit id causing the page to fail validation.

This has been fixed in Drupal 6. You can solve it in Drupal 5 by inserting the following into template.php:

<?php
/**
* Quick fix for the validation error: 'ID "edit-submit" already defined' or edit-name
* There is a solution in d6 core: http://drupal.org/node/111719
*/
function phptemplate_submit($element) {
   static $count_double_id=0;

  $tmp = str_replace('edit-submit', 'edit-submit-'. $count_double_id++, theme('button', $element));
  return str_replace('edit-name', 'edit-name-'. $count_double_id++, $tmp);
}
?>

(Snippet by stevenQ)

edit-On Pro WYSYWYG module for Drupal (Updated)

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Mon, 09 Jun 2008 00:00:00 -0700

I've put together a module that integrates the edit-on Pro WYSIWYG editor with Drupal. edit-on Pro is a full-featured cross-platform (Java) editor that outputs clean accessible XHTML. Unfortunately it isn't free/open source. Pricing starts at €249 for a 10 seat license.

There is still a fair bit of work to do. For instance the module currently lacks support for image uploads.

Update: A permissions typo locked out everyone but user 1. I've also put up a demo site.

XStandard demo site now runs Drupal 6.0

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Sun, 24 Feb 2008 00:00:00 -0800

I just finished updating the XStandard demo site for Drupal to version 6, making it my first live Drupal 6 site. The only modules I use on it are XStandard (obviously), Demonstration site (Sandbox) and Google Analytics, so it was as straightforward as it gets. It went pretty smoothly, despite my complete disregard for the upgrade instructions.

Drupal 6.0 is out!

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Wed, 13 Feb 2008 00:00:00 -0800

Drupal 6.0 has been released! No 6.x versions of Views or CCK are out yet, so I'll have to hold off upgrading my sites a while longer.

I'm very exited about the new built-in multilanguage support. The old i18n contrib module didn't always work right with other modules since many module authors didn't take it into account.

I'm also looking forward to sinking my teeth into the improved theming system with the new Theme Developer module.

XStandard module version 1.0 released

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Wed, 26 Dec 2007 00:00:00 -0800

I've finally decided to roll out version 1.0 of my XStandard module for Drupal.

So why choose XStandard over FCKeditor or TinyMCE? Simply put, it produces valid markup. The pro version can actually filter material pasted from Word into semantic XHTML while retaining structure. Here's a full feature list.

The blog Standards Schmandards has an excellent comparison of WYSIWYG editors.

Setting up a Drupal development environment with lighttpd in Mac OS X

henrik.sjokvist@gmail.com (Henrik Sjökvist) — Sat, 15 Dec 2007 00:00:00 -0800

After upgrading to Leopard I finally got fed up with MAMP. I've been using it for development for quite a while, but found it dog slow and I never got the GUI tools to work right under 10.5. I've been using lighttpd on servers and decided to give it a go on my MacBook Pro. It runs superbly.

This setup requires MacPorts which is a Linux style package management system. Everything you install through MacPorts is contained in the folder /opt and it doesn't tamper with your existing OS X installation.

Install MacPorts

Download and install MacPorts. Note that MacPorts requires that Apple's Xcode Developer Tools package is installed.

You can verify that you're using the latest version of MacPorts by firing up the Terminal and running:

sudo port selfupdate

Note: If you don't already have a ~/.profile file, you may need to create it and add the paths for MacPorts (close and re-open your Terminal window for the changes to become active). Edit ~/.profile and insert:

export PATH=/opt/local/bin:/opt/local/sbin:$PATH

Install and configure lighttpd and PHP

We're using the CML version of lighttpd for URL rewriting so we need Lua too. Run:

sudo port install lua && sudo port install lighttpd +cml

Since it compiles the packages from source this takes a while.

Setting up lighttpd.conf

Make a copy of the config template that lighttpd comes with:

cd  /opt/local/etc/lighttpd/
sudo cp lighttpd.conf.default lighttpd.conf

Edit lighttpd.conf and enable mod_magnet and mod_fastcgi in the server.modules section.

Enable PHP with FastCGI by adding this snippet somewhere below the server.modules section:

fastcgi.server = (
    ".php" => ((
        "bin-path" => "/opt/local/bin/php-cgi",
        "socket" => "/opt/local/var/run/php5/php.socket"
    ))
)

Set the primary site directory. I like to use my Sites folder:

server.document-root        = "/Users/yourname/Sites/"

Add your first virtual host:

$HTTP["host"] == "mydrupalsite" {
  server.document-root = "/Users/yourname/Sites/mydrupalsite/"
  index-file.names = ( "index.php" )
  magnet.attract-physical-path-to = ( "/opt/local/etc/lighttpd/drupal.lua" )
}

Rewrite rules

lighttpd doesn't support Apache's esoteric mod_rewrite syntax, so the .htaccess file that Drupal ships with doesn't do us any good. Instead we'll use a Lua script to handle clean URLs.

Create the file /opt/local/etc/lighttpd/drupal.lua containg the following code:

attr = lighty.stat(lighty.env["physical.path"])
if (not attr) then
lighty.env["uri.query"] = "q=" .. string.gsub(lighty.env["request.uri"], "?", "&")
lighty.env["uri.path"] = "/index.php"
lighty.env["physical.rel-path"] = lighty.env["uri.path"]
lighty.env["physical.path"] = lighty.env["physical.doc-root"] .. lighty.env["physical.rel-path"]
end

This a slightly updated version of darix's script. The original version couldn't pass on GET variables appended to the clean URL (e.g. for exposed Views filters where the URL ends up looking something like: /somepage?filter0=x&filter1=y).

Add the new hostname

We need to add the hostname to /etc/hosts:

127.0.0.1       mydrupalsite

Note: In the version I downloaded lighttpd's default log directory was set to /var/log/lighttpd, but since that is outside of /opt it isn't created. lighttpd will not start if it can't write to that directory, so I created it:

sudo mkdir /var/log/lighttpd

Make lighttpd start at boot up:

sudo launchctl load -w /Library/LaunchDaemons/org.macports.lighttpd.plist

Start lighttpd:

sudo launchctl start org.macports.lighttpd

Troubleshooting tip: If lighttpd fails to start (for example if you have a typo in your lighttpd.conf), you can get a more verbose output by running:

sudo lighttpd -D -f /opt/local/etc/lighttpd/lighttpd.conf

Installing MySQL

sudo port install mysql5 +server

Install the MySQL system tables:

sudo mysql_install_db5 --user=mysql

Make it run at startup:

sudo launchctl load -w /Library/LaunchDaemons/org.macports.mysql5.plist

Fire it up:

sudo launchctl start org.macports.mysql5

Now you can log in and secure the initial user accounts (as described here), and create your Drupal database:

mysql5 -u root

Install PHP

PHP 5 is pre-installed in Leopard, but the Apple built version lacks GD support and we need the FastCGI version too.

sudo port install php5 +fastcgi +mysql5

Create the socket directory for php-cgi (as defined in the fastcgi.server section of lighttpd.conf above):

sudo mkdir -p /opt/local/var/run/php5

Install Drupal

Install Drupal in /Users/yourname/Sites/mydrupalsite/. Now open up your browser and go to http://mydrupalsite/. Voila!

To add another virtual server, just duplicate the $HTTP["host"] entry in lighttpd.conf and give it the new hostname and path. Don't forget to add the new hostname to /etc/hosts. Easy as pie.

Install phpMyAdmin

phpMyAdmin is nice to have.

sudo port install phpmyadmin

Edit /opt/local/etc/lighttpd.conf and add it as a virtual host (no need for the rewrite rules):

$HTTP["host"] == "phpmyadmin" {
  server.document-root = "/opt/local/www/phpmyadmin/"
}

Add the hostname to /etc/hosts:

127.0.0.1       phpmyadmin

Make a copy of the template configuration file:

sudo cp /opt/local/www/phpmyadmin/config.sample.inc.php /opt/local/www/phpmyadmin/config.inc.php

Edit /opt/local/www/phpmyadmin/config.inc.php and enter something as the $cfg['blowfish_secret'].

Restart lighttpd:

sudo launchctl stop org.macports.lighttpd
sudo launchctl start org.macports.lighttpd

Point your browser to http://phpmyadmin/.

Create an Apple Script for starting and stopping lighttpd and MySQL

I created a simple Apple Script that restarts lighttpd and MySQL. Fire up Script Editor and paste this in there:

do shell script "sudo launchctl stop org.macports.lighttpd && sudo launchctl start org.macports.lighttpd && sudo launchctl stop org.macports.mysql5 && sudo launchctl start org.macports.mysql5" with administrator privileges

Save it as an application and add it to your dock. Now you can restart the server without having to do any typing in the Terminal.