Documentation website

Website documentation - 

I have started by designing the web pages for both desktop and mobile versions. The first step that I did after designing the webpage was, coding the desktop version. I used brackets to write my html and css on. Koala was also used to make it easier for me to write css code. While I was styling my website I noticed that some of the things can be better in different color or different shape and this is why they may not match. I have also encountered issues with my code which I documented down below.

I started with the index page where I did it exactly the same as the one I designed. I was't sure if I should make any changes to it or keep it the same. I have asked our lecturer if we can change certain things and we are allowed to do so but we need to document why. While I was arranging the code for the index, my laptop crashed and corrupted all the data. I had to start all over again and this time I did it with the changes that I had in mind.

The first problem that I encountered was with the top-bar. I gave a height to the top-bar and inserted the image on the left and then the text on the right but I couldn't get them to stay both in the middle in every page. I arranged this by NOT giving any height to the top-bar and instead let the content push it downwards according their needs. I gave a width and height to the logo and a padding of 5px on all sides so that it won't touch the edges. Another command that I learn't from our lecturer was giving a flex-space of 1 so that it automatically fills the gap and as soon as I coded the 'My Account' it went to the right and all I had to do is give it a margin-right. This have fixed my top-menu to be compatible in all pages.

When the page scales down the images were loosing the point and get useless because they were not resizing. I have fixed this problem by doing 2 commands. - Background-size: cover and background-position: center. When I resize the page all images resizes with it as well.

In my sign in page I was trying to include both Facebook and Google links so that the user can easily click on it and log in with his already logged in account. I couldn't get this to work and I got told to replace these with two images to represent them instead.

I tried several options to make 'Forgot Password / Create a new account' in one line as they were being displayed underneath each other. After several tries I tried to create a div and an href for both and it worked. Now in one line I have two different links that redirects the user to the different pages.

I created my navigation menu with icons from font awesome and I tried to enlarge them by giving them a width and a height. This did not work and I actually wasted a lot of time trying to understand what the problem might be. After researching I found out that in order to increase the size of an icon that is being used from font-awesome, one should add a command at the end of the class name. The larger the number the bigger in size the icon will get.

I have set my menu icons to have opacity of 0.4 so that they will look faded and when the user hovers on them the opacity will be that of 1 and the icon will glow white. This worked fine but the problem is that when I tried to do an active icon with an opacity of 1 this did not work. I researched on stack overflow about this problem but could not find the cause of this. The last option was to wait for the next lesson and ask my lecturer. The problem was that I did not add an active class in every page and I was only adding .active in the css code. 

During the coding of this website I have learnt a lot of tips and tricks that helped me style my webpage better. A command that helped me a lot of to create a solid border and see exactly what is touching the div or what is holding it from doing what I want it to do. Display flex was another command that avoided me from using a lot of float commands and made my coding a lot easier.

I started coding my application and I did this by creating an @ media command in the same css file of the page that I was styling. I was told to create another file and rename it override under small res but when I tried this I was finding it difficult to style my website because I was getting confused in the files and the indention. I continued to work by styling the application in the same css that of the desktop app under the @ media command.

I started by re-creating the login page but this gave me a lot of trouble as commands where still being processed even if the window is below the given pixels. By trial and error I found that no command shall be deleted under @ media command and therefore if you have a margin-right of 30px and you do not want any margin at all one should keep that command and write 0px and after that it is a must that you put !important after it. The !important command will give importance to that line of code and will ignore the 30px margin-right.

After I presented the login page for my mobile application I was told that it was a lot different from the app itself and the full version of the website. I decided to keep it simple and make it look the same as all the other pages by keeping the background white and used the same style of buttons that I have used in other pages.

I have just finished the styling of the website for almost all the pages. I am skipping the calendar as I need to speak with my lecturer about it.

EDIT - Koala started giving me trouble and was not compiling my SASS. I managed to ruin the CSS for the contact page and notes hours before the deadline. I re-arranged them but in a very small time-window.

