The Page

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..

Screenshot (297)

..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.

Screenshot (298)

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.

Screenshot (289)

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.

Screenshot (290)

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.

Screenshot (291)

Once he clicked ‘submit’ the post will be submitted and the user will receive a message confirming that.

Screenshot (292)

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.

Screenshot (294)Screenshot (293)

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.

Screenshot (295)

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.

Screenshot (296)

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.

Holidays and what I have been doing

Since I was going home for the holidays, my group and I decided to finish most of the project before the Easter break. To do so, we had a group meeting on the last Friday before and because during this group meeting we noticed that a lot of things still had to be done, me and Tina decided to stay at Uni a bit longer to finish the work. During this night, Tina worked on the aboutus.php page and since I had the PHP for our page finished at this point, focussed a bit on the design aspect as well as I helped other course members with their PHP. Beccy could not stay because she had to go home but she said she would take care of making the page responsive. Also, she worked on the PHP for the search engine and because she finished it this day, I integrated it into the page.  At the end of this, we had a functional site with a newer design as well as the aboutus page working.

I then went home for holidays and spent some time ‘cleaning up’ the code, like taking out things we did not need anymore and formatting. I also changed some small things, like replacing ‘ucfirst’ with ‘ucwords’ in some cases, so not only the first letter of the first word would be capital but the first of every word. That was important for example for the locations that consisted of two words instead of one. I then looked through the file on my computer and the one on github and uploaded all the changes I had made. To double check if the github version was working, I downloaded the .zip file and looked at the page using XAMPP. I then did some more edits and in the end, the version was up to date.

After all of this was done and we were sure that we would not make any major additions to the code, I started commenting the PHP. Once I am back, I offered to meet up with my teammates to go through all the code and comments together so we would all have an understanding of everything.

Filtering the posts by location

Since our group had most of the basic PHP finished at this point, we had time to focus on more difficult things to improve the user experience on our page. So far the user was able to set up an account, log in, post, delete their posts, delete their account, look through other posts, see how long ago they were created and where and  if they were created by a female or a male person. Also they could visit the aboutus page to learn about who created the page. To improve the page, we still wanted to add a ‘search by words’ function as well as a ‘filter’ function. To provide more information, Tina also thought that it would be a nice idea to make the about us page a bit more complex. To get those things done, we agreed to each look at one of those things until our next meeting, mine was the ‘filter by location’ option.

What we thought for that was a simple concept. The ‘filter’ page was supposed to be accessed using the navigation bar, Tina originally created for the about us page and I integrated into the other pages. Then another page should appear, looking very similar to the normal ‘posting’ page. Just that the form for posting should be replaced by another form (including a dropdown menu for filtering by location). The html part for that was done quickly, I simply had to create another file (filter.php), integrate another field into the navigation bar and then link them up. Next, I created a new form very similar to the form I previously used when I wrote the code for the posting process, a dropdown menu including all the locations and a submit button.


<form class="sort_place" action="filter.php" method="post">

Only show posts from: <select name="sort" class="dropdown">

                            <option value="">--Select--</option>

                            <option value="talbot campus">Talbot Campus</option>

                            <option value="landsdowm campus">Landsdown Campus</option>

                            <option value="halls">Halls</option>

                            <option value="private accommodation">Private Accommodation</option>

                            <option value="unilet">Unilet</option>

                            <option value="town">Town</option>

                            <option value="none">None</option>

                        <input type="submit" onClick="redirect();" />

                        </select>

                    </form>

I also integrated the navigation bar into the new file so it would also be accessible from the new page and enable to user to navigate back to the ‘posting page’ or to any of the other pages and wrote some css to make it all look nice. But it still would not work because the PHP was missing.

I did some research even though I had quite an idea of how I could get there but I wanted to make sure. I read some threads on Stackoverflow where other people were asking questions very similar to me and looked at the suggestions they got but they did not really got me to where I wanted to get. I will reference some of them at the end of this post though.

