E-Commerce Website using Django with Source Code

E-Commerce Website using Django with Source Code

E-Commerce Website using Django is based on a basic shopping site where client can purchase all the items and perform a checkout for their order. This E-Commerce Website has utilizes information base to store all the items in the database. This system has an admin and the admin can manage user, manage product, manage categories and manage customers order.

To start creating a E-Commerce Website using Django framework, makes sure that you have PyCharm Professional IDE Installed in your computer.

This E-Commerce Website using Django also includes a Download Source Code for free, just find the downloadable source code below and click download now.

About ProjectProject DetailsDefinition
Project Name E-Commerce Website using DjangoThe E-Commerce Website using Django is created using Python Django Framework. The system is built fully in Django Framework in back-end and HTML, CSS in front-end. Django is a high-level Python Web framework encouraging rapid development and pragmatic, clean design.
Python version (Recommended)3.8 VersionPython 3.8 introduces some new syntax to the language, as well as a few small modifications to existing behavior and, most importantly, a slew of performance improvements, following in the footsteps of the previous 3.7 version.
Programming Language UsedPython Django LanguageDjango is a high-level Python web framework for building safe and maintainable websites quickly. Django is a web framework built by experienced developers that takes care of a lot of the heavy lifting so you can focus on developing your app instead of reinventing the wheel.
Developer Name itsourcecode.comFree projects containing source code in Java, PHP, Python, Django, VB.Net, Visual Basic, C, C++, C#, Javascript, and other languages are available on this website.
IDE Tool (Recommended)Sublime, Visual Studio, PyCharmSublime Text is a source code editor that is available for purchase. It comes with built-in support for a variety of programming and markup languages. Plugins, which are often community-built and maintained under free-software licenses, allow users to extend the functionality of the system. Sublime Text has a Python API to help with plugins.
Project Type Web ApplicationA web application, unlike computer-based software programs that operate locally on the device’s operating system, is application software that runs on a web server. The user uses a web browser with an active network connection to access web apps.
DatabaseSQLiteSQLite is a programming language that is used to create embedded software for devices such as televisions, cell phones, and cameras. It can handle HTTP requests with low to medium traffic. SQLite has the ability to compress files into smaller bundles with less metadata. SQLite is a temporary dataset that is used within an application to process data.
E-Commerce Website using Django Overview

Reminders

Ecommerce in NodeJS and MySQL with ...
Ecommerce in NodeJS and MySQL with Source Code (Free Download)

To perform this python Django project make sure that you have knowledge in the following:

  • CSS
  • HTML
  • JavaScript
  • Database Management

Features of E-Commerce Website using Django

E-Commerce Website using Django with Source Code Features for Admin Side

  • Dashboard – For the admin dashboard, you will be able to all the basic access in the whole system. Such as products, orders, users and categories.
  • Manage Products – The admin has access to the product management information system. He can add, update and delete the product.
  • Manage Orders – As the main functions of the admin, the admin can see if the order is already paid or not from the customers on a case to case basis.
  • Manage Categories – For the categories, the admin has the features of managing the category. The example category used in this system is Snacks, Fruits, and Vegetables.
  • Manage Users – The admin can manage the user’s account. Admin can add, update and delete users in the system.
  • Login and Logout – By default one of the security features of this system is the secure login and logout system.

For Frontend Features of this E-Commerce Website using Django

Basically, the frontend side of the system refers to the main website of the whole system.

The frontend of this E-Commerce Website using Django has these basic features of the website.

  • Home Page – On the home page, you can see directly the list of products for sale and you can filter the result based according to category.
  • Viewing Products – by default on the frontend, the customer can automatically view all the products.
  • Checkout Order – The customer can checkout order in the frontend that can confirmed by the admin in the backend.
  • Customers Profile – In the frontend, the customer can register their profile. In short, this system has a customer management system feature.
  • Add to Cart– One of the features of this system is that, wherein the customer can temporarily add their order in the add to cart.

Steps on how to create a E-Commerce Website using Django With Source Code

E-Commerce Website using Django With Source Code

  • Step 1: Open file.

    First , open “pycharm professional” after that click “file” and click “new project“.Creating New Project for E-Commerce Website using Django With Source Code

  • Step 2: Choose Django.

    Second, after click “new project“, choose “Django” and click.Choosing django for Creating New Project for E-Commerce Website using Django With Source Code

  • Step 3: Select file location.

    Third, select a file location wherever you want.create location name for E-Commerce Website using Django With Source Code

  • Step 4: Create application name.

    Fourth, name your application.create application name for E-Commerce Website using Django With Source Code

  • Step 5: Click create.

    Fifth, finish creating project by clicking “create” button.finish creating project for E-Commerce Website using Django With Source Code

  • Step 6: Start Coding.

    In this final step, we will now start adding functionality to our Django Framework by adding some functional codes.

This are the module to add functionality for E-Commerce Website using Django

  • Create template for the cart in E-Commerce Website using Django.

In this section, we will learn on how create a templates for the cart. To start with, add the following code in your detail.html under the folder of cart/templates/cart files.

{% extends 'shop/base.html' %}
{% load static %}
{% block title %}
Your Shopping Cart
{% endblock %}


