Overall I am very happy with our web-app as we ended up having time to add features that we hadn’t planned to add. As the first time I had made a fully functioning website and having to code in PHP (which I had never done before) I was pleased that by the end of the project I was able to fix errors, add code such as queries and functions and understand the code we had written.

Teamwork played a vital role in being able to finish our web-app. We spent a lot of time outside tutorials trying to fix the code we had written and making sure we had made it to our initial aims of a functioning database connected site with the elements we had set out to incorporate into the site.

Kyle helped us fix the complicated errors and took us through the code that we may not have understood fully, meaning we had a good knowledge of the code we had written. Bootstrap was a very helpful tool in this project and gave us a great CSS basis to work from so we had more time to work out the PHP. We even used a little bit of jQuery to enhance our site and give it some aesthetically pleasing elements like the scrolling down of the log in and sign up forms.

If I was to do this project again I may choose to maybe be a bit more adventurous with the site and do more research on PHP to find some other functions we had not thought of in this project. Design wasn’t our main priority for this project but I would have liked to spend more time on the branding and colours to make a website that would potentially be ready for full use. However I feel that I would be a lot more competent in writing my PHP as I know fully understand its capabilities and how to structure the code to make a fully functioning site.

Fixing Timestamp Error


When I first added the timestamp function to the code it seemed to work. While finishing the code and testing the site I saw that an error appeared and instead of it saying for example “10 mins ago” it said “-3457 seconds ago”. This meant that the filters for most recent were getting confused to I needed to fix the error.

Example of the error:

Screen Shot 2015-04-19 at 16.21.14

I spent a long time trying to fix the code and realised that it started from -3600 seconds which is an hour. I then realised that it could be because the clocks changed a few days after I finished this code. I then found an alternative to “UTC” as the default timezone on the code on the php site. I had tried other timezones such as EST and GMT just as a test but these apparently aren’t readable by the PHP. This seemed to work successfully and now I had an accurate timezone on my timestamp function.

Screen Shot 2015-04-19 at 16.18.09 Screen Shot 2015-04-19 at 16.17.57

Now the site looks this this:

Screen Shot 2015-04-19 at 16.25.30



This is the principle that ISP (internet service providers) and the government should make the internet equal by not discriminating against the user, form of communication or the application. In other words it means that the internet should be equally judged in terms of price and accessibility.

This principle stems from Tom Wheeler publishing a plan in 2014 that would allowed companies like AT&T, Comcast and Verizon to discriminate against users by creating “pay-to-play fast lanes”. This means that a user could pay more to get a faster internet speed or more data. Luckily the Court rules against the FCC’s plans which gave us open access internet.

The internet was created to be a free and fully accessible source of communication and information. Sir Tim Berners-Lee created the World Wide Web and in doing so he decided to provide the world with an open access platform so that the World Wide Web could expand exponentially. By limiting access by adding a price to the amount of data you could access would be completely the opposite to what Sir Time Berners-Lee wanted the World Wide Web to be.

The open internet is important, not just morals. Small businesses and websites rely on an open internet so they are able to expand their business and create a market for themselves. Without open internet innovation would be limited. It also is a type of freedom of speech. It means that anyone, from any colour, race, community or society can share their information with everyone.

Some examples of the way net-neutrality can be used by businesses:

Apart from the clear commercial interests of the operators and service providers themselves, the other interests in the net neutrality debate are as diverse as the activities that take place on the Internet.

• Hollywood studios hope to guarantee the quick and secure delivery of their premium content to paying customers, and see further revenue potential in the monitored use of their products.
•Content and service providers like Amazon, Google, Yahoo! and eBay want to ensure that another cost does not appear on their books and that they are not excluded from or discriminated against on the key parts of the Internet infrastructure they use to access their customers.
•Law enforcement agencies desire expanded capabilities to monitor and extract information from the sea of electronic data. Deep packet-inspection aligns nicely with this surveillance function.
•Hundreds of individuals, non-profit groups and businesses, from across the political spectrum, have come together as the ‘SavetheInternet.com’ coalition to promote net neutrality, which they refer to as “the Internet’s First Amendment”?

