Login, Session, Cookies and Logout

The login process took a very long time as when I user tested this section the echo error message kept appearing even though the information was correct. I run the error report function but no errors appeared it seemed that the underlying issue was with the password hash as I would the system would echo out valid email however without any specific error messages within the document I struggled to solve this issue quickly. 

I looked over the login code but I couldn't find any errors or misspelt variables.

Due the amount of time left to solve this problem and the fact that I needed to finish other sections within the project I decided to attempt another login structure.

When it came down to testing this code there were several issues, basically since I used a different approach it also meant changing the register document. I decided not to do this as time was running short therefore I went back to the original document and tried to sort out the problem. This process again took various days and overlapped with other tasks however I did managed to solve the issue basically the database was set to only store 6 character whereas the encryption consisted of 60. Due to this factor when it came down to logging in the system wasn't able to match the passwords. 

Sources

Aass, O. (2013). Two step password hashing with hmac and bcrypt. [online] Worldofwebcraft.com. Available at: http://www.worldofwebcraft.com/blog.php?id=255 [Accessed 18 May. 2014].

Free source code, tutorials and articles, (2013). How to Create Login Page in PHP/MySQL using PDO Query. [online] Available at: http://www.sourcecodester.com/tutorials/php/6102/how-create-login-page-phpmysql-using-pdo-query.html [Accessed 18 May. 2014].

Mackay, C. (2005). SQL Injection Attacks and Some Tips on How to Prevent Them - CodeProject. [online] Codeproject.com. Available at: http://www.codeproject.com/Articles/9378/SQL-Injection-Attacks-and-Some-Tips-on-How-to-Prev [Accessed 18 May. 2014].

Price·, I. (2013). PHP Tutorial: Secure Password Hashing using crypt(). [video] Available at: https://www.youtube.com/watch?v=wIRtl8CwgIc [Accessed 18 May. 2014].

YouTube, (2012). How To Create A Secure Login System In Php. [online] Available at: https://www.youtube.com/watch?v=dy5sYbbWYvE [Accessed 18 May. 2014].

Upload Process Extended

Okay, so now that I have a functional register process the next step was to add extra features such as:

• Size limit
• Check if file exists

Ideally I would have used the code below to display the users folder however due to issues with the login the file security and file sharing hasn't been completed so i'm displaying all files together.

The links are useful to access the documents so I went ahead and created a download document that accesses the path were all the files are stored and enables users to download the document to their device.

Sources

Css-tricks.com, (2012). [online] Available at: http://css-tricks.com/snippets/php/display-styled-directory-contents/ [Accessed 18 May. 2014].

Juul Hansen, N. (2013). Listing files with PHP. [video] Available at: https://www.youtube.com/watch?v=HA9dQLUxa38 [Accessed 18 May. 2014].

php, D. (2013). Download files from server php - Stack Overflow. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/12094080/download-files-from-server-php [Accessed 18 May. 2014].

Worldofwebcraft.com, (2012). How to list all files in a dir as links to the file (download). [online] Available at: http://www.worldofwebcraft.com/topic.php?id=6336 [Accessed 18 May. 2014].

Register Process Continued

The last process within the register form is to develop the activation email:

• Here I used an auto responder to mail the activation link to the users
• The subject and link are displayed within the email
• This is followed by a confirmation email on the success of the registration and a notice for them to activate their accounts

Register Process

I started of the register process by 

I then went ahead and started validating the fields, here I checked various factors:

• All fields have been filled in, if they are not (==  "") then the echo message will notify them
• Email fields 1 and 2 (email and confirm email) need to match if they don't (!=) another echo will notify them about this error. Here I carried out the same process for password 1 and 2 (password and confirm password)

• I also verified the emails to see if they were valid address, important for the process of activating accounts
• I used a hmac for the password encryption
• sha512 was used although it is not the best method combining it with bcrypt and salt would enforce it
• The unique key created for the website was linked to this section as it is the unique character set for the password security
• I then create a prepare statement that checks to see if the email and chosen username exist within the database if they do they will need to change the details 

• After all the validations are made a try catch block is created where a prepared statement executes the query that inserts all the information inserted within the form onto the database
• The last usersid from the login table is gathered so that the system allocated the next usersid to the new registered individual
• This id is stored within the activation table along with the users unique token, this id and token are set within the email activation link therefore only valid once and for that user

Register Page: Key

The register page was too simple in terms of the ability to add security therefore other fields were added to the form:

