Boilerplate HTML

Next you need to define some HTML macros and helper functions to make it easy to give the different pages in the application a consistent look and feel. You can start with an HTML macro that defines the basic structure of a page in the application.

  1. (define-html-macro :mp3-browser-page ((&key title (header title)) &body body)
  2.   `(:html
  3.      (:head
  4.       (:title ,title)
  5.       (:link :rel "stylesheet" :type "text/css" :href "mp3-browser.css"))
  6.      (:body
  7.       (standard-header)
  8.       (when ,header (html (:h1 :class "title" ,header)))
  9.       ,@body
  10.       (standard-footer))))

You should define standard-header and standard-footer as separate functions for two reasons. First, during development you can redefine those functions and see the effect immediately without having to recompile functions that use the :mp3-browser-page macro. Second, it turns out that one of the pages you’ll write later won’t be defined with :mp3-browser-page but will still need the standard header and footers. They look like this:

  1. (defparameter *r* 25)
  3. (defun standard-header ()
  4.   (html
  5.    ((:p :class "toolbar")
  6.     "[" (:a :href (link "/browse" :what "genre") "All genres") "] "
  7.     "[" (:a :href (link "/browse" :what "genre" :random *r*) "Random genres") "] "
  8.     "[" (:a :href (link "/browse" :what "artist") "All artists") "] "
  9.     "[" (:a :href (link "/browse" :what "artist" :random *r*) "Random artists") "] "
  10.     "[" (:a :href (link "/browse" :what "album") "All albums") "] "
  11.     "[" (:a :href (link "/browse" :what "album" :random *r*) "Random albums") "] "
  12.     "[" (:a :href (link "/browse" :what "song" :random *r*) "Random songs") "] "
  13.     "[" (:a :href (link "/playlist") "Playlist") "] "
  14.     "[" (:a :href (link "/all-playlists") "All playlists") "]")))
  16. (defun standard-footer ()
  17.   (html (:hr) ((:p :class "footer") "MP3 Browser v" *major-version* "." *minor-version*)))

A couple of smaller HTML macros and helper functions automate other common patterns. The :table-row HTML macro makes it easier to generate the HTML for a single row of a table. It uses a feature of FOO that I’ll discuss in Chapter 31, an &attributes parameter, which causes uses of the macro to be parsed just like normal s-expression HTML forms, with any attributes gathered into a list that will be bound to the &attributes parameter. It looks like this:

  1. (define-html-macro :table-row (&attributes attrs &rest values)
  2.   `(:tr ,@attrs ,@(loop for v in values collect `(:td ,v))))

And the link function generates a URL back into the application to be used as the HREF attribute with an A element, building a query string out of a set of keyword/value pairs and making sure all special characters are properly escaped. For instance, instead of writing this:

  1. (:a :href "browse?what=artist&genre=Rhythm+%26+Blues" "Artists")

you can write the following:

  1. (:a :href (link "browse" :what "artist" :genre "Rhythm & Blues") "Artists")

It looks like this:

  1. (defun link (target &rest attributes)
  2.   (html 
  3.     (:attribute
  4.      (:format "~a~@[?~{~(~a~)=~a~^&~}~]" target (mapcar #'urlencode attributes)))))

To URL encode the keys and values, you use the helper function urlencode, which is a wrapper around the function encode-form-urlencoded, which is a nonpublic function from AllegroServe. This is—on one hand—bad form; since the name encode-form-urlencoded isn’t exported from NET.ASERVE, it’s possible that encode-form-urlencoded may go away or get renamed out from under you. On the other hand, using this unexported symbol for the time being lets you get work done for the moment; by wrapping encode-form-urlencoded in your own function, you isolate the crufty code to one function, which you could rewrite if you had to.

  1. (defun urlencode (string)
  2.   (net.aserve::encode-form-urlencoded string))

Finally, you need the CSS style sheet mp3-browser.css used by :mp3-browser-page. Since there’s nothing dynamic about it, it’s probably easiest to just publish a static file with publish-file.

  1. (publish-file :path "/mp3-browser.css"  :file filename :content-type "text/css")

A sample style sheet is included with the source code for this chapter on the book’s Web site. You’ll define a function, at the end of this chapter, that starts the MP3 browser application. It’ll take care of, among other things, publishing this file.