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.