Academic Source –
Paul Ganley, Ben Allgrove, Net neutrality: A user’s guide, Computer Law & Security Review, Volume 22, Issue 6, 2006, Pages 454-463, ISSN 0267-3649, http://dx.doi.org/10.1016/j.clsr.2006.09.005.
(http://www.sciencedirect.com/science/article/pii/S0267364906000902). Accessed 18 April 2015

Net-Neutrality is still a big topic everyday! People are constantly wanting censorship cuts to the internet so people can post whatever they would like on the internet. Here are some recent examples:

India’s biggest online retailer Flipkart pulled out of a deal with phone network Airtel to let customers browse its site for free – Flipkart planned to pick up their internet data costs – after a social media backlash.

Source – India’s fight for net neutrality – BBC News. 2015. India’s fight for net neutrality – BBC News. [ONLINE] Available at:http://www.bbc.co.uk/news/world-asia-india-32313704. [Accessed 18 April 2015].

Below is a timeline of events that had happened in the USA related to Net-Neutrality. Obama has made some popular statements about the open internet and how they could even improve America’s economy.

The path to a free and open internet:

OCT. 29
Then-Senator Barack Obama pledges support for net neutrality to protect a free and open Internet if elected President.
OCT. 29
“I am a strong supporter of net neutrality … What you’ve been seeing is some lobbying that says that the servers and the various portals through which you’re getting information over the Internet should be able to be gatekeepers and to charge different rates to different Web sites … And that I think destroys one of the best things about the Internet—which is that there is this incredible equality there.” -Barack Obama
The FCC introduces strong net neutrality protections that said internet service providers could not block websites or impose limits on users. In December, the FCC would go on to pass a final version, adopting their first-ever rules to regulate Internet access.
Just weeks after the FCC adopted their rules, Verizon Communications filed a federal lawsuit that would eventually overturn the order.
JAN. 14
A Federal Appeals Court strikes down the FCC’s 2010 rule.
JAN. 15
A user creates a petition on the White House’s We the People platform, petitioning the Obama administration to “Restore Net Neutrality By Directing the FCC to Classify Internet Providers as ‘Common Carriers’.”The petition went on to be signed by 105,572 users.
FEB. 18
The White House responds to the petition, expressing continued support for a free and open internet, but making clear that it couldn’t direct an independent agency’s rule making.
MAY 16
The FCC Issues a notice of proposed rule making on internet regulatory structure, opening a period during which the public could submit comments on the rule.
AUG. 5
“I personally, the position of my administration, as well as a lot of the companies here, is that you don’t want to start getting a differentiation in how accessible the Internet is to different users. You want to leave it open so the next Google and the next Facebook can succeed.” -President Obama
SEP. 15
The FCC’s comment period comes to a close. Nearly 4 million Americans filed public comments on net neutrality during that period — more than the FCC has received on any other issue they’ve handled.
NOV. 10
President Obama calls on the FCC to take up the strongest possible rules to protect net neutrality, the principle that says Internet service providers (ISPs) should treat all internet traffic equally.
FEB. 26
The FCC votes in favor of a strong net neutrality rule to keep the internet open and free.
Source -Net Neutrality: A Free and Open Internet | The White House. 2015. Net Neutrality: A Free and Open Internet | The White House. [ONLINE] Available at: https://www.whitehouse.gov/net-neutrality. [Accessed 13 April 2015].

Recently I watched the Dimbleby Lecture on BBC 1 on 30th March 2015. This was a very interesting lecture containing concepts about the open internet would improve the Uk including its economy, digital business sector and even hospitals. Martha Lane Fox also suggested that providing internet for free would categorically develop and improve the UK.

Screen Shot 2015-04-18 at 19.01.16

Link to the lecture – http://www.bbc.co.uk/iplayer/episode/b05p9tvt/the-richard-dimbleby-lecture-30032015

Here is a couple of snippets from the lecture:

Finally, we should aim for a much more ambitious global role in unpicking the complex moral and ethical issues that the internet presents. For example, what are the implications of an internet embedded in your home appliances? Do children need online rights? What is an acceptable use of drones?

We should be making sure that the original promises of the internet – openness, transparency, freedom and universality – are a protected national asset, as integral to our soft power as Adele, JK Rowling, Shakespeare, or even Downton Abbey.

Source – A little teaser of my Dimbleby lecture | MLF Blog. 2015. A little teaser of my Dimbleby lecture | MLF Blog. [ONLINE] Available at:https://marthalanefoxblog.wordpress.com/2015/03/30/a-little-teaser-of-my-dimbleby-lecture/. [Accessed 18 April 2015].

This news report is a bit more relevant as it is about the progression of Net-Neutrality in the UK. This article form 2012 shows the positives that some UK-based businesses are making towards open access.

Ten ISPs including BT, O2 and Talktalk backed the agreement promising not to restrict or block content unless there was a reason to deploy “reasonable traffic management practices”.

But Virgin Media said the principles set out were too vague while Vodafone said the code was “impractical”.

Everything Everywhere also opted out.

ISPs split over UK open internet code of practice – BBC News. 2015. ISPs split over UK open internet code of practice – BBC News. [ONLINE] Available at: http://www.bbc.co.uk/news/technology-18976444. [Accessed 18 April 2015].

Other Sources

Net neutrality – Wikipedia, the free encyclopedia. 2015. Net neutrality – Wikipedia, the free encyclopedia. [ONLINE] Available at:http://en.wikipedia.org/wiki/Net_neutrality. [Accessed 14 April 2015].

Deleting a User’s Posts


As another extra feature of the site I wanted the user to be able to delete their post so they could either redo it or be able to update it. I had to add a new delete_post.php file and create an if statement so if the user was logged in then the delete button would appear and they were able to delete only their posts. I also created a message if they were not able to delete their post then it would appear with an error message.

Screen Shot 2015-04-19 at 16.49.17

I then needed to add the function to the box1.php as that is where I wanted the button to appear.

<!--?php if ($_SESSION["user_id"]==$row["user_id"]) {?--></pre>
<div id="delete_post" class="delete"><a id="" href="delete_post.php?id=<?php echo $row[">"><button class="btn btn-danger" type="button">Delete Post</button></a></div>
<pre><!--?php } ?-->
<!--?php } else { ?-->
    <!--?php } ?-->

