Draft of the final website

After finishing the basic layout of each section (and also creating an individual CMS for each section), I started drafting my final website. This website would simply be all the different sections put together inside 1 single HTML file. 

Bearing in mind that there may be some overlapping C

Adding the Weekly Minutes (Part 2)

After creating the basic layout of the weekly minutes section, I added it to the website and added a layer of Javascript to make it more interactive. Using the font-awesome CSS, I added a few symbols so that users wouldn’t be lost when navigating through the website. The javascript I added specifically targeted these symbols.

Javascript Code

Effectively, what these lines of code would do is that they would is that they would hide the menu. When the “X” button is pressed, the class “hide_menu” would be added and the div would apply a negative margin of 250px, which would shift the div to the right effectively hiding it. The reverse would happen when the class is removed.

Adding the Weekly Minutes (Part 1)

When I was first drafting my wireframe, I was unaware of the fact that the council had wanted to add its weekly minutes. Hence when they confronted me with the request, I came up with several possible solution: Shortening the minutes and create a specialized section for it on the website, place the link to the weekly minutes, or just placing everything onto the website without any modifications.

(Email)

Soon after the request was made, we decided to follow the second idea and place a link to the weekly minutes. This was mainly due to the fact that it was rather complicated to jam all of the information on a limited area (so basically we chose to use the links as it was much more aesthetically pleasing).

(Website sidebar)

Once that was decided, I had to think on how I’d add the links to the website. After looking on W3Schools for some inspiration, I decided to go with a sidebar that would display the date of the weekly minute and use that as a hyperlink to redirect the user to the actual Google Document.

I first learnt the basics to making a sidebar and then went on to watch a tutorial on YouTube on how to make the same thing (but with different aesthetics).

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

https://www.youtube.com/watch?v=zPh0RbYiYGg

I then combined both tutorials and made my own sidebar.

For this, the HTML code I used was rather simple.

Using a combination of ULs (Unordered Lists) and LIs (Ordered Lists), I managed to make a decent arrangement for the sidebar. I split the sidebar into 3 major sections: the title section, the content (hyperlinks) and the signup button which would allow the user to subscribe himself to any new additions to the weekly minutes.

Once I had that in place I copied a bit of CSS code and added some of my own to render the sidebar more aesthetically pleasing.

Most of the code was copied from the YouTube tutorial, but otherwise, apart from fixing a few bugs, I changed the color, padding, margin sizes for it to suit the website more.

Creating the CMS (Part 2)

Once I got the trial CMS to work, there were several things I had to do. First, create separate tables that the main website would link back to (Database). Second, add PHP code to the main website so that it can use the information from the database (Content). Finally, create the CMS that would allow the main user to change the content of the website easily.

Using the HTML code I wrote in the trial CMS, I copy and pasted it into an empty document and added additional CSS to it. I also added Bootstrap to it so that it would scale properly when the windows is resized.

HTML Code

CSS Code

The most complicated part of this section was to allow the div to align vertically. To do that, I added the class “Display: flex; justify-content: center; align-items: center;”

After that, I added a pager class and added two buttons to it: Submit and Refresh. The Submit button would send the information to the database and the Refresh button would reload the bottom part of the CMS which would display a preview of the website.

I customized the button using CSS, made the width longer (“width: 200px”) and center-aligned the text (“text-align: center”)

For this bottom part, I simply coped the code I created for the main website.

After that once done, I had to attach the ‘connect.php’ document to allow the website to connect to the database.

Now, for the PHP code that would link the website / preview section to the database I created a separate document called “functions.php” and wrote a few lines of code. Those lines of code would send a query to the database with each line targeting a different column.

For this part of the process, I used the top three lines of the code

Effectively what I did was that I created a variable (eg. $sql_1 = mysqli_query ($conn,"SELECT * FROM intro WHERE ID = 1");) and that would sent a query to the database to receive the information. Then the other variable I created (eg. $intro1) would display the information based on how it is used (eg. $intro1[“database_column_name”] would display all the information the information of the database_column_name in the first of column of the ‘intro’ table.

So once I was finished with coding that page of PHP, I put in a sub-folder (php) and included the functions.php and connect.php files to my final website (I added it to the header <?php include ‘connect.php’; include ‘functions.php’;). Once that was done, I was free to call up any specific piece of information and display it on the website.

This is how the code is used in the final website and CMS (Preview section). This would call up the information in the column ‘Subtitle’ in the first row (as $intro1 makes a query to get all the information from the first column).

I then copied this process multiple times so that the database would be connected to all the different sections. After that was done I would have to save the files as a .PHP file so that all the code would run. I then had to put the new file inside WAMP so that the code is processed.