Web Design; Online Crowdsourcing System

If you read this blog frequently (or just read the About me page) you would have noticed, that I am more into hardware than software. That doesn’t mean I am not interested in software. To be honest, any technology that solves real world problems interests me. Last semester, I took a class called Web Design and we were assigned the construction of a crowdsourcing website where people can file reports to a central system.

Imagine you are at your university or somewhere in your town and you see some sort of damage. It is not something life threatening, so you can’t call the authorities, but it is something more or less important and you want to see it fixed. What do you do? Well, in most cases you have to go through a bureaucratic ordeal. This website comes to the rescue. You can report the damage either from your computer or from your smartphone online and the central authority can immediately be aware of what is going on. The link to the site is here. The rest of the post describes its functionality.

main

This is the main page (you can enlarge the picture by clicking on it). The first thing to notice is the Google Maps map. It occupies half the screen and shows, by default, the location of my university (University of Patras). Under the map you can see two forms, the Login form and the Register form. Apparently, when you visit for the first time you must create an account. Filling the “Name”, “Surname” and “Telephone” blanks is not obligatory. In addition, the site includes an RSS feature, in case someone wants to monitor the reports through his RSS aggregator. The “Show Statistics” button is using the AJAX technology to create an asynchronous connection to the server. When a visitor hits that button he receives some statistical information about the reports activity, but without the need to reload the whole page. Create an account, log in and hit the “Login” button to go to the next page.

file_a_report

These are your options as a user. You can file a report, change your user information or check out the status of your previous reports.

To file a report you must first click on the map above and select the location of the event that you are reporting. It is not necessary to get the right location the first time, because you can drag the marker wherever you want. Then you state the importance of the situation. You have three options, “Mild”, “Potentially Hazardous”, and “Urgent Situation”. The next requirements are not mandatory but they can be really helpful. You can upload 1-4 pictures from your phone or PC and write a few words to the administrator.
events

This is a picture where three instances are being displayed. The “Mild” events are depicted with a green marker, the “Potentially Hazardous” with a yellow marker and the “Urgent Situation” with a red marker. That makes it easier for the administrator to respond better to the urgent situations. If you click on a marker, its unique ID will pop up. This is not very useful for the user, but it is necessary for the administrator in order to distinguish the instances.

raport

This is the first report we have filed as users. Some fields are blank because no admin has solved our issue yet. Any user can be promoted to administrator and any administrator can be demoted to user. Obviously, the first administrator must be created using a direct mySQL command to the database.
admin_panel

An administrator can file reports and check out the status of his reports, just like the user, but he has some extra privileges, as you can see in the picture above. An admin can modify, at will, the information of any user, as well as promote, demote and delete any user in the database. He can also solve open reports through the “Manage Open Reports” option and monitor either the resolved or all the reports through their respective buttons.

2014-12-02_00-58-16_382

Last but not least, the whole website is mobile phone friendly. The code adapts with the size of the screen. As you can see in the picture, the mobile version is just as good as its PC counterpart.

The code is available at my github repository. The only file missing is the server_conn.php, because it includes the login information to the server database.

Leave a Reply

Your email address will not be published. Required fields are marked *