I then wanted to style this button so the text would stand out in  the box and it actually looked like a delete button. I went onto Bootstrap and found the best delete button (the danger button) I could find and added it to the box1.php code.

Screen Shot 2015-04-19 at 16.53.58

This is what the final product looks like:

Screen Shot 2015-04-19 at 17.00.52

Responsive Design


At the start of the project we decided to use Bootstrap as the source of our CSS. This was to learn an industry standard technology and to improve the aesthetics of the website easier. However another feature of Bootstrap is the capability for responsive design. We implemented this onto our site so that the site would work on different browsers, different browser sizes and even devices such as tablets and phones.

Here are some example of the responsive web templates you can access using Bootstrap:

Here are some examples of when I change my browser size:

Screen Shot 2015-04-19 at 22.26.06 Screen Shot 2015-04-19 at 22.26.13

Responsive design has become an important part of website building over the past 10. The increase use of different browsers and new technology such as smart phones and even smart TVs means that people are accessing the internet not only using a computer or laptop. According to The Office of National Statistics, access to the Internet using a mobile phone more than doubled between 2010 and 2014, from 24% to 58%. This means that more and more online applications are needing to be mobile and tablet compatible. A lot of very popular social applications like Facebook and Twitter have made an app for their service specifically made for mobile devices.

I have found a report from Google’s “Our Mobile Planet” which has given me some statistics about mobile use in the UK:

  • 54% search on their smartphones every day
  • 29 apps are installed onto an average device
  • Smartphones have become an indispensable part of our daily lives. Smartphone penetration has risen to 62% of the population and these smartphone owners are becoming increasingly reliant on their devices.
  • 65% access the Internet every day on their smart phone and 80% never leave home without it.
  • Implication: Businesses that make mobile a central part of their strategy will benefit from the opportunity to engage the new constantly connected consumer.

Here is a link to the PDF: Google Mobile Statistics

