Imagine you are a highly paid consultant working for an internet music company. You need to build an online store to sell a huge catalog of songs and albums. Customers will need access to an index of each available CD; each CD will need to link to a page listing their artist(s), songs, and other details.
You're going to need to work hard. Your competitors - who have hired the TAs in this lab - already have their web page up and running. You can see it here. You have until the end of the lab to build a competing website like ours if you want to keep your contract!
Now use your browser to view the source of these web pages. This source is called an HTML program. It tells a web browser what to display on the screen. An HTML program is built up from text inside tags; for instance, your competitors' website includes sections of text inside <div> ... </div>, numbered CD track lists inside <ol> ... </ol>, and each track title in <li> ... </li>.
There are many more tags than this; the more you know, the more features you can put in a web page. Many of you have edited web pages before using programs like Front Page; now that you know some HTML tags, you can create web pages directly.
This is a big job, and you'll need some of the techniques you've learned for programming in DrScheme. Fortunately, you can also write web pages in DrScheme, so you can combine the two kinds of programming (in this case, HTML and Intermediate Student). The Xexpr data definition you worked with for last week's homework represents the latest version of HTML, called XHTML. Even more conveniently, DrScheme provides "XML Boxes" that let us write XHTML in a graphical box and automatically converts it to Xexprs.
Exercise 1: Practice using an XML Box in the Interactions window. Make an XML Box from the "Special" menu by selecting "Insert XML Box". Write text inside a tag in the XML Box. Try the <div> ... </div> tag, the <em> ... </em> tag, and the <strong> ... </strong> tag. See what DrScheme value the box produces.
Exercise 2: Practice displaying an Xexpr as a web page in DrScheme using the show-html function. Simply provide an XML Box as its input.
Exercise 3: Now try nesting one tag inside another. See what happens when you display the following examples with show-html:
<div>I have <em>emphasized</em> some text.</div>
<em>Some of this text is <strong>strongly emphasized</strong>.</em>
<div>
<div>XHTML</div>
<div>does not make for very good</div>
<div>haiku poetry.</div>
</div>
Now you can create web pages in DrScheme. Our website (the one you have to compete with) lists 95 albums containing over 800 songs. So you might expect to see:
Exercise: Write out 100 web pages totalling over 1,000 lines.
Don't start typing furiously yet. First of all, you have to compete with us, which means having more CDs and more web pages, not just as many. And you really want to compete with Amazon.com and the iTunes Music Store, so you need millions of pages, not hundreds. (Are your fingers feeling tired just thinking about it?)
Exercise: Write out 1,000,000 web pages totalling over 1,000,000,000 lines.
Second of all, we wouldn't have asked you to do this in just one lab if we didn't have an easy way out. The purpose of writing our web pages in DrScheme is that we can mix programming with our web pages and let DrScheme do the work for us.
As you've seen, you can use XML Boxes to write web pages inside of programs. You can also use Scheme Boxes to write programs inside of web pages. Add a Scheme Box inside an XML Box by going to the "Special" menu and selecting "Insert Scheme Box". In the Scheme Box, write any DrScheme expression that produces an Xexpr or a string.
Exercise 4: Design the program emphasize, which consumes a string and produces a web page containing that string in italics. Here is a solution you can copy from:
NOTE: Sometimes there are subtle differences between two Xexpr values that represent the same web page. If you use equal? for your test cases, some may fail because of these subtleties. Use the html-equal? comparison instead.
Exercise 5: Design the program quotation, which consumes two strings representing a name and a phrase and produces a two-line web page. The first line should claim "I once heard NAME say:" where NAME is the given name in bold text; the second line should be the given phrase in italics. Here is an example:
You're halfway there. Remember when we considered asking you to write a million web pages? You've already done it! Now that you've written quotation, you just need to ask a fortune cookie company for a million quotations.
Each of your web pages has only had a line or two so far. If we want to put lists of CDs and tracks in our web pages, we need to put lists in our XML Boxes. DrScheme helps us out again with Scheme Splice Boxes. You make and use a Scheme Splice Box just like a Scheme Box, but its expression must produce a list of strings or list of Xexpr. Each element of the list is inserted into the resulting Xexpr.
Exercise 6: Design the program counting, which consumes a list of Xexpr "list items" (converted from the <li> ... </li> tag) and produces an "ordered list" (a bunch of list items inside the <ol> ... </ol> tag). Here is a solution you can copy from:
Exercise 7: Design the program strings->list-items, which consumes a list of strings and produces a list of Xexpr list items containing the strings.
NOTE: You can't use equal? on Xexprs and you can't use html-equal? on lists. For exercises like this one, compare your test cases with list-of-html-equal?.
Exercise 8: Design the program titled-counting, which consumes a string and a list of strings and produces a web page titled "A Page for Counting TITLE" (where TITLE is the first string) with the strings from the list enumerated below the title. You can use counting and strings->list-items as helpers. Here is an example of titled-counting:
Now you know everything you need to about programming web pages. It's time to start on your music store web site. You will use all the techniques you've just learned, so refer back to previous exercises and even use their code if you need to.
The lab teachpack provides the following structure and data definition.
;; A CD is (make-cd String String (Listof String)) (define-struct cd (artist title songs))
Exercise 9: Design the function cd-web-page, which consumes a CD and produces a web page (Xexpr) displaying the CD's title and its songs with track numbers. Try displaying the web page you generate for the sample CDs cd0 and cd1 provided by the teachpack.
You can now make web pages for all the CDs in your collection, but you don't have an index page where users can browse the list of CDs. To do this you will need links to each CD page. A link uses a tag with an attribute: extra data about what the tag means. In this case, the <a> ... </a> tag (short for "anchor") uses the "href" attribute to name the target web page.
The above XML Box contains XHTML for a link that says "See my web page!"; when users click the link, they go to webpage.html.
Exercise 10: Design the function cd-link, which consumes a CD and produces a link to the CD's web page. The link's text should be the CD's title and the link's href attribute should be the title with ".html" appended at the end.
HINT: You will need to use two Scheme Boxes, one for the text and one for the href attribute. When you provide a Scheme Box for an attribute inside a tag, the Scheme Box expression must produce a string. DrScheme provides the quotation marks around the attribute when it comes from a Scheme Box.
Exercise 11: Design the function cd-index-page, which consumes a list of CDs and produces a web page. The web page must include a bulleted list of links to all the CDs. Make a bulleted list just like a numbered list, but use <ul> ... </ul> instead of <ol> ... </ol>.
You can now make an entire web site: you have a front page and a large list of CD web pages to browse. These web pages won't be useful until you can save them to disk so someone can browse them. For this, the lab teachpack gives you the following function.
;; html->file : String Xexpr -> true ;; Consumes a file name and a web page. ;; Writes the web page to the named file on disk. ;; Returns true if successful (otherwise an error occurs).
Exercise 12: Design the function write-cd-web-page, which consumes a CD and writes out its web page (as created by cd-web-page) to a file. The file name should be the CD's title with ".html" appended to the end. Think carefully: what should this function produce?
NOTE: You don't know how to completely test functions that write files to disk. We're not covering that this lab. Just make sure your functions report success, and manually check that the web pages are written to disk and load in a web browser.
Exercise 13: Design the function write-all-cd-web-pages, which consumes a list of CDs and writes out all their web pages to corresponding files (named exactly as above). Think carefully: if functions that write web pages produce a Boolean (true if successful), how can you combine them two write more than one web page?
Try this function out on cd*, the sample list of CDs provided by the teachpack. Look in the directory where you saved your DrScheme file and see what web pages you just wrote.
Exercise 14: Design the function write-cd-index-page, which consumes a list of CDs and writes out the index page to the file "index.html".
Exercise 15: Design the function write-music-store, which consumes a list of CDs and writes out the entire web site (the index page and all the CD web pages). Try it out on cd* and browse the web site. Now create a music store for your own collection!
Congratulations! Your internet music store is ready to compete with ours. If you want to really compete with our web site, though, you should add extra features to make your web site easier to use. Before you add anything, have a TA check over your work to see that you have a functional web site. (Don't worry, we have a non-disclosure agreement, so we can't steal your web expertise for our competing site.)
Once you've completed your web site, try adding some of these features to your web site to improve its design: