Python Web Development with Django

28.03.2025

Türkçe

Python based web applications, websites design with Django module. Many famous web applications are written in Python & Django environment.

We will take a look at the frontend, the showcase side of the business, by talking about a few brands that develop Python-based websites with Django. Then we will move to the backend side and cook a little bit on the oven side of the business.

Instagram
NatGeo
Eventbrite
Spotify
Pinterest

In Turkey and around the world, those who know Django are in demand. Flask, a python web development tool, is another preferred tool just like Django. Follow the link below to access the project files on GitHub.

GitHub Project Link for Django:
https://github.com/omersahintr/WebApps

Django Download and Install

When working with Django we will use the VSCode editor. This is because we can develop web in the paid version of PyCharm. Also, the PyCharm editor is not as good as VsCode for web development.

Django Download Link:
https://www.djangoproject.com/download/

You can download Django by clicking on the address above.

Django can also be installed from the terminal screen with the command “pip install django“.

VS Code Download Installation

You can download and install VS Code according to the operating system you use using the link below.

VS Code Download Link:
https://code.visualstudio.com/download

After installing VS Code and Django, we need to talk a little bit about HTML tags. To be able to use Python with Django, let’s move a little bit to the frontend side.

CSS Usage

It is necessary to have a good knowledge of Html and Css before Django. Both Html and Css are on the frontend side.

<h1 style="color: blueviolet; background-color: aqua;">Hello Python</h1>
        <h2>Simple Coding:</h2>

index.html

You can use Css as in the figure above, but it will not be very manageable. We can define these styles in a separate Css Style file and use them with their names. You can then include this style css file in Html by defining (linking) it.

h2{
    color: chocolate;
    background-color: darkgreen;
    
}

style.css

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Hi Python Page - Html&Css</title>
</head>
<body>

        <h1 style="color: blueviolet; background-color: aqua;">Hello Python</h1>
        <h2>Simple Coding:</h2>

</body>
</html>

index.html

Screen Output:

In this example, the <h1> header is defined directly in index.html. The definition for the <h2> heading is defined in a separate style.css file and then linked to index.html.

Working with Div Class

In the example above, all or all will be in a uniform style. However, if we use Division (div), you can use any style name you want in the tag. So each of the h2 headers can have a different style.In the example above, all or all will be in a uniform style. However, if we use Division (div), you can use any style name you want in the tag. So each of the h2 headers can have a different style.

It is important for Seo that H2 headings are uniform. Therefore, let’s make an example for the p-paragraph tag.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Hi Python Page - Html&Css</title>
</head>
<body>

        <h1 style="color: blueviolet; background-color: aqua;">Hello Python</h1>
        <h2>Simple Coding:</h2>
        
        <div>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt temporibus ipsa aliquid deleniti nihil unde laboriosam iste, dolor est quisquam itaque quo architecto eum sunt autem harum dolorum blanditiis ipsam!</p>
        
        </div>

</body>
</html>

index.html

h2{
    color: chocolate;
    background-color: darkgreen;
    
}

p{
    color: blueviolet;
}
div{
    font-size: medium;
}

style.css

Screen Output:

Working with Span Class

Span Class logic is used as a parameter inside the tag. You can do this by placing the text you want to highlight in a paragraph between <span></span> tags.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Hi Python Page - Html&Css</title>
</head>
<body>

        <h1 style="color: blueviolet; background-color: aqua;">Hello Python</h1>
        <h2>Simple Coding:</h2>
        
        <div>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt temporibus ipsa aliquid deleniti nihil unde laboriosam iste, dolor est quisquam itaque quo architecto eum sunt autem harum dolorum blanditiis ipsam!</p>
            <p>Lorem <span>ipsum dolor</span> sit amet consectetur, adipisicing elit. Deserunt temporibus ipsa aliquid deleniti nihil unde laboriosam iste, dolor est quisquam itaque quo architecto eum sunt autem harum dolorum blanditiis ipsam!</p>
        
        </div>

</body>
</html>

index.html

h2{
    color: chocolate;
    background-color: darkgreen;
    
}

p{
    color: blueviolet;
}
div{
    font-size: medium;
}

style.css

Screen Output:

Sonuç olarak gördüğünüz gibi ikinci satırda “ipsum dolor” yazısı yeşil hightlight ile işaretlendi.

Working with Class

