Creating the CMS (Part 1)

The CMS that I built would be based on PHP and HTML. To learn the basics, I took a course on CodeAcademy and watched a 1 hour video on the introduction to PHP. Once I got the basics, I used the information from W3schools to construct a simple mechanism to pull information from a database.

Once I built the simple mechanic, I realized that I was missing a database.

To set up a database and run the PHP code, I had to set up WAMP. With WAMP standing for:

W – Windows

A – Apache

M – MySQL

P – PHP

Following the instructions I’ve used to set up Wordpress (which required WAMP to run if it were to be hosted locally) and the previous blog I’ve written regarding the setting up of WAMP (docaok5.blogspot.com), I managed to set up the application relatively quickly.

Setting up WAMP

Once that was done I ran the program and signed into phpmyadmin to set up a database (default login would be user: root password: (empty)). From there everything was rather self-explanatory and simple. Using common sense I created a database with the name of “student_council”.

After that was done, I then started building the program. There were three parts to the program: inputing the information, connecting to the database, and finally, sending the info to the database.

So first I had to create an input form. This would be made solely out of HTML and would have PHP applied to it later. Using the information from the database, I created three text-boxes (First Name, Last Name, Email).

Submitting information form

Once that was done, I made a simple file to connect with the database. This was created solely out of PHP and requires the proper credentials to function properly. The main line of code was “$conn = new mysqli($servername, $username, $password, $dbname);” in order to check if the query was sent successfully, I had to write an if statement that would print out the problem.

Building Page5

Just like I made the 4^th section of the website, I split the page into two sections, the Q&A section and the questions section.

Q&A Section

For this section, I further split it into 3 sections: the main outline of the box “faqSectionSub”, the clickable box “faqOuter”, and the content “faqInner”.

HTML Code for Q&A Section

For the main outline of the box “faqSectionSub”, all I did was add a simple margin outside of it to prevent it each boxes from touching each other “margin-top: 75px; margin-bottom: 75px;”.

For the clickable section, I gave the text color (‘color: #878787;’) a darker shade of white, whilst for the background, I gave it a lighter shade (‘background-color: #E7E7E7;). For the aesthetics I changed the font-weight to 500 and increased the font-size to 20pt. Furthermore, I added padding to the div to prevent the text from touching the side of the box.

CSS code for the clickable title

I then made added a new pseudo-class which allowed the button to change color when a cursor was hovering over it.

New Pseudo Class

When creating the content section, I first made a text box with Lorem Ipsum. I added appropriate padding to it and added a border to make the box stand out.

Once the two section were created I had to merge them together. At first I tried changing the z-index but that didn't work. I later found out that the title had to have be "position: absolute" if I were to overlap the two of them. By making the title's position absolute and giving the content box a margin of -25px, this solution worked but created another issue at the same time. When the titles are stacked together, if you make their "position: absolute" then it won't move when the 'content' div opens up.

After posting this problem on Stackoverflow, someone suggested that I could look into jQuery UI. Apparently, jQuery UI has an accordion effect which is really similar to what I was creating.

Building Page4

Just like the other pages, I'll be using Bootstrap to make the page interactive. The two buttons will be a 'pager' button that is part of the Bootstrap CSS and Javascript.

When designing the page, I split it into 2 sections. The image / panorama and the individual’s person section.

Panorama

The Panorama

Using Bootstrap as the basis, I made the Panorama section ‘col-md-12’ to make the image fit the entire page. For aesthetical purposes, I gave the panorama a class (panorama_all) and remove the margins that came along with it. Bearing in mind that I was using Bootstrap, I had to add the !important tag to make sure the ‘margin: 0px’ applied to the image.

Individual’s section

The Cabinet

On the other hand, for the individual’s section, I applied ‘col-md-4’ to each div / image as there were 3 images per row (as long as each row adds up to 12, the rows would scale properly). For the top, I added the Bootstrap CSS ‘pager’ class to the HTML button div which automatically gave it the standardized look of a typical footer. The buttons looked too close to each other, hence I added a padding to the top of the padding and increased the margin left and right to the button.

 I also decreased the border-radius on the 2 boxes for aesthetical purposes.

After that was done I split the 12 members of the council into 2 categories, the first one being the 'General Cabinet' and the second one the 'Apprentice Cabinet'. For this I created a duplicate of the first category and applied the CSS function {display: hide}. By doing so, only 1 of them shows up.

New code-editor

Recently, I've gotten changed the code-editor I've been using. Notepad++ was a lightweight, easy to use open-source text editor. There were no problems with it, but I always found it a bit frustrating when I was reading through my code. 



One of my friends, heard about my problem and suggested me to try out the code-editor he's been using, Atom. 



"Atom is a free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub." -Wikipedia

Compared to Notepad++, it requires a computer with higher specs to run, however, it offers much more options compared to the latter.

Pros:
- Very customizable
- Offers many plugins
- Connected to numerous platforms

Cons:
- Consumes a lot of memory and can sometimes lag quite a bit
- Hard to get used to



Plugins I've installed to increase my productivity:

1. Atom-beautify - Improves code readability
2. Project Manger - Easy to switch between projects
3. Highlight Selected - Easy to see repeated words
4. File Icons - Able to identify different files
5. Pigments - Preview of color selected
6. Minimap - Allows you to see the entire code
7. Tabs-Expose - Easy to switch between windows
8. Color Picker - Pick colors in the program

Redesigning Page3

After finishing building a replica of the wireframe, I realised that Page3 and Page2 looked quite similar. Hence, I decided to do a bit of remodelling. I had a few options, in which I would have to redesign the layout:

• Remove the text
• Make the page a slider
• Add a hyperlink
• Change the box shape
• Change the box size

To avoid complicating things, I decided to remove the text and put it inside the image. Using the :hover Pseudo class on the image class, I created an animation that would darken the image, lower the opacity, and display the text information.



Effectively what I did was that I created a box inside a box, horizontally and vertically aligned the text, and then changed it's opacity to 0. The opacity of the box would turn back to 1 when the mouse hovers over it and would go through an animation of 0.4 (slow but not too slow).
I also changed the font-family and size to Raleway in order match up with the rest of the website



The end result looked rather nice, took less space than the previous model and overall improved the aesthetics of the website.