My website does not contain all the PHP that was supposed to be implemented but the only few that I have, I have fully understand it and explained it down below - 

I have created a file named functions.php so that I will create the functions in it.

The first thing that I did was naming all pages to .php. I placed my website folder in the htdocs and opened xampp. I created a new database 'school_app' and created my first table for the user information. I re-linked brackets with the new destination folder at htdocs and opened the website on my browser. A relationship was done between tbl_users and tbl_notes. This was done in a one to many relationship so that I will be able to link via the user_id. 

I went back to the functions.php and started by creating the connection to the database. I named the function 'connect_to_database' and created a variable $conn where the connection will be stored and saved. Whenever I want to disconnect or connect to the database all I do now is call the variable $conn.  Below the connection I have also done a function to disconnect from the database so that it will close the connection when requested.

The next step is to successfully store the data of the user. I coded the php in functions.php and I commented some of the inputs so that for now I store only the username and password and see if it actually works.

I started by giving a name to the function and stated the variables that I will be using. The $username and the $password for now. I connected to the database by calling the variable that is holding the connection information. The second step that I did was to store every input in a local variable. The password I have used an encryption method called Blowfish which encrypts the password and in the database it will not be visible as a normal password. This is done for security reasons. The second step I did was to save the given data in the database and I did this by creating a query. The query holds the information where the username and password will be stored in the database and where to get that information. The next step is to actually save the query results in another variable which I named $result. I created an error for the user to see when the system fails to register them and a disconnect from the database is promptly after. If no errors are present the function will return a true statement and the user will be registered.

When I successfully registered the user, I was getting data miss placed. The name was replacing the surname and the password was replacing the email data. After a lot of searching I found that this occurred because I did not register the user in the correct order. i.e I had to write the names after each other according to how I did them in the form.

I started the Login function, where the function check for both the username and password and if a correct match has been found the user will be redirected to the web page given. If not the IF statement that I have done before will take place and prompt the user with a line of text

I have redirected the user to the index-loggedin.php where I dispayed his name on the top right corner with PHP. I did not manage to change the image because I do not have a functional PHP user information.

Since I had to do a note application I started by creating the first function so that the user can create the note. Multiple functions have been created for extras added on the note-taking app.

The first function I named it create_note, a connection after a function is always required. I got the data for both the user id and the title and stored them. Then I did a query to store the information that I currently have in hand in to the database. I created two variables named $result and $id to be used in my other functions.

Loading the note was one of the options that I did for the user. I simply used the note_id and the user_id to match each other.

The user can also update the note and this was simply done by doing another query and update the tables to the new data inputted.

Lastly, I created two other functions to load and save the notes. In order to save the note a folder must be present. The user is not going to create the folder so I have checked if the user has one all ready and if he doesn't I will create one for him. The filename will be the note id and since some computers have restrictions to edit files I have added a command , fwrite to allow any changed to be done to the file.

The load note function  will not have the fwrite command because all I need it to do is fetching the note. Once the note is fetched, it will be opened and displayed to the other. Closing the handler is the last step of the notes taking page and this will repeat itself.

Another thing that I learnt was that I don't need to recreate another page if the user is prompted with a "Wrong username or password", but an if statement can be done with PHP.

I felt that I could have done a lot better in this assignment but we were restricted by both time and knowledge. PHP was not easy to be understood by the whole class. I managed to understand the key features and managed to create certain things alone. I learnt A LOT from helping others and seeing their problems during class.

Koala was a problematic causing software, starting from not compiling to creating unnecessary files. During the working period on my project, in order for koala to compile I had to save and ALT+Tab multiple times on the web page and back to koala in order for it to work. This was frustrating and time consuming as well. Another problem that I had was that it kept on creating a css for every sass partial that I had. This did not happen all the time but occasionally. I had to manually delete the files but they were being created after.