Building a Custom CMS: Introducing Den CMS

Background

As a long-time web industry professional and recent data engineering certification graduate, I’ve spent years understanding the ins and outs of content management systems. Inspired by my site, Data Enginerd, I wanted to take my knowledge of web development, database management, and technical problem-solving to build something truly custom.

The motivation to create my own CMS stemmed from recent WordPress community issues and my desire for more control over my blogging platform. Off-the-shelf solutions like WordPress are robust but often bloated with features I didn’t need. Building my own platform meant creating a lightweight, efficient CMS tailored specifically for my needs.

Thus, Den CMS was born—a content management platform to build all of my web projects with, engineered from scratch.

The Tech Stack

Building Den CMS required a versatile set of tools and technologies. Here’s a breakdown:

• Hosting: I used Dreamhost, leveraging its PHP and MySQL capabilities for smooth backend and database operations.
• Logo Design: I used DALL-E by OpenAI to generate a logo that reflected the "nerd meets database" theme. By refining my prompts, I also incorporated a wolf motif, inspired by the word "den."
• Database Management: MySQL formed the backbone of Den CMS, allowing me to store and manage posts, categories, and user authentication securely.
• Code Development: ChatGPT by OpenAI helped streamline the coding process by:
  • Providing boilerplate PHP, HTML, CSS, and JavaScript.
  • Debugging errors with MySQL queries and PHP logic.
  • Helping me understand how to structure backend security (e.g., .htaccess and credential protection).
• Image Editing: I refined the logo and UI visuals using Adobe Photoshop and Illustrator.

Design & Development Process

1. Logo Creation

I started with logo creation for both the CMS backend, and the Data Enginerd front end. Using DALL-E.

For the Data Enginerd logo I combined:

• Database-related elements (e.g., tables, nodes).
• A "nerd" aesthetic (e.g., glasses, bowtie).

For the Den CMS logo, leaning into the idea of animal dens, I decided on a wolfs head for the logo.

Example Prompt for DALL-E:

"Create a logo that combines database symbols (tables, nodes) with a nerd aesthetic (glasses, bowtie). Use modern design colors, including blues and gray."

2. Setting Up Hosting

I configured Dreamhost to support Den CMS, ensuring:

• Secure access using .htaccess.
• Separation of login credentials and database configuration into protected files.
• A clear file structure for front-end templates and backend logic.

Example Prompt for ChatGPT:

"Explain how to set up a PHP/MySQL project on Dreamhost with secure credentials and protected access using .htaccess. Provide an example folder structure for the project."

3. Backend Development

The backend of Den CMS powers:

• Post and Category Management: Users can add, edit, or delete posts and categories through an intuitive admin panel.
• User Authentication: Secured with hashed passwords and role-based access.

I worked iteratively with ChatGPT to refine PHP and MySQL logic, ensuring efficient database queries and proper error handling. What's really nice, is that instead of only copy and pasting in text, like headers of my database tables, Chat GPT easily interprets text from screenshots.

Example Prompt for ChatGPT:

"Write a PHP script to connect to a MySQL database securely, retrieve posts, and display them in a dropdown menu. Ensure the credentials are stored in a protected file. Attached is a screenshot of my table headers that the page needs to communicate with."

4. Frontend Development

The Den CMS dashboard includes:

• A clean, responsive UI styled with custom CSS.
• Separate templates for the homepage, post pages, and category archives.
• Modular components, such as a reusable sidebar and header.

Example Prompt for ChatGPT:

"Generate HTML and CSS for a CMS dashboard sidebar with links to 'Add Post,' 'Edit Post,' 'Add Category,' and 'Edit Category.' Use modern UI/UX best practices."

5. Debugging and Testing

Though I’m proficient in PHP and MySQL, debugging is always a key part of development. ChatGPT was instrumental in identifying syntax errors, optimizing SQL queries, and implementing best practices for performance and security. I simply copy and pasted the errors I receieved, along with the code that the erros originated from.

Lessons Learned

• AI as a Partner: Tools like ChatGPT and DALL-E enhanced my productivity, providing creative ideas and technical solutions faster than traditional methods.
• Customization Pays Off: By building Den CMS from scratch, I achieved a lightweight platform tailored to my specific needs, free from the bloat of pre-built systems.
• Iterative Development: The project reinforced the importance of refining both the backend and frontend iteratively, ensuring both functionality and aesthetics align with user needs.

Final Product

Den CMS is now live and powering this site, Data Enginerd. The system includes:

• A secure backend for managing posts and categories.
• A user-friendly dashboard with a minimalist design.
• A lightweight database optimized for performance.

You can see the full details and explore the CMS on my blog!

Future Enhancements

• Add responsive design to improve mobile usability.
• Draft and version control of website pages