It is used as <div class=”one-div”> in html. On the css side, it is defined as .one-div{ } by putting a period (.) at the beginning.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Hi Python Page - Html&Css</title>
</head>
<body>
        <div>
            <h1 style="color: #8a2be2; background-color: aqua;">Hello Python</h1>
            <h2>Simple Coding:</h2>
        </div>
        
        <div class="one-div">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt temporibus ipsa aliquid deleniti nihil unde laboriosam iste, dolor est quisquam itaque quo architecto eum sunt autem harum dolorum blanditiis ipsam!</p>
            <p>Lorem <span>ipsum dolor</span> sit amet consectetur, adipisicing elit. Deserunt temporibus ipsa aliquid deleniti nihil unde laboriosam iste, dolor est quisquam itaque quo architecto eum sunt autem harum dolorum blanditiis ipsam!</p>
        
        </div>

</body>
</html>

index.html

h2{
    color: chocolate;
    background-color: darkgreen;
    
}

p{
    color: blueviolet;
}
div{
    font-size: medium;
}
span{
    background-color: chartreuse;
    
}

.one-div{
    font-size: x-large;
    background-color: black;
}

style.css

Screen Output:

Working with ID

It works similar to a class, but it is defined as #one-id{ } by putting a sharp (#) on the Css side. When calling it in html, it is written as <p id=”one-id”>. Let’s see in the example.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Hi Python Page - Html&Css</title>
</head>
<body>
        <div>
            <h1 style="color: #8a2be2; background-color: aqua;">Hello Python</h1>
            <h2>Simple Coding:</h2>
        </div>
        
        <div class="one-div">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt temporibus ipsa aliquid deleniti nihil unde laboriosam iste, dolor est quisquam itaque quo architecto eum sunt autem harum dolorum blanditiis ipsam!</p>
            <p>Lorem <span>ipsum dolor</span> sit amet consectetur, adipisicing elit. Deserunt temporibus ipsa aliquid deleniti nihil unde laboriosam iste, dolor est quisquam itaque quo architecto eum sunt autem harum dolorum blanditiis ipsam!</p>
   
        </div>

</body>
</html>

index.html

h2{
    color: chocolate;
    background-color: darkgreen;
    
}

p{
    color: blueviolet;
}
div{
    font-size: medium;
}
span{
    background-color: chartreuse;
    
}

.one-div{
    font-size: x-large;
    background-color: black;
}

#one-id{
    color: fuchsia;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

style.css

Screen Output:

Difference between Class and ID

Classes can be used in as many different tags as you want. Whereas IDs are only designed for a specific tag structure. You can use a Class style for <p> for <h2> for <div>. Therefore, ID–> is suitable for Private use and Class–> is suitable for General use.

Page Routing with Django

Using Google Fonts

How do we use the Google Font from https://fonts.google.com/specimen/Moon+Dance in our html page?

On the html side;

<link href=”https://fonts.googleapis.com/css2?family=Moon+Dance&display=swap” rel=”stylesheet”>

add it to your html page. You can write the exact font name here on the css side and assign it to an id or class. Let’s see in the example;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="https://fonts.googleapis.com/css2?family=Moon+Dance&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="font.css">
    <title>Font Examples</title>
</head>
<body>
    <h1>Title My Title Heading-1</h1>
    <p>Examples Examples p-1</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. p-2</p>
</body>
</html>

index.html

body{
    background-color: bisque;
}

h1{
    font-family: Moon Dance;
    text-align: left;
}

p{
    font-size: 120%;
    
}

style.css

Screen Output:

Alignment and Spacing

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="https://fonts.googleapis.com/css2?family=Moon+Dance&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="font.css">
    <title>Font Examples</title>
</head>
<body>
    <h1>Title My Title Heading-1</h1>
    <h2 id="id1">Heading2_1</h2>
    <h2 id="id2">Heading2_2</h2>
    <p>Examples Examples p-1</p>
    <p>Lorem ipsum dolor sit amet p-2</p>
</body>
</html>

index.html

body{
    background-color: bisque;
}

h1{
    font-family: Moon Dance;
    text-align: left;
}

p{
    font-size: 120%;
    
}
#id1{
    border:1em solid #ff00ee;
}

#id2{
    border:2em dotted #ffe604 ;
}

style.css

Padding & Margin

Padding refers to the spaces inside the object and margin refers to the spaces outside.

Bootstrap & Responsive Tasarım

They are ready-made CSS and JS libraries. These designs can be used by integrating them into your website. It is a tool used extensively on the frontend side.

