A Live Developer Journal

Blog Content Management System - All The Pieces That Make It Work

 I decided to build a blog content management system because hard coding and then uploading articles manually to the server was a time consuming process that made me feel less motivated to write. Secondly, I am the kind of person who does find joy in reinventing the wheel. Doing so has allowed me to create an expandable CMS that does exactly what I want it to do and no more.

  Even if you feel like you are nowhere near ready to build a CMS, have a look through the complete resource list at the bottom of this page. You'll be surprised at how prepared they will make you feel. P.s. I knew very little PHP and SQL before attempting this project, but am far more confident in both now.

CSS

Comments

 I used comments to logically separate my styles into categories that make sense for my website.

screenshot of css stylesheet where comments are used to create headings that structure content

Media Queries

 I used media queries to make the layout responsive. Particularly useful for simplifying complicated desktop blog card layouts for mobile users.

side by side screenshots of desktop vs mobile version of blog landing page layout

CSS Variables

 I used CSS variables to store brand colours.

screenshot of css variable declarations

JavaScript

Back To Top Button

 I followed this tutorial from W3Schools to make the back to top button. I am in the process of making my own animated and slowly scrolling version, and will update this once it is done.

small blue circle with white arrow pointing upwards

Coming Soon Image

 I wanted to display a friendly image to the user if they clicked on a category that didn't have any articles written for it yet. So I added an image of a panda to my page, and used CSS to hide it from the page (display: none).

 I used JavaScript to check if any articles had been displayed on the page yet by looking inside the articles div and seeing if there were any h2 elements inside (for displaying article titles). If no titles were inside, then the panda would be revealed (using JavaScript to change value of display to "block"). If there was one or more titles found, then the panda would be hidden again.

cartoon panda drawn in paint with a thought bubble next to him saying 'new thought cuddles coming soon.'

Problem Solving Carousel

 The problem solving carousel is an interactive tutorial I created to help people learn how to break down programming problems into input, output, sequences and decisions. The functionality for this one deserves its own article, one that is in the making and will be linked to here once it is done.

screenshot of problem solving carousel

SQL

Select Statement

 The select statement works on a single table, and creates a new table containing only the rows that meet a condition statement. I used it to select only the categories whose parent_id was set to NULL, which meant they were the main categories. If the parent id was set to a number, then it is a subcategory of a category whose id matches the parent_id.

screenshopt of sql select statement

Left Join Statement

 The left-join statement returns all rows from the left table, even if there are no matches in the right table. I used it to join the articles and categories table by article id and category id. Allows me to access category names for each post in the article (whose category names are represented by integers in that table).

screenshot of SQL left-join statement

Inner Join Statement

 The inner-join statement selects all rows from both participating tables as long as there is a match between the columns. This combined both of the tables so that all category names in the category table matched up to the posts in the articles table. Allows me to access all of the other attributes in both tables too, which was important for displaying blog cards and blog posts.

screenshot of SQL inner-join statement

PHP

Includes() Method

 The includes() method allows you to include other files into your document. I used it to add the navigation menu to the top of each page, so if I needed to make any changes to the menu, I only need to edit the original navigation menu file. I also used it to add the database connection scripts to the top of every page that needed access to the database.

screenshot of php includes method

Foreach Loop and Echo

 The foreach loop and echo statements are used to cycle through each of the articles and display their data values.

screenshot of foreach and echo statements

Pagination

 I created a set of page number buttons. The number of page number buttons created depends on how many articles were selected using an sql query. The number of articles would be different depending on which category was selected. I created a variable called articles_per_page which stored the number of articles I want to display on each page. The number of articles divided by the articles_per_page, then rounded up gives the number of pages there should be. Each of the page buttons were assigned a link that takes you to "index.php?page=" + number.

screenshot of pagination buttons

 I then used the $_GET method to check which page we were currently on. When we click on each of the page buttons, a number corresponding to that page gets added to the URL. If the page number in the url matches the page number of the button we have clicked on, then we are on this page so the background colour for that button is changed to purple to show that it is active, whereas the background colour of all other buttons are changed to grey to show that we are not on any of those pages. If we have just visited the index page for the first time (and no page number has been added to the url by clicking on a page button), then we set the page number to one and change the colour of page number button one to purple.

 In order to display 4 articles on one page, the next 4 articles on the next page and so on, I created a variable called $start, which contained the page number we are on - 1, multiplied by the articles per page variable (which contained the value 4). If we were on page one, (1 - 1) * 4 would give us zero, which when used in the LIMIT part of the SQL query, means that we would be displaying articles starting from index 0. If we were on page two (2-1) * 4 would give us four. So on page two we would be displaying articles from index four.

Random Colour Assignment

 I created an array of colours and a variable called index set to 0. I then created an if statement that said if the index number was bigger than the number of colours in the list, set the index number back to o to start from the beginning again. This if statement was contained inside the foreach loop that I used to display data from each article, so the if statement then became a bit of a loop itself. The background colour of each category was set to one of the colours inside the list, accessed using the index.

screenshot of colourful category list

Date Formatting

  I used the date_create() method to turn the date string inside the article database into a date object, then used the date_format()* method to convert the date into the right format. In my case I created three separate date_format objects for the month, day and year so that I could target them individually using CSS.

screenshot of css styled date

Word Count to Read Time Converter

 The word count to read time converter gets article word count using the str_word_count() method, divides the result by 250 (average number of words people read a minute), and then rounds the number up using the ceil() method to get a whole read time number.

screenshot of readtime

Complete Resource List

 All of the resources in this list gave me aha moments when I was stuck trying to figure out a problem. If you want to build your own blog CMS, reading through these first will give you a huge step up. I have also included a list of useful tools that also came in handy during the build process, but are not directly related to the CMS.

CSS

JavaSript

SQL

PHP

Useful Tools