Software Development Requirement Docs for DigitalMenu.

net

Online Digital Menu

We are looking to develop a web application that displays an interactive restaurant menu online. The
menu will be updated/changed by the restaurant owners via a web-based administration tool. We need
the menu online administration tool as well as the HTML menu frontend (needs to run on a LAMP server)
created.

Table of Contents
Basic Requirements
Online Menu Frontend
Controlling Menu Layout:
Displaying Menu Page Navigation:
Displaying Food Items:
Miscelaneous:
Online Menu Backend
OMB Header:
OMB Navigation:
The Teaser Page:
The Add/Edit Pages Page:
Add/Edit Items Page:
WireFrames
Sample Menu Layout
Web Admin - Main UI*
Web Admin - Main UI - Add Page
Web Admin - Add_Edit Item
Web Admin - Add Item - Popouts 1
Web Admin - Add Item - Popouts 2
Web Admin - Add Item - Popouts 3

Acronyms used:
Online Menu Backend - OMB
Restaurant Owner/Manager - RO
Linux, Apache, MySQL, PHP Server - LAMP

Basic Requirements
 1. Easy setup for restaurant owners (they need to be able to easily add pages to the menu,
different items within that page, descriptions for each food item, images/videos for each food
item, etc.). This application needs to be very attractive and work well. Also, if a food item
name is clicked it should open up any videos/images in a lightbox pop out.
2. Web-based administration - restaurant owner should be able to make changes to the menu
via an online administration tool, which live updates the online view of the menu.
3. Private-label/white-label branding with logo and customizable settings
3.

Online Menu Frontend

Controlling Menu Layout:
● Menu layout should be controlled by three files, one XML file (that communicates overall
layout of the template), one CSS file (for styling) and one PHP file (that contains actual
code to create markup and modules/containers for each piece of the menu [navigation,
food items, restaurant logo, footer, social media call out module, etc])

Displaying Menu Page Navigation:

● Like a real menu, this online menu will have an option for multiple pages. If multiple
pages are added to the backend (see below) then they will be displayed on the onlin
menu in the menu position in the order they are set to display in the backend.
○ For example, in the wireframe Web Admin - Main UI you’ll notice that there are
four pages set to “published” status (meaning those are the ones that should
display on the menu). On the wireframe Sample Menu Layout you’ll notice that
the four pages are being displayed in the blocks “Menu Position 1, 2, 3...” If there
were a 5th, 6th, etc menu item published they’d just append to positions beneath
the first 4. For frontend markup we’d like to use HTML, so the PHP layout
template file (referrenced in above bullet point) would print a div specifically for
the menu pages to be displayed.
○ The menu pages can then be navigated by simply clicking the menu page names
displayed in this menu position (as they will be anchor links in HTML).

Displaying Food Items:

● Each page of the menu will display multiple food items. To make development easier,
as well as increase the ease of use for ROs and the display functionality of the menu,
each food item will occupy it’s own little position (as shown in the wireframe Sample
Menu Layout). The positions of food items will be specified by the php/xml template file
explained above.
○ For example, in the scenario illustrated by the wireframe Sample Menu Layout
you can see that there are three blocks of positions: two columns at the top
and then one little box (“soups”) at the bottom left. The layout template, in this
 case, would specify the two columns at the top to simply lay in each food item
per the order specified on the OMB “Add/Edit Items” page (illustrated by the
wireframe Web Admin Add/Edit Item). The first food item would drop into the
top left position, with each consecutive item dropping in below it. Once the left
column is full the remaining items drop into the right column. Most menu layout
templates will have a special placement position, like the one illustrated here as
the “soups” section. For the ROs to place food items into these positions they’ll
input a number into the “order” column starting back at 101 (versus starting at
base of 1). Any food item numbered as 101, 102, 103, 104... will be placed into a
special section on their specific page.
○ If a food item is set as “special” in the OMB then the frontend should assign
a “special” class to the food item element so that the listing displays with specific
CSS parameters. In the scenario illustrated by the wireframe Sample Menu
Layout food items 1, 7, 13, and 101 are all displayed as special, with a different
colored background and a little logo out to the left of the item.

