The following CMSs are up and running on our class server. Most of these CMS installations have two distinct web interfaces: one for “end-users”, meaning the website the public sees; and another interface for administrators to manage the content that is displayed on the public site.
Each of these CMS’s can be skinned (a.k.a. themed) to look the way you want them to. I have set them up to use the default styles for starters. For the popular CMS’s, you can often find themes that other designers have made that you can easily use on your own site.
However, if you want to create your own custom theme, rather than using someone else’s, you often will have to spend a good deal of time learning the intricacies of skinning the particular type of cat you have adopted.
These examples are yours. Feel free to play around with them, modify them, etc.
Drupal
Drupal is one of the most popular open-source general-purpose CMS’s.
Joomla
Joomla is one the most popular open-source general-purpose CMS’s.
WordPress
WordPress was originally created as a CMS specifically for blogs. But it has since added features that make it, at this point, a very popular general-purpose CMS.
ZenCart
ZenCart is a CMS designed specifically for e-commerce sites. It provides easy setup of a storefront, shopping cart, and integration with popular payment processing gateways.
Moodle
Moodle is a CMS designed specifically for online learning (e-learning) sites.
MediaWiki
MediaWiki is one example of a wiki platform. It was originally developed as the platform behind Wikipedia, but is now its own product that can be used by independent site operators.
phpBB
phpBB is a popular message board CMS
Indexhibit
Indexhibit is a truly bare-bones CMS that does nothing fancy, but is very easy to use.
ZenPhoto
ZenPhoto is a CMS designed specifically for photo gallery sites.
Working off of the example code from the Basic SQL example files, here is a slightly more sophisticated set of pages that when used together, create a sort of Content Management System for our animals application.
How it works
Here is a user flow diagram outlining how this application fits together. Below the diagram is an overview of each step.
User flow diagram for Basic SQL CMS
read.php
In this version of the files, the pages that handle each of the CRUD commands are all linked together. A user can view the animals stored in the database on the main page, read.php. Read.php simply queries the database for a list of all the rows stored in the animals table, and outputs each of those rows into the XHTML for the page.
The user can click links to “update” or “delete” any individual animal. When they click either of those links, the id of the selected animal is passed in the query string of the link to the corresponding page, either update.php or delete.php.
update.php
Update.php displays a form that the user can use to change the name of the animal that was clicked. The first time this page is loaded, this form is prepopulated with the existing name of the animal that was clicked, which has been retrieved from the database.
The id of the animal and its new name are passed along with another request for update.php once the user clicks the submit button. Update.php this time updates the selected row in the animals table and redirects the user back to read.php, where the user can see the updated list of names.
delete.php
Delete.php simply runs a query that deletes the selected row from the database, and then redirects the user to read.php, where they can see the updated list of animals.
create.php
A user can click a link to “add a new animal” on read.php. This takes them to create.php, where they can enter a new animal name into a form. When they submit the form, the animal name is passed along with another request for create.php.
Create.php this time creates a new row in the database table for the new animal, and then redirects the user to read.php, where they can see the updated list of animals.
Many of you are building portfolio sites for your final projects. Many portfolio sites share the same requirements and constraints, so I encourage you to exchange information about sites you like, and techniques you’re using on your blogs for all to see.
A number of Content Management Systems (CMS’s) that claim to make the design and development of portfolio sites as painless as possible. CMS’s generally make it possible for developers to publish content on the web without writing any code.
Be warned: regardless of what they claim, learning any CMS requires significant time and energy – sometimes an equivalent amount as learning to code from scratch. So unless the out-of-the-box CMS looks exactly like what you wanted it to look like, or provides features you would never be able to do on your own, just beware that you will probably need to learn the intricate details of each of these CMS’s before you can adequately customize it to suit your own site design.
With that warning, here are some popular CMS’s that have been recommended to me for use with portfolio sites. They all come with default themes that create decent-looking sites with no coding. Each of these CMS’s should have either a demo or examples of real live sites that use them. If nothing else, browsing through the examples linked from these sites may help you brainstorm what you want your own portfolio site to look like:
In addition, each of the major multi-purpose PHP-based CMS’s can be customized to be suitable for a portfolio site. These are the most popular CMS’s, and they might be overkill for a simple site that just requires a few pages. However, each allows you to install plugins or add-ons that add functionality that might be useful for such a site:
The fundamental concepts of e-commerce are easy enough to grasp, and these days most e-commerce sites follow normative standards and conventions. There are three basic components: the storefront, the shopping cart, and the checkout.
In this post, I’ll discuss each of these components. How these components are implemented in code depends, like many advanced topics, on what framework you’re working with, what language, and the style of development you or your team have.
The Storefront
When someone is shopping on the web, they want to browse products on a site to see what’s available. Usually, products use categorization to make it easy for users to find the sort of products they’re looking for. If you remember from way back when, we discussed the elements of navigation that an information architect should be aware of. It might be good to review those now that you’re finalizing plans for your final projects.
A shoe store typically has top-level categories such as Men’s and Women’s. A shoe store might also have one or more levels of sub-categories of each top-level category. For example, the Men’s category might have sub-categories such as Boots, Sandals, Dress Shoes, Sneakers etc.
It is not uncommon for a particular product to fall into more than one category. For example, a casual hiking boot may fall under both Hiking and Casual.
Now for a small tangent on the topic of categorization: A modern twist on the idea of categorization is tagging, mentioned in that earlier blog post about navigation. Many sites, especially “Web 2.0” sites, now offer tags in addition to, or as a replacement for, categories. Tags are just keywords that are associated with a particular product. Often, but not always, tags are user-generated, meaning that users of a site can add whatever keyword they want to a particular product. If users can collaboratively add tags to a product or asset, then the site offers what is known as a folksonomy.
Managing the storefront of an e-commerce site is a matter of organizing products, and managing inventory. How you organize the storefront, and how you categorize your products, are important concepts to work out in the information architecture phase of an e-commerce project, since the methods of navigation and categorization that you choose will affect every aspect of the site architecture.
In terms of development, a storefront would have separate database tables for categories, products, and the association of products to categories. All the data about categories and products would then be read from the database. Storefronts must also begin a “session“, which automatically assigns a session id to the user and stores it in a cookie. This is important so that the server can track each user and make sure that one user’s shopping cart is not confused with another user’s shopping cart, even if the user’s are not registered with the site.
A typical categories table might have fields for id, title, parent_category_id, and created. A products table would typically have fields for id, title, description, num_available, price, thumbnail_image_path, large_image_path, and created. An association table could have fields for id, product_id, category_id, created, thereby allowing for a many to many relationship between products and categories by thereby having a separate row for each category a particular product belongs to.
The Shopping Cart
Shopping carts are an essential part of any e-commerce site. They take the metaphor of the physical shopping basket, and transpose it into online media. At its most fundamental, a shopping cart is tool for maintaining state and remembering which products a user has selected for purchase so that they can buy them all together as a batch without having to re-enter their billing and shipping info for each one individually.
As you can probably imagine, most shopping carts are simply tables in a database that have fields for user_id, product_id, and quantity (as well as the id and created fields, of course). That way, the database table simply has a row for every product in the user’s cart. To get the contents of the cart, you make a query on the table for all rows that match a given user_id.
It may be that you want to allow non-registered users to also add items to a shopping cart. In this case, you wouldn’t be able to store their user_id in a database since they do not have a user_id. There are two ways to get around this problem: either you store the items in their cart as data in a cookie (stored on their client machines) instead of in the database, or you can add a temporary shopping cart table to the database that associates items with a user’s session_id rather than their user_id. Remember that session_ids are automatically assigned by PHP’s Sessions functionality, and do not require users to register. The temporary shopping cart table might be called, “temp_cart”. It might have fields for id, session_id, product_id, quantity, and created.
Payment Processing
The checkout and payment processing parts of an e-commerce site are the most complicated. You need to securely process a transaction on a user’s credit card. This entire process should take place on a secure server where all communication between the client and server is encrypted.
In order to process credit cards online, you need to have what is known as a merchant account with a bank. To charge cards over the phone, in a store, or online, merchants need these special accounts with a bank. If you do not have a merchant account with a bank, you will need to use a payment processing service like PayPal, which does not require you to have your own merchant account setup. PayPal uses its own merchant account to process your payment (and of course they charge an extra fee for this.) This is why PayPal is so popular with small merchants.
Assuming you have a merchant account (or are using a payment service that does), the first step in processing payment online is to send the data of what items are in a user’s shopping cart to a script that then calculates the total fee owed, as well as an taxes and surcharges. Once the user enters his/her credit card, billing, and shipping info, you perform a transaction on their credit card by first authorizing it with the issuing credit card company.
If the credit card authorization passes, you must process the order with the credit card company by charging their card, remove the items from the user’s shopping cart, and make sure your site’s product inventory (the num_available field in the products table) is up-to-date now that you have sold off a few items. Once everything is finished, you show a confirmation screen to the user with an order receipt. Often, the site will automatically send an email to the user (assuming they entered an email address) with the order receipt in it.
One rule of thumb to follow if you are running your own store is never store sensitive information like credit card numbers in your database. Unless you have a budget to hire a good security expert, your site can be (and very well may be) hacked, and you do not want to be liable for the damages that would result from someone getting a hold on your clients’ credit card numbers.
Due to the complication of doing all these steps yourself, most online merchants opt to use a third-party payment processing service that provides security and handles all the dirty work of charging a card for them. I recommend you do the same.
Conclusion
The components of an e-commerce site are really just a new combination of the techniques and technologies you are already familiar with. However, given the amount of work it takes to get all the interaction between the parts working correctly, it can be very time consuming to set up. Also, given how important it is that you do not make mistakes or errors in any of the steps, the risk associated with developing a homemade shopping cart is pretty high.
For these reasons, I recommend you use a 3rd party library or content management system (CMS) to do as much of this work for you as possible. A popular 3rd party library or CMS should be well-tested, secure, easy for you to integrate with your site, and easy for the user to navigate. So when you are evaluating 3rd party tools, bear each of these issues in mind. Also determine whether the software handles all of the storefront, shopping cart, and payment processing, or only some of those parts.
As an example of a popular e-commerce CMS is Zen Cart. There are a variety of e-commerce “solutions”, including:
These are just the one’s I have heard of recently. You will find that there are dozens of PHP-based e-commerce solutions available with just a simple search.