Overall Organization
Our website is organized into three main views: the browsing view, the combo input view, and the individual combo view. Within the browsing view, we display the contents of the database in a table, and filter the combos displayed there via a search bar feature, an advanced filter feature, a sidebar with character filtering, and enabling the table to be filtered by the columns themselves. Within the combo input view, there's a form for combo metadata, the combo moves input, and the confirmation page, which is just the individual combo view without the discussion section. The individual combo view pulls from the database to display all combo metadata and the combo itself, along with the discussion section. Throughout all of these views, there is a top bar that displays the ability to sign up/into the site, and the Combopedia logo, which redirects the user to the browsing view.
Frontend Implementation
Browsing View
The default view populates the table with all the combos in the database. Searching was implemented via simple string matching: if the query is a substring of either the combo name or the character's name, that combo is displayed in the table. The advanced filters respond dynamically to every key input into a text field or with every mouse click in the drop down or star menus. Every time an input is detected it updates the combos in the database by first filtering by other fields that aren't actively being edited and then by the field that is. The sidebar is even simpler: clicking on a character highlights that character in the menu and then filters all of the combos in the table by that character. The ability to sort by column header was via a javascript plugin called tablesorter. All of the dynamic updating was done via various jquery/javascript functionality, and much of the general layout was taken care of by twitter bootstrap.