Mobile devices are the most used but other devices like tablet and games consoles are also used to access the internet and need to be considered when building a site.

This is an infographic which explains which devices are most popular and even shows the devices you wouldn’t instantly think of like a smart watch and a smart TV:

Other Sources

Internet Access – Households and Individuals 2014 – ONS . 2015. Internet Access – Households and Individuals 2014 – ONS . [ONLINE] Available at:http://www.ons.gov.uk/ons/rel/rdit2/internet-access—households-and-individuals/2014/stb-ia-2014.html. [Accessed 15 April 2015].

Our Mobile Planet. 2015. Our Mobile Planet. [ONLINE] Available at:http://think.withgoogle.com/mobileplanet/en/downloads/. [Accessed 15 April 2015].



This project was very reliant on teamwork. Amy Wichelow and I had never really done much coding before let alone PHP! This meant that we had to work together a lot to get the work done and to be able to understand what the code did.

We spent a lot of time in the labs, both working on the same computer trying to fix errors. Amy seemed to understand the PHP more than I had done so she took me through the code and helped me understand this. I did research on another elements we could add to the site like the timestamp and trying to let a user delete a post. I had some prior knowledge on HTML and CSS so I did a lot of the styling and in the end ended up designing the whole site.

Amy and I communicated a lot outside of the labs if we were trying to get some code to work. I asked for my group’s opinions of the design.

Amy and I tried to stay organised by creating to-do lists on the elements and parts of the coding we still had to do. I took charge of uploading the project to GitHub and installing the Wiki onto the server.

Overall Amy and I worked well as a team and I feel that if we did not work as well we may have not finished the project to the deadline, as we spent a lot of time together trying to fix the code. We weren’t afraid to ask Kyle if after a while of trying to fix an error we were still stuck which helped us understand PHP and PHPMyAdmin in a lot more depth.

Using GitHub


We only started using GitHub and Git later in the project. I taught myself some of the command line I would need to use it to be able to access my git repository through the terminal.

Screen Shot 2015-03-23 at 21.00.32

This screenshot shows me using command line and Git to upload the latest version of our code

I regret not using GitHub throughout the whole project as once I worked out how to do it seemed like a really easy way to implement version controlling into my workflow. It also saved us making many versions of the project and finding it difficult to work out which was the latest version. I also use GitHub for going back to an old version as for some reason the log in and sign up forms did not appear when I clicked on them so I reverted back to an old version of the code and this seemed to fix the errors I was getting.

This is what our GitHub repository looked like after we had uploaded the final piece of code:

Screen Shot 2015-04-18 at 16.11.21 Screen Shot 2015-04-18 at 16.11.32

Styling the Web-App


The majority of the code had now been written and I had decided to have a play around with the CSS and styling of the site as it had been quite plain.