Bootstrap Download:

https://getbootstrap.com/docs/5.0/getting-started/download

You can install the bootstrap package by running the following command on the terminal screen.

npm install bootstrap
gem install bootstrap -v 5.0.2

When we enter the Bootstrap page, it will show us the current path information for css and js. Add this to your html page with copy-paste.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <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>My Bootstrap Project</title>
</head>
<body>
    
</body>
</html>

index.html

You can also benefit from the examples in the Bootstrap Examples tab. You can use ready-made css designs in your project without working on them for hours. You can also see the elements you can use in the Bootstrap Docs section.

For example, let’s add the sample tags in the Buttons tab from the Components section to our own project.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>My Bootstrap Project</title>
</head>
<body>
    <p></p>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
</body>
</html>

bootstrap-example.html

Screen Output:

Making Changes to a Bootstrap Template

We have the chance to make changes to the bootstrap css we use as ready. The method for this is as follows;

You can create a new css file and use the name of the bootstrap element you will change in it in the same way and change its properties. For example;

.btn-info{
    font-size: xx-large;
}

my.css

Let’s change the font size value of the button named btn-info with the css above. Let’s include the newly created my.css file in index.html.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <link rel="stylesheet" href="my.css">
    
    <title>My Bootstrap Project</title>
</head>
<body>
    <p></p>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
</body>
</html>

bootstrap-example.html

Screen Output:

We will make a lot of use of Bootstrap in web development with Python. Other elements can be copied and used in a similar way.

Example: Payment Control Page

Let’s design the checkout page that we often see on e-commerce sites using bootstrap. Let’s start by copying the Checkout example on the Bootstrap Examples page and including it in our project.

First of all, when we copy and run the source html tags, JS codes and CSS will not work properly. This is because the files are not on our server. To solve this problem, delete the <link href=> and <scripts > lines and replace them with Include CDN paths found at https://getbootstrap.com/. There is also a JS written to control the fields, let’s copy it and add it to our project.


<!doctype html>
<html lang="en" data-bs-theme="auto">
  <head><script src="/docs/5.3/assets/js/color-modes.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.122.0">
    <title>Checkout example · Bootstrap v5.3</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/checkout/">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }

      .bd-mode-toggle {
        z-index: 1500;
      }

      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="checkout.css" rel="stylesheet">
  </head>
  <body class="bg-body-tertiary">
    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
      <symbol id="check2" viewBox="0 0 16 16">
        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
      </symbol>
      <symbol id="circle-half" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
      </symbol>
      <symbol id="moon-stars-fill" viewBox="0 0 16 16">
        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
        <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
      </symbol>
      <symbol id="sun-fill" viewBox="0 0 16 16">
        <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
      </symbol>
    </svg>

    <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
      <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
              id="bd-theme"
              type="button"
              aria-expanded="false"
              data-bs-toggle="dropdown"
              aria-label="Toggle theme (auto)">
        <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
        <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
        <li>
          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#sun-fill"></use></svg>
            Light
            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
            Dark
            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#circle-half"></use></svg>
            Auto
            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
          </button>
        </li>
      </ul>
    </div>

    
