Menusystem Demo
Although the initial thrust behind the menusystem database design was sufficient flexibility to enable multiple type of information, such as dining hall hours and payment options to be centralized, this demo restricts itself to displaying the menu-centric capabilities. A sample end-user (student) and administrative (CDS) views are included.
Scroll down this page to read a short tutorial on how to use the system. The interface was designed with the idea that users, both students and CDS, would use the system regularly; while the initial learning cost might be a little high, the goal is for typical-day usability to be at its lowest. Also, I was testing out AJAX for the first time, so there many be compatibility issues that arise, which would be eradicated were this system ever to enter reality, which it might.
A caveat: I want to present to a working interface, so pressing a button that says "delete everything" will actually delete everything; cleaning old things is a necessary feature.
Detailed Overview
Administrative
1. Main screen
Here, you can enter a date, and a number. This is very similar to the current way to entering menus, and it seems to work naturally: typically, menus
would be entered 4 days to a week ahead, starting with a proximate day. Date fields are initialized to today. Click 'Add Menus!' to more on to the next screen (discussed in (2) below).
In addition, there are these two giant, beckoning buttons for deleting everything.
2. Entering Menus
This is a very overwhelming screen. However, it is also very powerful, and much easier to use than the current interface, which, too, can this table structure of halls to days. Again, the fact that the idea is familiarity is important motivated me to adopt the existing table paradigm i nthe interface.
What stuff means:
- Every cell of the giant table is something that looks like what is on the left here. It corresponds to a single meal, in a single dining hall, (these two are specified by which row you are in) on a single data (specified by the column)
- The gray box pairs are input areas to put in counter and dish pairs. Counter: dish is another thing that occurs naturally in the existing thought framework of the world of CDS menus. A counter can be something like "soup" "pizza" "grill" "vegetarian comforts" etc; a dish is a descriptive, typically long name. The two of them fully specify a dish.
- Press "+" at any time to add more input areas.
- Press "OK" at any time to add counter-dish pairs.
- Press "..." at any time to refresh the current listing of dishes. When you first view this screen, it will list all dishes already logged for the day. This list is not automatically refreshed, because that is a time-consuming operation that is typically not necessary all the time.
- Each counter: dish pair will appear as a link. It will be red or gray; if it is read, it means there is no additional information about this dish other than its existence.
- Clicking on the link will open a new window, in which you can edit and update dish information. This view also allows you to delete (1) every instance of this dish everywhere, or (2) just the specific instance you originated from. A screenshot of this is available below.
And here is some stuff I added for your previewing for Tuesday and Wednesday:
Viewing
What kind of things can the viewer do?
- Constrain payment type. For example, if I only have a particular kind of payment option, or lack a payment option, I can specify that. To do this, I would click on the five block in the upper-right-hand corner of the viewing window. Clicking one makes the box green - "YES"; once more makes it red - "NO"; and again to make it gay - "whatever" - and the cycling can go on forever. So below, for example, I would use this method to narrow down to dining halls I could visit where I could pay with my board meals, but where I wouldn't have to stand in the type of line usually associated with places where people can fumble for cash as a method pf payment; so I select "YES" on meal and "NO" on cash. I do not in thic instance care about flex or obie dollars, or my student charge account.

- Constrain time. If I want to eat in a particular time period, I can specify that. To do this, I would enter a properly-formatted time into the input boxes provided below the paymext boxes. The time I provide says that I want food somewhere within that time slot. I nthe example below, I am seeking meals between 11:30 and 1:30 on the given day.
- Choose the day. The fisheye selection allows choosing any day +/-7 days from today. Whe nno day is highlighted, today is assumed.
- Display basic information baout the food, when it is available.
Final Thoughts
This application demos only a small part of what the database has, or can have. For example, though payment types and meal schedules exist and are used, they are not accessible for viewing or editing in this application. This was, in part, deliberate: the current menusystem only deals with menus, too. By the way, here is what was made a while ago for CDS that is used today by many students on a regular basis. It is the most frequented part of the site. While cleaner that what I have, it is less informative on the surface, and substantially less informative as a database thingy.
I used a ton of JavaScript/AJAX/etc in this application. It was very cool; I learned a ton. The JS debugging took more time than expected, while explains why my favorite part of the database - the times meals in halls happen - is nowhere to be found.
Nonetheless, I am quite proud of the administrative view, and I think the fisheye is pretty darn swanky.
My Code
Here is what is happening in the code:
- inc folder: contains, in addition to images and .css pretty styling documents, the .js JavaScript files and db.php, which are included in many places. The JavaScript files handle some validation, but mostly the ajax part. Since I was hoping to gain control of AJAX in this project, I would like to point out that ajaxhandler.js is the most well-documented piece of javascript code I have ever produced.
- run folder: contains all .php scripts that connect ajax calls and return thigns that are then injected into the main pages. These are the scripts that formulate the queries that are allowed.
- main foder just contains the runner files, view.php, add.php, and dish.php. They all have some embedded JavaScript for validation purposes.