{% block content %}
<div class="container">
<div class="row" style="margin-top: 6%">
<h2>Your Shopping Cart
<span class="badge pull-right">
{% with totail_items=cart|length %}
{% if cart|length > 0 %}
My Shopping Order:
<a href="{% url "cart:cart_detail" %}" style="color: green">
{{ totail_items }} item {{ totail_items|pluralize }}, P{{ cart.get_total_price }}
</a>
{% else %}
Your cart is empty.
{% endif %}
{% endwith %}
</span>
</h2>
<table class="table table-striped table-hover">
<thead style="background-color: navajowhite">
<tr>
<th>Image</th>
<th>Product</th>
<th>Quantity</th>
<th>Remove</th>
<th>Unit Price</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{% for item in cart %}
{% with product=item.product %}
<tr>
<td>
<a href="{{ product.get__absolute_url }}">
<img src="{% if product.image %} {{ product.image.url }} {% else %} {% static 'img/default.jpg' %} {% endif %}" alt="..." style="height: 130px; width: auto">
</a>
</td>
<td>{{ product.name }}</td>
<td>
<form action="{% url "cart:cart_add" product.id %}" method="post">
{% csrf_token %}
{{ item.update_quantity_form.quantity }}
{{ item.update_quantity_form.update }}
<input type="submit" value="Update" class="btn btn-warning" >
</form>
</td>
<td>
<a style="color: red" href="{% url "cart:cart_remove" product.id %}">Remove</a>
</td>
<td>P{{ item.price }}</td>
<td>P{{ item.total_price }}</td>
</tr>
{% endwith %}
{% endfor %}
<tr style="background-color: navajowhite">
<td><b>Total</b></td>
<td colspan="4"></td>
<td colspan="num"><b>P{{ cart.get_total_price }}</b></td>
</tr>
</tbody>
</table>
<p class="text-right">
<a href="{% url "shop:product_list" %}" class="btn btn-default">Continue Shopping</a>
<a href="{% url "orders:order_create" %}" class="btn btn-warning">Checkout</a>
</p>
</div>
</div>
{% endblock %}

After adding the code, you may click the run button to test the code. The output should look like as shown below.

  • Create template for the order in E-Commerce Website using Django.

In this section, we will learn on how create a templates for the order. To start with, add the following code in your create.html under the folder of orders/order/order files.

{% extends 'shop/base.html' %}
{% load static %}
{% block title %}
Your Shopping Cart| Checkout
{% endblock %}

{% block content %}
<div class="container">
<div class="row" style="margin-top: 6%">
<div class="col-md-8">
<h4 class="page-header">Checkout</h4>
<form action="." method="post">
{% csrf_token %}
{{ form.as_p }}<br>
<input type="submit" class="btn btn-primary" value="Submit order">
</form>
</div>
<div class="col-md-4">
<div class="page-header">
Your Order
</div>
<ul class="list-group">
{% for item in cart %}
<li class="list-group-item">
{{ item.quantity }}x {{ item.product.name }}
<span> P{{ item.total_price }}</span>
</li>
{% endfor %}

<li class="list-group-item active">Total Cost: P{{ cart.get_total_price }}</li>
</ul>

</div>
</div>
</div>
{% endblock %}

After adding the code, you may click the run button to test the code. The output should look like as shown below.

  • Create template for the navigation bar in E-Commerce Website using Django.

In this section, we will learn on how create a templates for the navigation bar. To start with, add the following code in your navbar.html under the folder of shop/templates/shop files.

{% load static %}
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0px; background-color: darkblue;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header">

<a class="navbar-brand" href="{% url 'shop:product_list' %}" style="color: whitesmoke">EVANZ WEBSITE BUSINESS</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
{% if request.user.is_authenticated %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #ffffff">{{ request.user.username }}<b class="caret"></b></a>

{% endif %}
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>

After adding the code, you may click the run button to test the code. The output should look like as shown below.

  • Create template for the homepage in E-Commerce Website using Django.

In this section, we will learn on how create a templates for the homepage. To start with, add the following code in your base.html under the folder of shop/templates/shop files.

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}On-line Shop{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body style="background-color: navajowhite">
{% include 'shop/navbar.html' %}

<div class="container">
<div class="row" style="margin-top: 6%">
<button class="btn btn-danger pull-right">
{% with totail_items=cart|length %}
{% if cart|length > 0 %}
My Shopping Order:
<a href="{% url "cart:cart_detail" %}" style="color: white">
{{ totail_items }} item {{ totail_items|pluralize }}, P{{ cart.get_total_price }}
</a>
{% else %}
Your cart is empty.
{% endif %}
{% endwith %}
</button>
</div>
</div>
{% block content %}


{% endblock %}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

After adding the code, you may click the run button to test the code. The output should look like as shown below.

Downloadable Source Code Below.

Anyway, if you want to level up your programming knowledge, especially python, try this new article I’ve made for you Best Python Projects with source code for Beginners. But If you’re going to focus on web development using Django, you can download here from our list of Best Django Projects with source code based on real-world projects.

How To Run The E-Commerce Website using Django with Source Code?

Step 1: Extract/unzip the file
Step 2: Go inside the project folder, open cmd and type the following commands to install Django Framework and run the webserver:
• pip install Django Pillow
• python manage.py runserver
Step 3: Finally, open the browser and go to http://127.0.0.1:8000/

For admin panel:

  • Username: admin
  • Password: admin

Summary

In summary, this 2020 E-Commerce Website using Django with Source Code can be useful to students or professional who wants to learn python programming language. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy Coding!

Inquiries

If you have any questions or suggestions about E-Commerce Website using Django with Source Code, please feel free to leave a comment below.

5 thoughts on “E-Commerce Website using Django with Source Code”

Leave a Comment