django - Creating E-commerce website with apps setups

Here, We will be creating a django E-commerce project named "myEcommerceSite" with 2 apps named "shop" and "blog" within it.

Django Apps :

• Apps in Django are pluggable web applications.
• Django apps are the self-sufficient sub module of a project. A project can contain more than one apps, and an app can be used in more than one project.

Follow the below steps:

Step 1: Click on File and then select New Project.

Step 2: After clicking on New Project, a pop-up window will appear. Select the location(PycharmProjects folder recommended) and name the file as myEcommerceSite

Step3: Start the project

C:\Users\Srinanda\Desktop\python\djangoCodeSource\myEcommerceSite>django-admin startproject mes

Step 4: Run the command in following format to create the app.

python manage.py startapp name_of_the_app

C:\Users\Srinanda\Desktop\python\djangoCodeSource\myEcommerceSite\mes>python manage.py startapp blog

C:\Users\Srinanda\Desktop\python\djangoCodeSource\myEcommerceSite\mes>python manage.py startapp shop

The project looks like :

Step5: Create urls.py file in both apps.

shop\urls.py:

from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name="ShopHome"),
]

blog\urls.py

from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name="blogHome"),
]

Step6: create views.py as below:

shop\views.py:

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("index shop")

blog\view.py:

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("index blog")

Step7: Update the main "mes" project urls.py with the following to include blog and shop apps urls.py

from django.contrib import admin
from django.urls import include, path
urlpatterns = [
    path('admin/', admin.site.urls),
    path('shop/', include('shop.urls')),
    path('blog/', include('blog.urls'))
]

Step8: run server:

C:\Users\Srinanda\Desktop\python\djangoCodeSource\myEcommerceSite\mes>python manage.py runserver

Step9: open following urls and  test:

http://127.0.0.1:8000/blog/ 

http://127.0.0.1:8000/shop/

django - POST request and CSRF tokens

lets first know the difference between http get and post. 

HTTP GET :

• The GET method is the default submission method for a form.
• The GET method sends the data in the form of URL parameters. Therefore, any data sent with the help of the GET method remains visible in the URL. Since the data is exposed in the URL, the GET method is not considered to send sensitive information such as passwords.
• The GET method reveals the data in the URL bar; therefore, the length of the URL increases. The maximum length of a URL is 2048 characters, so only a limited amount of data can be sent using the GET method. The following error occurs when we try to send more than 2048 characters using GET :

POST :

• Data sent by the POST method never gets visible in the URL box, and therefore it is more secure than the GET method, and sensitive information can be sent with the help of this method.
• Since the data is not visible in the URL query, the length of the URL remains less than 2048 characters, and a large amount of data can be sent with the help of the POST method.
• Data is sent to the server in the form of packages in a separate communication with the processing script.

Now, we will start our discussion on CSRF tokens.

WHAT ARE CSRF TOKENS?

• CSRF stands for Cross-Site Request Forgery.
• The server-side application generates and transmits a huge, random, and unpredictable number to the client to make sure that the request is coming from the original client and not from a malicious website.
• CSRF tokens are used to protect the site against CSRF attacks.

Use POST:

In the template, here index.html file add the post method in the form.

<form action="/removePunctuation" method="post">

In the views.py, replace all the request.GET.get with the request.POST.get. 

from django.http import HttpResponse
from django.shortcuts import render


def removePunc(request):
    # text=request.GET.get('text','default')
    text = request.POST.get('text', 'default')
    # text = request.POST.get('text', 'default')
    check = request.POST.get('removepunc','off')

If you now test from server, you will get the CSRF error:

Test:

Error:

Use CSRF token:

To overcome the CSRF error, add the {% csrf_token%} in the template form

<form action="/removePunctuation" method="post">{% csrf_token %}

Test:

Success page:

django - adding Bootstrap to django website

What Is Bootstrap?

Bootstrap is a front-end development framework. It is a library of HTML, CSS, and JS, which is used to create modern websites and web applications.

Adding Bootstrap starter template:

Go to the https://getbootstrap.com/ and navigate to docs tab --starter template and copy and paste to index.html page.

Starter template:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Adding Navigation Bar :Adding Navigation Bar :

components --navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