<div class="container">
  <main>
    <div class="py-5 text-center">
      <img class="d-block mx-auto mb-4" src="https://www.omersahin.com.tr/wp-content/uploads/2019/logo-os-185x55.png" alt="" width="102" height="57">
      <h2>Checkout form</h2>
      <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
    </div>

    <div class="row g-5">
      <div class="col-md-5 col-lg-4 order-md-last">
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-primary">Your cart</span>
          <span class="badge bg-primary rounded-pill">3</span>
        </h4>
        <ul class="list-group mb-3">
          <li class="list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">Product name</h6>
              <small class="text-body-secondary">Brief description</small>
            </div>
            <span class="text-body-secondary">$12</span>
          </li>
          <li class="list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">Second product</h6>
              <small class="text-body-secondary">Brief description</small>
            </div>
            <span class="text-body-secondary">$8</span>
          </li>
          <li class="list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">Third item</h6>
              <small class="text-body-secondary">Brief description</small>
            </div>
            <span class="text-body-secondary">$5</span>
          </li>
          <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
            <div class="text-success">
              <h6 class="my-0">Promo code</h6>
              <small>EXAMPLECODE</small>
            </div>
            <span class="text-success">−$5</span>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span>Total (USD)</span>
            <strong>$20</strong>
          </li>
        </ul>

        <form class="card p-2">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Promo code">
            <button type="submit" class="btn btn-secondary">Redeem</button>
          </div>
        </form>
      </div>
      <div class="col-md-7 col-lg-8">
        <h4 class="mb-3">Billing address</h4>
        <form class="needs-validation" novalidate>
          <div class="row g-3">
            <div class="col-sm-6">
              <label for="firstName" class="form-label">First name</label>
              <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid first name is required.
              </div>
            </div>

            <div class="col-sm-6">
              <label for="lastName" class="form-label">Last name</label>
              <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid last name is required.
              </div>
            </div>

            <div class="col-12">
              <label for="username" class="form-label">Username</label>
              <div class="input-group has-validation">
                <span class="input-group-text">@</span>
                <input type="text" class="form-control" id="username" placeholder="Username" required>
              <div class="invalid-feedback">
                  Your username is required.
                </div>
              </div>
            </div>

            <div class="col-12">
              <label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label>
              <input type="email" class="form-control" id="email" placeholder="you@example.com">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>

            <div class="col-12">
              <label for="address" class="form-label">Address</label>
              <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
              <div class="invalid-feedback">
                Please enter your shipping address.
              </div>
            </div>

            <div class="col-12">
              <label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label>
              <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
            </div>

            <div class="col-md-5">
              <label for="country" class="form-label">Country</label>
              <select class="form-select" id="country" required>
                <option value="">Choose...</option>
                <option>United States</option>
              </select>
              <div class="invalid-feedback">
                Please select a valid country.
              </div>
            </div>

            <div class="col-md-4">
              <label for="state" class="form-label">State</label>
              <select class="form-select" id="state" required>
                <option value="">Choose...</option>
                <option>California</option>
              </select>
              <div class="invalid-feedback">
                Please provide a valid state.
              </div>
            </div>

            <div class="col-md-3">
              <label for="zip" class="form-label">Zip</label>
              <input type="text" class="form-control" id="zip" placeholder="" required>
              <div class="invalid-feedback">
                Zip code required.
              </div>
            </div>
          </div>

          <hr class="my-4">

          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="same-address">
            <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
          </div>

          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="save-info">
            <label class="form-check-label" for="save-info">Save this information for next time</label>
          </div>

          <hr class="my-4">

          <h4 class="mb-3">Payment</h4>

          <div class="my-3">
            <div class="form-check">
              <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
              <label class="form-check-label" for="credit">Credit card</label>
            </div>
            <div class="form-check">
              <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
              <label class="form-check-label" for="debit">Debit card</label>
            </div>
            <div class="form-check">
              <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
              <label class="form-check-label" for="paypal">PayPal</label>
            </div>
          </div>

          <div class="row gy-3">
            <div class="col-md-6">
              <label for="cc-name" class="form-label">Name on card</label>
              <input type="text" class="form-control" id="cc-name" placeholder="" required>
              <small class="text-body-secondary">Full name as displayed on card</small>
              <div class="invalid-feedback">
                Name on card is required
              </div>
            </div>

            <div class="col-md-6">
              <label for="cc-number" class="form-label">Credit card number</label>
              <input type="text" class="form-control" id="cc-number" placeholder="" required>
              <div class="invalid-feedback">
                Credit card number is required
              </div>
            </div>

            <div class="col-md-3">
              <label for="cc-expiration" class="form-label">Expiration</label>
              <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
              <div class="invalid-feedback">
                Expiration date required
              </div>
            </div>

            <div class="col-md-3">
              <label for="cc-cvv" class="form-label">CVV</label>
              <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
              <div class="invalid-feedback">
                Security code required
              </div>
            </div>
          </div>

          <hr class="my-4">

          <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
        </form>
      </div>
    </div>
  </main>

  <footer class="my-5 pt-5 text-body-secondary text-center text-small">
    <p class="mb-1">© 2017–2024 Company Name</p>
    <ul class="list-inline">
      <li class="list-inline-item"><a href="#">Privacy</a></li>
      <li class="list-inline-item"><a href="#">Terms</a></li>
      <li class="list-inline-item"><a href="#">Support</a></li>
    </ul>
  </footer>
</div>
    <script src="check.js"></script>
  </body>
</html>

paycheck.html

// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
    'use strict'
  
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    const forms = document.querySelectorAll('.needs-validation')
  
    // Loop over them and prevent submission
    Array.from(forms).forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
  
        form.classList.add('was-validated')
      }, false)
    })
  })()

