Major Project: February 2014

Wednesday, 26 February 2014

Uploading the User profile Image Function

Although I have already developed the code to be able to click and open the users file window and select a file the function is not fully finished. I am missing the PHP code that processes the action and embeds the image onto the website.

Below is the HTML form

I created a php file called processimageupload.php were the function of the upload will be stored and saved. Within this file I need to specify the directory of the database and the location where the files will be contained. The tutorial I used as a guideline covers various sections although I need to read up on various features it based on the root directory and the temporary file store directory as I am not confident with how I am supposed to code the function.

In order to upload the file the system needs to be able to store it in a folder. At this point I just created a folder within my major project folder called profileupload which will be used to store the user images.

Although the folder's location might be moved to another I have identified several security issues:

Placing images all in one folder face the issue of students stealing other peoples images therefore ideally the user image should be stored within their main folder
Placing the folder within the project folder faces the issues of people altering the code and stealing information therefore the folder will either have to be moved or a security method must be in place

Now that I have a folder and the HTML set up I will need to add the rest of the PHP that processes the function to upload and embed the image.

Sources

Htmlgoodies.com. 2013. Web Developer How To: Upload Images Using PHP. [online] Available at: http://www.htmlgoodies.com/beyond/php/article.php/3877766/Web-Developer-How-To-Upload-Images-Using-PHP.htm [Accessed: 26 Feb 2014].

PHP Freaks. n.d. how to uplad a file to the server - PHP Coding Help. [online] Available at: http://forums.phpfreaks.com/topic/154228-how-to-uplad-a-file-to-the-server/ [Accessed: 26 Feb 2014].

Tizag.com. n.d. PHP Tutorial - File Upload. [online] Available at: http://www.tizag.com/phpT/fileupload.php [Accessed: 26 Feb 2014].

Tuesday, 25 February 2014

Additions to the User Table

Within the process of sorting out the functionality and the design of the project I also decided upon adding a couple of users to the database table in order to be able to work with multiple users. The users I added are all current students therefore within the superuserid and superusernumber they are labelled with 0. This brings me back to the research and proposal I made where the superuserid and superusernumber will be allocated to staff members whereas students will be given a 0. The reason for this was to control security within folders and only allow lecturers the ability to access any folder to view students work. The ability for students to view other folders especially when they are working on group projects will be implemented later on once the rest of the project is working.

Monday, 24 February 2014

Applying Solutions to other Documents

Since errors have been solved within the user profile page of the project I went ahead and applied these changes to the rest of my documents. I also took the time to check the rest of the HTML code especially the opening and closing of <div> tags as I found that some were not completed therefore causing conflicts within the rest of the code. I also took the time to organise the code and indent information within <div>, <body> and <header> tags to make it easier to locate errors.

Previously I mentioned how the PHP code echoes were out of place within the design, I resolved this by adding the code to my centre piece <div> within the HTML. The centre piece <div> withholds all the information that is found between the header and footer it is basically the main body of everything. I also added the code that I originally implemented to be able to upload an image.

The page is starting to look much more organised although further design structure is needed. So far I have developed the HTML form for the function although now I need to implement the PHP code that will process and upload the image.

Sunday, 23 February 2014

Upload Page

Now that I have begun the construction of the user page I also felt it was important to construct the upload page alongside due to the short space of time. Within this section my aim is to develop both the design and functionality to the point where users can upload files onto the system. The reason for this is so that I can commence the user testing and analysis of the project.

Functionality

The first area of the functionality was the ability to select and upload a file successfully, I will attempt this before continuing the code to being able to save the file or folder onto the system. Originally the user page was designed on a HTML document but with the implementation of PHP i decided to create a new document and copy over the design code.

Before working on the overall functionality of the upload page I wrote the upload form that will allow the user to upload a file form their computer or portable hard drive. The code provides a button where users click on, this function opens a window where all the files stored can be accessed this enables the user to locate their document.

As you can see for the screen captures below there is a choose file button that opens up a window:

Once the file has been selected the page will display the name of the file selected enabling the user choose another file or submit the one that they have chosen so far. As you can see I chose one of my own files enterdata.php as a test.

At this point in time the code only focuses on image format's therefore during the testing process the submit button was not able to process the command. The following page displayed the information of the file and then invalid file as the system has detected that it is not an image.

I retested the system although this time I chose and image with the extension of .png so that the system accepts the file. This process will enable me to detect if there are further errors that have not been present.

Once I selected the submit button the system processed the command and displayed the information of the file and where it has been stored temporarily. As you can see for the image below the system has detected the file as valid.

Unfortunately the temporary file where the information has been stored i do not have access to therefore I will need to alter the temporary folder location in order to see of the files are being stored where they should be.

