Jinja Syntax ile Django
Jinja Syntax sayesinde Python Django ile Html etiketleri arasında birçok dinamik parametreyi kullanabilirsiniz. Bu bir değişken, bir döngü veya kontrol yapısı olabilir. İşinizi çok kolaylaştıracak olan Jinja Sözdizimini öğrenmek ister misiniz?
Jinja Syntax ile Python, Django ve Html dahil bir çok alanda kolaylık sağlar. Özellikle Python ile Web Html arasında bir köprü vazifesi görür Jinja Syntax.
Jinja söz dizimi yazımıza başlamadan önce Django Template Yapısı başlıklı yazımızı okumanızı tavsiye ediyoruz.
Proje GitHub Kaynak:
https://github.com/omersahintr/WebApps
Index
- Jinja Syntax Nasıl Yüklenir?
- Jinja Metodu ile Veri Gönderme
- Jinja ile For Döngüsü Nasıl Kullanılır?
- Jinja ile IF-Else Kontrol Yapıları
- Filter Yordamı ile Jinja Syntax
- Jinja ile URL (link-navigation) Kullanımı
- Django Template Html İçerisinde Kalıtım (Template Inheritance)
- Django ile Sabit 404 Sayfası Nasıl Yapılır?
- Statik Sayfa ve Medya Oluşturmak
Jinja Syntax Nasıl Yüklenir?
Jinja Syntax cümleciklerine VS Code tarafında hakim olmak istiyorsanız VS Code>Extensions sekmesinden Django paketini yüklemelisiniz. https://marketplace.visualstudio.com/items?itemName=batisteo.vscode-django
Django eklenti paketini VS Code’a yükledikten sonra HTML tag’lerin arasında tüm Jinja kodlarını görebileceksiniz.
Django Genişletme Paketini VS Code uygulamasına yükledikten sonra yukarıdaki gibi örneğin for yazdığınızda kullanım şekli otomatik olarak Html Tag’lerin arasına aşağıdaki gibi yazdırılacaktır.
Jinja Metodu ile Veri Gönderme
Bir canlı Api veya Json kaynağından döviz datası çektiğinizi düşünün. Bu örnekte sözlük (dictionary) ve Liste veri tipinde tanımlayacağız. Bu bilgileri Html sayfa içinde nasıl yazdırabiliriz?
Fonksiyon içinde render metodu ile tanımlama yaparken tanımladığımız currency dataları Html sayfasına “context=” parametresi ile göndereceğiz. temp_app/views.py dosyasında aşağıdaki gibi değişiklik yapalım.
from django.shortcuts import render
from django.http import HttpResponse
from django.urls import reverse
def index(request):
return render(request,"temp_app/first.html")
def currency(request):
currency_dict = {"Dollar":38.8, "Euro":44.05, "Gold":3982.44, "BTC":4237678.26}
return render(request,"temp_app/currency.html",context=currency_dict)currency_dict adında bir sözlük tanımlayıp içerisine birkaç data ekledik. return olarak render çalıştırıp context parametresi ile Html sayfaya veri göndereceğiz.
Html sayfa içinde Jinja Syntax ile veri anahtarlarını yazarak python dosyasından gönderilen veri, sayfaya yazdırılabilir. Bunun için {{ }} süslü parantezlerden yararlanacağız. currency.html dosyasında yazarak görelim.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
{{Dollar}}
</body>
</html>
</html>Django dışında Jinja Syntax çalışmayacaktır. Standart web sunucularda böyle bir yazım metodu yoktur. Sadece Django sunucusunda çalışabilir. Ekranda şu şekilde görünecektir:
Hatta Html tag’ler ile istediğiniz gibi tasarlayarak bu verileri ekrana yazdırabilirsiniz.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
<b><font size=12 color="#FF0000">Dollar: <font color="000000">{{Dollar}}</font></font></b><br>
<b><font size=12 color="#FF0000">Euro: <font color="000000">{{Euro}}</font></font></b><br>
<b><font size=12 color="#FF0000">Gold: <font color="000000">{{Gold}}</font></font></b><br>
<b><font size=12 color="#FF0000">BTC: <font color="000000">{{BTC}}</font></font></b><br>
</body>
</html>
Html Sayfa İçinde Dinamik Data Değişkenleri
Farklı varyasyon ve senaryolar ile Html sayfa içinde python ile oluşturulan datalar nasıl gösterilir?
Sözlük İçinde Liste Değişkenli Data
Mesela son örnek senaryoda para birimlerinin alış ve satış rakamları sözlük içerisinde bir liste ile tanımlanırsa Html sayfaya nasıl gönderilir.
Jinja Syntax ile döngü ve kontrol yapıları çalıştırılabilir. Hatta liste indeksi bile çağrılabilir. Bunun için parametre değişkenin sonuna nokta koyup indis yazılmalıdır. “Dollar.0” gibi. Örnek üzerinde görelim:
from django.shortcuts import render
from django.http import HttpResponse
from django.urls import reverse
# Create your views here.
def index(request):
return render(request,"temp_app/first.html")
def currency(request):
currency_dict = {"Dollar":[37.7,38.8],
"Euro":[43.55,44.05],
"Gold":[3890.05,3982.44],
"BTC":4237678.26}
return render(request,"temp_app/currency.html",context=currency_dict)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
<b><font size=12 color="#FF0000">Dollar: <font color="000000">{{Dollar}}</font></font></b><br>
<b><font size=12 color="#FF0000">Euro: <font color="000000">{{Euro}}</font></font></b><br>
<b><font size=12 color="#FF0000">Gold: <font color="000000">{{Gold}}</font></font></b><br>
<b><font size=12 color="#FF0000">BTC: <font color="000000">{{BTC}}</font></font></b><br>
</body>
</html>
Sözlük İçinde Sözlük Değişkenli Data
Dataların sözlük içerisinde gösterildiği ve bu sözlük elemanlarından birinin de yine sözlük değişkenine sahip olduğunu düşünelim. İç içe sözlük değişkenlerde {{maindictionary.sub_dictionary}} yani {{BTC.Ethereum}} gibi kullanılır.
Örneğin BTC Kripto Para sözlüğü içinde Ethereum, Doge Coin ve Lite Coin’e ait satış değerleri bulunsun.
from django.shortcuts import render
from django.http import HttpResponse
from django.urls import reverse
# Create your views here.
def index(request):
return render(request,"temp_app/first.html")
def currency(request):
currency_dict = {"Dollar":[37.7,38.8],
"Euro":[43.55,44.05],
"Gold":[3890.05,3982.44],
"BTC":{"Ethereum":100590.84,"Doge":9.15,"Lite":3794.85}
}
return render(request,"temp_app/currency.html",context=currency_dict)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
<b><font size=12 color="#FF0000">Dollar(Buy): <font color="000000">
{{Dollar.0}}
</font></font>
| <font size=12 color="#FF0000"> Dollar(Sell): <font color="000000">
{{Dollar.1}}
</font></font>
</b><br>
<b><font size=12 color="#FF0000">Euro(Buy): <font color="000000">
{{Euro.0}}
</font></font>
| <font size=12 color="#FF0000">Euro(Sell): <font color="000000">
{{Euro.1}}
</font></font>
</b><br>
<b><font size=12 color="#FF0000">Gold(Buy): <font color="000000">
{{Gold.0}}
</font></font>
| <font size=12 color="#FF0000">Gold(Sell): <font color="000000">
{{Gold.1}}
</font></font>
</b><br>
<b><font size=12 color="#FF0000">Ethereum: <font color="000000">
{{BTC.Ethereum}}
</font></font></b><br>
<b><font size=12 color="#FF0000">Doge Coin: <font color="000000">
{{BTC.Doge}}
</font></font></b><br>
<b><font size=12 color="#FF0000">Lite Coin: <font color="000000">
{{BTC.Lite}}
</font></font></b><br>
</body>
</html>
Jinja ile For Döngüsü Nasıl Kullanılır?
Liste Elemanlarını For İle Çekme
Sözlük içerisinde bulunan Listenin elemanlarını web sayfasına For döngüsü ile nasıl çekebiliriz? Bunun için yine Döviz uygulamasını kullanarak liste içindeki tüm elemanları For döngüsü ile web sayfasına yazdırmak için öncelikle views.py dosyamızı hatırlayalım.
from django.shortcuts import render
from django.http import HttpResponse
from django.urls import reverse
# Create your views here.
def index(request):
return render(request,"temp_app/first.html")
def currency(request):
currency_dict = {"Dollar":[37.7,38.8],
"Euro":[43.55,44.05],
"Gold":[3890.05,3982.44],
"BTC":{"Ethereum":100590.84,"Doge":9.15,"Lite":3794.85}
}
return render(request,"temp_app/currency.html",context=currency_dict)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
{% for item in Euro %}
<h2>{{item}}</h2>
{% endfor %}
</body>
</html>
Sözlük Elemanlarını For İle Çekme
Sözlük içerisinde bulunan sözlük elemanlarını çekerek Html sayfamıza yazdırmak için sırasıyla aşağıdaki kodları yazalım.
from django.shortcuts import render
from django.http import HttpResponse
from django.urls import reverse
# Create your views here.
def index(request):
return render(request,"temp_app/first.html")
def currency(request):
currency_dict = {"Dollar":[37.7,38.8],
"Euro":[43.55,44.05],
"Gold":[3890.05,3982.44],
"BTC":{"Ethereum":100590.84,"Doge":9.15,"Lite":3794.85}
}
return render(request,"temp_app/currency.html",context=currency_dict)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
{% for key,value in BTC.items %}
{{key}}:{{value}}<br>
{% endfor %}
</body>
</html>
Jinja ile IF-Else Kontrol Yapıları
HTML tag’ler arasında Jinja Syntax sayesinde if-else kontrol yapılarını da rahatlıkla kullanabilirsiniz. Bunun için views.py içinde user_pro adında bir sözlük elemanı tanımlayalım ve Html tarafında bunun kontrolünü “if” ile sağlayalım;
from django.shortcuts import render
from django.http import HttpResponse
from django.urls import reverse
def index(request):
return render(request,"temp_app/first.html")
def currency(request):
currency_dict = {
"Dollar":38.8, "Euro":44.05, "Gold":3982.44, "BTC":4237678.26, "user_pro":True
}
return render(request,"temp_app/currency.html",context=currency_dict)<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
{% if user_pro %}
<h2>Pro Giriş Başarılı</h2>
{% endif %}
</body>
</html>Ekran Görüntüsü:
Eğer sözlük elemanının değerini False olarak değiştirirsek “Giriş Başarılı” yazısı görünmeyecektir.
Gelen değere göre ekrana farklı bilgiler de yazdırabilirsiniz. Senaryo gereği doların fiyatı 35 tl üstünde ise “Dolarda Artış Yüksek” gibi uyarı yazabiliriz. views.py dosyasında bir değişklik yapmayacağız. Sadece html sayfasında ekleme yapılacak.
{% if Dollar.1 > 35 %}
mission-1
{% else %}
mission-2
{% endif %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
{% if Dollar.1 > 35 %}
<h2>Dollar is the most expensive {{Dollar.1}}</h2>
{% else %}
<h2>Dollar is very cheap {{Dollar.1}}</h2>
{% endif %}
</body>
</html>
Filter Yordamı ile Jinja Syntax
Jinja Syntax ile oldukça kullanışlı denemeler yaptık. Şimdi Filter yordamı ile Django Template içinde nasıl kullanacağamızı görelim. Bunun için Django Docs’a aşağıdaki bağlantı üzerinden ulaşmanız gerekiyor.
https://docs.djangoproject.com/en/5.2/ref/templates/builtins
Bu web sayfası içerisinde hangi syntax nasıl kullanılır ve ne amaçla kullanılır öğrenebilirsiniz.
Filter’ın kullanımı için bu web sayfasında sağda bulunan kategori linklerinden “Filter” yazana tıklayınız. String fonksiyonlar gibi birçok fonksiyonu kullanabilirsiniz. Bunu dökümanlarda tamamını görebilirsiniz.
Yazım olarak “|” (pipe AltGr+<>) sembolü ile kullanılır. Yani {{testing | upper}} şeklinde yazılır. Örnekle görelim;
from django.shortcuts import render
from django.http import HttpResponse
from django.urls import reverse
def index(request):
return render(request,"temp_app/first.html")
def currency(request):
currency_dict = {
"testing" : TesT iS oK
}
return render(request,"temp_app/currency.html",context=currency_dict)<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
<b>Original:</b> {{testing}}<br>
<b>Upper:</b> {{testing | upper}}<br>
<b>Lower:</b> {{testing | lower}}<br>
</body>
</html>Ekran Görüntüsü:
Sonuç olarak büyüklü küçüklü karışık olarak yazılan bir string ifadeyi tamamını büyüttük yada küçülttük. Bunu views.py tarafında Python kodları kullanarak yapabilirdik. Ancak bu şekilde de bir kullanımı olduğunu bilmekte yarar var.
Birden fazla uygulama ve modül olduğunda aradaki link navigasyonunu karışıklığa yol açmadan yönetebilmek için profesyonel olarak bu yöntemi kullanmanız gerekecektir.
Jinja ile URL yönetimi için app/urls.py ve currency.html içerisinde satır eklememiz gerekecektir.
Öncelikle namespace eklemek için app/urls.py içinde en baş kısma uygulama adını değişkene atayacağız:
from django.urls import path
from . import views
app_name = "temp_app"
urlpatterns = [
path("",views.index,name="index"),
path("currency/",views.currency,name="currency"),
path("earthquake/",views.earthquake,name="earthquake")
]Bu işlemi tüm app uygulamalarında yapmanız tavsiye edilir. Bu şekilde uygulamalar daha yönetilebilir hale gelecektir. Şimdi HTML dosyasında sayfa içi linkleme yaparak aşağıda 10.satırdaki gibi kalıcı bağlantı oluşturacağız:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Office</title>
</head>
<body>
<h1>Change Currency</h1>
<h2><a href="{% url 'temp_app:earthquake' %}">Earthquake Page</a></h2>
<h2><a href="{% url 'temp_app:index' %}">Home Page</a></h2>
</body>
</html>Ekran Görüntüsü:
Linklere tıkladığınızda ilgili sayfalara yönlendirileceksiniz. Böylelikle farklı uygulamalar arasında kolaylıkla geçiş sağlayacaksınız.
Django Template Html İçerisinde Kalıtım (Template Inheritance)
Bir şablon temeli oluşturarak uygulamanın ve projenin tamamında template gibi hazır halde kullanılmasına olanak sağlar. Bir navigasyon bar, footer bar, header bar, hamburger menü gibi tasarımlardan bahsediyorum.
Burda Bootstrap’ten faydalanabilirsiniz. Şimdi yazacağımız app uygulamayı kök dizinde templates adında oluşturacağız. Daha sonra temel HTML şablonu bu klasör içinde oluşturalım. Adı base.html olsun.
Bootstrap sitesinden öncelikle referans olacak JS ve Css dosyalarını base.html içerisine tanımlayalım. Bootstrap sitesinden güncel Js ve Css url adreslerini kopyalayabilirsiniz.
Şimdi bu iki kaynak url adresini base.html içerisine ekleyerek başlayalım. Ayrıca yine Bootstrap/Navbar Fixed sayfasının kaynak kodlarından <style>…</style> arasını ve body bloğunda <nav>…</nav> arasını base.html içerisine kopyalayalım.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base Web Template</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
<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:#0000001a;border:solid rgba(0,0,0,.15);border-width:1px 0;box-shadow:inset 0 .5em 1.5em #0000001a,inset 0 .125em .5em #00000026}.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 .bi{width:1em;height:1em}.bd-mode-toggle .dropdown-menu .active .bi{display:block!important}
</style>
</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>
{% block content %}
{% endblock content %}
<h1>base-html-finished</h1>
</body>
</html>base.html içerisinde yukarıda 14 ve 16.satırlarda görüldüğü gibi Jinja syntax satırları oluşturun.
{% block content %}
{% endblock content %}
Bir sonraki adımda önceki uygulamamız olan temp_app içinde first.html adında bir html sayfa oluşturalım. Oluşturduğumuz bu base.html şablonunu first.html içerisine aşağıdaki gibi extend edeceğiz.
{% extends 'base.html' %}
{% block content %}
<br><br><br><br><br>
<h2>Test Page Contents</h2>
{% endblock %}base.html sayfasının da aralarında olduğu şablonları kullanabilmek için settings.py içerisinde de kök dizinde açtığımız ve içine base.html dosyasını oluşturduğumuz templates dizinini tanımlamak gerekiyor.
settings.py içerisinde “TEMPLATES = [ ile başlayan satırda DIRS:” yazan yerde aşağıdaki satırı ekleyin:
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [os.path.join(BASE_DIR,"../templates")],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],Ayrıca views.py içerisinde de index sayfası olarak first.html sayfasını aşağıdaki şekilde tanımlanması gerekiyor:
from django.shortcuts import render
from django.http import HttpResponse
from django.urls import reverse
import requests as req
import datetime as dt
# Create your views here.
def index(request):
return render(request,"temp_app/first.html")Bu sayede first.html sayfası base.html sayfasında inheritance (miras) almış olacak. Hatırlatmakta yarar var, aynı işlemi PHP dilinde include kullanarak yapıyoruz.
Ekran Görüntüsü:
Aynı şekilde daha önce tasarladığımız currency.html içinde base.html‘i şablon olarak tanımlayabiliriz. currency içinde html taglarını silin ve sadece aşağıdaki satırlar kalsın. Başına ve sonuna da extends işlemi uygulayalım:
{% extends 'base.html' %}
{% block content %}
<h1>Change Currency</h1>
<!--Pull Data with Jinja Syntax-->
<h2><a href="{% url 'temp_app:earthquake' %}">Earthquake Page</a></h2>
<h2><a href="{% url 'temp_app:index' %}">Home Page</a></h2>
<b>Original:</b> {{testing}}<br>
<b>Upper:</b> {{testing | upper}}<br>
<b>Lower:</b> {{testing | lower}}<br>
{% if Dollar.1 > 39 %}
<h2>Dollar is the most expensive {{Dollar.1}}</h2>
{% else %}
<h2>Dollar is very cheap {{Dollar.1}}</h2>
{% endif %}
{% for key,value in BTC.items %}
{{key}}:{{value}}<br>
{% endfor %}
{% for item in Euro %}
<h2>{{item}}</h2>
{% endfor %}
{% endblock %}Ekran Görüntüsü:
base.html içerisinde menülerin “<a href=…..” tagı içinde istenen sayfaya yönlendirme yapmak için:
{% url ‘temp_app:currency’ %}
yada
{% url ‘temp_app:earthquake’ %}
yazarak sayfaların python kodu olarak dinamik şekilde tanımlanması yapılır.
Django ile Sabit 404 Sayfası Nasıl Yapılır?
Bu bölümde Django ve Jinja Syntax kullanarak Python’da 404 sayfası gibi statik sayfa nasıl tanımlanır göreceksiniz. Öncelikle settings.py içerisinde DEBUG satırını False değere çekin ve sunucunun çalışabilmesi için ALLOWED_HOSTS ayarını da aşağıdaki gibi değiştirin.
DEBUG = False
ALLOWED_HOSTS = [“localhost”, “127.0.0.1”]
Sonrasında kök dizinde bulunan templates klasörü içinde 404.html adında bir dosya oluşturun. Dosya ismi mutlaka 404.html olmalıdır. Bu sayfa içerisinde basit bir tasarım yapın aşağıdaki gibi:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Page is not Found</title>
</head>
<body>
<h1>404 - Pages is not found!</h1>
<p>Try again, please</p>
</body>
</html>Browser’dan, olmayan bir sayfanın url adresini yazın ve enter’a basın. (http://localhost:8000/temp_app/asdfdsadsdasd)
Ekran Görüntüsü:
Statik Sayfa ve Medya Oluşturmak
Tıpkı “404 Sayfa Bulunamadı” sayfası gibi sayfalar veya medya dosyaları tanımlayabilmek için bir takım değişiklikler yapmanız gerekecektir. Bunun için öncelikle settings.py dosyası içerisinde STATIC_URL = “static/” satırını bulun.
Uygulamanızın olduğu dizinde static adında bir klasör oluşturun. Sonra bu klasörün içinde de uygulamanız ile aynı isimde olan “temp_app” klasörü oluşturun. Daha sonra bu klasörün içine herhangi bir medya dosyasını kopyalayın.
VS Code Explorer paneli şu şekilde görünecektir:
Bu aşamadan sonra Html sayfaların içerisinde image.png adlı görseli kullanabiliriz. Html sayfa içerisinde
{% load static %}
şeklinde Jinja syntax‘i kullanarak static klasörü içindeki dosyaları tanımlayın. Sonrasında ise html tag’ler içerisinde direkt olarak images.png dosyasını kullanabileceksiniz.
first.html içerisinde bu image dosyasını gösterelim:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<br><br><br><br><br>
<h2>Test Page Contents</h2>
<img src="{% static '/temp_app/images.png' %}" alt="404 Logo">
{% endblock %}“load static” syntax’in çalışabilmesi için settings.py dosyasında
DEBUG=True
ALLOWED_HOSTS=[ ]
olarak ayarlanması gerekiyor. Aksi takdirde çalışmayacaktır.
Jinja Syntax eşliğinde Django ile Python kodlarını kullanarak basit bir web sayfası nasıl yapılır öğrenmiş olduk.
BİR YORUM YAZIN
ZİYARETÇİ YORUMLARI - 0 YORUM