- \n
- Develop a user-friendly interface for browsing electronic products.<\/li>\n
- Implement functionality for adding products to a cart.<\/li>\n
- Provide users with the ability to proceed to checkout.<\/li>\n
- Ensure data security and privacy in handling product and user information.<\/li>\n<\/ul>\n
Project Setup<\/h3>\n
Required Libraries<\/h4>\n
The project requires the following Python libraries:<\/strong><\/p>\n
- \n
- Django<\/strong>: For a web framework and ORM.<\/li>\n
- SQLite<\/strong>: For database management.<\/li>\n
- Bootstrap<\/strong>: For responsive design and styling.<\/li>\n<\/ul>\n
Technology Stack<\/h4>\n
- \n
- Python<\/li>\n
- Django<\/li>\n
- SQLite (default database)<\/li>\n
- HTML\/CSS<\/li>\n
- JavaScript<\/li>\n
- Bootstrap<\/li>\n<\/ul>\n
Project Prerequisites<\/h4>\n
- \n
- Basic understanding of Python programming.<\/li>\n
- Familiarity with Django framework.<\/li>\n
- Knowledge of HTML\/CSS for template design.<\/li>\n<\/ul>\n
Download the Python Django Online Electronic Store Project<\/h3>\n
Please download the source code of the Python Django Online Electronic Store Project: Python Django Online Electronic Store Project Code.<\/strong><\/a><\/p>\n
Step-by-Step Code Implementation of Django Online Electronic Store<\/h3>\n
1. Project Initialization<\/h4>\n
- \n
- The first command initializes a new Django project named electronic_store.<\/strong><\/li>\n
- Second command changes the directory to the project folder.<\/li>\n
- The third command initializes a new Django app named store in the same directory. It sets up the basic structure for the project.<\/li>\n<\/ul>\n
django-admin startproject electronic_store\r\ncd electronic_store\r\npython manage.py startapp store<\/pre>\n
2. Setting Up Models<\/h4>\n
- \n
- The Category<\/strong> model has a name field with a maximum length of 255 characters.<\/li>\n
- The Product<\/strong> model includes the following fields: name, description, price, image, and category. The category field associates each product with a specific category.<\/li>\n
- The Cart<\/strong> model is linked to the User model and contains a many-to-many relationship with the Product model.<\/li>\n<\/ul>\n
from django.db import models\r\nfrom django.contrib.auth.models import User\r\n\r\n\r\nclass Category(models.Model):\r\n name = models.CharField(max_length=255)\r\n\r\n\r\n def __str__(self):\r\n return self.name\r\n\r\n\r\nclass Product(models.Model):\r\n name = models.CharField(max_length=255)\r\n description = models.TextField()\r\n price = models.DecimalField(max_digits=10, decimal_places=2)\r\n image = models.ImageField(upload_to='products\/')\r\n category = models.ForeignKey(Category, on_delete=models.CASCADE)\r\n\r\n\r\n def __str__(self):\r\n return self.name\r\n\r\n\r\nclass Cart(models.Model):\r\n user = models.ForeignKey(User, on_delete=models.CASCADE)\r\n products = models.ManyToManyField(Product, through='CartItem')\r\n\r\n\r\nclass CartItem(models.Model):\r\n cart = models.ForeignKey(Cart, on_delete=models.CASCADE)\r\n product = models.ForeignKey(Product, on_delete=models.CASCADE)\r\n quantity = models.PositiveIntegerField(default=1)\r\n<\/pre>\n
3. Making Migrations<\/h4>\n
- \n
- makemigrations<\/strong>: Makes migrations based on the changes detected in the models. Migrations are how Django stores changes to the models.<\/li>\n
- migrate<\/strong>: This command applies the migrations to the database, creating the tables and columns.<\/li>\n<\/ul>\n
python3 manage.py makemigrations store\r\npython3 manage.py migrate\r\n<\/pre>\n
4. Defining Views<\/h4>\n
- \n
- The home_view<\/strong> function retrieves all products from the Product model and renders them on the ‘home.html’ template.<\/li>\n
- The add_to_cart<\/strong> function requires the user to be logged in and handles adding products to the cart. It retrieves the specified product.<\/li>\n
- The cart_view<\/strong> function also requires a login and retrieves the current user’s cart and its items. It calculates the total cost of items in the cart and renders the ‘cart.html’ template.<\/li>\n
- The checkout_view<\/strong> function renders the ‘checkout.html’ template.<\/li>\n<\/ul>\n
from django.shortcuts import render, redirect, get_object_or_404\r\nfrom .models import Product, Cart, CartItem\r\nfrom django.contrib.auth.decorators import login_required\r\n\r\n\r\ndef home_view(request):\r\n products = Product.objects.all()\r\n return render(request, 'home.html', {'products': products})\r\n\r\n\r\n@login_required\r\ndef add_to_cart(request, product_id):\r\n product = get_object_or_404(Product, id=product_id)\r\n cart, created = Cart.objects.get_or_create(user=request.user)\r\n cart_item, created = CartItem.objects.get_or_create(cart=cart, product=product)\r\n if not created:\r\n cart_item.quantity += 1\r\n cart_item.save()\r\n return redirect('cart')\r\n\r\n\r\n@login_required\r\ndef cart_view(request):\r\n cart = Cart.objects.get(user=request.user)\r\n cart_items = cart.cartitem_set.all()\r\n total = sum(item.product.price * item.quantity for item in cart_items)\r\n return render(request, 'cart.html', {'cart': cart_items, 'total': total})\r\n\r\n\r\ndef checkout_view(request):\r\n return render(request, 'checkout.html')\r\n<\/pre>\n5. Setting URLs<\/h4>\n
- \n
- The path(‘ ‘, home_view, name=’home’)<\/strong> pattern routes the root URL to the home_view<\/strong> function. This is the homepage of the store, displaying all products.<\/li>\n
- The path add_to_cart<\/strong> maps the ‘add_to_cart’ URL with a product ID to the add_to_cart function. This handles adding products to the user’s cart.<\/li>\n
- The path cart<\/strong> pattern routes the ‘cart’ URL to the cart_view function, displaying the user’s cart.<\/li>\n<\/ul>\n
from django.urls import path\r\nfrom .views import checkout_view, home_view, add_to_cart, cart_view\r\n\r\n\r\nurlpatterns = [\r\n path('', home_view, name='home'),\r\n path('add_to_cart\/<int:product_id>\/', add_to_cart, name='add_to_cart'),\r\n path('cart\/', cart_view, name='cart'),\r\n path('checkout\/', checkout_view, name='checkout'),\r\n]\r\n<\/pre>\n6. Creating Templates<\/h4>\n
base.html:<\/strong><\/p>\n
- \n
- The {% block title %}<\/strong> and {% block extra_head %} template tags allow child templates to insert their own title and additional head content, ensuring flexibility.<\/li>\n
- The navigation bar includes links to the home and cart pages, using the\u00a0{% url ‘home’ %}<\/strong>\u00a0and\u00a0{% url ‘cart’ %}<\/strong> template tags to dynamically generate URLs.<\/li>\n
- The main content area is wrapped in a Bootstrap container class. The {% block content %}<\/strong> template tag allows child templates to insert their own main content within this structure.<\/li>\n<\/ul>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>{% block title %}Electronic Store{% endblock %}<\/title>\r\n <link href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n padding-top: 56px;\r\n }\r\n .product-card {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n }\r\n .product-card img {\r\n height: 200px;\r\n object-fit: cover;\r\n }\r\n .product-card .card-body {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n }\r\n <\/style>\r\n {% block extra_head %}{% endblock %}\r\n<\/head>\r\n<body>\r\n <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark fixed-top\">\r\n <a class=\"navbar-brand\" href=\"{% url 'home' %}\">Dataflair@Electronic Store<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarResponsive\" aria-controls=\"navbarResponsive\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarResponsive\">\r\n <ul class=\"navbar-nav ml-auto\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"{% url 'home' %}\">Home<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"{% url 'cart' %}\">Cart<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/nav>\r\n\r\n\r\n <div class=\"container\">\r\n {% block content %}{% endblock %}\r\n <\/div>\r\n\r\n\r\n <script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.5.4\/dist\/umd\/popper.min.js\"><\/script>\r\n <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nhome.html:<\/strong><\/p>\n
- \n
- The {% block content %}<\/strong> uses a Bootstrap grid system to display products in a row.<\/li>\n
- Each product is displayed as a Bootstrap card, featuring an image, title, description, and price. The product.image.url dynamically fetches the product image.<\/li>\n
- An Add to Cart<\/strong> button is included for each product, linking to the add_to_cart view using {% url ‘add_to_cart’ product.id %} to handle adding products.<\/li>\n<\/ul>\n
{% extends 'base.html' %}\r\n{% block title %}Home{% endblock %}\r\n{% block content %}\r\n<div class=\"row\">\r\n {% for product in products %}\r\n <div class=\"col-md-4\">\r\n <div class=\"card mb-4 shadow-sm product-card\">\r\n <img src=\"{{ product.image.url }}\" class=\"card-img-top\" alt=\"{{ product.name }}\">\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">{{ product.name }}<\/h5>\r\n <p class=\"card-text\">{{ product.description }}<\/p>\r\n <p class=\"card-text\"><strong>Rs. {{ product.price }}<\/strong><\/p>\r\n <a href=\"{% url 'add_to_cart' product.id %}\" class=\"btn btn-primary\">Add to Cart<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n {% endfor %}\r\n<\/div>\r\n{% endblock %}\r\n<\/pre>\ncart.html:<\/strong><\/p>\n
- \n
- The {% block content %}<\/strong> displays the shopping cart within a Bootstrap container. If the cart is not empty, it shows a card with a list of items.<\/li>\n
- Each cart item is listed with the product’s name, price, and quantity. The total cost is calculated and displayed at the bottom.<\/li>\n
- A Checkout<\/strong> button is provided, linking to the checkout view\u00a0using the\u00a0{% url ‘checkout’ %}<\/strong> template tag.<\/strong><\/li>\n<\/ul>\n
{% extends 'base.html' %}\r\n\r\n\r\n{% block title %}Cart{% endblock %}\r\n\r\n\r\n{% block content %}\r\n<div class=\"container mt-5\">\r\n <h2>Shopping Cart<\/h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n {% if cart %}\r\n <div class=\"card mb-4 shadow-sm\">\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">Your Cart<\/h5>\r\n <ul class=\"list-group\">\r\n {% for item in cart %}\r\n <li class=\"list-group-item d-flex justify-content-between align-items-center\">\r\n <div>{{ item.product.name }} - ${{ item.product.price }}<\/div>\r\n <span class=\"badge badge-primary badge-pill\">{{ item.quantity }}<\/span>\r\n <\/li>\r\n {% endfor %}\r\n <\/ul>\r\n <div class=\"mt-3\">\r\n <strong>Total: ${{ total }}<\/strong>\r\n <\/div>\r\n <a href=\"{% url 'checkout' %}\" class=\"btn btn-primary mt-3\">Checkout<\/a>\r\n <\/div>\r\n <\/div>\r\n {% else %}\r\n <p>Your cart is empty.<\/p>\r\n {% endif %}\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n{% endblock %}<\/pre>\ncheckout.html:<\/strong><\/p>\n
- \n
- The {% block content %}<\/strong> displays a container with a heading “Checkout” and a placeholder paragraph for the checkout process.<\/li>\n
- The design follows the layout established in base.html, ensuring consistency across the site’s pages.<\/li>\n<\/ul>\n
{% extends 'base.html' %}\r\n\r\n\r\n{% block title %}Checkout{% endblock %}\r\n\r\n\r\n{% block content %}\r\n<div class=\"container mt-5\">\r\n <h2>Checkout<\/h2>\r\n <p>This is a placeholder for the checkout process.<\/p>\r\n<\/div>\r\n{% endblock %}\r\n<\/pre>\nDjango Online Electronic Store Output<\/h3>\n
1. Application Interface<\/strong><\/p>\n
![\"application](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2025\/10\/application-interface-1.webp\")
<\/a><\/p>\n2. Shopping Cart Page<\/strong><\/p>\n
![\"shopping](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2025\/10\/shopping-cart.webp\")
<\/a><\/p>\n3. Admin Login Page<\/strong><\/p>\n
![\"admin](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2025\/10\/admin-login-page.webp\")
<\/a><\/p>\n4. Administrative Page<\/strong><\/p>\n
![\"administrative](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2025\/10\/administrative-page-1.webp\")
<\/a><\/p>\n5. Admin Product Page<\/strong><\/p>\n
![\"admin](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2025\/10\/admin-product-page.webp\")
<\/a><\/p>\n6. Admin Category Page<\/strong><\/p>\n
- The design follows the layout established in base.html, ensuring consistency across the site’s pages.<\/li>\n<\/ul>\n
- The navigation bar includes links to the home and cart pages, using the\u00a0{% url ‘home’ %}<\/strong>\u00a0and\u00a0{% url ‘cart’ %}<\/strong> template tags to dynamically generate URLs.<\/li>\n
- The path add_to_cart<\/strong> maps the ‘add_to_cart’ URL with a product ID to the add_to_cart function. This handles adding products to the user’s cart.<\/li>\n
- The add_to_cart<\/strong> function requires the user to be logged in and handles adding products to the cart. It retrieves the specified product.<\/li>\n
- migrate<\/strong>: This command applies the migrations to the database, creating the tables and columns.<\/li>\n<\/ul>\n
- The Product<\/strong> model includes the following fields: name, description, price, image, and category. The category field associates each product with a specific category.<\/li>\n
- The first command initializes a new Django project named electronic_store.<\/strong><\/li>\n
- SQLite<\/strong>: For database management.<\/li>\n
- Django<\/strong>: For a web framework and ORM.<\/li>\n
![\"admin](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2025\/10\/admin-category-page.webp\")
<\/a><\/p>\n![\"add](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2025\/10\/add-category.webp\")
<\/a><\/p>\n![\"add](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2025\/10\/add-product.webp\")
<\/a><\/h3>\n