• confirm email address
• confirm password

Both of these extra fields would enable the ability to create queries that check various elements and enforces them:

• checks passwords match
• checks emails match
• checks all fields are filled in
• checks to see of the email exists within the database

This process undertook a large portion of this terms time as I had to read up a lot on PDO luckily there were several YouTube tutorials that went through the stages of developing prepare statements, bind values and executing them. These video not only speeded up production time as they gave me an insight of what needed to be done it also helped me learn through a piratical process.

Key

I started of by creating the key, this is part of the password securing method that will work alongside the hmac and bcrypt.

I run this code on the browser to produce the unique key for this website, this key was then saved onto a text file in the textfiles folder. 

I then developed a .htaccess that secures the file with the sensitive information from being accessed by unauthorised personnel.

Sources

Price, I. (2013). PHP Lesson: PDO: Error Handling, Try/Catch, Querying Database Results. [video] Available at: https://www.youtube.com/watch?v=ncrjieoiTrg&index=2&list=PL0BBakFmJ-JlELdmy9LX7c_l7V4XMad84 [Accessed 28 Apr. 2014].

Price, I. (2013). PHP Lesson: PDO: Getting Organized. [video] Available at: https://www.youtube.com/watch?v=iZlasj41KSY&list=PL0BBakFmJ-JlELdmy9LX7c_l7V4XMad84&index=4 [Accessed 28 Apr. 2014].

Price, I. (2013). PHP Lesson: PDO: Introduction To Prepared Statements. [video] Available at: https://www.youtube.com/watch?v=bvxid3DoLjE&list=PL0BBakFmJ-JlELdmy9LX7c_l7V4XMad84&index=5 [Accessed 28 Apr. 2014].

Price, I. (2013). PHP Lesson: PDO: More Error Handling. [video] Available at: https://www.youtube.com/watch?v=ybVwU9rg32Q&index=3&list=PL0BBakFmJ-JlELdmy9LX7c_l7V4XMad84 [Accessed 28 Apr. 2014].

Price, I. (2013). PHP Lesson: PDO: More On Prepared Statements. [video] Available at: https://www.youtube.com/watch?v=dJ7NAD4IZMg&list=PL0BBakFmJ-JlELdmy9LX7c_l7V4XMad84&index=6 [Accessed 28 Apr. 2014].

Price, I. (2013). PHP Lesson: PDO: OOP Explained, How To Create A Simple Class. [video] Available at: https://www.youtube.com/watch?v=TUtblDPw9UI&index=7&list=PL0BBakFmJ-JlELdmy9LX7c_l7V4XMad84 [Accessed 28 Apr. 2014].

Price, I. (2013). PHP Lesson: PDO: Transactions. [video] Available at: https://www.youtube.com/watch?v=6jWzMnmGsvk&index=8&list=PL0BBakFmJ-JlELdmy9LX7c_l7V4XMad84 [Accessed 28 Apr. 2014].

Converting conninfo.php to PDO

Since I am adapting the project to PDO one of the important adaptations was to the conninfo.php file that connects and access the database. Within PDO is the procedure is slightly differently however it is not a drastic change therefore by following a quick tutorial I was able to adapt this document fairly quickly.

Sources

Price, I. (2014). PHP Lesson: PDO: Connecting To A Database. [video] Available at: https://www.youtube.com/watch?v=cbiLi0CBHNM&list=PL0BBakFmJ-JlELdmy9LX7c_l7V4XMad84 [Accessed 26 Apr. 2014].

jQuery Password Strength Checker

Apart from echoing out messages about functions and processes that the user has requested it is also important to add such feedback within other sections. I decided to implement a password strength checker within the register form using a jQuery function. The purpose of this is as the user enters their chosen password the system with provide them with feedback as to how safe and effective it is, not only does it show the user but also encourages them to adapt it if it is a weak combination. The process was quite quick as the register form had already been developed, I only needed to add an id name to the password field and referenced it on the jQuery function at the top of the page. I then download the jQuery script, saving it to my js folder with the rest of the jQuery functions, this document was linked to the web pages through the script tag. I used a tutorial as a guideline as it was just an addition to the rest of the functionality

Converting from PHP MySQL to PDO

Since the process of this term requires security implementation in order to protect the users and sensitive information I went ahead and looked into the most efficiency processes and methods. I had previous;y come across PDO however I did not consider it until I read about how it is more effective in terms of security and protecting data:

