Our web application Help New Haven is built on a python and sqlite back end and an html and bootstrap front end with some javascript to handle some of the front end rendering using flask as the framework for the two and jinja for our html.
On the front end users can register to be able to create new events nearby, the new users are passed into python through request.form then they are saved into a sqlite table named users through sqlite commands, before being passed into the table they are double checked in case any of them is null, we do this for all of our forms. A logged in user can then create a new event through the create event form, this data is then passed into python where we parse it into more desirable formats. The newly formatted data is put into a different sqlite table named events. The main data that makes up the events table is the event's unique id, the user's id (of the user who created the id), the name of the event, the type of service that is provided, the date of the event, whether it repeats or not, start and end time, the expiration date of the event, the location, and a short description of the event. If repeat is selected the event will repeat weekly until the date of the expiration and each of these repeats will be created as a separate event.
A user can also edit or delete individual events through their your events page. The your events page shows all of that users events sorted by time (sorted in python before passing to the page) in a table. When a user deletes an event it sends that event's id over to python and python deletes the event with that unique event id. When a user edits an event it creates a session with the event id then passes the user over to the edit page along with all the data for that event. it is filled in automatically so users can see what the old data was as they edit it. When they submit, the event is updated with the new information in the table. Users can only edit and delete events that they create because they only have access to those through the your events page.
The site visitors who are looking for the information have access to a lot of cool features as well. When visitors first go to the page they see a list of all available events. These are sorted by time from top to bottom then left to right (as a newspaper would read). The data for these events is passed to the page from python through flask and jinja interprets them in a for loop to create a bunch of bootstrap style cards. A cool masonry-like effect is acheived with the cards using bootstraps card-columns feature. The main page card has tabs which users can use to sort events. We sort the data right there using jinja to for loop iterate through the data and then an if to make sure the event type is matching to that tab that we want. The next thing visitors have access to is a map where they can view the locations of all the events. The map uses googles map chart visualization api to create pins with tooltips that have the event information. We json.dump the data before passing it to the javascript on the page so the quotes are usable by javascript. we must also declare it as safe for javascript to use. the data is then passed into the google map drawing fucntion and it draws a map at the div. The final thing the visitors can access is a printable list where they can see a table of every single event's relevant data and then an option to print. The print button pulls up a dialogue and uses a small amount of javascript and css on its onClick to make itself invisible when it is pulled up in the print dialogue. From there they can save it as a pdf or print it directly out to keep for reference.