The “time ago” problem and how I got there

Looking at apps and websites me and my group got our inspiration from there was one thing I realized that we needed so our users could improve their experience using our page: a timestamp for the posts. Imagine accessing the website, looking at the “posting-page” and realizing that you have no idea how old those posts are. They could have been written weeks or even a month ago. Since our whole concept is based around the idea of anonymity and withholding information, we also have to make sure that we do not cut the user off too much. There are a couple of things the user needs to identify with the poster. One of them is the gender, a part we have already integrated. The two other things that were still missing were a place and time. The first thing that had to be done to even think about integrating time was updating the table in the database. Our “posts-table” needed a TIMESTAMP. Since I had already set up one for our “users-table”, it was not very hard to do. A couple of settings had to be adjusted. As you can see in the following photo, I set the TYPE to “timestamp” as well as the DEFAULT to “CURRENT_TIMESTAMP”. Without any extra requirements from the user, every post would automatically be saved with a timestamp.

The easiest option at this point would have been to just echo out the time-stamp with our posts and let the user do the math. But since we wanted to create a user-friendly, easy to use site, I started looking into using the current time and getting the difference between it and the timestamp time. Since I only had a vague idea of how to do that, I was faced with having to do quite a lot of research.

Before I started doing the research, I wrote down a list of things I needed to get more knowledge about:

  1. How to get the current time?
  2. How to get the difference between the current time and the timestamp?
  3. How to convert the whole thing in the right format (“..minutes ago”/”..hours ago”/etc.)?

First, I looked into how to get the current time:

  • For that, I looked at a tutorial from To my surprise, it was actually not very hard to get the current time. All it needed was PHP’s date() function. Then, I even had a free choice on how the format was going to be. In the following you can see an extract from the tutorial. First the characters needed for dates, then for times:

Screenshot (280) Screenshot (281)

Secondly, I looked into getting the difference between the current time and the timestamp:

To do so, I looked at the website, where I found out that I could use one of PHP’s functions called mktime() to get what I wanted. The function would give out the different between two timestamps in seconds. According to the tutorial I looked at, it was the easiest to “divide the difference in second in different values and taking the floor math value of it.” In the following, you can see an extract from the website, explaining the mathematical principles behind it:

To get the difference in minutes we have to divide by 60

To get the difference in hours we have to divide by 3600 ( 60 minute x 60 seconds )

To get the difference tin days we have to divide by 86400 ( 24 x 60 x 60 )

To get the difference in months we have to divide by 2628000

Also, here you can see a picture of the very first and basic code, I ended up having. Part of it is an extract from the tutorial, part of it, I added from what I had learned.  As you can see, I set the default time zone to “UTC” because my German-Laptop ended up giving me wrong current time. Without it, I would have never noticed. Also, for the current time, I used the format “H:i:s”. Looking at the previously referenced explanations from w3schools, it means a result like “12:12:12”.

Screenshot (275)

Echoed out, my code looked like this (you can see the differences as well as the current timestamp at the end):Screenshot (273)

Thirdly, I looked into the format:

This was the part, where I got stuck. I wanted the posts to have a nice little “..ago” field with information and not a whole block of confusing numbers and dates. I looked into this and after hours of trying around, I ended up at the following tutorial:

It explained the whole thing from the very beginning, so I could freshen up everything I had learned and because it gave a lot of additional ideas and suggestions, I ended up redoing my code from the very beginning. The tutorial ended up writing two functions that then easily could be used to echo out the time in my wanted format. I followed it and ended up with two functions in my “functions.php” file. Because I knew that I would reference the tutorial in my code, I stuck to the function names the tutorial suggested and just changed some small things while writing the code. One of them was adding the default time zone again, for example. If you look at the functions, you can see that the first one converts into a timestamp in the “2015-01-01 12:12:12” format and the second one gives out the differences between the time and the timestamp-time.


class convertToAgo {