• Object Orientated API
• Prepare Statements help to protect from MySQL injection 1st order, parameters used within bind values protect 2nd order injections
• Prepared statements do not allow the MySQL string to be executed and implemented within the website
• API handles database processes in a separate layer 

Looking at these pointers I decided to take a risky step and adapt my project to PDO this will be time consuming however I feel that it is a better method to use. 

The next few weeks I will be working on various areas of my project:

• The report
• security (register and login)
• file downloads
• file sharing 

I will follow the time plan I developed and presented in VIVA 2 in order to be able to finish the last sections of my project however I am aware that the short time frame and the amount of work that needs to be done might result in an unfinished project.  

User Testing

The project still needs a lot of work although it is almost the end of term and I have barely done any user testing apart from myself trying to detect errors and glitches. I decided to carry out some user testing where participants use the system to register, login and upload files onto their user account.

Overall I had seven participants who took part and test my website below are the results of this user testing:

• Logout should be enabled on all pages not just the index page
• Login error message should be displayed underneath login submit button
• Progress bar to show upload file process
• User page needs security from others viewing files 

Uploading Files to the User Page

Now that I managed to upload image files to a folder I need to enable the system to allow other file formats to be uploaded. This process was not as challenging as I thought simply because I had a working model already all that was needed was to remove the restrictions I had allocated within the PHP.

The query inserts the file information onto the database and then saves the actual file within the path folder i created.

 Sources

Thompson, P. 2012. Change file permissions upon file upload--PHP? - Stack Overflow. [online] Available at: http://stackoverflow.com/questions/11089654/change-file-permissions-upon-file-upload-php [Accessed: 25 Mar 2014].

Register Page Continued

The queries within the adddata.php were encountering some issues when information was entered within the register form and submitted only the login details seemed to be stored within the database and echoes out on the following page. 

I realised that there were variables that were not labelled properly therefore I adjusted them and attempted to submit the form again. Unfortunately the problem was not solved there seemed to be an undefined variable within the code that code not transfer or receive the information that was being inserted into the register page. After checking and trying to test the code multiple times and discussing the issue with Colin it was suggested that the name "user" for the table might be conflicting with the code. Although I previously checked that the name "user" was not predefined and was appropriate to use it seemed to be the only conflict encountered.

To solve the issue that was occurring within the query I created new columns within the database that stored some of the fields formerly placed within the user table. I also added the fields first name, surname and pnumber to the query and echoes section of the PHP code. This process was a success as the information entered within the register page was transferred and stored within the database. 

The details entered into the form have been echoed out within the joined.php page.

Although the issue was solved I decided to keep the original code for the time being, I commented the PHP code so that it does not interfere with the rest.

Register Page

Register page is important for adding new users to the system this option will be available within the login drop down where the user will be directed to the enterdata.php page. I had already began on the functionality of this page although I left it to work on more important sections of my project although this is still undergoing I felt that it was important to finish off this stage. Within the previous form I only aimed to stored the users full name and pnumber, this time I have added a username and password to the form that will be added to the login table within the database. 

Once I clicked on the submit button I was directed to another page (joined.php) where the information entered within the form will be echoed out unfortunately as you can see for the image below this is not the case. 

Ok so after trying multiple times to add users to the database and not experiencing an actual addition I realised that part of the insert query of the register form was actually working. The user personal details were not being stored into the user page although their chosen username and password was being stored onto the login database table. therefor my task is now to attempt to fix the first query in order to produce a fully functional register page.

Renovating the Design

One of the main areas that needs to be adjusted is the design of the interface, it needs to be appealing to the user and at the moment the layout is awful. After numerous times of adjusting the CSS code within the login box I managed to display it underneath the login header within the nav bar. 

Regarding the layout of the website I decide to look at various website templates to see what designers are creating. My first attempt consisted on implementing a black header bar at the top of the page where I could add some separate links or bits of information. I enlarged the nav bar to a larger height and overlapped the centrepiece div tag. 

Although part of the design issue was the layout and positioning of elements the colour scheme also played a major role. I decided that adding another colour to various sections such as the nav bar headings will help to make the interface more attractive. I used the website www.colorcombos.com to find colours that work well with the shade of blue. At this point I would like to still stick with blue as from the research carried out in first term it is the colour that is least common within people who suffer from colour deficiency. The colour orange was used within the text of the nav bar as you can see the text already appears clearer than before when it had a dark blue shade. 

