pontalk: Explore Python's Hidden Treasures!

Building Your First Online Store: A Simple E-commerce Site with Django

Written by

ken

in

Hello aspiring web developers and future entrepreneurs! Ever dreamt of building your own online store but felt overwhelmed by the technical jargon? You’re in luck! This guide will walk you through the exciting process of creating a simple e-commerce website using Django, a powerful and beginner-friendly web framework.

We’ll start from the very basics, explaining each step in simple terms, so you can confidently build your first digital storefront. By the end, you’ll have a functional site to display products, and a solid foundation to add more complex features.

What is an E-commerce Site?

Before we dive into coding, let’s quickly define what we’re building. An e-commerce site (short for electronic commerce) is essentially a website where you can buy and sell goods or services online. Think Amazon, eBay, or your favorite local boutique’s online presence. Our simple version will focus on displaying products and their details.

Why Choose Django for Your E-commerce Site?

When it comes to building web applications, you have many choices. So, why Django?

  • Python-Powered: Django is built with Python, a programming language known for its readability and simplicity. If you’re new to coding, Python is a fantastic starting point!
  • “Batteries Included”: Django comes with many features built-in, meaning you don’t have to install and configure everything from scratch. This includes an admin panel, authentication system, and more, which speeds up development.
  • Scalable: While we’re starting simple, Django is used by large, busy websites (like Instagram!). This means your site can grow with your ambitions without needing a complete rewrite.
  • Secure: Django has many built-in protections against common web vulnerabilities, making it a relatively secure choice right out of the box.
  • Active Community: A large and helpful community means plenty of resources, tutorials, and support if you get stuck.

What is Django? (A Quick Explanation)

Django is a web framework written in Python. A web framework is like a toolbox that provides common tools and structures to build websites faster and more efficiently. Instead of writing every piece of code from scratch, Django gives you a head start with components for handling databases, URLs, user authentication, and more. It follows the Model-View-Template (MVT) architectural pattern:

  • Model: This is where you define your data structure (what information your product, user, or order will have) and how it’s stored in the database.
  • View: This part handles the logic. It receives web requests, processes them (e.g., fetches data from the Model), and decides what information to send back.
  • Template: This is typically an HTML file that defines how your data is presented to the user. The View passes data to the Template, which then renders it into a web page.

Setting Up Your Development Environment

First things first, let’s get your computer ready.

1. Python Installation

Make sure you have Python installed. You can download it from the official Python website (python.org). Most modern operating systems (macOS, Linux) come with Python pre-installed, but it’s good to have a recent version (3.8+ recommended).

You can check your Python version by opening your terminal or command prompt and typing:

python --version

or

python3 --version

2. Create a Virtual Environment

It’s a best practice to use a virtual environment for every Django project. Think of it as an isolated box for your project’s Python packages (like Django itself). This prevents conflicts between different projects that might require different versions of the same package.

  1. Navigate to your desired project directory:
    bash
    mkdir my-ecommerce-shop
    cd my-ecommerce-shop
  2. Create the virtual environment:
    bash
    python -m venv myenv

    • Explanation: python -m venv is a built-in Python module for creating virtual environments. myenv is the name of your environment (you can name it anything you like).
  3. Activate the virtual environment:
    • On macOS/Linux:
      bash
      source myenv/bin/activate
    • On Windows (Command Prompt):
      bash
      myenv\Scripts\activate.bat
    • On Windows (PowerShell):
      bash
      myenv\Scripts\Activate.ps1
      You’ll know it’s active when you see (myenv) at the beginning of your terminal prompt.

3. Install Django

With your virtual environment active, install Django using pip, Python’s package installer:

pip install Django Pillow
  • Explanation: pip install Django installs the Django framework. We’re also installing Pillow, which is a library Django uses to handle image uploads for your products.

Starting Your Django Project

Now that Django is installed, let’s create your first project.

1. Create the Project

In your active virtual environment, run:

django-admin startproject myshop .
  • Explanation:
    • django-admin is Django’s command-line utility.
    • startproject myshop creates a new Django project named myshop.
    • . (the dot at the end) tells Django to create the project files in the current directory, rather than creating an extra myshop folder inside my-ecommerce-shop/myshop.

Your project structure should now look something like this:

my-ecommerce-shop/
├── myenv/
├── myshop/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
  • manage.py: This script is your project’s main interaction point. You’ll use it to run commands like starting the server, creating database migrations, and more.
  • myshop/settings.py: This file contains all your project’s configuration settings (database, installed apps, time zone, etc.).
  • myshop/urls.py: This file defines the URL patterns for your entire project, directing web requests to the correct parts of your code.

2. Run the Development Server

Let’s see your project in action!

python manage.py runserver

Open your web browser and go to http://127.0.0.1:8000/. You should see a “The install worked successfully! Congratulations!” page. This means your Django project is up and running!

