Django ile Python Web Geliştirme

03.03.2025
2
112

Django Kütüphanesi ile Python tabanlı Dinamik web sayfaları oluşturmak için öncelikle python dilinin Http işlemlerinin mantığını ele almak gerekiyor. Bu aşamadan sonra ise Django ile Statik ve Dinamik web sayfaları oluşturmaya başlayacağız.

Django ile Python Web Geliştirme

Django ile Python tabanlı web sitesi geliştiren birkaç markadan bahsederek frontend yani işin vitrin tarafına göz atacağız. Sonrasında ise backend tarafına geçerek işin fırın tarafında biraz biraz pişeceğiz.

  • Instagram
  • NatGeo
  • Eventbrite
  • Spotify
  • Pinterest

Türkiye’de ve Dünyada Django bilenler aranan elemanlardır. Flask adındaki python web geliştirme aracı da tıpkı Django gibi tercih edilen bir diğer araçtır. GitHub üzerinde proje dosyalarına erişebilmek için aşağıdaki linki izleyin.

Django için GitHub Proje Linki:
https://github.com/omersahintr/WebApps

Django İndirme ve Yükleme

Django ile çalışırken VSCode editörünü kullanacağız. Bunun sebebi PyCharm’ın ücretli versiyonunda web geliştirebiliyor olmamızdır. Ayrıca PyCharm editörü web geliştirme konusunda VsCode kadar başarılı değildir.

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

Yukarıdaki adresten Django’yu tıklayarak indirebilirsiniz.

Django aynı zamanda “pip install django” komutu ile terminal ekranından da yüklenebilir.

VS Code İndirme Yükleme

Aşağıdaki linki kullanarak VS Code uygulamasını kullandığınız işletim sistemine göre indirip kurabilirsiniz.

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

VS Code ve Django yüklemelerini yaptıktan sonra biraz HTML tag’lerine değinmemiz gerekecek. Django ile Python kullanabilmek için biraz Frontend tarafına geçelim.

CSS Kullanımı

Django öncesinde Html ve Css bilgisine hakim olmak gerekiyor. Hem Html hem de Css Frontend tarafında yer almaktadır.

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

Yukarıdaki şekildeki gibi Css kullanabilirsiniz ancak çok yönetilebilir olmayacaktır. Böyle değilde ayrı bir Css Style dosyası içinde bu stilleri tanımlayıp isimleri ile kullanabiliriz. Daha sonra Html içerisine bu style css dosyasını tanımlayarak (bağlayarak) dahil edebilirsiniz.

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

Ekran Çıktısı:

Bu örneğimizde <h1> başlığı için index.html içerisinde direkt style tanımlaması yapılmıştır. <h2> başlığı için tanımlama ayrı bir style.css dosyasında tanımlanmış ve daha sonra index.html‘ye bağlanmıştır.

Div Class ile Çalışmak

Yukarıdaki örnekte tüm <h1> veya tüm <h2>’ler tek tip stilde olacak. Ancak Division (div) kullanırsak tag içerisinde dilediğiniz stil adını kullanabilirsiniz. Yani h2 başlıklarının her biri farklı bir stile sahip olabilir.

H2 başlıklarının tek tip olması Seo açısından önemlidir. Bu nedenle biz p-paragraf tag’i için bir örnek yapalım.

<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

Ekran Çıktısı:

Span Class ile Çalışmak

Span Class mantığı ise tag’in içinde parametre olarak kullanılır. Bir paragraf içerisinde üzerini highlight olarak çizmek istediğiniz metni <span></span> tag’leri arasına alarak yapabilirsiniz.

<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

Ekran Çıktısı:

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

Class ile Çalışma

Html içerisinde <div class=”one-div”> şeklinde kullanılır. Css tarafında ise başına nokta(.) konularak; .one-div{ } şeklinde tanımlanır.

<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

Ekran Çıktısı:

ID ile Çalışmak