Amy and I found a couple of different colour schemes online (specifically the sitehttps://color.adobe.com/explore/newest/?time=all) to start off with to get some inspiration:

Screen Shot 2015-03-17 at 17.07.06Screen Shot 2015-03-17 at 17.05.45Screen Shot 2015-03-17 at 17.05.30Screen Shot 2015-03-17 at 17.05.19

We also found this tile background from http://subtlepatterns.com/ that we could potentially use. This was our background till we decided that we needed to properly style the site.


We also had the idea of creating a “cloud theme” background so I put together a basic cloud background in Illustrator and we placed it into the site and decided that it didn’t work at all and we decided to leave the styling to the end of the project.

Screen Shot 2015-03-17 at 17.15.35

cloud backgroundJosh hadn’t contributed much towards the code so we gave him the job of styling the site. He came up with the Mary Poppins inspired logo and used purple and grey as his main colours. After changing the CSS to fit this scheme (for example changing font colour and border colours). However after changing all of these elements and uploading them to the dakar I thought that the scheme didn’t really fit our audience. We had set out to make a modern and aesthetically pleasing website as that made our site different to our competitors. I spent some time playing around with different layouts using the colour palette Josh had suggested but I thought that it didn’t really suit out site. Below is some images of all of some of the layouts I tried.

Screen Shot 2015-03-23 at 19.10.10 Screen Shot 2015-03-24 at 14.16.51 Screen Shot 2015-03-24 at 14.42.27 Screen Shot 2015-03-24 at 15.36.40

After this process I decided to completely start from scratch. I thought that we should have a dark background with some bright colours. I had a look online and found some relevant colour palettes that I could use:

In the end I found one that I liked and used it to create the banners below (found on the carousel).

greybanner1 greybanner2 greybanner3

I also decided to make a small logo for our site. As we had named this web-app Sitter Search I was trying to combine the idea of children and “finding something”. I had the idea to combine a baby rattle and a magnifying glass. I wasn’t completely happy with the result but I didn’t really have enough time to perfect it.

Screen Shot 2015-04-18 at 15.42.04

This is what the site looked like once I had adjusted the CSS and elements like the carousel images:

Screen Shot 2015-04-18 at 15.58.23



I decided that I would try and add a timestamp to the post that come up on the homepage. To do this I needed to add a timestamp row on PHPMyAdmin so it would record the time that the post was submitted. Adding this feature would prove to be  an aesthetic element to the posts and also meant that sorting the post by most recent would be easier to do.

This is a video someone recommened me to watch that gave me the details to add a timestanmp onto the post:

I used this video to understand what code to write and how it worked. I ended up changing the layout of the timestamp so that It said “3 hours ago” or “2 minutes ago”.

Firstly I had to create the function which would cause the time to be posted in the post box. This code also included the way that the timestamp would be printed and named the function as “$timestamp”. The code below is the code I wrote for the functions.php file.

class convertToAgo {
    function convert_datetime($str) {
        //sets the timezone to UTC
        //explode breaks a string into an array
   		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;
        //this function converts into a timestamp in the "2015-01-01 12:12:12" format
    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;
        //this function gives out the differences between the time and the timestamp-time

Screen Shot 2015-04-17 at 18.08.58

The next step was to place the function in box1.php as the timestamp needed to be shown in the box with the other profile information. This linked the database time data with the function so it could find the right information to use.

include_once("../includes/functions.php"); // Include the class library
    $timeAgoObject = new convertToAgo; // Create an object for the time conversion functions
    // Query your database here and get timestamp
    $ts = $row["dateofpost"];
    $convertedTime = ($timeAgoObject -> convert_datetime($ts)); // Convert Date Time
    $when = ($timeAgoObject -> makeAgo($convertedTime)); // Then convert to ago time
    <div class="time_ago" <h2><?php echo "".$when; ?></h2> </div>

This is the code I placed into the box1.php file. Screen Shot 2015-04-17 at 18.08.01

I then styled this timestamp in the CSS by making the font slightly opaque and giving the text a different colour.

Screen Shot 2015-04-17 at 18.19.46

Creating Sign Up Form


We created the sign-up form in a slightly different way from other forms like the login form. The ‘SELECT * FROM’ query was used so that it can look up the existing users and lets them log in to the site.  The ‘$_SESSION [“message”]’ and ‘$_SESSION [“username”]’ bits of code echo out a message which tells the user whether or not they have logged in successful.


This part of the code was slightly complicated as we had to adapt the code so that a user could log in with their username and password. The singup.php was used so submit their details when they signed up. This was code we used in other areas of our site. However we kept on having errors with this code including the data not being placed onto the database and then the user not being able to log in. Another problem we couldn’t overcome was that someone could create a user without typing anything in the fields as we did not know how to set the character limit for the password and username. Kyle helped us sort out some of these errors. He noticed that we had put ‘SELECT*FROM’ in the code but it actually needed to be ‘INSERT INTO’ as we were trying to add data to the database rather than pull it from the database. This finally made the sign up page work and we were now able to log into our site.

This is the code for the sign up page form:


After being able to log in we now realised that when you logged in you could see the log in feature in the nav bar and we wanted to show the ‘New Post’ page at the top so a user was able to create a profile. We thought that this might cause errors and it didn’t look right for it to be there if a user was already logged in so we asked Kyle how to do this and there was an easy fix for it. We had to work out the code that would mean that “if the user isn’t logged in then show the login and sign up button on the page”. It was a simple bit of code to add to hide and show the elements we wanted in different situations.