Skip to main content

Command Palette

Search for a command to run...

Building An E-commerce Site From Scratch [Part 2]

In this part of the project, i talk about building a content management system and the four basic operations of data persistence CRUD.

Published
4 min read
Building An E-commerce Site From Scratch [Part 2]
O

I build things that scale, perform, and make sense. As a fullstack developer with a deep obsession for clean architecture and high-impact systems, I use code as both a creative and strategic tool. My work spans backend logic, frontend clarity, and the glue between always with a bias toward simplicity, performance, and maintainability. I write to distill complexity, document hard-earned lessons, and share patterns that save time, reduce friction, and unlock better thinking. No fluff, no filler, just honest takes. This blog is where I think out loud. If you build stuff too, we’ll probably get along.

In the last post, I talked about starting a new e-commerce project, downloading a free template, writing cart functionality in JavaScript and the importance of separating repetitive content. Now I’ll talk about building a content management system and the four basic operations of data persistence.

Building The CMS

When building a CMS(Content Management System) of any kind, you have to keep in mind the four basic operations of data persistence: Create, Read, Update and Delete; Most popularly known as CRUD. In computer science, persistent storage refers to any data storage device that retains power after the device is powered off, such as a hard disk, solid state drive or a database online. A CMS is incomplete without it and must be incorporated with all its operations to function optimally as a complete data storage and processing system. I like to divide my CMS work into the above-mentioned operations as separate and independent entities. It makes my work cleaner, more straightforward and easier to debug later on.

Create

New Product Form

There are lots of things to consider when building a CMS, especially when you won't be the only one using it. It needs to have a universal level of ease. In web development a form tag is used to collect data and it isn’t so different from its real-life counterpart. Forms are used to collect the required information in a logical, meaningful fashion for communication and pass to another entity. This is exactly how programmers take info from users to process, except in our case the way to submit is by clicking a button. A good example of this is your WhatsApp text status (You know, the one with different colors.). It’s just a single form that takes your post and shares it to your audience/contacts. I like making all my forms in blocks (one line after another). This helps ensure that my project runs on as many screens as possible; it’s a practice I picked up while developing android apps. The form contains inputs for:

  • Product Title
  • Price
  • Discount
  • Stock
  • Colors
  • Main Image
  • Side Images
  • Product Specifications
  • Features.... etc.

Writing to The Database

After completely building the form, it is time to take the info I need and send it to the database. A database is an organized collection of structured information, or data, typically stored electronically in a computer system. A database is usually controlled by a database management system (DBMS) and can then be easily accessed, managed, modified, updated, controlled, and organized. The word most relevant here is database management system (DBMS) and they are a data analysts’ best friend; they make managing large databases an easy task. The DBMS I'm using is called MySQL and I'm running it on a server emulator called XAMPP which basically allows me run an online server locally on my computer. To write to a database you have to write a query to insert data into it. A query can either be a request for data results from your database or for action on the data, or for both. A query can give you an answer to a simple question, perform calculations, combine data from different tables, add, change, or delete data from a database.

INSERT INTO item(title, price, stock) VALUES ('Apple iPhone 7', 1000, 5)

A very important thing to keep in mind before adding to a database is what I like to call sanitization. The funny thing about coding is that you have to be ready for all scenarios, including when users knowingly want to add malicious data into your project/database. Data sanitization is simply the cleansing and validation of data before adding it into your database. This includes looking out for type errors (user entering text instead of numbers) or malicious code entry (SQL injection). SQL injection, also known as SQLI, is a common attack vector that uses malicious SQL code for backend database manipulation to access information that was not intended to be displayed. This information may include any number of items, including sensitive company data, user lists or private customer details. Some data like titles or headers that are non case sensitive can be made fully uppercase or lowercase. It still counts as sanitization. In PHP there's a function for eliminating and cleaning malicious and dangerous code. It's called 'htmlentities'.

$data = 'Convert all applicable "characters" to HTML entities.'
$cleanData = htmlentities($data, ENT_QUOTES);
//equals: Convert all applicable "characters" to HTML entities.

This is the harder part of the four basic Operations. The rest are relatively easy, most especially delete.

Summary

Creating data and working with databases was a very enlightening experience. I made me realize better the amount of work that goes into big apps that let users input content, like Facebook and Twitter. I also got some hints on security and potentially harmful points hackers can exploit. All progress has been committed to Github as at the time of writing. Stay tuned for part 4, I’ll talk about the remaining 3 points of data persistence. If you have any questions or contributions please drop a comment.