After that research, I started writing my own code.  It ended up not being that complicated and looking back at all the hours I have spent doing research and coding in PHP I noticed my improvement. During all this time, I gained knowledge and doing this last bit of coding, I felt way more secure with what I was doing than in the beginning. Of course I still ran into some errors but they were not as big as the ones before and fixed fast. In the end, I worked exactly the way I wanted it to, showing a page with the results once accessed and then filtering them once the form is submitted. I used an if statement for that. To show the results of my search in boxes exactly like the ones on the ‘posting’ page, I created another file (box_search.php) exactly like box.php and did another while look linking to it. In the end it showed the results perfectly. In the following you can see the PHP code for it:


<?php
 if(isset($_POST['sort'])) { //Only if the form above is submitted.
 $sort = $_POST['sort']; //Declaring the variable $sort.
 $query = "SELECT * FROM posts WHERE place_of_post='{$sort}'"; //Query to get all the results for the selected place. 
 } else {
 $query = "SELECT * FROM posts"; //If no place is selected, show all. 
 }

 $result = mysqli_query($connect, $query);
 
 while($row = mysqli_fetch_assoc($result)) {
 include 'box2.php'; //The while loop is used to include the file box2.php for each post matching the criteria.
 }
 ?>


References:

Mack, Kt. 2014. PHP Mysql query – allow user to filter results. Stackoverflow. Available from: http://stackoverflow.com/questions/21349161/php-mysql-query-allow-user-to-filter-results [Accessed 30th March, 2015].

Xalkia, S., 2013. PHP filter mysql results. Stackoverflow. Available from: http://stackoverflow.com/questions/14387684/php-filter-mysql-results [Accessed 30th March, 2015].

Project ANONYMOUS background research

As in previous posts explained, for our project we have thought about an anonymous live tweeting website. This idea requires wider background research as well as the naming of inspirational websites/apps and looking into current debates about anonymity in the internet.

First of all, let us look at pages that follow the concept of anonymity. One of them is called 4Chan.org. It was founded in October 2003 and is an English language, image based, message board with a simple design. On the site, users post anonymously images and comments across the 49 offered message boards. Most of them are dedicated to fandom cultures, like comic books, video games or anime as well as border interests like for example photography or fashion. To use the site, to post and comment, you are not required to set up an account. By now, there are nearly 18 million unique site visitors and over 730 pages viewed a month.

Problem with this concept: Because users are able to hide behind the anonymity, a lot of 4Chans content is offensive, racist, homophobic and vulgar. None of the posters have to be afraid of consequences or a bad reputation and because of that they are not scared to say whatever comes to their mind.

The question now is how we could prevent our ANONYMOUS-Website from turning into something uncontrollable with a lot of offensive content. We thought the fact that the posters have to set up an account even though they post anonymously might help. They are still able to write out their thought as they want to but they would also know that, in case of strong misuse, they would not be completely sheltered from possible consequences. Since we are planning to set up a University website, we thought of maybe requiring a Student ID for setting up an account. In case of offensive comments regarding the University or other students this might be an easy and effective way to enforce consequences.


References:

Knuttila, L., 2011. User unknown: 4Chan. Anonymity and Contingency. First Monday [online], Volume 16, Number 10. Available from: http://journals.uic.edu/ojs/index.php/fm/article/view/3665/3055 [Accessed 03/06/2015]

Github Group-Repositry & first group meeting

In our first group meeting, my group had a lot of things that had to be addressed. Starting with a theme for our project website, a possible layout and the creation of our first GITHUB repositry. We started with GITHUB. First, we logged in and followed each other. After we tried out some things, we created a shared project and made sure that all three of us where watching it. Because we did not have any code to upload at this point, we logged out and started to take care of the other things.

Screen Shot 2015-02-26 at 10.24.00Screen Shot 2015-02-26 at 10.39.21

Screenshot (200)

Our project

We collected some ideas and eventually, we found a theme that we all liked. The brief left us a lot of choice regarding the subject of our website. We could be as creative as we wanted, as long as we used databases and PHP. We all had to opinion that we wanted to create a website for an audience much like ourselves, students. Inspired by an app called YODEL, we liked the idea of some kind of anonymous live tweeting application.

We ended our first meeting after we collected a couple more ideas of how we could turn this into reality.