Class’a benzer şekilde çalışır ancak Css tarafında diyez (#) konularak; #one-id{ } şeklinde tanımlanır. Html içerisinde çağırırken <p id=”one-id”> şeklinde yazılır. Örnekte görelim.

<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

Ekran Çıktısı:

Class ve ID Arasındaki Fark

Class’ları istediğiniz kadar farklı tag’lerin içinde kullanılabilir. Oysa ki ID’ler sadece belirli bir tag yapısına göre tasarlanmıştır. Bir Class stilini <p> için <h2> için <div> için kullanabilirsiniz. Bu nedenle ID–>Özel, Class–>Genel amaçlı kullanıma uygundur.

Django ile Kalıcı Yönlendirme

Google Fonts Kullanımı

https://fonts.google.com/specimen/Moon+Dance adresindeki Google Fontunu html sayfamızda nasıl kullanabiliriz?

Html tarafında;

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

kullanarak html sayfanıza ekleyin. Buradaki font adının bire bir aynını css tarafında yazarak bir id yada class’a atayabilirsiniz. Örnekte görelim;

<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

Ekran Çıktısı:

Hizalama ve Boşluk Bırakma

<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 nesnenin içindeki boşlukları ve margin ise dışındaki boşluklar anlamına gelir.

Bootstrap & Responsive Tasarım

Hazır halde sunulan CSS ve JS kütüphaneleridir. Bu tasarımlar web sitenize entegre edilerek kullanılabilir. Frontend tarafında yoğunlukla kullanılan bir araçtır.

Bootstrap Download:

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

Terminal ekranında aşağıdaki komutu çalıştırarak bootstrap paketini yükleyebilirsiniz.

  • npm install bootstrap
  • gem install bootstrap -v 5.0.2

Bootstrap sayfasına girdiğimizde css ve js için bize güncel yol bilgisini gösterecektir. Bunu copy-paste ile html sayfanıza ekleyin.

<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

Bootstrap Examples sekmesinde bulunan örneklerden de faydalanabilirsiniz. Hazır css tasarımlarını üzerinde saatlerce çalışmadan projenizde kullanabilirsiniz. Ayrıca Bootstrap Docs bölümünde kullanabileceğiniz öğeleri görebilirsiniz.

Örneğin Components bölümünden Buttons sekmesinde bulunan örnek tag’leri kendi projemize ekleyelim.

<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

Ekran Çıktısı:

Bootstrap Şablonunda Değişiklik Yapmak

Hazır olarak kullandığımız bootstrap css için değişiklik yapma şansımız var. Bunun yöntemi şu şekilde;

Yeni bir css dosyası oluşturup bunun içinde değiştireceğiniz bootstrap elementinin ismini aynı şekilde kullanıp özelliklerini değiştirebilirsiniz. Şöyleki;

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

Yukarıdaki css ile btn-info adlı butonun font size değerini değiştirelim. Yeni oluşturduğumuz my.css dosyasını index.html içerisine dahil edelim.

<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

Ekran Çıktısı:

Python ile Web geliştirme tarafında Bootstrap’ten çok kez yararlanacağız. Diğer elementler de benzer şekilde kopyalanıp kullanılabilir aynı şekilde.

Örnek: Ödeme Kontrol Sayfası

E-ticaret sitelerinde sıkça gördüğümüz ödeme sayfasını bootstrap’ten faydalanarak tasarlayalım. Bootstrap Examples sayfasında Checkout örneğini kopyalayıp projemize dahil ederek başlayalım.

İlk olarak kaynak html tag’leri kopyalayıp çalıştırdığımızda JS kodlar ve CSS’ler tam anlamıyla çalışmayacaktır. Bunun sebebi dosyaların bizim sunucumuzda olmamasıdır. Bu problemi çözmek için <link href=> ve <scripts > satırlarını silip yerine https://getbootstrap.com/ sayfasında bulunan Include CDN yollarını yazmak olacaktır. Ayrıca alanları kontrol için bir JS yazılmış bunu da kopyalayıp projemize ekleyelim.


<!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

Ekran Çıktısı:

Navigasyon Bar Tasarımı

Sayfanın en üstünde bulunan ve sabit olarak kalan barlar ekleyebilirsiniz. Sticky Bar olarak bilinen bu elementi yine Bootstrap Examples sayfasından kopyalayabiliriz. 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

Ekran Çıktısı:

Layout Elementleri Tasarımı

Bootstrap’in asıl amacı tarayıcıdan ve platformdan bağımsız çalışıyor olmasıdır. Yani bir telefonda yada tablette hatta bilgisayarda farklı ekran çözünürlüklerinde anlamlı şekilde gösterimine olanak sağlamaktadır. Layout’un Container sınıfını kullanarak bu tasarımları yapabilirsiniz.

row-satır ve col-kolonlar ile elementler düzenlenmektedir.

1/22/2
1/32/33/3

Yukarıdaki şekilde gridlere bölerek tasarım yapılabilir.

<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

Ekran Çıktısı:

Django İndirme ve Kurulum İşlemleri

En güncel Django sürümünü https://www.djangoproject.com/download/ adlı internet sitesinden indirebilirsiniz. Ayrıca dilerseniz konsol ekranında bir kaç komut yazarak Django modülünü indirip kurulumunu kolaylıkla yapabilirsiniz.

Django Konsol Kurulum Komutları

Aşağıdaki python konsol komutu ile versiyonunu belirlediğiniz Django kurulumunu gerçekleştirebilirsiniz. Pip konsolunda (Linux&MacOS) yazılacak komut:

python -m pip install Django==5.2

Pip konsolunda (Microsoft) yazılacak komut:

py -m pip install Django==5.2

Django Projesine ait GitHub Arşivi için:

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

Django modülünün sağlıklı olarak yüklenip yüklenmediğini kontrol etmek için terminalde:

django-admin startproject first_prj

komutlarını yazmanız yeterlidir. Bo komutu çalıştırdığınızda VS Code editörünüzde Explorer bölümünde “first_prj” adlı klasör ve içerisinde aşağıdaki resimdeki görüldüğü gibi yeşil renkli bir takım dosyalar oluştuğunu görüyorsanız Django yükleme işlemi başarılı olmuş demektir.

Bir Django projesi oluşturduğunuzda “cd first_prj” komutu ile oluşturduğunuz proje klasörüne girmeniz gerekecektir.

Python Django Runserver Komutu

> ls
Django         Pys             README.md       bootstrap       firs_prj

> cd first_prj
> ls
firs_prj        manage.py

python manage.py runserver
Terminal

komutlarını çalıştırdığınızda aşağıdaki gibi bir ekran çıktısı oluşur:

Burada önemli olan satır Starting development server at http://127.0.0.1:8000/ yazan satırdır. Bu komut ile Web sitemizi oluşturdukça yaptığımız projeyi görebileceğimiz bir web sunucu çalıştıracaktır.

Eğer port numarası (8000) farklı bir uygulama tarafından kullanılıyorsa farklı bir port numarası ile çalıştırılabilir. Bunun için:

python manage.py runserver 8008
Terminal

Web sunucusunu durdurmak için CTRL+C klavye kısayolunu kullanabilirsiniz.

Web browser adres çubuğuna http://127.0.0.1:8000/ yazıp enter’a bastığınızda test sayfasının çalıştığını göreceksiniz.

Django ile Web Sayfası Tasarımı

Tek başına çalışan views.py türünde dosyalar üzerinden Django modülü ile python tabanlı web sayfaları oluşturulabilir. Ancak yaygın kullanım şekli Application’lar oluşturup onları bir araya getirerek modüler bir kullanım alanı sağlamak şeklindedir.

Bu nedenle Python ile web sayfası tasarımı yaparken her sayfanın amacına göre application’lar oluşturacağız.

Python ile Web Uygulamaları

Python ile Web Request (Sorgu) İşlemleri

Django’da Application (Uygulama) Oluşturma

Bir web sayfası içerisindeki modüller de diyebiliriz aslında App’lere. Örneğin site içinde chat app, arkadaş ekleme app, post yazmak için app şeklinde farklı uygulamalar tasarlayıp tek sayfa içerisinde kullanılabilir.

Aşağıdaki komutu çalıştırarak app oluşturmaya başlayabiliriz.

python manage.py startapp chat_message_app
Terminal

Bu komutu çalıştırdığınızda sol tarafta bulunan Explorer alanında first_project altında “chat_message_app” adında bir aplikasyon klasörü daha oluşacaktır.

Karışıklığın önüne geçebilmek için proje url’lerin saklandığı urls.py dosyasını applikasyon klasörü içerisinde de tanımlayıp bunu proje klasöründe bulunan urls.py dosyasına bağlayabiliriz.

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

Projeyi bu şekilde kullanmak çok daha kullanışlı hale getirecektir. Application içerisinde manuel olarak urls.py dosyası oluşturalım. Bunu bağlayabilmek için bazı kütüphaneleri aplikasyona bağlamamız gerekiyor.

Uygulamaları (App) Python Projesine Ekleme İşlemi

Hazırlanan uygulamaları (modül) Python ana projesine ekleyerek çalıştırma senaryosunu adım adım yazacağız.

Application Views.py Dosyasını Tasarlayalım

Bir index request oluşturalım. Bunun için Django kütüphanesi altında HttpResponse modülünü projeye import edelim. Aşağıdaki kod satırı chat_message_app/views.py dosyasına yazın ve kayıt edin. Gösterilecek web sayfasında “First Django Project Test OK” yazdıralım.

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

Application Urls.py Dosyasını Tasarlayalım

path ile bir dosya yolu tanımlayıp “name=” parametresi ile buna “index” gibi bir isim verebiliriz. Burada application, urls.py dosyasında tanımlanır.

from django.urls import path
from . import views

urlpatterns = [
    path("contact",views.index, name="index"),
]
Python: first_prj/chat_message_app/urls.py

Proje Urls.py Dosyası Ayarları

Projenin Urls.py dosyasına application url’si ekleneyeceğiz. Açılan first_prj/urls.py dosyasında admin site url tanımlı olarak gelecektir. Application’ı buraya bağlamak için 5.satırda bulunan kodu eklemeyeceğiz.

Unutmadan from django.urls import path sonuna include modülü de eklenir.

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

Açtığımız üç python dosyasını da kayıt edip –runserver komutu ile terminalden sunucuyu çalıştıralım. Sonrasında web browser’da http://127.0.0.1:8000/chat_message_app/contact adresini yazarak yaptığımız application’ı görüntüleyelim.

MVT – Model View Template ile Çalışmak

Template’ler üzerinden bir model benimsenerek python tabanlı bir web sayfası oluşturabiliriz. Daha önce HttpResponse üzerinden bir sayfa üretiyorduk. Burada ise Html tabanlı bir web sayfasının, Django ile gösterimini sağlayacağız.

Şema yardımıyla Django MVT (Model View Template) nasıl çalışır kısaca bilgi sahibi olalım.

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

Django ile Sayfa Yönlendirme Nasıl Yapılır?

BİR YORUM YAZIN
ZİYARETÇİ YORUMLARI - 2 YORUM
  1. Emrah Aslan dedi ki:
    9 Nisan 2025, 10:58 pm

    Django mvt modelini tam olarak anlamadım. Python Cluster mantığı gibi mi çalışıyor yani?

    Cevap Ver
    1. Ömer ŞAHİN dedi ki:
      9 Nisan 2025, 11:15 pm

      Merhaba, mvt modeli bir cluster mantığı değildir. Daha çok aynı amaçlar için tasarlanmış uygulamaların url-gösterim-database bağlantılarını dizayn eden modeldir. Bu sayfadaki python makalemizi okuyunuz. Aklınızdaki soru işaretleri yok olacaktır.

      Cevap Ver
Bu web sitesi, bilgisayarınıza bilgi depolamak amacıyla bazı tanımlama bilgilerini kullanabilir.
Bu bilgilerin bir kısmı sitenin çalışmasında esas rolü üstlenirken bir kısmı ise kullanıcı deneyimlerinin iyileştirilmesine ve geliştirilmesine yardımcı olur.
Sitemize ilk girişinizde vermiş olduğunuz çerez onayı ile bu tanımlama bilgilerinin yerleştirilmesine izin vermiş olursunuz.
Çerez bilgilerinizi güncellemek için ekranın sol alt köşesinde bulunan mavi kurabiye logosuna tıklamanız yeterli. Kişisel Verilerin Korunması,
Gizlilik Politikası ve Çerez (Cookie) Kullanımı İlkeleri hakkında detaylı bilgi için KVKK&GDPR sayfamızı inceleyiniz.
| omersahin.com.tr |
Copyright | 2007-2025