Django project – Creating a Basic E-commerce Website for Displaying Products

Project Title – Basic Ecommerce Website using Django 

Django is a powerful framework based on python. Here we will see how to create a basic e-commerce website in Django. This project includes storing products in the database and show them on the website. 

Refer to the following articles to check how to create a project and an app in Django.

• How to Create a Basic Project using MVT in Django?
• How to Create an App in Django ?

How to Create a Basic Ecommerce Website using Django?

Now when you have successfully installed Django. Create a new project – 

django-admin startproject ecom 

Now create a new app called frontend inside the ecom project. Now we have 1 project and 1 app inside of that project.]

django-admin startapp frontend

Directory structure – 
 

Creating URLs – 

In ecom> urls.py add the following lines. This file handles main project URLs. But we don’t want to disturb it, so we will do our work in frontend > URLs.py. And for that we need to include frontend > URLs inside the ecom> URLs. 

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('frontend.urls')),
]

Creating Models – 

Add a product model here.
 

class Product(models.Model):
    productname = models.CharField(max_length=200)
    price = models.DecimalField(max_digits=5, decimal_places=2)
    description = models.TextField()
    image = models.CharField(max_length=5000, null=True, blank=True)

To know more about Django models, check out – Django Models

Register Models into admin – 

Just after creating model, we should register that form into admin.py.
 

from django.contrib import admin
from .models import *


admin.site.register(Product)

Creating Views for Displaying Products – 

In frontend > views.py we write a function to get and display products from our database. 

from django.shortcuts import render
from .models import *

def products(request):
    products = Product.objects.all()
    return render(request, 'products.html', {'products':products})

Creating Url for products – 

 Here we will set dynamic URL which can be useful to display our products. In frontend > urls.py

from django.urls import path
from . import views

urlpatterns = [

    path('products/', views.products, name='products'),

]

Creating Template – 

Creating template depends upon how you want to display products on website. For displaying products we have shared a simple code. Add it in frontend > templates > products.html

{% for product in products %}
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="{{ product.image }}" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">{{ product.productname }}</h5>
    <p class="card-text">{{ product.description }}</p>
    <p class="card-text">Price - {{ product.price }}</p>
    <a href="#" class="btn btn-primary">Buy Now</a>
  </div>
</div>
{% endfor %}

Makemigrations and Migrate –

Now its time to migrate our model into database. First, we have to create migrations. For that type following code into terminal.

python manage.py makemigrations

After creating migrations type following code to apply those migrations

python manage.py migrate

To know more about makemigrations and migrate, check out – Basic App Model – Makemigrations and Migrate

Creating Superuser – 

Now, create Django superuser for handling admin stuff. Type following command in terminal
 

django-admin createsuperuser

Then it will ask for username, email and password. 

Run the app 

After creating superuser, in terminal type,

python manage.py runserver

  to start the server and go to admin panel (http://localhost:8000/admin) and add some products to the database.

Output – 

Thats it. Your basic eCommerce site is ready where you can display your products