check.js

Screen Output:

Navigation Bar Design

You can add bars that are located at the top of the page and remain fixed. We can copy this element, known as Sticky Bar, from the Bootstrap Examples page. https://getbootstrap.com/docs/5.3/examples/navbar-fixed/


<!doctype html>
<html lang="en" data-bs-theme="auto">
  <head><script src="/docs/5.3/assets/js/color-modes.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.122.0">
    <title>Fixed top navbar example · Bootstrap v5.3</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/navbar-fixed/">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }

      .bd-mode-toggle {
        z-index: 1500;
      }

      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="navbar-fixed.css" rel="stylesheet">
  </head>
  <body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-md-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">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>
<h1>Hello Bootstrap</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident iure esse error fuga quam asperiores alias accusantium voluptatem maxime iusto? Asperiores quam quidem nobis obcaecati quo facilis rerum, similique ipsam?   </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, alias! Deleniti impedit maxime itaque iusto dolorum veniam ipsam, commodi ipsa maiores minima modi autem reprehenderit illum, possimus laudantium ab quia?</p>

    </body>
</html>

navbar.html

Screen Output:

Layout Elements Design

The main purpose of Bootstrap is that it is browser and platform independent. In other words, it allows meaningful display at different screen resolutions on a phone or tablet or even on a computer. You can make these designs using Layout’s Container class.

Elements are organized with row-rows and col-columns.

1/2

2/2

1/3

2/3

3/3

Design can be done by dividing into grids as above.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layouts and Grids</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <link rel="stylesheet" src="layout.css">
</head>
<body>
    <div class="container text-center">
        <div class="row">
          <div class="col">
           <p> Column 1 of 2</p>
          </div>
          <div class="col">
            <p>Column 2 of 2</p>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <p>Column 1 of 3</p>
          </div>
          <div class="col">
            <p>Column 2 of 3</p>
          </div>
          <div class="col">
            <p>Column 3 of 3</p>
          </div>
        </div>
      </div>
      
</body>
</html>

layout.html

.bor {
    border: 10px solid black;
    border-color: brown;

}

layout.css

Screen Output:

Django Download and Installation

You can download the latest Django version from the website https://www.djangoproject.com/download/. You can also easily download and install the Django module by typing a few commands on the console screen.

Django Console Installation Commands

With the following python console command, you can install Django with the version you specified. Command to be typed in the pip console (Linux & MacOS):

python -m pip install Django==5.2

Command to be typed in the Pip console (Microsoft):

py -m pip install Django==5.2

For the GitHub Archive of the Django Project:

git clone https://github.com/django/django.git

In the terminal to check if the Django module is loaded properly:

django-admin startproject first_prj

commands to install Django. When you run the Bo command, if you see a folder named “first_prj” in the Explorer section of your VS Code editor and a set of green colored files in it, as shown in the picture below, then the Django installation process was successful.

When you create a Django project, you will need to enter the project folder you created with the command “cd first_prj“.

Python Django Runserver Command

> ls
Django         Pys             README.md       bootstrap       firs_prj

> cd first_prj
> ls
firs_prj        manage.py

python manage.py runserver

Terminal

commands, you will get a screen output like the one below:

The important line here is the line that says Starting development server at http://127.0.0.1:8000/. With this command, as we create our website, it will run a web server where we can see the project we have made.

If the port number (8000) is used by a different application, it can be run with a different port number. For this

python manage.py runserver 8008

Terminal

You can use the keyboard shortcut CTRL+C to stop the web server.

Type http://127.0.0.1:8000/ in the web browser address bar and press enter and you will see that the test page works.

Web Page Design with Django

Python-based web pages can be created with the Django module via standalone views.py type files. However, the common usage is to create Applications and combine them together to provide a modular usage area.

Therefore, when designing a web page with Python, we will create applications according to the purpose of each page.

Web Request Operations with Python

Creating an Application in Django

We can actually call them modules within a web page. For example, you can design different applications such as chat app, add friends app, app for writing posts within the site and use them on a single page.

We can start creating the app by running the following command.

python manage.py startapp chat_message_app

Terminal

When you run this command, another application folder named “chat_message_app” will be created under first_project in the Explorer area on the left side.

To avoid confusion, we can also define the urls.py file where the project urls are stored in the applet folder and link it to the urls.py file in the project folder.