Design
As I was going through the process of developing the upload function I decided to also add some design to the form. Unfortunately although I have written some CSS code there seems to be something within the code that is not processing the CSS. Below are the design results before I began problem solving within this document:

Sources

Barelyfitz.com. n.d. Learn CSS Positioning in Ten Steps: position static relative absolute float. [online] Available at: http://www.barelyfitz.com/screencast/html-training/css/positioning/ [Accessed: 24 Feb 2014].

Bytes.com. 2007. Uploading files into a MySQL database using PHP - PHP. [online] Available at: http://bytes.com/topic/php/insights/740327-uploading-files-into-mysql-database-using-php [Accessed: 24 Feb 2014].

W3schools.com. n.d. PHP File Upload. [online] Available at: http://www.w3schools.com/php/php_file_upload.asp [Accessed: 24 Feb 2014]

Friday, 21 February 2014

Change of Extension

During the design process I created HTML documents where I started building the code and setting a design for the overall website. With the implementation of the database and PHP code the use of HTML file extensions was not necessary, I changed all extensions to .php in order to have some consistency. As I go through implementing the functionality within each document I will change these file extensions and test them to make sure that nothing has been affected.

Thursday, 20 February 2014

Layout Gone CRAZAYYYYYYYYY!!!

Now that I have been able to echo out information on the user from the database I decided to add the html structure that i have developed so far. Previously i created the HTML pages of each of the sections that will be included within the website, now that the functionality has started to come into place i will be adding the structure to the PHP file instead of adding the php code to the HTML file.

Once I added the HTML code to the php file I run the page to see how all the code appeared together, unfortunately it did not work out very effectively. The HTML code has been brought further down due to the PHP code not knowing where it is meant to be, I adjusted the css code in order to place the information within the <div id=centrepiece"> but there still seems to be some form of conflict.

The main issues were found to be on the header and navigation of pages section, the focus is on the login header as it is out of place within the design. The php code has been displayed on the top of the page although this is because I have not assigned it an area therefore the system has displayed it were it was able to.

The jQuery within the document also encountered some errors that needed to be resolved. As you can see form the screen capture the login header it on one side of the page and the content within that header is displayed on the other side once clicked by the user. Part of the text within the login window is also out of place floating randomly over the centre div. Within this window I also need to adjust the login form as as somehow i have managed to implement 2 forms within the same container.

Identifying errors within the code will enable me to alter and solve them before my next tutorial, my aim is to have some solid functionality in order to begin user testing as from the 2nd March.

Wednesday, 19 February 2014

User Profile Further Implementation

Within the functionality of the user page I would like to retrieve user information from the database including elements like the files and folders that they have uploaded. In order to retrieve this I will need to echo out information from the database using the joinedtables.php document. In my previous blog post I discussed the changes I had made to the document and why i made them. Within this blog post I will discuss the results the code displayed and why I have chose to display this. The user profile page will consist on information about the user I want their files and folders to upload to this page in order for them to have an overall view of what they have stored within the database, ideally within the final result of the page a datestamp and gb of space taken would also be displayed. As you can see from the image below the users detailed have been obtained from the database and displayed onto the screen.

My next task is to apply the design that I have already on the user page with this functionality code. I'm not sure how long this will take me as I am combining multiple code languages together therefore I expect errors to appear. Before I commence on applying the design i will need to see Adam in order to sort out the issues that I have encounter within the the login php and jQuery code.

Problem Solving

Within this blog post I will explain the errors and problem solving I have undertaken so far, although i have explained various areas of code when it came to testing and echoing the information I encountered numerous errors. Within these errors some where easier than others to solve unfortunately those complex ones needed assistance therefore I arrange a meeting with Gaynor for this afternoon.

Jointables.php

The purpose of the jointables.php was for it to display users information once they have logged onto the system. My previous code I had developed for this page consisted of a long winded query that did not specify fully what was needed to retrieve.

Old code

As you can see from the code displayed below I attempted to echo out all the information from only one query. My aim was to gather the user, their folders and files within the system. This was not the best method to use as the query was too long winded and not specific enough for what I wanted. Also there were errors within the code

The image below shows one of the various errors encountered went attempting to echo out the information within the query.Within this error a parameter was missing within the query, it was sorted within the next stage where the code was split and separated.

Updated Code

With the help and advice from Gaynor I was able to adapt and separate the long winded query to be more appropriate and functional. I first divided the code into three queries,

Change of Names

During my one to one with Gaynor she realized that some of the names I had assigned within my database were possibly reserved. I also realized that some of the database table names and sub names were repeated. This is a simple database attribute that I had forgotten and another reason why the functionality of the code would have not worked properly therefore I went ahead and adjusted the names in order to avoid any conflicts. The user table name does not seem to be reserved although the name for the table file did need some alteration in order to avoid conflicts. I decided to only make a minor change to the name in order to avoid confusion when writing the code therefore I made it plural to files.

