Is Your Site This Dynamic?

From the immensely entertaining The Daily WTF, a daily digest of horribly bad code spotted in the wild, comes this cautionary tale of dynamic web development gone awry.

Developer Stephan Jennewein was hired to update a web site for Firefox compatibility. What at first glance appeared to be a modest web site made up of 15-20 static pages turned out to be an intricate mixture of JavaScript and PHP code. Every one of the apparently static pages contained code resembling this:

<html>
  <head>
    <link href="dynsitebase/styles.php" rel="stylesheet" type="text/css" />
    <script src="dynsitebase/base.php" language="JavaScript"></script>
    <script src="dynsitebase/themes.php" language="JavaScript"></script>
    <script src="dynsitebase/sitedata.php" language="JavaScript"></script>
    <script src="dynsitebase/pagelayout.php" language="JavaScript"></script>
    <script language="JavaScript">
      document.write("<title>" + CurrentPage.Title + "</title>");
    </script>
   </head>
   <body>
    <script language="JavaScript">
      DataInterface.initialize();
      DataInterface.bindToPage(CurrentPage);
      ImageLoader.preload(CurrentPage);
      LinkLoader.bindToContext(CurrentPage);

      PagePrinter.printHeader(CurrentPage);
      PagePrinter.printNavigation(CurrentPage);
      PagePrinter.printTitle(CurrentPage);
      PagePrinter.printSubTitle(CurrentPage);
      PagePrinter.printMainContent(CurrentPage);
      PagePrinter.printFooter(CurrentPage);

      DataInterface.close();
      ImageLoader.close();
      LinkLoader.close();
      PagePrinter.close();
    </script>
   </body>
</html>

The entire content of the page was being generated and displayed by a series of JavaScript objects, which in turn were being generated by a series of PHP scripts on the server! Upon loading any page of this site, a browser with JavaScript disabled would display an empty window.

If that weren’t ridiculous enough, the PHP scripts responsible for generating the JavaScript code determined what needed to be displayed on the page based on the address of the HTML page, as reported by the unreliable HTTP Referer header:

function dynsitebase_PagePrinter_render()
{
  echo "var PagePrinter = new Object()";

  echo "PagePrinter.printHeader = function(pageObj)";
  echo "{";
  echo "  document.write("<div class='$css_headerdivclass'>");";
  echo "  document.write("<h1 class='$css_h1headerdivclass'>");";
  echo "  if (pageObj.header) ";
  echo "  {";
  echo "    document.write(pageObj.header);";
  echo "  }";
  echo "  else";
  echo "  {";
  echo "    document.write("$headerToRender");";
  echo "  }";

  ...

}

Worse than code written by someone who isn’t quite fluent in JavaScript or PHP, the author of this monstrosity obviously knew the languages in question rather well. What he or she lacked was an understanding of what makes code robust, efficient and maintainable.

Read The Daily WTF (RSS feed); it’ll make you feel better about yourself. If it doesn’t, you might need to take a remedial course in computer science.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.lopsica.com BerislavLopac

    Sounds to me like the site was created by some code-generation software, written by people fluent in both Javascript and PHP…

  • MRoderick

    I’ve been asked to work on an “Enterprise” site, created just like this.

    Debugging to find to source of a specific error, took several hours. Eventually the client decided to drop the site and their provider entirely.

    Perhaps it was due to the enormous expenses for getting even the smallest adjustments made.

  • http://blog.heuristicdesign.co.uk Hal9k

    It looks like hiding the HTML was in their mind when they were writing it.

    However there’s probably some easy extension you can get to view the output of Javascript stuff.

  • http://www.hotgazpacho.com hotgazpacho

    However there’s probably some easy extension you can get to view the output of Javascript stuff.

    Yup, there is: View Source Chart

  • Trent

    The Daily WTF is always hilarious and depressing at the same time.

    Incidentally, someone in the Daily WTF forum said the new programmer could just view all the pages and do a View->Source to get the actual code. But I don’t think that would help. When you do View->Source, you see the original HTML that the web page sent you, not any modifications that the JavaScript may have done to the DOM.

  • hannson

    No, but he could get the php’ed javascript. But I think he meant that usually you shouldn’t make static pages dynamic.

  • http://www.chameleon-systems.com csi95

    You’d be amazed at how much work I get from clients who have a site like this. Not exactly like this, but coded so poorly that I have to shake my head and wonder “What they heck was this guy thinking?!?”

    Invariably the client paid next-to-nothing for the site, and the “developer” is now long gone and can’t be found. Off to college; out of business; moved out of state, etc.

    Just proves that cliché — a little knowledge can be dangerous.

    And also — You get what you pay for!

  • ringobob

    It looks like hiding the HTML was in their mind when they were writing it.

    It looks to me like they tried to write a site where all they had to do was copy a page and rename it, then add all of the content in the back-end and not have to bother with making any changes to an individual page.

    At least, in-advisable as it may be, that would give the most logical reason for code like that.