This example works like a voting machine. A new entry is added by the user that votes for his favourite food among a selection of 9 choices. With each entry three votes can be placed. This can be 3 votes for one choice. Also, the 3 votes may also be distributed between different choices.
The accumulated view (list view of all entries) is put into a pie chart by counting the votes for each choice.
The frontend checks when the user tries to place more than three votes. This is done
in checkNewInput() in the Custom JavaScript template. An error is displayed as an
alert message above. You may need to scroll up to see the message (the focus of the
alert message is not done automatically). However, one must
be aware that by manipulating the POST request it's still possible to send any
values to the backend that would be considered being an invalid vote.
Real systems (e.g. a voting machine) must have checks on the server side
whether the request is valid or not. With the database activity we do not have the choice
to add backend checks.
At the single entry page, instead of showing plain values of the given votes, the data is used to display an image for each choosen option. Repeated images on that page indicate that the user gave more than one vote to the same option.
The images for the choices are taken from this repository. You may change the
function getImageHtml() in the Custom JavaScript template to have your own images.
Also, because of the layout, each image has a size of exactly 250x250 pixels.
The images were all taken from Wikipedia, cropped to have a squared format and scaled down.
- aelplermagronen.jpg: Adrian Michael CC BY-SA 4.0
- chuegelipastetli.jpg: Free Art License - «A.Savin, Wikipedia».
- cordon-bleu.jpg: Rainer Zenz - GPL
- fondue.jpg: Hic et nunc - CC BY 2.0
- polenta.jpg: Joadl - CC BY-SA 3.0
- raclette.jpg: Ka23 13 - CC BY-SA 4.0
- roesti.jpg: Poupou l'quourouce CCA 4.0
- saucisson.jpg: Хрюша - CC BY-SA 3.0
- zuercher_geschnetzeltes.jpg: Christian Michelides - CC BY-SA 4.0