Monday, January 26, 2009

State Farmer's Market Website

Columbia has a great farmer's market, next to the stadium, which does not have a website. We have been contacted by Jessica Wyndham who has asked us if we could put together a simple website for the state farmer's market. She says that we should use as inspiration the Portland farmer's market website (of course, you do not want to copy their code, just browse it for ideas). So, our first homework you will deliver a website that

  1. is fully validated,
  2. has separated content (XHTML) from presentation (CSS),
  3. CSS classes should have good names,
  4. and uses a consistent, user-friendly, and pleasant presentation.

The final project is due Monday, Feb. 9 at 9am.

The requirements are the website should have the tabs, subtabs, and text shown below. For the pages for which we have no text either make up something or write "coming soon". The tabs your web site should have are:

  1. Home: Use "Intro" and "Entrance" Rendering
  2. About the Market (General Info, Map, News)
    • Heading for General Info

      The new South Carolina State Farmers Market will be a state of the art facility that provides the agricultural community of South Carolina with a one of a kind venue in which to showcase South Carolina products. The proposed site in Lexington County is located on U.S. Hwy. 321 and is within 1.5 miles of both I-77 and I-26, with over 2,500 feet of frontage on I-26. The new market design is based upon a clearly defined plan that provides separate and distinct areas for the major wholesale vendors, the retail sale of South Carolina agricultural products, with a section specifically designed for this purpose, and also a farmers' shed section, which will be owned and operated by SCDA and will provide an environment for South Carolina farmers to rent space on a daily or seasonal basis in order to offer their products.

      Each section of the new market is designed to serve a particular purpose and will provide the agricultural community of South Carolina with a venue that is second to none. The Retail/Agribusiness section is designed to be user/pedestrian friendly with 10 foot sidewalks, convenient onsite parking adjacent to each building, and a low country design offering 12 foot wraparound porches and heavy landscaping. This entire section is designed to be pedestrian/customer friendly so that families will be comfortable visiting the market.

      The inclusion of an exhibition kitchen to be operated by SCDA, a dedicated children~s play area, school bus drop off area, and a small amphitheater (400 seats +/-) will also provide additional amenities within the market which will assist in drawing traffic to the market. This will benefit the retail vendors and South Carolina Farmers renting space within the Farmers Shed Section of the market. Some folks may question why an amphitheater would be desirable as part of the State Farmers Market. The answer is quite simple; it provides a venue for festivals, outdoor entertainment, and other activities that are all part of the overall theme for this market.

      SCDA will relocate their current Laboratory facilities, as well as create a new conference center and construct Farmers' Sheds, which will be built, owned and operated by SCDA for the benefit of South Carolina Farmers.

      Insert renderings of the market

    • Map
    • News
  3. Directions/ Hours (Directions, Hours)
    • Heading for Directions, Hours
  4. Events and Calendar (Events, Calendar)
    • Heading for Events, Calendar
  5. Product Availability (Product List, Seasonal Calendar)
    • Heading for Product List, Seasonal Calendar
  6. Exhibition Kitchen (Schedule, About, Cooking Classes)
  7. Restaurant (About, Menu, Hours/ Directions)
  8. Newsletter (Current, Archives)
  9. Fresh Ideas (Fresh Finds, Fresh Recipes):
    • Create a link from home page with "Fresh Finds".

      Use the photo of the Leek for our "Fresh Find" and say

      The leek is a vegetable similar in appearance to a large green onion. It reaches maturity in the autumn months. The edible portions of the leek are the white, onion-like base and the light green portions of the stalk. The core is tender and may be eaten, but gets woody as the leek ages. The taste is similar to that of a mild scallion. When raw, it is crunchy and firm in texture.

      An easy way to clean the leek is to cut it into rounds and submerge in a bowl of water. Discard the rooted end. Swish so the grit falls out of the layers and down into the water. You can then retrieve the clean leeks from the top of the water. Leeks can be used in several ways, including boiling, frying and raw. Check out our "Fresh Recipe" for a delicious way to use this veggie!

    • Fresh Recipes: Create a link from home page with "Fresh Recipes" Logo. Include this recipe:

      Leek and Potato Soup


      • 1 pound leeks (4-5 leeks), cleaned and dark green sections removed,
      • 3 tablespoons butter
      • 3 potatoes, peeled and diced
      • 1 quart vegetable broth
      • 1 cup whole milk
      • 1 cup cream
      • 1/2 teaspoon pepper
      • chives to garnish
      • (Cheddar cheese and bacon-optional garnish)


      Chop the leeks into small pieces.

      Melt butter in saucepan over medium heat. Add the leeks and a heavy pinch of salt and saute for 5 minutes. Drop heat to medium-low and cook until the leeks are tender, approximately 25 minutes, stirring occasionally.

      Add the potatoes and the vegetable broth, increase the heat to medium-high, and bring to a boil. Reduce the heat to low, cover, and gently simmer until the potatoes are soft, approximately 45 minutes.

      Turn off the heat and puree the mixture with an immersion blender (or in standard blender or food processor) until smooth. Stir in the heavy cream, buttermilk and pepper. Taste and adjust seasoning if desired. Sprinkle with chives (and cheese and bacon, if desired) and serve while hot.

  10. Kids Corner (Classes, Activities, Fun)
    • Logo for Kids Corner, heading for Classes, Activities, Fun
  11. Vendors (List by Name, List by Product, Vendor Resources)
    • Headings for List by Name, List by Product, Vendor Resources
  12. Links
    • Heading for Links
  13. Contact Us

You should use the logo and some the other images that have been provided to us.


  1. First build a skeleton html file that implents the look of your website. All your pages should just change the content (English text) of this file.
  2. Feel free to use Server Side Includes if you want.

Turing it In

You must both zip the complete directory and email it to me, as well as placing all the files on your public_html and sending me the link to that live version.


  1. Do you know any server details such as can PHP be parsed and which version/php.ini configuration?

  2. Actually, the website should be completely static: just XHTML, CSS, and images.