Web Application and Reflective Blog Brief

For the new brief the task is to complete online training through the use of code academy and create design/interactive experiments using processing software. The knowledge gained form the courses and practising with process will be used to create:

  • HTML page with CSS/Javascript/JQuery/Php
  • Php file
  • HTML or php which embeds a processing sketch

The goal is to demonstrate the understanding of the fundamentals of creating a website and being creative with what I learnt. I’m expecting this to be something fun to do as I get to explore and experiment with code to create dynamic and unique designs. On top of that I will attain knowledge needed for second year of university as I am practising more coding.

Net Neutrality

So what is Net Neutrality?

Quote J.K Trotter. “Net neutrality describes the idea that whoever provides you Internet access—for example, Comcast, Time Warner, Verizon, and so on—should treat all of your Internet traffic, or packets of data, the same way.

In the United States, the U.S. agency responsible with upholding laws related to net neutrality is the Federal Communications Commission (FCC), which is based in Washington, D.C.”

Quote J.K Trotter, 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.”

This means that the any internet providers have the choice to decide on the transmitting data and quality they can provide for users. This can become quite a problem as the power can be discriminated. This is because some data/information can be chosen to be give slowly where as other providers may have the option to send data fast, overall this can create clash.

Here are some pros and cons written by Phil for Humanity:

Pros For Net Neutrality

  1. No Restrictions: Currently, there are no restrictions on what parts of the Internet that people can access, except for what local governments decide. For example, there are no restrictions or preferences over emailing, file sharing, instant messaging (IM), Voice over IP (VoIP), Video Conferencing, Podcasts, blogs, RSS feeds, USENET, etc.
  2. No Throttling: Currently, Internet Service Providers (ISPs) can not change the download or upload transfer rates depending on what people are accessing.
  3. No Censorship: There are no restrictions on what or how much anyone can upload or download besides connection rates.
  4. Capitalism: Net Neutrality promotes a level playing field for competing companies, and allows start-ups easier access to new potential customers. Net Neutrality is equated to a free market.

Cons Against Net Neutrality

  1. Restrictions/Censorship: ISPs, in addition to governments, can decide what parts of the Internet that people can access and what parts are blocked. For instance, ISPs could block peer to peer file transfers. Additionally, ISPs could censor criticism against themselves, other companies, or politicians that they favor.
  2. Anti-Competition: Similar to the previous con, ISPs could block or prevent access to their competitors products, services, or web pages. Thus have restrictions against competition.
  3. Throttling: ISPs can decide what types of services have prefer transfer rates. For instance, Google’s Gmail could be fast why their competitors Microsoft’s Hotmail could be slower, depending on how much both companies pay the Internet Service Providers. Another common example would be high data transfers, such as peer to peer file transfers, could have slow rates than regular shorter data transfer, such as email.
  4. Money: ISPs could charge more money for more access to the Internet. ISPs believe that heavier users of the Internet should pay more. This extra money could be used to increase the bandwidth of the Internet for everyone and drive prices down. However, ISPs are already extremely profits and they can just as easily increase prices for everyone. Keep in mind, that Internet connection prices should be decreases why bandwidth increases. However in many parts of the world, this is not the case.
  5. Monitoring: There is already a lot of monitoring on the Internet, however without Net Neutrality, ISPs could literally monitor everything that their customers do on the Internet and sell or use that information as they choose.

In conclusion, I think it is obvious that Net Neutrality strongly favors people while the alternative favors corporations. ”


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

Phil for Humanity, 2011. The pros and cons of net neutrality. Available from: http://www.theguardian.com/technology/net-neutrality[Accessed on: 16th March 2016].


Upload Recipes PHP

This section I have created a upload section where the users of the site can upload their cocktail recipe as part of the user interface section of the project. This is what I came up with.

This is what this section of the website looks like at the moment, I have used components of bootstrap once again to style this section of the blog. Using grouping and columns to keep the input box very simple and clean. I have also added text within the box to give the user some ide of what to put down. These would then eventually be automatically updated under the upload form from recent to old, which I need to configure still.

Screen Shot 2015-04-20 at 02.56.05

Here is the CSS/Code for the box above.



Screen Shot 2015-04-20 at 02.56.54

This is the phpmyadmin data table which I still yet to configure as I am not too good with php but I will pass it down to Toby/Javaid to get things done and hopefully make progress.


Screen Shot 2015-04-20 at 02.55.52

