For the innovative way to login/logout when accessing the CMS of the website, I will require the use of logging in with Google (Integrating Google Sign-In into your web app, n.d.). This adds an extra layer of security, and also makes it easy for people with Google accounts to login immediately. If the user is already logged in with Google on their mobile, it will log them it automatically.

For the blog, profile, and contact pages with the ability to add, delete, and update content, the user when logged in will be able to add new blog posts by using a form that allows them to add titles and descriptions. They can delete blog posts by looking at the entire list of blog posts and clicking the delete button then confirming. They can update blog posts by clicking on the update button and this will take them to a page similar to the adding a blog post page, except all the boxes will have all the current information in them so the user can easily modify parts. The text boxes should be able to support text formatting.

The profile page will have the option to have the profile picture changed on the admin page by selecting a tick box that confirms the new image is a profile image.

On the contact page, it will have a contact box where the user can enter their email, and a description of why they are contacting and this will get sent to the email that was chosen on the profile page. The person receiving this email can then filter through any spam emails and reply to the legitimate ones without giving their email to anyone that might access the website.

For the secure file-upload system, it will allow the user to upload an image with a title and description which will then be displayed on the blog page. The images will be able to be deleted from the admin page.

For the client-side scripting to create an intuitive interface design, the website will use things like animations and different colours to show the user that they’ve hovered over a button or that something is happening.

I created the general layout for the login page which included the header, navigation bar, content, and footer.

I'll be using JavaScript and jQuery to create interactable elements that will make animations and other elements appear on the page.

For example:

• Loading bars when uploading files or pictures to let the user know the progress of something.

• Changing the colour of buttons to let the user know that they've hovered over something, or that something is active.

• Animations to smoothly transition between different elements, like a slideshow that showcases projects, or tabs that when clicked on display information.

• Autocomplete when using a search bar that can search the whole site for information. This would allow the user to not need to know exactly what they are looking for as the autocomplete can fill in the rest and allow the user to select it.

I worked on adding jQuery to the website by creating a button that, when clicked, toggles the visablity of the navigation bar. This will be especially useful for the mobile version of the website when users might not want a navigation bar taking up a section of the page whilst browsing. I also reorganised the page to use CSS grids as it gives me more control of where content is on the page, as well as moving the stylesheet over to it's own CSS document. Ensuring the CSS was kept consistent across the entire website was important as it meant it could be picked up on any device and be intuitive for the user to know how to navigate. As Robbins said talking about consistent CSS, "For visitors who might start using your site on one device and finish it on another, you can ensure a consisent experience" (Robbins, 2018).

I used JavaScript and PHP to create a working login form that allows the user to login and logout of a secured page using sessions. The page that is displayed once the user is logged in will be changed eventually to show profile options and blog uploading pages. The login page will also redirect the user, if already logged in, to the profile page until they logout.

I am also working on making the entire nav section of the login page to disappear when the user clicks on the toggle navbar button. This will allow the main content to take up the page instead of the navbar grid section taking up space making it more mobile friendly.

Password Hashing should be used because "your uses entrust you with their information and expect you to guard their information with the best security practices available" (Lockhart, 2015).

So I used some extra PHP code to make the password hashed in the database. This allows passwords stored on the database to be near unbreakable as the only way to find out if the password is correct is to know the correct password, and have 'password_verify' hash the inputted password to compare it against the stored password in the database. If the hashes are the same, then the user gets logged in.

To add the password to the database, I had to create a 'registration' page as the hashed password couldn't be added to the database manually.

I decided to redesign the navigation bar because it wasn't very mobile friendly and took up a lot of the page. I moved it into the header and made it go underneath the website title when the page got to a certain width using media queries. I used media queries so that, as David said, "Your design must be flexible, stretching to meet the correct proportions­ for the screen on which it is presented." (David, 2013). This gave a better user experience as the user could access the website easily on all devices.

I then went about creating basic HTML layouts for each CMS page so that they would be ready to have content put onto them.

I started adding the blog system to the site which shows blog posts that had been added to the database.