APPLICATION –> views.py –> urls.py(app) –> urls.py(project)

Using the project in this way will make it much more useful. Let’s manually create a urls.py file in the application. In order to link it, we need to link some libraries to the application.

Adding Applications (App) to a Python Project

We will add the prepared applications (modules) to the Python main project and write the execution scenario step by step.

Let’s Design Application Views.py

Let’s create an index request. To do this, import the HttpResponse module from the Django library into the project. Write the following line of code in chat_message_app/views.py and save it. Let’s print “First Django Project Test OK” on the web page that will be displayed.

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

def index(request):
    return HttpResponse("First Django Project Test OK.")

Python: first_prj/chat_message_app/views.py

Let’s Design Application Urls.py

We can define a file path with path and give it a name like “index” with the “name=” parameter. Here application is defined in the file urls.py.

from django.urls import path
from . import views

urlpatterns = [
    path("contact",views.index, name="index"),
]

Python: first_prj/chat_message_app/urls.py

Project Urls.py File Settings

We will add the application url to the Urls.py file of the project. In the opened first_prj/urls.py file, the admin site url will be defined. We will not add the code in line 5 to connect the application here.

Note that from django.urls import path also adds the include module at the end.

from django.contrib import admin
from django.urls import path, include # added include module

urlpatterns = [
    path("chat_message_app/", include("chat_message_app.urls")),
    path("admin/", admin.site.urls),
]

Python: first_prj/urls.py

Save all three python files and run the server from the terminal with the -runserver command. Then, let’s view the application we made by typing http://127.0.0.1:8000/chat_message_app/contact in the web browser.

Working with MVT – Model View Template

We can create a python based web page by adopting a model based on templates. Previously we were generating a page based on HttpResponse, here we are going to display an Html based web page with Django.

With the help of the diagram, let’s briefly learn how Django MVT (Model View Template) works.

Source: https://www.omersahin.com.tr/wp-content/uploads/2025/04/django-mvt-model-view-template.pdf

Django Static Page Redirects

Now let’s try to briefly discuss how to do multiple internal page redirects in Django.

Cisco Course
Python Course

Let’s have two courses on our site. Let’s make dynamic URL redirection for both courses according to this scenario. Let’s open the project/views.py file and add the following lines.

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

def index(request):
    return HttpResponse("First Django Project Test OK.")

def cisco_course(request):
    return HttpResponse("Network Cisco Course")

def python_course(request):
    return HttpResponse("Python Course")

Project/views.py

After these definitions, let’s make changes in urls.py under the application.

from django.urls import path
from . import views

urlpatterns = [
    path("",views.index, name="index"), ## url:index 
    ##path("contacts",views.index, name="index") ## url:/contacts

    path("cisco/", views.cisco_course, name="cisco"),
    path("python/", views.python_course, name="Python")
    
]

App/urls.py

Then let’s activate the server by running ” python manage.py runserver 8080” command in Terminal. In the web browser, type http://127.0.0.1:8080/chat_message_app/python/ and run it.

Screen Shot:

In the same way, when we type http://127.0.0.1:8080/chat_message_app/cisco/;

you will see the screens.

Dynamic Page Redirection with Python Django

Let’s have a dictionary, Json or page data from a data file. How can we dynamically add them to the project in Django in one line?

Let’s start by defining a Dictionary. Let’s avoid confusion with dynamic routing by defining the page data in this dict in a single line respectively.

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

course_dict = {
    "python":"Welcome to Python Course",
    "cisco":"Welcome to Cisco Course",
    "java":"Java Course",
    "charp":"C# Course",
    "swift":"Swift Course"
}

def index(request):
    return HttpResponse("First Django Project Test OK.")


def course(request, userurl): #user_url: user browser written url.
    return HttpResponse(course_dict.get(userurl,"Page is Not Found - 404"))

Project/views.py

On the urls.py side, we need to get the page name to be written at the end of the url with a parameter. For this, we can specify the parameter and data type to be taken in “<str:user_url>/” when defining the path. If the user_url here and the name you give for the parameter in views are the same, you will avoid confusion.

from django.urls import path
from . import views

urlpatterns = [
    path("",views.index, name="index"), ## url:index
    path("<str:userurl>/", views.course, name="course")
    
]

App/urls.py

Screen Shot:

MAKE A COMMENT

[ Cancel replying ]

COMMENTS - 0 COMMENTS

No comments yet.