Miscelaneous:
○ The frontend menu needs to be able to display special fonts so as to increase
visual appeal. Please use CUFON, or some similar web standard/convention to
make this possible. We will specify in the layouts CSS file the specific CUFON
friendly fonts, you just need to ensure they work in the display tool.
○ Remember that each field of the food item (see below section explaining food
item add/editing in OMB) needs to be displayed in the front end. As a standard,
videos and images, if assigned to an item, should trigger a small icon to float to
the right of the food item name. If the icon is clicked it should open the particluar
media in a lightbox of the menu, greying out the rest of the menu and leaving
just the video or image highlighted. The title should be set to display above the
description and the price should be set to float out to the right of the title and
media icon. The placement of each of these elements should be controllable via
CSS.
 Online Menu Backend
● The OMB will be hosted on a LAMP server at a DigitalMenu.net subdomain, such
as “admin.digitalmenu.net”
● We will manually collect login details for each RO, and input those ourselves via MySQL.
For a future software release we’ll want a GUI for us to enter these, but for now we’ll just
do it the manual way. Each RO should have the following fields stored for them on the
user table:
○ email_address (primary key - will act as their username at login)
○ password
○ restaurant_name
○ restaurant_logo (this field will have to reference a .png, .jpg or .gif image stored
on the server)
○ restaurant_address
○ restaurant_phone_number
○ restaurant_web_site_address
○ contact_person_name
○ contact_person_phone_number
○ beta_feature_test_member
● Each RO will have a personal login whereby they can access the OMB. Once they go to
the OMB it should ask for their login credentials (email and password). Once logged in
they’ll be taken to the OMB “Add/Edit Pages” tab (see wireframe web admin - main ui).

OMB Header:
● Every page of the OMB will have the restaurant logo, software title, “logged in as
USERNAME,” and links to “Log Out” and “Change Account Settings” in the header. The
footer will have a simple “powered by DigitalMenu.net” link in it. There will also be a
button to “Preview Menu,” which when clicked, should open the menu frontend in a new
window to display how it is currently set to look like.
○ The “change account settings” link should direct the RO to a page on which he
can change his email address, password, restaurant name, restaurant address,
restaurant phone number, restaurant web site address, contact person name,
contact person phone number. Because the restaurant logo is template oriented
we will require that to be changed manually via ourselves in MySQL.

OMB Navigation:
● OMB Navigation will be via a tabbed menu bar (see wireframes), with functional pages
for “Add/Edit Pages” and “Add/Edit Items.” There should also be an easily changeable
 tab (easily changeable via HTML markup changes and light PHP changes) for teaser
items - in our current case I’ve highlighted with the wireframe Web Admin - Teaser Page.

The Teaser Page:

● This page will just have some HTML markup and then a simple form (illustrated in
the wireframe Web Admin - Teaser Page) that allows the RO to opt in to our BETA
feature testing program. If they submit the form we need to store their form entry in
our server database in it’s own “beta_signup_and_comments” table as well as set
the “beta_feature_test_member” field to a 1 (yes) in the user table. If they visit this
teaser page after they’ve already submitted the form/signed up for the beta test program
then we should display a different message (just html - no form this time).

The Add/Edit Pages Page:

● The Add/Edit Pages page (see wireframe Web Admin - Main UI) will have a table
displaying menu pages and options for those pages. Each table entry here will represent
a single page of the digital menu in the frontend. Just like a real menu that has multiple
pages for different categories (appetizers, entrees, beverages, etc) our digital menu will
too. Each page will have the following fields assigned:
○ id - a unique identifier
○ menu_page_title - the page title displayed on the menu frontend
○ page_layout - this is a pre-designed template (see menu frontend for more
details) that will specify the way in which this page should display food item lists.
○ published - whether or not the page is displayed on the menu frontend
○ order - the order in which the page is displayed on the menu frontend... as
the menu frontend will likely have both finger swipe navigation and standard
navigation (tabs, buttons, menu links, etc) this order will be assigned to each
page so the navigation menu knows where to place each page
○ date_created - the date the page was first created, formatted as a PHP
expression “m.d.y”
○ date_edited - the date the page was last chagned, also formatted as “m.d.y”
○ Miscellaneous Details:
■ The following column headers should have sortability (when clicked
it sorts via alpha/numeric increasing/decreasing): Menu Page Title,
Published, Order, Date Created, Date Edited.
■ There will be button options at the top of the table for Edit, Publish,
Unpublish, Add, Delete.
● Edit - must have a table entries checkbox ticked for this button to
work, if checkbox not ticked should return error message “What do
you want to edit? Please check a box before clicking me.” It also
only allows for a single box to be checked, as the add/edit dialog
that will come up (see wireframe Web Admin - Main UI - Add
Page) is for singular changes. Thus, if they have more than one
entries checkbox ticked it and then click the edit button it should
 return the error message “Sorry, you can only edit one item at a
