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

Advertisements

Net neutrality

After our lecture today, I did some reading about “Net neutrality”.

Before I start talking about recent news and giving more detailed information about “Net neutrality”, I should explain and define what it is and why we all should care and know about it.

What is Net neutrality?

To quote ocf.berkeley.edu, “Net neutrality […] is a network design paradigm that argues for broadband network providers to be completely detached from what information is sent over their networks.  In essence, it argues that no bit of information should be prioritized over another.” So, what does that mean? Basically, that the internet is “most efficient and useful to the public when it is less focused on a particular audience and instead attentive to multiple users.”

For example: “Let’s say you use Hulu and Netflix, and often switch between the two to see what’s on. Supporters of net neutrality say that your broadband Internet service provider (ISP) should not be able to charge either Netflix or Hulu, or any other company that depends on the Internet, for a faster connection to you and other customers. Nor should the ISP be able to charge you more to access certain services.” (Trotter, J., K.) Meaning that network providers could choose to decide how fast data would be transmitted and at what quality. As a result it could come to unfair treatment and even discrimination as well as high prizes and a position of power for the providers. Because in that case some information would be accessed much slower than other, users would desire the information they have a fast access to and in the end, this way network providers could have a hand in creating monopoles or oligopolies.

Some quotes I found doing my research were by Eric Schmidt, the CEO of Google and Tim Wu, a Professor at Columbia Law School:

A neutral network might be designed without legal prodding – as in the original internet.   In an ideal world, either competition or enlightened self-interest might drive carriers to design neutral networks.

– Tim Wu (Professor at Columbia Law School)

Creativity, innovation and a free and open marketplace are all at stake in this fight”

– Eric Schmidt (Google CEO)


References:

Lin, R., unknown. Network Neutrality. Available from: https://www.ocf.berkeley.edu/~raylin/whatisnetneutrality.htm [Accessed on: 25th March 2014].

Trotter, J., K., 2014. What is Net Neutrality and why should I care? The Non-Geek’s Guide. Available from: http://gawker.com/what-is-net-neturality-and-why-should-i-care-the-non-g-1657354551 [Accessed on: 25th March 2014].

The Guardian, 2015. Net neutrality. Available from: http://www.theguardian.com/technology/net-neutrality [Accessed on: 25th March 2014].

Baker, J., 2015. EU annoys industry and activists with net neutrality proposal. Available from: http://www.theregister.co.uk/2015/03/05/net_neutrality_eu_ministers_proposals_treated_with_suspicion/ [Accessed on: 25th March 2014].

Edit and Delete button for Posts

After our meeting with Rob last Friday, I have been working on a “delete” and an “edit” button for the posts on our page. I knew it would be very similar to the code I had previously written for the “delete-account” button but also that I was faced with some complications.

First of all, the users had to be able to only delete their own posts. For that, I knew I would need the “user_id” that I previously saved as a session variable, so I could run a query checking if the “id” from the user table would be the same as the “user_id” in the posts table. Luckily, at this point I had already managed to save the “user_id” from the SESSION in the posts table. That made this whole thing a bit simpler, because I did not have to take care of that in addition, but could just run a simple check to ensure that the two numbers were the same.

Once that was accomplished, I thought about the second problem that I had to solve. At this point the user would click a button and end up deleting all of his posts no matter which button he picked (as long as it was one of his posts). That happened because the users “id” and the “user_id” from the posts table would be same for all the posts a user made. That meant that the “user_id” to select a certain post was not enough criteria and that I had to query for the post “id” as well.

The solution for that was creating another file, called “delete_post”.php and when doing the “href” adding the unique post “id” to the URL. That happened with the following code:


            <div class="delete_edit" id="delete_post"><a href="delete_post.php?id=<?php echo $row["id"]; ?>">Delete post?</a></div>

I then would get the post “id” and run my query like this:


            $query = "DELETE FROM posts WHERE id = '{$postID}' and user_id = '{$_SESSION['user_id']}'";

In the end the user was able to delete his posts, but not all at once. Instead he could click on the posts’ “delete” button ending up deleting just this one post (of course, still just his own post, not others). That was almost everything and could have probably ended up staying like that but it was slightly distracting that all the posts had “delete” buttons but some of them just would not work. That’s why I used an if-statement to hide the button for all but the users own post. You can see the code here:


<?php if ($_SESSION["user_id"] == $row["user_id"]) {?>

        <div class="delete_edit" id="delete_post"><a href="delete_post.php?id=<?php echo $row["id"]; ?>">Delete post?</a></div>

        <div class="delete_edit" id="edit_post"><a href="edit_post.php?id=<?php echo $row["id"]; ?>">Edit post?</a></div> 

<?php } ?>

Also, in the following you can see a screenshot of the “posting-page” so far. All the posts with “edit” and “delete” buttons are the one made by the user logged in. In addition to the buttons’ obvious function, they are also an option for the user to keep track of their posts since they can easily get lost in the mass of anonymity and still stay anonymous (since other people can only see that certain posts were not made by them but not by who).

Screenshot (285)

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 w3schools.com. 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 plus2net.com, 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.

<?php

class convertToAgo {

 function convert_datetime($str) {
 //sets the timezone to UTC
 date_default_timezone_set('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;
 
 }
} 

?>

</pre>
<pre>

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


References:

W3Schools, unknown. PHP 5 Date and Time. Available from: http://www.w3schools.com/php/php_date.asp [Accessed 17th March 2015].

Plus2net, unknown. PHP Date Difference calculation using mktime function. Available from: http://www.plus2net.com/php_tutorial/date-diff.php [Accessed 17th March 2015].

DevelopPHP, unknown. Convert MySQL Timestamp to Ago Time Format OOP Tutorial. Available from: https://www.developphp.com/video/PHP/Convert-MySQL-Timestamp-to-Ago-Time-Format-OOP-Tutorial [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:

11039382_841807095892637_1091697328_n

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.


References:

Sabine, T., 2014. Tina’s Blog. Available from: https://christinasabine.wordpress.com/ [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 stackoverflow.com 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:


&amp;lt;?php

    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)


References:

Learn More, 2013. PHP & MySQL Confirm Password. Available from: https://www.youtube.com/watch?v=byAXL0E_5sA [Accessed: 13th March 2015]

User3665022, 2014. Stack Overflow. PHP confirm password and check if user already exists in mySQL [closed]. Available from: http://stackoverflow.com/questions/23806936/php-confirm-password-and-check-if-user-already-exists-in-mysql [Accessed: 13th March 2015]

Vijaykarthik, 2014. Stack Overflow. How to validate email id and password & confirm password in php. Available from http://stackoverflow.com/questions/27216595/how-to-validate-email-id-and-password-confirm-password-in-php [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() {
 
 $(".sign_up_box").hide();
 $(".login_toggle").click(function(){
 console.log("clicked box");
 $(".sign_up_box").slideToggle();
 });
 
});

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>
</div>
<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>
</form>
</div>

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: http://dakar.bournemouth.ac.uk/~dbuttner/project/public/index.php

References:

Buttner, D., Hughes, R., Tina, C., Negasi, I., 2015. Turtletalks. Available from: http://dakar.bournemouth.ac.uk/~dbuttner/project/public/index.php [Accessed: 13th March 2015]