You can stop the server by pressing Ctrl+C in your terminal.

Creating Your First App (Products App)

Django projects are typically composed of multiple “apps.” An app is a self-contained module that does one specific thing (e.g., a “products” app handles all product-related logic, a “users” app handles user accounts). This modular approach makes your code organized and reusable.

1. Create the Products App

Make sure your virtual environment is active and you are in the my-ecommerce-shop directory (where manage.py is located).

python manage.py startapp products

This creates a new products directory with its own set of files:

my-ecommerce-shop/
├── myenv/
├── myshop/
├── products/
│   ├── migrations/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
└── manage.py

2. Register the App

Django needs to know about your new app. Open myshop/settings.py and add 'products' to the INSTALLED_APPS list.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'products',  # Add your new app here
]

Defining Your Product Model

Now, let’s define what a “Product” is for our e-commerce site. This is where we use Django’s Models to describe the data we want to store in our database.

Open products/models.py and add the following code:

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=200, help_text="Name of the product")
    description = models.TextField(blank=True, help_text="Detailed description of the product")
    price = models.DecimalField(max_digits=10, decimal_places=2, help_text="Price of the product")
    image = models.ImageField(upload_to='products/', blank=True, null=True, help_text="Product image")
    stock = models.PositiveIntegerField(default=0, help_text="Number of items in stock")
    available = models.BooleanField(default=True, help_text="Is the product available for purchase?")
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ('name',) # Order products by name by default

    def __str__(self):
        return self.name

Explanation of Model Fields:

  • models.CharField(max_length=200): A short text field, perfect for names or titles. max_length is required.
  • models.TextField(blank=True): A larger text field for longer descriptions. blank=True means this field can be left empty in forms.
  • models.DecimalField(max_digits=10, decimal_places=2): For storing numbers with decimal points, ideal for prices.
    • max_digits: Total number of digits allowed (e.g., 99,999,999.99 has 10 digits).
    • decimal_places: Number of digits after the decimal point.
  • models.ImageField(upload_to='products/', blank=True, null=True): For uploading images.
    • upload_to='products/': Images will be saved in a products/ subfolder within your MEDIA_ROOT.
    • null=True: Allows the database field to be empty (no image uploaded).
  • models.PositiveIntegerField(default=0): For positive whole numbers, like stock quantities. default=0 sets its initial value.
  • models.BooleanField(default=True): For true/false values, useful for showing if a product is currently available.
  • models.DateTimeField(auto_now_add=True): Automatically sets the date and time when the product is first created.
  • models.DateTimeField(auto_now=True): Automatically updates the date and time whenever the product is modified.
  • __str__(self) method: This is a Python special method that defines how an object is represented as a string. When you print a Product object or view it in the admin, it will show its name.
  • class Meta: Used to add options to the model, like ordering which specifies the default order for query results.

Making Database Migrations

After defining your Product model, you need to tell Django to create the corresponding table in your database. This is done through migrations.

  1. Create Migration Files:
    bash
    python manage.py makemigrations
    This command tells Django to “detect” the changes you’ve made to your models.py file and create a Python file (in products/migrations/) that describes these changes.

  2. Apply Migrations to the Database:
    bash
    python manage.py migrate
    This command applies all pending migrations (including Django’s built-in ones for users, sessions, etc., and your new products app migration) to your database. This actually creates the tables in your database.

Setting Up the Admin Interface

One of Django’s most loved features is its automatic admin interface. It’s a powerful tool to manage your site’s content without writing any HTML forms or views.

1. Create a Superuser

To access the admin panel, you need an administrator account (a “superuser”).

python manage.py createsuperuser

Follow the prompts to enter a username, email address, and password.

2. Register Your Product Model with the Admin

Open products/admin.py and register your Product model:

from django.contrib import admin
from .models import Product

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    list_display = ('name', 'price', 'stock', 'available', 'created', 'updated')
    list_filter = ('available', 'created', 'updated')
    list_editable = ('price', 'stock', 'available')
    search_fields = ('name', 'description')

Explanation of Admin Options:

  • @admin.register(Product): This is a decorator that registers your Product model with the admin site.
  • list_display: Controls which fields are displayed as columns on the change list page (the list of products).
  • list_filter: Adds filter options to the sidebar on the change list page.
  • list_editable: Allows you to edit certain fields directly from the change list page.
  • search_fields: Adds a search box that searches across the specified fields.

3. Access the Admin Panel

Run the development server again:

python manage.py runserver

Open your browser and navigate to http://127.0.0.1:8000/admin/. Log in with the superuser credentials you just created. You should now see “Products” under the “PRODUCTS” section. Click on it, then “Add Product” to start adding items to your store!

Displaying Products (Views & Templates)

Now that you can add products, let’s make them visible to your website visitors. This involves creating Views to handle requests and Templates to display the data.