time. Please select only one item and then try to click me again.”
If they have just one table entry checkbox ticked when they click
this button it should open the add/edit dialog illustrated in the
wireframe Web Admin - Main UI - Add Page.
● Publish/Unpublish - these buttons set the published field
appropriately. This button should work no matter how many or few
fields are selected.
● Add - This is the only button at the top that should not have any
ticked checkbox, as you can’t “add” something that is already
there. When this button is clicked it should open the lightbox add/
edit page dialog illustrated in the wireframe Web Admin - Main UI -
Add Page.
● Delete - this button should work no matter how many or few
fields are selected. This will delete any selected pages after first
confirming with them “Are you sure you want to delete these
pages?” and having them click a “YES” submit button to confirm.
■ Each line item will also have the field entry for menu_page_title linked,
which once clicked opens a lightbox dialog (see wireframe Web Admin -
Main UI - Add Page) which allows for the page to be edited singularly.
■ There will be a checkbox for each item entry, which allows for multiple
table entries to be selected at the same time and manipulated via the
buttons above the table (button functionality explained above).
■ The columns for Page Layout and Order should both be editable in-line,
meaning that the RO can click on them in the table directly to change the
parameter. After changing parameters in the column the RO should then
click the little save button (in the wireframe this is illustrated by a little
confirm type checkbox) to save the changes made to that column.

Add/Edit Items Page:

● The Add/Edit Items Page(see wireframe Web Admin - Add_Edit Item) will have a table
displaying food items and options for those items. Each table entry here will represent
a single food item on the digital menu in the frontend. Just like a real menu that has
multiple food items on a page, our digital menu will too. Each food item will have the
following fields assigned:
○ id - a unique identifier
○ food_item - the name of the food
○ menu_page - the page the food item is assigned to display on
○ price - the price of the food item, also to be displayed on the menu frontend
○ published - whether or not the food item is displayed on the menu frontend
○ order - the order in which the food item is displayed on the page it is assigned
to... each page layout will have a numerical pattern assigned to it, and the order
will drop the food item into that page layout dependent upon that page layout
(see menu frontend for more details)
○ image - this field should store the location of the image on the server. The table
column will show a green button if an image has been assigned and a greyed
out “non-active” button if not.
○ video - this field should store the unique identifying number used by YouTube to
differentiate videos by. The table column will show a green button if a video has
been assigned and a greyed out “non-active” button if not.
○ special - this field should simply mark the item as special and assign a “special”
class to the item in the menu frontend, for special display of the food item.
○ date_created - the date the food item was first created, formatted as a PHP
expression “m.d.y”
○ date_edited - the date the food item was last changed, also formatted as “m.d.y”
○ Miscellaneous Details:
■ The following column headers should have sortability (when clicked
it sorts via alpha/numeric increasing/decreasing): Food Items, Price,
Published, Order, Image, Video, Date Created, Date Edited.
■ This table will have the same buttons above it that operate in a similar
fashion. The only difference is that instead of opening the “Add/Edit
Page” dialog it will open the “Add/Edit Item” dialog, as illustrated in the
wireframe Web Admin - Add Item - Popouts 1. This popout dialog will
allow for each field assigned to a food item to be edited.
■ Each line item will also have the field entry for food_item linked, which
once clicked opens a lightbox dialog (see wireframe Web Admin - Add
Item - Popouts 1) which allows for the page to be edited singularly.
Similarly, clicks on either the image or video buttons should open the
lightboxes for those edit tools (Web Admin - Add Item - Popouts 2 AND
Web Admin - Add Item - Popouts 3).
■ There will be a checkbox for each item entry, which allows for multiple
table entries to be selected at the same time and manipulated via the
buttons above the table (button functionality explained above).
■ The columns for Menu Page, Price, and Order should all be editable in-
line, meaning that the RO can click on them in the table directly to change
the parameter. After changing parameters in the column the RO should
then click the little save button (in the wireframe this is illustrated by a little
confirm type checkbox) to save the changes made to that column.
 WireFrames
Sample Menu Layout
Web Admin - Main UI

Web Admin - Main UI - Add Page

Web Admin - Add_Edit Item
Web Admin - Add Item - Popouts 1
Web Admin - Add Item - Popouts 2
Web Admin - Add Item - Popouts 3
Web Admin - Teaser Page