The else statement gets the information from the database so that it can be displayed, then the div 'grid-container' gets the rows and puts them on the page. The header and 'Read more...' buttons take the post's ID so that when they are clicked on it takes the user to another page which displays all the content for that specific ID.

The if statement checks if data has been entered into the search box at the top of the page, and if it has something inside when the search button is clicked then only any blog posts that contain the specified word get shown.

The top code image is where it gets the ID of the post from the URL, as when you click on one of the links for the posts on the previous page it sends an ID in the URL, and then retrieves the data for the specific ID. If the URL doesn't contain an ID, then it takes the user back to the blog list page.

The bottom code image is what actually displays the blog post on the page.

I then added a way to create new blog posts. This page could only be accessed if the user had logged in, if they hadn't they would get redirected back to the login page. The Add New Blog Post page allows the user to give the post a title, description, and content. The textareas use TinyMCE (TinyMCE, 2019) which allows the user to add text formatting.

I created a function that checks to see if the user has logged in. This is to prevent users accessing pages that they shouldn't be able to unless they've logged in.

I created another function that checks to see if the user has logged in so that if they are and they go onto the login page, it automatically sends them to the admin page. This is similar to the function that checks to see if the user hasn't logged in but tries to access the admin pages.

Anytime I want to use either of these functions, I can just call them by including Class.Functions.php and stating the function's name.

I also created a floating label for the Login form which is based off of Bootstrap's floating labels (Floating labels, n.d.). This makes the login form look nicer and gives the user more response to show they have actually clicked on the inputs.

The admin page allows the user to add new blog posts, edit the created blog posts, delete any created blogs posts, as-well-as add new images and delete them.

The admin area also has a link to take the user back to the homepage so they can view the changes without logging out. This in conjunction with the function that checks to see if you are logged in when going onto the login page means the admin can quickly switch between the two views.

The cards are created by following a similar structure to the Bootstrap cards (Cards, n.d.). It uses the CSS Grids system to easily position the elements inside, including PHP to actually display the information from the database.

This function selects the data from the database table so that it can be displayed in the cards. This function is also used on the blog posts page so that the user can see all the blog posts.

The edit post button gets the ID of the card and post_id and takes the user to the edit post page which allows the user to change the contents of the post. The fields get populated with the current data so that the user can edit it easily. This is done by just echoing the data into their respective fields.

When the user clicks Edit Post, this function is run. It checks to see if all the fields have been populated so the post can't have nothing. And if there aren't any errors then it updates the database with the new data then takes the user back to the admin page.

The delete post button gets watched by some JavaScript so that when it's pressed, it sends a confirmation alert to make sure the user wants to delete it, and if they reply yes then it gets the ID of that card which matches up with the post's ID and then sends an AJAX request to remove the card from the database and page. As I used AJAX to update information on the page without the need to refresh which, as Duckett states, "The ability to load new content into part of a page improves the user experience because the user does not have to wait for an entire page to load if only part of it is being updated." (Duckett, Ruppert and Moore, 2014). it mean't that it was improving the user experience more.

As it uses an AJAX request, it means the page doesn't need to be refreshed to see any changes and gets removed live.

The secure file upload system will upload images to the database because "this kind of data belongs in a database instead of files for convenience, simultaneous access, and security" (Sklar, 2016).

This form allows the uploads of images where you can give it a name and description. Later on these will be displayed similarly to the blog posts on the admin page, and on the blog page.

The form also allows you to choose whether it will be your profile picture. This means you can update your image easily.

This JavaScript checks to see if the profile picture tickbox has been checked. If it is, it removes the imageInformation ID as the description isn't needed.

This function uploads the images to the database so that they can be recalled later. It loops round all the images that were uploaded into the box and gives them a temporary name whilst it checks if they pass the validation.

If there is an error whilst uploading that matches one of the validations, it will give an error telling the user what the error was. If there aren't any errors then it moves the image to the upload folder. If the profile picture tickbox has been ticked then it updates the settings table with the new profile picture. If the profile picture tickbox hasn't been ticked then it inserts the title and description to the table along with the image name.