 function convert_datetime($str) {
 //sets the timezone to UTC
 list($date, $time) = explode(' ', $str);
 list($year, $month, $day) = explode('-', $date);
 list($hour, $minute, $second) = explode(':', $time);
 $timestamp = mktime($hour, $minute, $second, $month, $day, $year);
 return $timestamp;

 function makeAgo($timestamp){
 $difference = time() - $timestamp;
 $periods = array("sec", "min", "hr", "day", "week", "month", "year", "decade");
 $lengths = array("60","60","24","7","4.35","12","10");
 for($x = 0; $difference >= $lengths[$x]; $x++){
 $difference /= $lengths[$x];
 $difference = round($difference);
 if($difference != 1) $periods[$x].= "s";
 $text = "$difference $periods[$x] ago";
 return $text;



 <div class="time_ago" <h2><?php echo "..".$when; ?></h2> </div>

And here you can see the actual result in the top left corner:

Screenshot (284)


W3Schools, unknown. PHP 5 Date and Time. Available from: [Accessed 17th March 2015].

Plus2net, unknown. PHP Date Difference calculation using mktime function. Available from: [Accessed 17th March 2015].

DevelopPHP, unknown. Convert MySQL Timestamp to Ago Time Format OOP Tutorial. Available from: [Accessed 18th March 2015].


Finding a name

Tina took on the task to find a name /logo for our website. Doing that, she asked the rest of the group if they had any ideas and then put together a Mind-Map. While our trip to the beach, we thought about maybe using something animal related, preferable the turtle since it is a sea animal, but we did not have a clear idea of what exactly.

So, she made the Mind Map and then we talked a bit about what she thought of and we added some other possible ideas. The name was supposed to aim at students and we thought it would be nice to relate it somehow to “talking” since the whole idea is based around students sharing small stories.

Here you can see the Mind-Map Tina put together:


Possible names were for example “Hidden Messages”, “Anonymous Turtle” or “Turtle Posts”. We then did a little vote and the three names that we liked most were:

  1. Turtle Talks
  2. Ghost Mail
  3. Unipost

If you want to read more about that, you can look at Tina’s Blog that is references below.


Sabine, T., 2014. Tina’s Blog. Available from: [Accessed on the 11th March 2014]

PHP: Confirm Password

To stop our webpage from having thousands of accounts that are not being used because people entered their passwords wrong and then had to sign up again, we chose to set up a confirm password field. Because I was not sure how to do it, I had to do some research. I found a YouTube tutorial that explained the whole thing very well. You can see it below:

To make sure I had the knowledge to set it up, I then read some threads on where people tried to do similar things. I will cite them in my references. Then, I moved to our code. The very first thing I needed was the field. So, I added that to the form we already had in the index.php file:

<input type="password" name="confirm_password" value="" placeholder="Confirm Password"/>

The rest that was needed was to compare the two entered passwords and send out an alert message in case they would not match. You can see the code I used for that in the following:


    if(isset($_POST[&amp;quot;signup&amp;quot;])) {


        $password = $_POST['password'];

        $confirm_password = $_POST['confirm_password'];


        if ($password != $confirm_password) {

            $if ($password != $confirm_password) {
             $message = "Passwords do not match. ";
             echo '<div class="message">'.$message.'</div>';


        } else {

            $query = "INSERT INTO users (name, password, student_id, gender) VALUES ('{$name}', '{$password}', '{$student_id}','{$gender}')";

            $result = mysqli_query($connect, $query); 

            $message = "Your account has been registered!";

            echo $message; 

                if($result) {

                        $message = "Success, your account was added!";   

                    } else {

                        $message = "Sorry, something went wrong!"; 



        $password = ""; 

        $confirm_password = "";



In the end, I tested it. To show that better, I temporarily changed my input type to “text” :

 <input type="text" name="password" value="" placeholder="Password"/>
 <input type="text" name="confirm_password" value="" placeholder="Confirm Password"/>

In the picture, you can see me entering two different passwords and then the alert message at the top of the page:

 Screenshot (264) Screenshot (265)


Learn More, 2013. PHP & MySQL Confirm Password. Available from: [Accessed: 13th March 2015]

User3665022, 2014. Stack Overflow. PHP confirm password and check if user already exists in mySQL [closed]. Available from: [Accessed: 13th March 2015]

Vijaykarthik, 2014. Stack Overflow. How to validate email id and password & confirm password in php. Available from [Accessed: 13th March 2015]

New Design for Login page, Color Scheme and where to find Turtle-Talks

After I spent a lot of time working on the PHP part of my project and setting up the connection to the database as well as the Sign-up, Log-in and Post form, I felt like it was alright to work a bit on the design and layout. Since we decided on our Name (Turtle-Talks), we thought it might be a good idea to stick to ocean and turtle related colours, like green and blue. Also, my group decided that we wanted a modern design.

In our last workshop, we learned how to use jQuery and how to make a menu toggle down. We thought it would be a nice touch for our Login page. So far, once the page is accessed, people see this:

Screenshot (262)

They can either enter their login information or click on “No account?”. Doing that, a small form pops up that enables a new user to register. Once that is done, the user can log in:

Screenshot (263)

Here, you can see the code for the toggle up menu. To get it to work, I created two “div” classes called “sign_up_box” and “login_toggle” in our index.php file:

Extract from our scripts2.js file:

$(document).ready(function() {
 console.log("clicked box");

Extract from our index.php file:

<div class="sign_up_box">
<p>No account? Sign up.</p>
<form action="index.php" method="post" autocomplete="off">
<div class="register-switch">
<input type="radio" name="gender" value="female" id="sex_f" class="register-switch-input" checked>
<label for="sex_f" class="register-switch-label">Female</label>
<input type="radio" name="gender" value="male" id="sex_m" class="register-switch-input">
<label for="sex_m" class="register-switch-label">Male</label>
<input type="text" name="name" value="" placeholder="Name"/>
<input type="password" name="password" value="" placeholder="Password"/>
<input type="password" name="confirm_password" value="" placeholder="Confirm Password"/>
<input type="text" name="student_id" value="" placeholder="Student ID"/>
<div class="dropdown">
<input type="submit" name="signup" value="Sign up!"/> </p>

Also, we now uploaded a temporary version of Turtle Talks to the Dakar server. It has been updated since then and has to be uploaded again, but it can still be accessed. It can be found here:


Buttner, D., Hughes, R., Tina, C., Negasi, I., 2015. Turtletalks. Available from: [Accessed: 13th March 2015]

Background Research: Inspiration

This post, I want to devote to explaining where we got our Inspiration from and talking a bit about the two applications.

The very first idea of doing an anonymous Posting-Website for students was inspired by a German App called Yodel. It is not very well known in England, but a lot of my friends from home are using it to keep track of what is happening around them. The app is following a very similar concept to our website. Smartphone users can download it and then anonymously post and others can read those posts and rate them. The user only sees the posts from people close by, for example in their city. It is mostly used by people aged 18-25 to express their thoughts and ideas without sharing their true identity.

After looking into it, me and my teammates found another app that uses the same principle. It is pretty similar to Yodel and called YikYak. So I decided to look a bit into it, hoping to learn something for our project:

YikYak was first launched in 2013 by Tyler Droll and Brooks Buffington. Both of them are graduates from a college in the US. The app allows people to create and view so called “Yaks” within a 10 mile radius. Just six months after the App was released, it became the 9th most downloaded app in the US.

Here you can see both, the webpage as well the app interface of YikYak:

80edd2fd-2698-4548-b32d-7a965d0ade59-620x519 Screenshot (260) Screenshot (261)


YikYak, 2013. Available from: [Accessed: 11th March 2015]

Itunes Applestore Preview, Yik Yak LLC, Available from: [Accessed: 11th March 2015]

Dredge, S., 2014. The Guardian. Yik Yak is the hottest messaging app in the world. So how are Brits using it? Available from: [Accessed: 11th March 2015]

New group member and taking photos

Today, Tina joined our group. She was having troubles with her own group, so she talked to Rob and he then allowed her to join ours. Since we were already pretty far into the Development of our project, there was a lot to catch her up on. Because we were all free, we arranged a group meeting and then spent some time on informing her about our work, our progress and ideas behind it. Also, we talked about the things we were still struggling with (for example the name and logo of our page) and Tina gave us some input on what we could do. After spending a lot of time thinking about the project, me and Becky knew exactly what we wanted the name to sound like and because we did not know how to clearly transform that into an actual result, we were stuck a little. Since Tina at this time had not been involved in all the planning, she had a clear mind and she gave us some input, we had not even thought about. Because we liked her ideas, we asked her if she wanted to think about the name a little more and maybe do some idea collecting on it. We all thought that might be a nice way for her to get involved in the project right away. Also, she wanted to catch up on our blog posts and I went through the code of the Home-/Posting-Page with her to explain what I did how and what still had to be done. I then updated the code on GITHUB and we added Tina to our group, so she could take part in the development of the code. Becky then showed us the Welcome-Page she put together and explained how she did it.

After we spend all this time going over code, we decided it might be a nice idea to use the rest of the day to improve the design part of our website. The girls really liked the photo I used for the Login-Page and after talking about it for a bit, we came to the conclusion that the PHP/Database part of our website was stable enough to start thinking a bit about the CSS as well. We thought it might be a nice bonding experience to go to town together to take some more photos like it and then put them together in a slideshow as the background for our Login-Page. This idea was inspired by websites like or (they are linked in the References at the end of this post). In the following you can see the site with their slideshow:

Screenshot (258) Screenshot (259)

We thought we would only stick to photos of Bournemouth because we were creating a page for BU students and that is would be a nice touch to make this connection even clearer by focussing on Bournemouth itself. Also, we were still missing a couple of pictures for the About-Us (Welcome-Page) of ourselves. Since Israfiel did not come to the beach with us though, we decided to take those another day. Taking photos in town, we all thought about previous projects we did for our course and how for example the alphabet photo project helped us improve our photography skills and how we could use those now to improve the quality of our website’s design.


Unknown, 2011. Blind Barber. Available from: [Last accessed: 10th March 2015]

Unknown, unknown. Vanmoof. Available from: . [Last accessed: 10th 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 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.


Knuttila, L., 2011. User unknown: 4Chan. Anonymity and Contingency. First Monday [online], Volume 16, Number 10. Available from: [Accessed 03/06/2015]