1. Create Views

Open products/views.py and add the following:

from django.shortcuts import render, get_object_or_404
from .models import Product

def product_list(request):
    """
    Displays a list of all available products.
    """
    products = Product.objects.filter(available=True)
    return render(request, 'products/product_list.html', {'products': products})

def product_detail(request, pk):
    """
    Displays the details of a single product.
    """
    product = get_object_or_404(Product, pk=pk, available=True)
    return render(request, 'products/product_detail.html', {'product': product})

Explanation of Views:

  • from django.shortcuts import render, get_object_or_404:
    • render: A shortcut function to combine a given template with a dictionary of context values and return an HttpResponse object.
    • get_object_or_404: A shortcut to fetch an object from the database, or raise an Http404 error if it doesn’t exist.
  • product_list(request):
    • products = Product.objects.filter(available=True): This retrieves all Product objects from the database where available is True. Product.objects is Django’s Object-Relational Mapper (ORM), which allows you to interact with your database using Python code instead of raw SQL.
    • return render(...): Renders the product_list.html template, passing the products list to it.
  • product_detail(request, pk):
    • pk (primary key): This parameter will capture the ID of the product from the URL.
    • product = get_object_or_404(Product, pk=pk, available=True): Fetches a single product by its ID, ensuring it’s also available.

2. Define URLs for Your App

Now, let’s map URLs to these views. Create a new file inside your products folder called urls.py.

from django.urls import path
from . import views

app_name = 'products' # This helps Django distinguish between URLs of different apps

urlpatterns = [
    path('', views.product_list, name='product_list'),
    path('<int:pk>/', views.product_detail, name='product_detail'),
]

Explanation of App URLs:

  • app_name = 'products': This is important for URL namespacing. It means you can refer to products:product_list or products:product_detail from other parts of your project, avoiding conflicts if another app also has a product_list URL.
  • path('', views.product_list, name='product_list'): Maps the root of the products URL (e.g., /products/) to the product_list view.
  • path('<int:pk>/', views.product_detail, name='product_detail'): Maps URLs like /products/1/ or /products/5/ to the product_detail view. <int:pk> is a path converter that captures an integer (the primary key of the product) from the URL.

3. Include App URLs in Project URLs

Your main project myshop/urls.py needs to know about your app’s URLs. Open myshop/urls.py and modify it:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static # Import static function

urlpatterns = [
    path('admin/', admin.site.urls),
    path('products/', include('products.urls')), # Include your app's URLs
    # You could also set the root path to your product list:
    # path('', include('products.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Explanation of Project URLs:

  • path('products/', include('products.urls')): This line tells Django that any URL starting with /products/ should be handled by the urls.py file inside your products app.
  • from django.conf.urls.static import static and if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT): This is a special configuration only for development that allows Django to serve uploaded media files (like your product images). In production, you would use a dedicated web server (like Nginx) for this.

4. Configure Media Files in settings.py

For image uploads to work, you need to tell Django where to store them and how they can be accessed. Add these lines to the very end of your myshop/settings.py file:

import os # Ensure this import is at the top if not already there

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Explanation of Media Settings:

  • MEDIA_URL: The public URL that will be used to access your uploaded files (e.g., http://127.0.0.1:8000/media/products/myimage.jpg).
  • MEDIA_ROOT: The absolute path to the directory where your uploaded files will be stored on your file system. os.path.join(BASE_DIR, 'media') creates a media folder at the root of your project.

5. Create Templates

Finally, let’s create the HTML templates to display our products.

  1. Create a templates directory inside your products app:
    bash
    my-ecommerce-shop/
    ├── products/
    │ ├── templates/
    │ │ └── products/
    │ │ ├── product_list.html
    │ │ └── product_detail.html
    # ...
    (Note: It’s good practice to create another products folder inside templates to prevent template name collisions between apps).

  2. Create products/templates/products/product_list.html:

    “`html

    <!DOCTYPE html>




    Our Simple Shop Products


    Welcome to Our Simple Shop!

    <div class="product-grid">
    {% for product in products %}
        <div class="product-item">
            {% if product.image %}
                <img src="{{ product.image.url }}" alt="{{ product.name }}">
            {% else %}
                <img src="https://via.placeholder.com/200x200?text=No+Image" alt="No image available">
            {% endif %}
            <h3><a href="{% url 'products:product_detail' product.pk %}">{{ product.name }}</a></h3>
            <p class="price">${{ product.price }}</p>
            {% if product.stock > 0 %}
                <p class="stock-status">In Stock ({{ product.stock }} available)</p>
            {% else %}
                <p class="stock-status out-of-stock">Out of Stock</p>
            {% endif %}
        </div>
    {% endfor %}
</div>
{% if not products %}
    <p style="text-align: center; margin-top: 50px; font-size: 1.2em;">No products currently available.</p>
{% endif %}



    “`

  3. Create products/templates/products/product_detail.html:

    html
    <!-- products/templates/products/product_detail.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ product.name }}</title>
    <style>
    body { font-family: 'Arial', sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
    .container {
    max-width: 900px;
    margin: 30px auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 30px;
    }
    .back-link {
    display: inline-block;
    margin-bottom: 25px;
    padding: 10px 15px;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    }
    .back-link:hover {
    background-color: #5a6268;
    }
    .product-detail {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 30px;
    align-items: flex-start;
    }
    .product-detail img {
    max-width: 100%;
    width: 400px; /* Max width for image container */
    height: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0; /* Prevent image from shrinking */
    }
    .product-info {
    flex-grow: 1;
    min-width: 300px; /* Minimum width for info block before wrapping */
    }
    .product-info h1 {
    margin-top: 0;
    font-size: 2.5em;
    color: #333;
    margin-bottom: 15px;
    }
    .product-info .price {
    font-size: 1.8em;
    font-weight: bold;
    color: #28a745;
    margin-bottom: 20px;
    }
    .product-info .stock {
    font-size: 1.1em;
    margin-bottom: 20px;
    }
    .product-info .stock.out-of-stock {
    color: #dc3545;
    font-weight: bold;
    }
    .product-info .description {
    line-height: 1.7;
    color: #555;
    font-size: 1.05em;
    }
    /* Responsive adjustments */
    @media (max-width: 768px) {
    .product-detail {
    flex-direction: column;
    align-items: center;
    }
    .product-detail img {
    width: 100%;
    max-width: 400px;
    }
    .product-info {
    text-align: center;
    }
    }
    </style>
    </head>
    <body>
    <div class="container">
    <a href="{% url 'products:product_list' %}" class="back-link">← Back to Products</a>
    <div class="product-detail">
    {% if product.image %}
    <img src="{{ product.image.url }}" alt="{{ product.name }}">
    {% else %}
    <img src="https://via.placeholder.com/400x400?text=No+Image" alt="No image available">
    {% endif %}
    <div class="product-info">
    <h1>{{ product.name }}</h1>
    <p class="price">${{ product.price }}</p>
    <p class="stock {% if product.stock == 0 %}out-of-stock{% endif %}">
    {% if product.stock > 0 %}
    In Stock: {{ product.stock }} items
    {% else %}
    Out of Stock
    {% endif %}
    </p>
    <p class="description">{{ product.description }}</p>
    <!-- Add to cart button or other e-commerce features would go here -->
    </div>
    </div>
    </div>
    </body>
    </html>

Explanation of Templates (Django Template Language):

  • {% for product in products %} … {% endfor %}: This is a Django template tag for looping through a list (our products list passed from the view).
  • {{ product.name }}: This is a Django template variable. It displays the name attribute of the current product object.
  • {% if product.image %} … {% endif %}: Conditional logic to check if a product has an image.
  • {{ product.image.url }}: Accesses the URL of the uploaded image.
  • {% url 'products:product_detail' product.pk %}: This is another powerful template tag that dynamically generates a URL based on its name and parameters. It’s much better than hardcoding URLs, as it automatically updates if your URL patterns change.

Test Your Simple E-commerce Site!

  1. Make sure your development server is running: python manage.py runserver
  2. Open your browser and navigate to http://127.0.0.1:8000/admin/.
  3. Add a few products with names, descriptions, prices, stock, and images.
  4. Now, visit http://127.0.0.1:8000/products/. You should see your list of products!
  5. Click on a product to see its detail page.

Congratulations! You’ve successfully built a basic e-commerce site with Django, allowing you to display products and their individual details.

What’s Next? Expanding Your E-commerce Site

This is just the beginning! A real e-commerce site needs much more. Here are some ideas for where you can go from here:

  • User Authentication: Allow users to register, log in, and manage their profiles.
  • Shopping Cart: Implement functionality for users to add products to a cart.
  • Order Processing: Create models for orders and order items, and a way to process them.
  • Payment Gateway Integration: Connect with services like Stripe or PayPal to handle secure online payments.
  • Search and Filters: Add features to help users find products more easily.
  • User Reviews and Ratings: Allow customers to leave feedback on products.
  • Front-end Styling: Use CSS frameworks like Bootstrap or Tailwind CSS to make your site look professional and responsive.
  • Deployment: Learn how to deploy your Django application to a live server so others can access it.

Conclusion

You’ve taken a significant step in your web development journey! By following this guide, you’ve learned how to set up a Django project, create models, manage data with the admin panel, and display information using views and templates. This foundational knowledge is invaluable for building any kind of web application with Django. Keep exploring, keep building, and don’t hesitate to dive into Django’s excellent official documentation for deeper insights!

Comments

Leave a Reply

More posts