LOGIN/SIGN UP

Nibia and I wrote the php code for the login and sign up page.

 Login: 

Screen Shot 2015-04-17 at 13.10.41This is the login_index.php file for the login page it contains the form that needs to be submitted – so it creates the boxes where you input a username and password. The index page for the login page must include all files that contains information or performs a function to do with the login page so all code is included on the same page.


Screen Shot 2015-04-17 at 13.11.01login.php this file contains the sessions that determine whether the user was successful in logging in – it uses the information supplied on the database to determine this.


Screen Shot 2015-04-17 at 13.11.26login_connect.php requests access to the database mysqli it can then retrieve the required information from phpMyAdmin.


 

Screen Shot 2015-04-17 at 13.11.37login_functions.php


 

Screen Shot 2015-04-17 at 13.47.48

Once I complete the page and ensured it was fully functional I combined it with the css file that Mark and Luke had written to form a functional and aesthetically pleasing login page.

Sign up:

Screen Shot 2015-04-19 at 13.49.46

The sign up page has the same format of files as the login the main difference is the form that the user submits. The table that the information is stored in the database if where the login retrieves its information that allows a login session to be successful.

Screen Shot 2015-04-17 at 13.47.33

HEADER/NAVIGATION BAR

When I joined the new group they had already set up a basic design and a navigation bar.

Screen Shot 2015-04-17 at 14.35.25

The line underneath the ‘home’ in the image tell the user what page they are currently on.

The navigation file was set up in the header folder in Brackets. This provided consistency throughout all the pages. Consistency like this improves the user experience as navigation around the site is clear and easy it also gives the site a more professional finish.


WIRE FRAME

I wrote out a wire frame of how each page would connect to all the others. This makes it easier when writing the code, I had it to refer to as I went along. It also means at the end of the project I can go through each page and check it has the right links attached and that they are all functional.

BACKGROUND RESEARCH INTO JOB SITES

These are the top hits I found for existing job sites aimed at students:

  1. http://www.studentjob.co.uk
  2. http://www.student-jobs.co.uk
  3. http://www.savethestudent.org

 

This site is the best I’ve seen for student jobs. The design is clear and allows the user to focus on whats most important on the page. The form that allows you to do a ‘quick search’ is exactly what most users will what. Other information listed below however I do think that the font size for this information is a bit too small – although it is a set out as a list so its easy to read.

Features to considering using in our web application:

  • Having a job search form like that on the home page
  • Bullet pointed information about what the site provides

Screen Shot 2015-04-19 at 16.38.03

This site to me is too confusing – there are too many images you don’t really know where to look for jobs. There is the search bar but its opacity has been reduced as this is the main feature it should be made bolder. The navigation bar on this site however is a lot better than the first site – the bar is bigger larger type font and its pushed to the very top of the page.

Features to consider using/avoiding in our web application:

  • not too many images
  • bold clear navigation bar

 

Screen Shot 2015-04-19 at 16.38.43Unlike the other two sites this one has a Facebook/Twitter likes and attachments to it. I think this is a really good way of enticing students as they are all connected to social media an is mostly how they communicate. The nav bar is too crowded – the more basic the easier it is for users. The search bar is quite small and too the side – should be more focal.

Features to consider using/avoiding in our web application:

 

  • links to pages on social media
  • don’t overcrowd/overcomplicate the nav bar

GROUP MERGE!

Due to varied input from members of two groups – there was a decision to merge the two groups together to form one big group.

New members included: Mark Lucas, Nibia Waheed, Luke Clarke along with existing members Ashley Howatson-Tout and Nic Baxter.

As the other group had progressed further with their idea we unanimously decided to develop on with their website.

The idea behind the website was a jobs site for students. It initially was for post grad so there would be categories based on subject e.g. law, architecture etc. However we then thought that this would be too specific and that actually most students had links through their subjects department/placement. The thought was then to simplify the idea and just aim the website at undergraduates that just wanted part time work in Bournemouth.

You would have to register and login before you could post a job. There will also be a contact page were you can input your details so you can be contacted regarding a job.

As we were now a large group we decided to split up job roles so:

Front End (css): Mark and Luke

Back End (php): Nibia and Me

Research: Ashley

This role allocation meant that we could divide up the work dependant on peoples strengths. This would also mean the work would be completed most effectively and efficiently.

RESEARCH AND PLANNING

I will use this weblog as documentation of my progress through out this project – I named the category after the unit title – DESIGN FOR DIGITAL MEDIA ENVIRONMENTS so all posts related to this topic will be easy to identify.

I am also going to tag all the appropriate pages with ‘Group Project’ these will be the pages directly linked to the development in design of the web application.

I will use the same format for every page.

  • title in caps lock 
  • images centred 
  • images captioned – brief explanation and link 
  • images all of the same width
  • all sketches will be scanned in 
  • all text aligned left
  • all text justified 

INITIAL DESIGN SKETCHES

This is the initial page of development ideas that me and Ashely came up with. It shows the basic structure of the site – with pages and links (with theoretical ideas at the bottom of how to expand if we could). 3


We then started to map out a potential layout for the home page although the sketches display our initial ideas well, I wasn’t sure how clear they would be to someone else. If I needed to refer back to the sketches a few weeks later well into coding the site I wasn’t confident they would be clear enough.

1

2


I then used illustrator to map them out more clearly so when writing the code it would be easier to understand.

UNIGRAM HOME

unigram sport

ABOUT PAGE

A task of setting up the about page was set to kick off the project. We had to create a small bio about each of our other group members, this helped to get to know are team members better. It also got the discussion goes about the concept behind the website.

As this is the first page we created it was mostly about forming a basic design layout in html in which we could insert our bios.

Screen Shot 2015-02-21 at 15.08.12

I set up a navigation bar as well that would link to the other pages. I created folders for the other pages in brackets to test that the link would work – although they had no content.

Screen Shot 2015-02-22 at 00.14.55

Screen Shot 2015-02-22 at 00.15.16

Screen Shot 2015-02-21 at 15.07.57

I used the theory of the Box Model to set up the page. I played with different colour schemes in css but Ashley and I were still in discussion about this – so this theme was just temporary.

Screen Shot 2015-02-21 at 15.08.22

 

We used the site paletton.com to play around with potential colour schemes. (http://paletton.com/#uid=13y0u0kllll8Y++f9w0rxaGA900)Screen Shot 2015-04-19 at 11.29.01