Drupal E-commerce with Ubercart 2.x — Save 50%
Build, administer, and customize an online store using Drupal with Ubercart
This article is a quick installation reference for Drupal, the required Drupal modules, and Ubercart. Ubercart is not a standalone e-commerce application, but it comes as a Drupal module. That means you have to first install Drupal and all the required Drupal modules on a server with the minimum requirements, before installing Ubercart. The topics that we will discuss in this article by George Papadongonas and Yiannis Doxaras, authors of Drupal E-commerce with Ubercart 2.x, are:
- Minimum requirements for Ubercart installation
- Creating a local environment using a web server, PHP, and a database server
- Using a commercial hosting service
- Downloading and installing Drupal and Ubercart
- Using UberDrupal, an Ubercart installation profile
You don't have to be an expert programmer or a system administrator in order to complete the following process. We'll first give you a brief explanation of the underlying technologies, and then we'll continue with a step-by-step guide. At the end of this article, you'll have the online store installed on your local or remote machine and you'll be ready to make all the required customizations to the frontend and the backend, depending on your needs.
Minimum requirements for Ubercart installation
In order to successfully install and use your online store, your system must meet the following requirements:
- Operating system: Drupal works fine in almost every operating system. Actually, you can transfer your Drupal installation from one operating system to another within minutes and no customization is required at all. All you have to do is to move the files and the database without altering any configuration files. For example, you can install Drupal on your local Windows or Mac computer, do all the customizations there, and then upload it to a Linux server to go live.
- Web server: The web server is the software that accepts HTTP requests from browsers and delivers web pages to the users of our site. The most popular web server is Apache and we'll use it for our installation. It's secure, extensible, fast, and easy to customize. If you're not an expert in another web server, there is no reason to think of any other solution, because most of the available information and support is about Apache.
- Database: The purpose of the database is to store, organize, manage, and retrieve all the data of our website in a structured way. When referring to data, we mean not only the content that you put in your pages, but also every piece of information that Drupal uses for all its functions. In this book, we're using MySQL as a database. Today, it's the #1 open source database, and it's used in millions of websites and applications, from small personal web pages to enterprise systems with millions of users.
The MySQL database of a basic installation contains about 50 tables and every new installed module creates one or more new tables. If you check your database after the installation of Ubercart, you'll find that there are 100 tables in your database. These tables contain data such as pages, products, images, categories, orders, payments, caching information for your pages, theming information, comments from your visitors, menus, user information, and so on.
- PHP: PHP is a scripting language, ideal for web development. It began as a small personal project, but soon became a very popular scripting language. Drupal is written in PHP, so it's absolutely necessary and there is no alternative to it.
Some PHP extensions are needed for our installation. We'll mention them briefly here, so you can consult your hosting provider or examine your local system to check that everything is fine. The easiest way to check your PHP parameters is to use phpinfo. It's a function that returns information about the PHP environment on your server. All you have to do is to create a blank file named phpinfo.php in your server and insert the following code using a text editor:
This is a small PHP script that runs the phpinfo function and displays the results on your screen. If you browse to phpinfo.php, you'll see a page with your PHP configuration.
The basic PHP requirements are:
- PHP memory requirements: 1 6 MBs are enough for basic sites; however, 64 MBs are recommended for more complex installations.
- GD2 library: GD2 is an image manipulation library for PHP. Ubercart needs this library, so if we want to put images to our products, it has to be installed.
- Register Globals: This is actually a depreciated PHP feature, but some hosting providers with old systems still use it. It's a security risk, so it has to be disabled for Drupal to install.
- Safe mode: Drupal 6 doesn't support PHP's safe mode, because it causes problems to file uploads, so it also has to be turned off.
eBook Price: $26.99
Book Price: $44.99
Creating a local environment using a web server, PHP, and a database server
When you start building your online store, it's better to do it on a local environment. There, you can do all the tests, experiment, try different options and solutions, and correct all the problems in a closed and secure environment before going live.
You have two basic choices: manually install and configure all the components, or use a complete web server package.
The advantage of the first choice is that you have the absolute control of the entire process, but its disadvantage is that it's time consuming and sometimes difficult to configure it right. We prefer the second method, because it's fast, easy, and reliable.
We recommend XAMPP (http://www.apachefriends.org/en/xampp.html), a free distribution package for Linux, Windows, and Mac OS X, containing Apache, PHP, MySQL, OpenSSL for Secure Sockets Layer support, ProFTPD FTP server (FileZilla in the Windows version), and phpMyAdmin for the administration of MySQL databases. It's free, easy to install and uninstall, needs little or no configuration, easy to use, and very fast and stable.
So let's start the installation process:
- Go to http://www.apachefriends.org/en/xampp.html. This is the download page for XAMPP. You'll see there that there are four basic distributions for Linux, Windows, Mac OS X, and Solaris. Here, we'll show you how to install it for Windows, but the process is almost the same for every other operating system.
- Select the appropriate distribution for your operating system. You will be transferred to a new page, where you can see specific details, frequently asked questions, some basic installation instructions, and configuration options. Click on the name of the file and select OK to download the file on your computer. It takes only a few minutes, depending on your Internet connection.
- When the download is completed, double-click on the file in your computer to open it and start XAMPP Setup Wizard. Leave the default settings and click on Next> until the installation process is finished.
If you check the root folder of your hard disk, you'll now see a new folder named xampp. Inside, there are all the files of the package. Among all the others there is one application file named xampp-control, which opens the control panel for XAMPP.
- Double-click on xampp-control and open it. The Control Panel opens in a new window. It has a very simple layout, showing the three main applications (Apache, MySQL, and FTP), an indicator about the status for each one of them, and a button to turn them ON or OFF. If everything is OK, you'll see green indicators showing that all XAMPP components are Running.
- Now it's time to test that everything works. Using your browser, open the following URL: http://localhost. Select your language and you'll be transferred to the home page of XAMPP. On the left, there is a menu for all the basic actions. You can check the status of the applications, check the security of your installation and your pages, read online documentation about Apache, PHP, and MySQL, test and see the source code of some very interesting demo applications, and use some very useful tools like phpMyAdmin for the administration of MySQL databases and Webalizer for Web Stats.
- Before you download Drupal, you have to create a blank MySQL database. This database will be used by Drupal to store all the data of your site. So, from the left menu of the XAMPP home page, select phpMyAdmin, located at the bottom of the page. It will open in a new window. Under the label Create new database, enter the name of your database and click on the Create button to continue. If you haven't changed anything, the default MySQL username is root and there is no password.
That's it! Now your local environment is ready to install Drupal. If you're not going to use a commercial hosting service immediately, skip the next section and go to the Downloading and installing Drupal section.
Using a commercial hosting service
If you're in a hurry, or you just don't want to mess about with local web server installations, you can find a commercial hosting service and host your online store there. Nowadays, most companies support Drupal without any problem, because it's very popular and there is high demand for it. Look for a provider with reliability and speed of access, with plenty of web space and bandwidth. You need FTP access to upload the required files, and enough privileges to create a new database and to edit .htaccess and php.ini files.
Go to http://drupal.org/hosting to find a list of companies that provide Drupal hosting services.When you select your hosting company and sign up, they'll give you a username and password and a link to access the Control Panel of your package and manage your website. In this section, we'll work with cPanel, but the process is almost identical for the other GUI control panels such as Plesk.
Before installing Drupal, you have to create a database. We'll show you here how to create a MySQL database, but a similar process is followed for a PostgreSQL database.
- Browse to the URL of your cPanel (usually http://www.mysite.com/cpanel). Enter your username and password.
- You'll be redirected to the home page of cPanel. Select MySQL® Databases from the menu.
- Enter a name for your database and click on the Create Database button.
- Enter a username and a password and click on the Create User button.
- Check the ALL Privileges box and click on the Add Users to Your Databases button.
- Don't forget to take a note of the database name, the username, and the password; we'll use them during the Drupal installation.
Downloading and installing Drupal
No matter if you decided to use a hosting service or to set up a local server; the process for installing Drupal is almost the same. There are only minor differences, which will be mentioned as we proceed with the installation.
The first step is to download, install, and customize Drupal. Click on Latest Release from the home page (http://drupal.org) for immediate download of the latest version of Drupal, or browse to http://drupal.org/project/drupal to check all the versions available. The installation file comes as a compressed file under the format drupal-6.x.tag.gz. If you are a Linux or Mac user you can immediately open the file, but if you are using Windows you may need a program like 7-Zip (http://www.7-zip.org).
Unzipping the file will create a Drupal-6.x folder in your machine. If you check this folder, you'll see that it has more folders in it and that it contains all the files of the Drupal installation.
If you go to sites and select the default folder of our Drupal installation, you'll find only a file there, named default.settings.php. Copy this file to settings.php and remember not to delete the original file, because we need both files in order to install Drupal. Uncheck the read only property of settings.php file if you're working locally, or change the permissions to 666 with the file manager, if you're using a hosting service, so that the file is writable for Drupal installer.
Now, it's time for action; the installation begins! Browse to the root folder of your installation. You'll see the first screen of Drupal installer. Select Install Drupal in English. If you want to install Drupal in another language, you have to first download the appropriate language package from Drupal.org and follow the instructions.
There is a possibility of facing an error message at this stage. It shows up when register_globals is enabled. This is a security risk for your website and you have to solve it before continuing. You have to create a file named php.ini in you root folder and add the following line:
register_globals = Off
This disables register_globals and now you can safely continue. If this doesn't work, you may not have enough privileges in your hosting account and you will have to contact your provider to fix it.
Drupal installer verifies that your system meets all the basic requirements, and then you proceed to the next screen. There, you have to write the database name, username, and password that you inserted when you created the database. (You DID take a note of them, didn't you?) Click on Save and continue and you'll see the installer progress bar. When all the files are installed, it's time for the basic configuration screen.
Here, you have to insert the site name and the primary site e-mail address.
Then, you have to create the administrator account. The administrator is a "super user" who has all the privileges and has access to every operation of your website. You have to keep the administrator credentials in a safe place. If you lose them, it's possible to lose the control of your website. Insert the administrator's username, e-mail address, and password.
In the last section of the page, you have to select time zone, decide if you want clean URLs enabled or disabled (enabling clean URLs makes Drupal create shorter and more search engine-friendly URLs), and choose if your system will check for updates automatically. IIS servers need an extra module to create clean URLs. For more information, read http://drupal.org/node/3854.
Click on Save and continue and you're done! Your first Drupal website is ready!
Now you can see the first page of your new site. Of course, it's not very pretty yet, and there is no actual content in it yet, but we took our first big step.
eBook Price: $26.99
Book Price: $44.99
Downloading and installing all the required Drupal modules
Now we have a functional Drupal site. Can we proceed with Ubercart installation? Not yet! First we have to install a few more Drupal modules.
Drupal third-party modules are not part of the core, and they are created by individual programmers or companies. They add extra functionality to Drupal or they enhance an existing functionality. You can see a full list of all the available Drupal modules at http://drupal.org/project/Modules. Actually, the only module that is necessary for Ubercart to work is Token.
As we can read at the home page of this module, http://drupal.org/project/token:
Tokens are small bits of text that can be placed into larger documents via simple placeholders, like %site-name or [user]. The Token module provides a central API for modules to use these tokens, and expose their own token values. Note that Token module doesn't provide any visible functions to the user on its own, it just provides token handling services for other modules. For Drupal 6, the Token module provides a "Token Actions" module which can be enabled separately. This provides several "actions" for the Drupal core Actions/Trigger modules to use that take advantage of the Token replacement functionality.
Ubercart uses Tokens in several functions, like confirmation messages or client e-mails.
The next bunch of modules is required for image support. We want our products to have nice images, and in several sizes. We also wish to enable our clients to magnify these images. Drupal does not provide any out-of-the-box image support, so Ubercart uses not only one, but six different modules. The installation of all these modules seems like a time-consuming and complicated process, but they upgrade Drupal, providing new capabilities required for our e-shop to function. The modules that we have to install are:
- Content Construction Kit (CCK): This is the most important contributed module for Drupal. It allows the user to create new content types and to add new fields to existing content types, using only the administrator's interface, without the need of any programming knowledge. This module's page is http://drupal.org/project/cck.
- FileField: This module is an add-on for CCK. It creates a field for file uploads. This module's page is http://drupal.org/project/filefield.
- ImageField: This module is also an add-on for CCK. It creates an image field. This module's page is http://drupal.org/project/imagefield.
- ImageAPI and ImageAPI GD2: ImageAPI uses PHP's GD2 image manipulating library. It's extremely useful, because it allows us to take basic actions, such as resizing, rotation, adding watermarks, cropping, or converting to another format directly from the browser, without the need to invest in an image-editing application. This module's page is http://drupal.org/project/imageapi.
- ImageCache: This module all ows us to create predefined standards for images. Ubercart uses ImageCache to adjust all the images of the products that we upload to specific preset dimensions and dynamically generates the files for product catalog, thumbnails, and shopping cart photos. This module's page is http://drupal.org/project/imagecache.
- Thickbox: This module brings all the functionality of the jQuery plugin Thickbox (http://jquery.com/demo/thickbox) to Drupal. Clicking on an image loads the full-size version of it in a new layer, without reloading the whole page. It provides automated integration with all of the aforementioned modules. This module's home page is http://drupal.org/project/thickbox.
- Google Analytics: This module adds the Google Analytics web statistics solution to your website. Not only does it collect general stats such as number of visitors, most popular pages, or bounce rate, but it also tracks transaction data and item data. E-commerce tracking and analytics is a very useful tool that helps you to analyze the performance of your business and to manage your marketing strategy. This module's page is http://drupal.org/project/google_analytics.
- Views: This module pro vides the site administrator with a web interface that allows easy presentation of the website content. This module's page is http://drupal.org/project/views .
To install all of these modules, first you have to download them from their home page. Then create the sites/all/modules folder, unzip the files, and copy the whole directories there. Finally, browse to http://localhost/admin/build/modules, select these modules from the (long and overwhelming) list and click on save.
Downloading and installing Ubercart
Now that we finished with Drupal installation and have enabled all the required Drupal modules, it's finally time to install Ubercart. Browse to http://www.ubercart.org/downloads and download the latest Ubercart 2.x version for Drupal 6. This also comes as a compressed tar.gz file, so you have to uncompress it just as you did for Drupal 6.
Then, you have to copy it to sites/all/modules directory, as we did with the previous modules. Actually, Ubercart is not just one module, but rather a package of modules. So now, we have plenty of new options on our module page. Some of them are required (Ubercart-core) and some of them are optional (Ubercart-core (optional) and Ubercart-extra, Ubercart-fulfillment, and Ubercart-payment). You don't have to install every single Ubercart module. Spend some time now and think what you need and what you don't. Of course, if you change your mind you can return here and add or remove features, depending on your needs.
The most important modules of the Ubercart package are:
- Cart: Required for a functioning shopping cart
- Conditional Actions: The conditional actions are required to configure shipping and taxes
- Order: Required for order management and fulfillment
- Product: Creates a product content type for your store
- Store: Required for store setup and management
Optional core modules
You can install a basic but functioning version of Ubercart without using these modules, but in most cases they are needed for a competitive and attractive store:
- Attribute: Using attributes, you can create a customizable product that differentiates based on specific characteristics, such as size or color.
- Catalog: This module creates a product catalog with categories and subcategories.
- File downloads: This module is required if you want to sell downloadable products, such as music or video files.
- Payment: This module is required for receiving payments at your store.
- Report: This module creates reports about your store, orders, products, and clients.
- Roles: A role can give different privileges to different clients.
- Shipping: This module is required for shipping management.
- Taxes: This module is required for tax management.
These extra modules add even more functionality to Ubercart, transforming your store into a competitive selling point:
- Cart Links: This module lets you create specialized links to purchase products from other nodes.
- Google Analytics: This module installs Google Analytics for Ubercart.
- Product kit: Using this module you can combine two or more products and sell them together as a product kit.
- Stock: This module is required if you need to manage the stock levels of your products.
- Payments: This group of modules adds new payment methods and integrates with payment gateways:
- Authorize.net: This module integrates your store with the Authorize.net gateway.
- Credit card: This module allows you to accept credit cards. Pay attention, because this method doesn't offer any kind of encryption for security.
- CyberSource: This module integrates your store with the CyberSource payment gateway.
- Google Checkout: This module integrates your store with the Google Checkout payment gateway.
- PayPal: This module integrates your store with the PayPal gateway.
- Test Gateway: This payment method exists only for testing purposes, as it doesn't actually processes payments.
- Fulfillment: This group of modules add new shipping methods:
- Flatrate: This module adds a flatrate quoting method to your store.
- U.S. Postal Service: This module integrates your store with the USPS to automatically calculate shipping rates.
- UPS: This module integrates your store with UPS to automatically calculate shipping rates.
- Weight Quote: This module adds a weight quote method to calculate shipping based on the total weight of the order.
Using UberDrupal, an Ubercart installation profile
When we create an installation profile, we actually give specific instructions to Drupal installer on what extra modules to install, what language to use, what themes to enable, or what settings to use after the installation. It's a very powerful tool with great potential, as it allows developers to create predefined packages of Drupal, created for a specific purpose, for example blogs, image galleries, magazines, or e-shops. The only disadvantage of this procedure is that it's not fully automated, as you still have to first download all the required modules and then run the installation profile.
A few months ago, a new installation profile was created named UberDrupal. It automatically installs all the core Ubercart and required Drupal modules, which we mentioned earlier. It also allows some basic pre-configuration and creates a store with the default settings.
If you want to use this installation profile, you first have to download all the required Drupal modules and all the Ubercart modules, and put them inside the ../sites/all/modules folder.
Then, download UberDrupal from http://drupal.org/project/uberdrupal, and put it inside the profiles directory. Now, when you run the installer you'll see two options for Select an installation profile: Drupal or UberDrupal. Selecting the second option enables the UberDrupal installation profile.
The starting steps of this installation are identical with the standard Ubercart installation. We choose our language and we enter the details of our database. After the installation, we are able to do some basic configuration of our website, right from the installer. The whole process is not perfect yet, but it's very convenient, especially for novice users.
In this article, we talked about the technologies that are required for Drupal and Ubercart to work. We discussed how to create a local server to host your installation, or how to use and customize a package from a professional hosting company. Then we showed you how to install Drupal and all the required modules for Ubercart. We also examined the Ubercart package and did a brief analysis of the modules contained in it.
Finally, we presented you with UberDrupal, a Drupal profile for easier and faster installation of Ubercart.
If you have read this article you may be interested to view :
- Drupal and Ubercart 2.x: Install a Ready-made Drupal Theme
- Drupal and Ubercart 2.x: Customizing a theme
- Drupal and Ubercart 2.x: Creating a Theme from Scratch Using the Zen Theme
- Drupal and Ubercart 2.x: A new Approach to Drupal Theming
- User Interface Enhancement Techniques with Drupal and Ubercart 2.x
- Product Cross-selling and Layout using Panels with Drupal and Ubercart 2.x
About the Author :
George Papadongonas is the owner of a small web development firm, located in Athens, Greece. He started his career as a freelancer web developer in 2000 and works with small and medium size enterprises. He has experience in many development platforms, but felt in love with Drupal in 2007 and with Ubercart in 2008. He is a member of Drupal Association and an active supporter of the open source community.
Yiannis Doxaras has studied theoretical physics at University of Athens and University of Cambridge. He is co-founder of OSIS, a Greek open source startup company that provides turn-key solutions in industries like travel, e-learning, and e-government. Yiannis is an active committer in various open source projects mainly with Java, Python and PHP technologies. He is a serial entrepreneur and innovation broken in Greece and the Balkans.