Within the files table the userid coloumn name already existed within the user table therefore I made another alteration to usid. I can still identify that it is an id and the us can represent the user keeping the names similar allows me identify the attribute easily avoiding any confusion when coding the rest of the project.

The subfolder table undertook a name change process, the timestamp name colounm is also a reserved name therefore I changed it to timest in order for it to relate to what it is. The userid is also present within this table therefore for it to be different to the file and user table I changed it to uid.

During the process of adjusting the database tables I started adding some user information in order to be able to test the login and upload page. I also added some subfolder and filenames so that I can test if the information is stored within the database.

Sources

Brainbell.com. n.d. Php - Php Mysql - Joins With More Than Two Tables Tutorials. [online] Available at: http://www.brainbell.com/tutors/php/php_mysql/Joins_with_More_than_Two_Tables.html [Accessed: 17 Feb 2014].

Monday, 17 February 2014

Tutorial

In todays tutorial I presented some of the php code work I have undertaken within the past few weeks. By presenting the code I was able to discuss areas that are not working properly, here Gaynor was able to help me out by allocating various errors within the file. After presenting my progress I discussed what i will be working on next:

Sort out any errors already present
Add users to the system
User test functions already implicated
Continue with the design process

Sunday, 16 February 2014

Adding Users to the System

Although I have implemented the login attribute the system is new therefore no users will exist within the database at this point in time therefore a register section is important. Here users will be asked to enter their name, pnumber and course level in order for the system to record some of their student details.

The information provided in the form will need to be added to the database with the use of adddata.php. The add data form will be processed and incorporate the information into the database. Once this has been undertaken by the system users will be directed to another page preferably their profile. The main idea behind this is so that they can personalize their page before uploading any files onto the system.

Below is the HTML form at this point I am focusing on the functionality instead of the design therefore it will be appearing very basic just like the image below.

Before I tested the functionality of the file I decided to alter a section, within the original code I included the word level so that students could enter the level they are currently completing within their degree. I changed this as it is not relevant or needed information at this time.

Now I will need to run and test the code to see if the queries are working and if not debug any errors or conflicts.

Wednesday, 12 February 2014

Login and Logout

Now that some of the design has been developed I decided upon adding some php code in order to user test both the front and back end of the project. I am still unsure about the implementation of a search bar therefore this will be left to a later date, instead I created for the login process.

Login
Although I have already created a jquery function for users to login into the system, I hadn't implemented the process that retrieves and matches the information. I created a file called processlogin.php where this information will run. Within the file I ask the system to match both the username and password within the database to the one entered by the individual. if the information matches those saved onto the database the system will log the individual onto their account and informs them that their login has been successful. if the information does not match the individual will not be logged in and an error message will appear for them to retry again.

Logout
Part of making sure that the website is secure and students documents are safe logging out of accounts are important. below is the code I have implement on a separate php file, here the user is able to log out of the system and then directed to the homepage.

Further PHP implementation will be need before being able to carry out user testing, I will finalize the login and logout process within the next couple of weeks.

Sources

Bradley, A. n.d. PHP Redirect - Redirect Script - Redirect Web Page. [online] Available at: http://php.about.com/od/learnphp/ht/phpredirection.htm [Accessed: 14 Feb 2014].

Monday, 10 February 2014

Upload Profile Image

Although the design still has not been completed time is catching up and the project functionality reds to be developed and tested. The design will be altered and finished further down the line it might not be ready for VIVA 2 although it will be completed for VIVA 3.

I created a separate php file called uploadimage.php where I implemented php code that will enable the user to upload an image. The circle design displayed has disappeared due to the extra code therefore I will need to adjust the code in order to be displayed within the circle.

Once the button is clicked the users file window appears so that they can upload an image to their accounts.

The image itself needs restrictions in various forms regarding the file extensions and the image sizing. Here I have restricted the image file extensions to only accept jpeg, png and gif. Users will not be allowed to upload any other form as their profile picture.

Another form of restrictions are image sizing, within this page users will have to upload onto the circle container therefore it has to be within the dimensions. I have created a maximum size of 200 at this time although this might be altered at a later stage. Within the code I created an echo that will inform the user if they have exceed the size limit in order for them to retry.

The last section of the code provides users will feedback on the actions they have just undertaken. If the image is successful duplicated from the computer onto the image container they will be informed that their upload has been successful.

Monday, 3 February 2014

Tutorial

Unfortunately I had to miss today's tutorial as i'm ill with a cold my progress on coding and php implementation will be presented sometime during this week to Gaynor. I have come across various errors and sections were I need help therefore I aim to have this solved before the next tutorial.