Making the Website Responsive.

Responsive?

Having a responsive website means that you are a able to open the webpage on a smart phone, laptop or tv and still have the right dimensions so that it all fits on the page. Having this is a good feature as it makes it more compatible for users and will be able to bring in a wider audience due to the fact a lot of people look at websites on an smart phone.

Once we completed the code to make the site responsive it allows it to be re-positioned depending on how large or small the size of the browser you have open is.

These are what the site looks like, depending on the size of the browser. As you can see the layout changes to depended on the width.
screen-shot-2015-04-17-at-12-14-13screen-shot-2015-04-17-at-12-13-33

 

Advertisements

Updating the .CSS

Improvements

  • Changed the colour scheme, from blue to a green. We did this as the logo which Chloe created was brown and did not really go with the colour scheme we already had in place.
  • Changed the home screen- We made a new home screen with more information on it that so that as soon as the user logged in they new how to use the site in 3 easy steps.
  • On the search page we also made the two side by side screens so you can easily see the properties you filtered

The updated look is below;

SearchHome Screen

Connecting the Database // Displaying Results.

Connecting the Database

To display the results on to the webpage we first had to connect the database from MyAdmin to the webpage. Once connected we would hope that it would it would relay the results from the table on to the website depending on the filter that they have chosen. To do this we have to use a php code which is down below.

screen-shot-2015-04-15-at-11-27-00

 

Displaying results

The code displayed below allows the results to be shown on the webpage, this particular bit of code allows the house table to be shown wherever we choose on the page. In this case we choose the search page.

screen-shot-2015-04-15-at-11-27-29

This is what the code appears like with a bit of added css;

screen-shot-2015-04-15-at-11-28-40

 

 

Creating a Filter Form

As a group we decided that we should filter the houses that are in the database via university. What we wanted was to allow a drop down menu to appear and the user to choose the uni, then using a php code filter the ones out that is relative to the chosen option.

To start of to complete this you first have to make a HTML form. This will create the drop down menu and allow the user to choose the university from the ones that are available to be chosen. This is why a drop down menu is so effective as it allows the user to choose from a select number of unis while also looking simple and use minimal space.

screen-shot-2015-04-15-at-11-11-55

 

After all the HTML form was completed and working we then put the php filter code into brackets, this will hopefully allow us to filter the universities and in turn making it easier for the user to find a house they are wanting to rent.

screen-shot-2015-04-14-at-14-50-55

Creating the Database // PhpMyAdmin

Initial Design:

Our initial design for our table was only two tables, these were titled; house and users. The table that was our initial design is below;

screen-shot-2015-04-14-at-14-13-19

 

Once we had all our tables with the different columns that we feel that we would need in the website, we then proceeded to put it in MyAdmin. For this we had to choose the correct text type , and the amount of characters needed for that type of data within that database.This is what the database within PhpMyAdmin looked like;

 

11159027_10204799306037312_1450870338_o 11179755_10204799306077313_2061497588_o

 

Starting the Webpage // .CSS

To start the webpage we wanted to have some basic css so that when we created the links to the database we had somewhere to place them on the website and have it a little organised. So Luke created a basic design for a webpage with a container, nav bar, header, banner and also a footer. This allowed us to roughly sketch out where everything goes.

codecss

 

This is just a small sample of the stylesheet which Luke created, this is what it ended up looking like;

CSS

 

Meet the Team Page.

This is the Meet the Team page which we created. This is a basic design for the page however it works very well and the simplistic design allows the user to be able to read all about the team member , Chloe, Myself, and Luke, very easily and quickly.

Meet the Team

Meet the Team Page

 

D4DME Group Overview.

My initial thoughts on doing this unit was very nervous as I knew that I was not particularly good at php, however after meeting with my group I gained confidence as I saw we had many ideas as a whole as to what the website should be about, look like, and what it should feature.

Choosing roles for our group members was pretty simple, I wanted to do the databases and php as I wanted to improve my skills in this area as I knew that I was not great at it, and hoping that the pressure of being in a group would spur me on to improve my php coding.

Our initial idea for the website was a recipe website, suggested by Chloe. However after reconsideration we decided to go in a different direction as Luke came up with an idea for a website for people looking for housemates and university. We decided to go with Luke’s idea as it seemed more complex and would be a very nice website if we was able to pull it off.

So overall theunit for Design for Digital Media Enviroment is well and I am enjoying the group work as we are able to split up the work load and delegate roles.