A very basic web shop tutorial
Earlier this year I got a request for making a website with an integrated web shop. The customer had already brought in a designer and my part was to make the proposed design actually work in reality, in other words -to code the site in PHP.
My initial thought was to combine OSCommerce, an open source web shop written in PHP/MySQL, with the rest of the site. OSCommerce is well known and well documented and is relatively easy to modify if you know your way around PHP code and SQL tables.
I thought this was going to be an easy project but right from the start I found out that converting OSCommerce to work according to the specified design was going to be a lot tougher than first expected.
Typically I would not want to build a web shop from scratch but in this case the shop part of the site was very streamlined and adapted to just this site so it became a major hassle trying to use the code of OSCommerce. The shop was designed as a grid that lead into smaller grid of clickable spots, no scrolling was allowed so content had to fit the screen every time and larger pages had to be split up into smaller ones. Previously I had already made a web shop from scratch, although slightly more advanced than the one I made for this project, so I had some former experience on the subject.
A very basic web shop tutorial
One of the first things we learned in computer science was to break down a problem and write a solution in our own logical words. This tutorial is not going to focus on actual code or even an example because it is better to come up with workable solutions to problems yourself.
A web shop is an online store where visitors of a page can add products to a virtual cart and then order them.
A modern web shop is built on two parts, a database like MySQL containing data about the products offered on the shop and a web shop built with a web scripting language for example PHP or dot net.
Let’s begin with the database. In this simple example we only have a couple of tables.
“Products” is the table containing the different products offered in the store. Each product has its own row in the table. “Customers” is the table containing information about the customer that is needed to be filled in by a customer before ordering is possible.
This fictional web shop consists of a single page listing the products from the database. When a customer click on one of the products he is forwarded to a page showing the content of his cart and also the product that was clicked since it was added to the cart.
What happened here is that each product from the database is listed with its unique ID on the shop page. When a product is clicked, the ID of the clicked product is sent to the page showing the content of the cart. The ID of the product that was clicked is then added to a session variable.
A session variable holds information (a variable) tied to a user and will not disappear unless the user empties the product from his cart or visits another page or closes the browser.
It is possible to send values to another page by hidden forms, however a session can also hold multiple values if defined as an array. So if the visitor to the web shop decides to add another product to his cart the session variable holding the previous product will grow and hold two ID numbers, the numbers of the products the visitor clicked on.
By listing every value that the session array contains it is possible to build a database query that can fetch data from the database about the chosen products, and that is how the cart page is built. If the session array is empty we simply inform the visitor that his shopping cart has no products in it.
So what happens then?
When the customer is happy with the products chosen he can then decide to register details about him in a simple form and then he submits his order by clicking on a submit button. Usually an email is directly sent out to the customer containing information about what products where ordered, how much the total sum of purchased products are and contact information.
There are off course many other possible solutions to designing a web shop and this is only a very simple introduction tutorial to give ideas of how a web shop could be built.
I should also mention that there is quite a lot of open-source web shop projects around as mentioned above that are very capable and updated constantly so generally it is not needed to invest time in creating a personal web shop system. But in special occasions like in the project described above it could be good to know the inner structure of such a system.
June 17th, 2009 at 1:27 am
Fantastic introduction and exactly what I was looking for. Much thanks for breaking it down and offering your insight.