Responsive Site

Within the group, it was my responsibility to make the site responsive. Before todays group meeting the site was fixed and when the page size was changed the website stayed the same and required scroll to view the page.

Screen Shot 20 To make the site responsive the main aspects that needed changing were to width and height, an example of the responsive code as seen in Brackets is displayed above. Changing the width to a percentage rather than a defined pixel meant that the width would change according to size of the browser window. Additionally setting a min-height meant that the div would change size according to the browser size, it also meant that the content would fit the box and not over flow making it appear professional rather than messy and amateur.

respon Above is the site in general desktop size of the browser, below is the site sized to its smallest representing a mobile device. A responsive site means that users are able to see the entire page content with ease. Without this they would have to scroll around the page which would cause confusion and mean they loose interest in the site and its content.

responOverall the advantages of using responsive design on the web application are:

  • Flexibility
  • User Friendly
  • Professional Finish
  • Easy to Manage

Date Added

When the results displayed the information that was displayed was:

  • University
  • Description
  • Postcode
  • Bedrooms
  • Rent
  • Contact

When I asked others to use the site feedback I received was that they would like to know when the information was submitted to the site “it would be nice to see when the entry was submitted, that way I would know if it was new meaning I had more of a chance to get the room or to see if the room had been on for a long time it might be vacant now”.


After receiving this feedback after agreeing with the group I added the ‘date_added’ field to the results display. This would present the date the entry was submitted onto the site.


Net Neutrality

What is Net Neutrality?

Net neutrality describes the idea that Internet service providers and governments should treat all of your Internet traffic, or packets of data the same way, equally.

Importance of Net Neutrality:

The internet and web activity is at the highest it has ever been and displays no signs of falling anytime soon, therefore as so many people are using the web for a variety of reasons e.g. Work, File Transferring or for Social reason there is a need for the net to stay neutral. If the net does not stay neutral it means popular social networking sites such as YouTube will have a charge, this will then limit the users that are able to visit the site. The additional price idea could be set upon many different sites not just social media.


Pros on Net Neutrality:

  • No Throttling: Currently, Internet Service Providers can’t change the download or upload transfer rates depending on what people are accessing.
  • 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, blogs, etc.
  • 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.
  • No Censorship: There are no restrictions on what or how much anyone can upload or download besides connection rates.

Useful and Insightful Links:

Displaying Results

Once the connection to the database has been made and the forms are all created then next step was for me to use PHP to allow the data in the database to be displayed on the page, which means users would be able view the rooms. This process proved quite difficult for me to complete however with perseverance it was completed.

Below are screen shots of the code that makes the display possible.

Screen Shot 2015-04 Screen Shot 2015-04

The entries into the ‘house’ table of the database are displayed like below on the ‘search’ page of the web application.

Screen Shot22


Designing A Filter Form

An important function for users to be able to do is to filter the results. There are over 12 different universities listed on our website therefore users would have to search through all results to find a room relevant to them. This is why the filter form is needed on the site to ensure users can access the vacant rooms with ease allowing the sites purpose to be met.

The first step for allowing this was for me to create a filter form in HTML code. Using the same CSS as the other forms on the site this was made easy, I decided to use the ‘select’ tags which created a drop down menu. This made the form look professional and use a small amount of space yet remain effective.

The result is displayed below:


Screen Shot 200

PHP Filter Code

Once the form was created PHP code has to be written which would then allow the connection to the database, this would ensure that users were able to filter the results to their needs.

Screen Shot


Creating Template Files

When creating some aspects of the web application I decided to place curtain features of the page within a template file. This is a great feature to use as it means I only had to change that one file and as the page is connected to all pages on the application they would all change quickly and simply. This is a more effective and time saving method as without this I would have to change the data on each individual page.

Template files I have made:

  • Footer
  • Header

Creating a header template means any changes to the navigation bar, which there has been many to make the bar look more professional and less cluttered have been completed quickly and effectively across the site.



When deciding upon the sites colour I had initially designed to the site to follow and white, grey and blue colour scheme, displayed below on the sites ‘How It Works’ page.

Screen Shot 201

I chose the blue as I felt it stuck within the genre of house finder websites as blue was a commonly used colour. Additionally the colour gave the page a professional and formal look.

However, when my group and I met in a group meeting Chloe has designed our logo in the brown colour we had previously discussed. When the logo was put on the site it looked out of place with the colour scheme, this is where collectivly we decided that many to reflect the idea of Southern student we would change the background to green, to reflect the country and nature that the South of England is known for also green was a coloured used largely among existing house finder websites. Additionally we found when doing this the text boxes became more distinct and meant they were more prominent on the page, displaying their importance.

Screen Shot 2015

Database Design

Initial designs:

Before creating the database using phpMyAdmin my group and I created a template, this would ensure the database would have the relevant columns for all the information that would need to be entered. Additionally we needed to establish how many different tables we would need to include.

Screen Shot 20

Database view:

Displayed below is the database as seen in phpMyAdmin, inserting tables into the database was simple to do and means our site can meet the brief; additionally we have entered some information into the tables to test the connection.

Screen Shot 3 Screen Shot 2