Apart from experiment with the shade of orange on the text i also decided to test it on the header bar to see which shade looked best as a whole. This idea came from the research into effective website only using two shades, I came across the website Notable where the designer has used orange and white as the colour scheme. A benefit to using the orange header background was that the original logo could be seen clearer than with the blue background although this is not a major issue as the colour of the logo could be altered. 

Website: www.notableapp.com

Below is the third colour scheme I attempted where I used a dark green/blue shade and combined it with the shade of white and lime green. I implemented the colour white to the nav bar text when it is visited although once the user hovers over the word the colour changes to lime adding that extra shade in a subtle form makes the interface less busy. I am aware that the logo is not clear with this dark background but it is not a major issue as I purposely created a simple design so that it could undertake quick changes. 

Within the body tag I centred the main content leaving blank spaces on each side of the page. These spaces will either be kept blank or filled in with relevant information further down the line. Each of the web pages will contain their own heading such as the one below, I also added an underline separating the heading from the main content.  I took this idea from the website www.newslinkuk.co.uk where the design has divided the headings from the content. 

Website: www.newlinkuk.co.uk

Below is how I have structured the layout so far at this moment I am keeping the main content within the centre of the page only using up around 500px this size will increase once their is more content being echoed out and displayed. 

The changes I have made will be tested on the target audience (media students) so that I can gather feedback and suggestions to implement this will be undertaken this week. 

Sources

Hornor, T. and Hornor, T. n.d. 30 Beautiful Three-Colors Websites For Your Inspiration. [online] Available at: http://www.hongkiat.com/blog/three-color-websites/ [Accessed: 11 Mar 2014].

Nclud.com. n.d. nclud – a creative web design agency. [online] Available at: http://nclud.com/ [Accessed: 11 Mar 2014].

Newslinkuk.co.uk. 2013. Case studies | NewsLink. [online] Available at: http://newslinkuk.co.uk/category/case-studies/ [Accessed: 11 Mar 2014].

ZURB, I. Z. N. A. I. Z. 2014. Notable - Better Interfaces Through Faster Iterations. [online] Available at: http://www.notableapp.com/ [Accessed: 11 Mar 2014].

Getting the User Profile Image Upload to Function

One of the function troubles I was experiencing was the ability to display the profile image that was uploaded onto the folder on the user page. The popup window, ability to upload and store the file was functioning therefore I only needed to focus on displaying the content. 

The code below is meant to echo out the image from the folder but at this moment only an image icon is being displayed. I am not sure if their is code missing or incorrect at this point in time therefore I will need to look farthing into PHP uploads and echoing the uploaded document. 

Logging In and Out

I have already sorted out some of the login process within my project but I needed to finish of various sections for it to function. I created another table within the database called login here the users login details will be stored so that the system recognises them. 

Now that i had implemented usernames and passwords to the existing users within the database I decided to enable the session start on all the website pages. I also change the number of the rows to 0 now that i was going to test the functionality. 

Unfortunately the session has an error at this moment it does not seem to be able to identify the name of the field within the database. To try and solve this I change the userid name to usersid that is found on the login table but unfortunately it still does not seem to work. Since I need to carry out user-testing soon I decided that I would comment out the session and test the login manually. 

Within the login field I typed the username and password I had allocated for user 1 if the details match those within the database it would redirect the user to another page where a home button would be displayed. This button enabled them to direct to the homepage and use the website. After testing this function I removed the link to another page and made the code redirect to the same page in order for the user to be able to continue on what they would like to do. 

Within the PHP code I wrote a section that identifies the user when they log in and provides them with various actions. At this point I added a link to heir user profile and a log out function for when they have finished using the system. As you can see below the system has identified the user and displayed their username on the screen, it has also provided them with the links I mentioned previously. 

If the information does not match an error message will appear instead of the username and links to other pages. 

For security reasons it is important that I enable users to log out of the system once they finished using it. To be able to log in I included a session start for the users therefore the log out process will need to destroy this session. Below I have provided the code for this function instead of creating a new page with a message informing the user that they have logged out I decided to redirect them to the index page where they will be able to log in again. This logout session destroys the existing one already created beforehand therefore preventing others from using it. 

Sources

Stackoverflow.com. 2011. php - Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in - Stack Overflow. [online] Available at: http://stackoverflow.com/questions/5473981/warning-mysql-fetch-array-expects-parameter-1-to-be-resource-boolean-given-i [Accessed: 5 Mar 2014].