If, for some reason, there was an issue uploading the image, it lets the user know.

Here is the profile picture displaying on the unfinished profile page:

These grids are laid out the same as the blog posts and have delete buttons that work the same way the blog post ones do, except they target the images and these specific cards rather than the blog posts.

The delete image button gets watched by some JavaScript so that when it's pressed, it sends a confirmation alert to make sure the user wants to delete it, and if they reply yes then it gets the ID of that card which matches up with the image's ID and then sends an AJAX request to remove the card from the database and page. As it uses an AJAX request, it means the page doesn't need to be refreshed to see any changes and gets removed live.

This function gets all the settings from the settings table which is used on the profile page to get the profile picture.

This function gets all the media from the media table so that it can be displayed on the blog page and admin page.

This function allows the images to be deleted from the database so they get removed from these pages.

The profile page display an image of the profile picture, along with the name, job, email, and description. Including social media buttons at the bottom that use Font Awesome icons (Font Awesome, n.d.).

To get the profile picture, getAllSettings retrieves the photo from the database under settings_value and then returns it.

On the contact page, the user can enter their email address, and the message they wish to send. This then gets sent to the contact replies page in the admin area so that the admin can review the contacts and reply to their email address. This prevents the email getting as much spam. The admin can then delete the contact after they have finished.

These functions get the contact posts so they can be displayed on the admin page. Allows users to create a new contact message so they admin can review them. And also allows the admin to delete a contact after they have finished.

I then implemented Google's login system (Integrating Google Sign-In into your web app, n.d.). This changed the login form to a single button.

This then took the user to this Sign in with google form where they could select and login with their account.

This code checks with the google api to make sure that the google account has been registered on the database, which can only be done through the hidden register page to prevent people from just making accounts. Once it has their account it takes their email so that it can be used on the admin page to confirm they've logged in.

This code checks to make sure that the user has logged in with their google account, and if they haven't it sends them back to the login page.

This displays the user's google email address to confirm they've logged in with the correct account.

This is the video documentary showcasing the website CMS in action, including a voiceover critically evaluating the mobile user experience:

Tiny.cloud. 2019. Tinymce. [online] Available at: https://www.tiny.cloud/ [Accessed 21 December 2020].

Google Developers. n.d. Integrating Google Sign-In Into Your Web App. [online] Available at: https://developers.google.com/identity/sign-in/web/sign-in [Accessed 23 December 2020].

Getbootstrap.com. n.d. Floating Labels. [online] Available at: https://getbootstrap.com/docs/5.0/forms/floating-labels/#example [Accessed 21 December 2020].

Getbootstrap.com. n.d. Cards. [online] Available at: https://getbootstrap.com/docs/5.0/components/card/#example [Accessed 21 December 2020].

Fontawesome.com. n.d. Font Awesome. [online] Available at: https://fontawesome.com/ [Accessed 21 December 2020].

Pixabay, 2016. Blog Letters On Brown Wood. [image] Available at: https://www.pexels.com/photo/blog-icon-information-internet-262508/ [Accessed 21 December 2020].

David, M 2013, HTML5 Mobile Websites : Turbocharging HTML5 with jQuery, Sencha Touch, and Other Frameworks, CRC Press LLC, St. Louis. Available from: ProQuest Ebook Central. [Accessed 23 December 2020].

Duckett, J., Ruppert, G. and Moore, J., 2014. Javascript & Jquery: Interactive Front-End Web Development. 1st ed. Indianapolis, IN: Wiley, p.368. [Accessed 23 December 2020].

Robbins, J., 2018. Learning Web Design: A Beginner's Guide To HTML, CSS, Javascript, And Web Graphics. 5th ed. Sebastopol, CA: O'Reilly Media, p.486. [Accessed 23 December 2020].

Lockhart, J., 2015. Modern PHP: New Features And Good Practices. 1st ed. Sebastopol, CA: O'Reilly Media, p.81. [Accessed 24 December 2020].