Login Form

I have worked on the login form, we have learnt this in previous workshops with Kyle and I though that this would be a good place to start on the php side of the website. I have created the login area of the website with functional php.

Screen Shot 2015-04-20 at 02.43.07

I have been using bootstrap for the sites CSS and this is what it looks like at the moment. The code under is the CSS styling for the box, it is pretty simple and basic at the moment.

Screen Shot 2015-04-20 at 02.49.43




The code below is the php for the login box so if the user logs in and that their login details is on the database it will allow them to login and redirect them to the homepage, if not then they receive a message saying “wrong username/password”. This code is connected to myphpadmin where the table can be seen below.

Screen Shot 2015-04-20 at 02.48.26

The screenshot below is the table used for the login area of the website, this is still in progress.

Screen Shot 2015-04-20 at 02.43.53



As a PHP based website one main feature of the site is the form which displays the list of drinks that are available for the users after the budget is inputed, after the user has submitted their budget the user will receive the feedback of alcoholic beverages they can drink, under this text is the code that was used.


define(“DB_SERVER”, “localhost”);
define(“DB_USER”, “tpaine”);
define(“DB_PASS”, “**********”);
define(“DB_NAME”, “tpaine”);

$connection = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_NAME);

if(mysqli_connect_errno()) {
die(“Database connection failed: ” .
mysqli_connect_error() .
” (” . mysqli_connect_errno() . “)”

index.php – The index file acts as the central focus of the website, primarily it’s used to store all the code that is in the homepage of the website. In the code is the mysqli_query that sends a request to the database and the html form that the request is linked to:

<div class=”container”>



<p>Enter your budget below and find out what you can afford for pre-drinks!</p>
<form action=”index.php” method=”post”>
£ <input type=”text” name=”price”>
<input type=”submit” name=”price-sort” value=”Get Drinks”>

<?php while($drink = mysqli_fetch_assoc($result)) { ?>

<h2><?php echo $drink[“name”]; ?> – <?php echo $drink[“category”]; ?></h2>

<p>£<?php echo $drink[“price_per_lt”]; ?></p>

<?php } ?>


Setting the Database

For the website functionality is important for our site, both php/mysql were used to create the database tables and the connections to the database. The first bit of php we started off with was with the data table of alcoholic beverages we will have for users to choose form. We specified that we categorised all the drinks depending on their type of drink e.g. wine, beer, spirit. As well as the prices of the drink and percentage. Here is the coding below:

Screen Shot 2015-05-09 at 02.02.31Screen Shot 2015-05-09 at 02.06.37


Sign up php

Here is the sign up form I have created again using the CSS/HTML coding using bootstrap, as you can see below it is organised into columns and boxes again and added flavicon and also the option for users to select their gender.

Screen Shot 2015-04-20 at 03.25.05

The code below is the css for the screenshot above and this shows the outcome of what it looks like at the moment with no php as that will come later on as the website progresses and as a team get better together on php.


Screen Shot 2015-04-20 at 03.25.56

The table below is from myphpadmin where it users enter their first and last name, email and confirm their email and a password and also selecting their gender, though I feel like something seems wrong so I will have either Kyle or Rob to check it out once Toby and Javaid have a go on solving the problem.



Screen Shot 2015-04-20 at 03.47.30


For the group to keep the team up to date and also on our work, we would use Docuwiki. The Docuwiki was uploaded onto our servers which can be accessed at university.

Screen Shot 2015-04-20 at 02.00.05

As a team the DocuWiki would be used to share any information or updates that could be noted down from any group meetings or any website progress, this can be checked on so that we keep in line with the idea and also the project.


Design for Digital Media Environments – The Idea

In response of the Design for Digital Media Environments brief, I, Toby and Javaid had come up with a few ideas for our website. We had Javaid that came up with a music website where music producers and users of music softwares such as Logic X and fruity loops can upload and share music samples for other producers to use and create their own music. This included users to share their own music which would have been created using the sample.

Then Toby came up with idea of pre-drinking for university students, this works based on the amount of money having as a student and selecting the level of drunkness and then a database table would give the right alcohol based on the results, we thought that would be a better idea as Javaid’s idea was pretty good but down to php it would be very difficult. So we asked Rob on how it would go and he said it was a great idea but it needed user interface, so then we made it a website where it could do that and also allow users to upload cocktail recipes etc as well as a login/signup option. We will keep updating on the website.