Python and Django: Building an E-commerce Website

Introduction
Prerequisites
Setting Up the Development Environment
Creating the Django Project
Designing the Database
Creating the Models
Creating the Views
Creating the Templates
Adding Static Files
Testing the Website
Conclusion

Introduction

In this tutorial, we will go through the process of building an e-commerce website using Python and Django. By the end of this tutorial, you will have a fully-functional e-commerce website that includes product listings, shopping cart functionality, and a checkout process.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of Python programming language and web development concepts. Familiarity with Django framework will be helpful but not mandatory.

Setting Up the Development Environment

Before we start building the e-commerce website, we need to set up our development environment. Follow these steps to get started:

Install Python: Go to the Python website (https://www.python.org/) and download the latest version of Python. Follow the installation instructions for your operating system.
Install Django: Once Python is installed, open your terminal and run the following command to install Django:
```
pip install django
```
Install Virtual Environment: It is a good practice to use a virtual environment for your Django projects. To install virtualenv, run the following command:
```
pip install virtualenv
```
Create a Virtual Environment: Navigate to your project directory in the terminal and create a new virtual environment by running:
```
virtualenv env
```
Activate the Virtual Environment: Activate the virtual environment by running the appropriate command for your operating system:
- For Windows:
```
.\env\Scripts\activate
```
- For Mac/Linux:
```
source env/bin/activate
```
  Creating the Django Project
  
  Now that our development environment is set up, let’s create a new Django project:
Change to the project directory in the terminal:
```
cd project_directory
```
Create a new Django project by running the following command:
```
django-admin startproject ecommerce
```
Change to the project directory:
```
cd ecommerce
```
Start the Django development server by running:
```
python manage.py runserver
```
Open your web browser and navigate to http://localhost:8000 to see the default Django welcome page. This confirms that your project has been set up correctly.

Designing the Database

Before we start building the website, let’s design the database schema. For our e-commerce website, we need to have tables for products, categories, users, orders, and more.

Create a new Django app called store by running this command:
```
python manage.py startapp store
```
Open the settings.py file in your project’s directory and add 'store' to the INSTALLED_APPS list.

Define the model classes in the store/models.py file. Here’s an example of a Product model:

from django.db import models
   
class Product(models.Model):
    name = models.CharField(max_length=200)
    price = models.DecimalField(max_digits=8, decimal_places=2)
    description = models.TextField()
    category = models.ForeignKey('Category', on_delete=models.CASCADE)
   
    def __str__(self):
        return self.name

Run the following command to create the initial database migration files:
```
python manage.py makemigrations
```
Apply the database migrations by running:
```
python manage.py migrate
```
Creating the Views

In this section, we will create the views for our e-commerce website. Views are responsible for handling the HTTP requests and returning the appropriate responses.

Open the store/views.py file and define the view functions. Here’s an example of a view that lists all products:

from django.shortcuts import render
from .models import Product
   
def product_list(request):
    products = Product.objects.all()
    return render(request, 'store/product_list.html', {'products': products})

Create a new directory called templates inside the store app directory.
Create a new HTML template file called product_list.html inside the templates/store directory. You can use Django’s template syntax to loop through the products and display them.
Repeat the above steps to create views and templates for other functionality like product details, shopping cart, and checkout.

Creating the Templates

In this section, we will create the templates for our e-commerce website. Templates define the structure and layout of the web pages.

Create HTML template files for each view function. Use Django’s template syntax to include dynamic variables, loops, and conditionals.
Define a base template that serves as the layout for all pages. Use Django’s template inheritance to extend the base template in other templates.

Adding Static Files

Static files include CSS, JavaScript, and images used in the website. Django provides easy ways to manage and serve static files.

Create a new directory called static inside the project directory.
Inside the static directory, create subdirectories for CSS, JavaScript, and images.
Add your static files to the appropriate subdirectories. For example, you might have a file styles.css inside the static/css directory.
In your templates, use the {% load static %} to load static files. Then, use the {% static %} template tag to include static files in your HTML.

Testing the Website

Now that we have created all the necessary components, it’s time to test our e-commerce website.

Start the Django development server if it’s not already running:
```
python manage.py runserver
```
Open your web browser and navigate to http://localhost:8000 to see your e-commerce website.
Test the different features of your website, such as product listing, product details, adding items to the cart, and the checkout process.

Conclusion

Congratulations! You have successfully built an e-commerce website using Python and Django. You should now have a good understanding of how to create models, views, templates, and static files in Django, as well as how to set up a development environment.

In this tutorial, we covered the basic steps required to build an e-commerce website. There are many additional features and improvements you can make to enhance your website. Feel free to explore the Django documentation for more advanced topics and best practices.

Happy coding!

Published: 9 January 2023

Python and Django: Building an E-commerce Website

Table of Contents