In the following, you can see our page step by step. I will go through its functions and quickly explain what the user sees and what happens once he interacts with it.
If the page is accessed for the first time, the user will end up here. It is the login/signup page and the user has the option to either just log in..
..or to create a new account after he clicked the button saying “No account”. A form toggles up asking the user to enter some things needed for using the account: Gender, Name, Password and the Student ID. He also has to enter his password twice to ensure that he has not misspelled it. All the forms have different conditions the user has to stick to. The password for example has to contain at least one number to enhance security. If he does not stick to those, he will be informed and has a chance to change his details. After entering those things correctly, he will receive a message confirming his registration. His details were saved into the users table that was set up into the database. He then has the option to either access the main site by logging in or returning later to do so. If he chooses to log in, a query searches the database for his name and password and if they are found, he will be logged in and a session is started.
Also, he will from then on see the following page. It is structured into two main parts, the navigation bar that enables the user to access other pages and the body of the pages displaying the posts. The user can read and scroll through those posts and using the form integrated into the navigation bar, he can contribute by writing his own posts.
In case the user changes his mind, he can delete them afterwards. As you can see in the picture, the user is only enabled to delete his own posts since only those contain a delete button. If he chooses to add a post, the data entered into the form will be saved to the database as well as his ID, a timestamp and a unique ID for the post. So, even though the posts are displayed anonymously, it can still be kept track of the person who made them. This might be important in a case of misuse and also to enable the person to only delete their own. If he chooses to delete a post, the post will be removed from the database, noting that the unique post ID will be removed as well but even though it is not there anymore, it can never be used again.
The post boxes display the content as well as the gender, the location and a time function telling the user how long ago certain posts were made.
If the user wants to delete his account, he can easily do that using the delete button integrated into the navigation bar. To avoid accidents, the button does not directly delete the account but makes another button toggle down that also has to be clicked. The principal behind it is very similar to the ‘delete post’ buttons.
If the user chooses to write a post, he has to stick to the given word limit which is a 1000 words maximum and 4 words minimum. If he does not, a window will inform him again and he won’t be able to submit the post until he changes it.
Once he clicked ‘submit’ the post will be submitted and the user will receive a message confirming that.
The user can navigate using the navigation bar and access the four different pages. The first one is the “about us” page, telling him all about the creators of the page. If the users feels like gaining more information about the development, he can click one of the “view blog” buttons to be redirected to our blogs. In the following, he can read more about the page.
The search page enables the user to search through all of the already existing posts using one or more words/numbers/ect. The results will be displayed after he clicked the button saying “Go!” Also, the posting form in the navigation bar is hidden for this page.
The last page is the filter page. It enables the user to filter the posts by location which makes it easier so read what happenes around him. The posting form is replaced with the filter form, letting the user choose the location. By default all the posts will be displayed.
At all this time, the user can quickly logout using the “logout” button that is never hidden as well as delete his account using the “delete” button. If he chooses to log out, the session will be destroyed and the user will be redirected to the login/signup page.