adding alerts: components--alerts
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Adding Text Area :
Copy and paste the code given below to add text area:

 <div class="form-group">
    <label for="exampleFormControlTextarea1">Enter your text here and let Text Utils do the magic</label>
    <textarea class="form-control" name='text' id="exampleFormControlTextarea1" rows="9"></textarea>
  </div>
 Adding Switches :
Copy the below code and paste in the index.html file.

<div class="custom-control custom-switch">
  <input type="checkbox" name="removepunc" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Remove Punctuations</label>
</div>

Adding Analyze Text Button :
Type the code given below to add the analyze text button :

<button type="submit" class="btn btn-dark mt-2">Analyze Text</button>
After successfully adding buttons and switches, add action attribute in the form tag. Write the following code :

<form action='/removepunc' method='get'>

Adding Bootstrap To analyze.html:
Copy the below code and paste it in analyze.html file : 
<!DOCTYPE html>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Text Utils</title>
  </head>
  <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">TextUtils.in</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>

    </ul>
  </div>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>


<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Success!Your Text Has Been Analyzed</strong>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>


<div class="container mt-5">
   <h1>Your Analyzed Text -- {{purpose}}</h1>
<p>
    {{ analyzed_text}}
</p>
</div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

views.py code:

from django.http import HttpResponse
from django.shortcuts import render

def removePunc(request):
    text=request.GET.get('text','default')
    check=request.GET.get('removepunc','off')
    if check == "on":
        puncList= '''!()-[]{};:'"\,<>./?@#$%^&*_~'''
        newText=''
        for char in text:
            if char not in puncList:
                newText=newText + char

        param= {"purpose": "Text after removed punctuation","analyzed_text": newText}
        return render(request,'analyze.html',param)

#      return HttpResponse(newText)

    else:
        param = {"purpose": "No Changes", "analyzed_text": text}
        return render(request, 'analyze.html', param)
#        return HttpResponse(text)
def navigationBar(request):
    return render(request, 'navigationUrls.html')
def index(request):
#    return HttpResponse("Hello")
    return render(request,'index.html')

def about(request):
    return HttpResponse("<h1>about</h1>")
def textAnalyze(request):
    ttext = request.GET.get('text','default')
    print(ttext)
    return HttpResponse(ttext)
index.html:
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Text Analyzer</title>
  </head>
  <body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Welcome to Text Analyzer</strong> You can analyze your text here.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
  <form action="/removePunctuation" methlod="get">
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Enter your text here and let Text Utils do the magic</label>
    <textarea class="form-control" name='text' id="exampleFormControlTextarea1" rows="9"></textarea>
  </div>
  <div class="custom-control custom-switch">
  <input type="checkbox" name="removepunc" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Remove Punctuations</label>
</div>
  <button type="submit" class="btn btn-dark mt-2">Analyze Text</button>
  </form>


    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

website:

django - webpage to input text and remove punctuation from it.

 urls.py:

from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.index, name="index"),

    path('index',views.index,name="index"),
    path('removePunctuation',views.removePunc,name="removePunctuation")
]

views.py

def index(request):
#    return HttpResponse("Hello")
    return render(request,'index.html')

from django.http import HttpResponse
from django.shortcuts import render

def removePunc(request):
    text=request.GET.get('text','default')
    check=request.GET.get('removepunc','off')
    if check == "on":
        puncList= '''!()-[]{};:'"\,<>./?@#$%^&*_~'''
        newText=''
        for char in text:
            if char not in puncList:
                newText=newText + char

        return HttpResponse(newText)
    else:
        return HttpResponse(text)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template is working</title>
</head>
<body>
<h1>Welcome to text analyzer. please enter your text.</h1>
<form action="/removePunctuation" methlod="get">
    <textarea name="text" style="margin: 0px; width: 1307px; height: 111px;"></textarea><br/>
    <input type="checkbox" name="removepunc">Remove Punctuation<br/>
    <button type="submit">Analyze Text</button>
</form>
</body>
</html>

Web pages:

You can create another template and show the removed punctuation text there.

template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Analyzing Your Text...</title>
</head>
<body>
<h1>Your Analyzed Text - {{ purpose }}</h1>
<p>
    {{ analyzed_text }}

</p>
</body>
</html>

params = {'purpose': 'Removed Punctuations', 'analyzed_text': newText}
        return render(request, 'analyze.html', params)