Django'da Öne Çıkanlar: Şablon Oluşturma Satırları Kaydediyor (2. Kısım)

Web siteleri oluşturmaya yönelik bazı basit yaklaşımlar, bir geliştiricinin her HTML satırını elle yazmasını gerektirir. Diğer uçta, ticari kodsuz site oluşturucular, kullanıcı için tüm HTML'yi otomatik olarak oluşturur, genellikle sonuçta ortaya çıkan koddaki okunabilirlik pahasına. Şablonlama, bu spektrumun ortasındadır, ancak elle yazılmış HTML'ye, örneğin React veya benzer bir kitaplık kullanarak tek sayfalık bir uygulamada sayfa yapısı oluşturmaktan daha yakındır. Süreklilikteki bu tatlı nokta, sıfırdan manuel HTML'nin (anlamsal/okunabilir kod, sayfa yapısı üzerinde tam kontrol, hızlı sayfa yükleme) birçok avantajını sağlar ve tümü yazmak için biraz zaman harcamak pahasına, endişeleri ve kesinliği birbirinden ayırır. elle değiştirilmiş HTML. Bu makale, karmaşık sayfalar yazmak için Django şablonunu kullanmayı gösterir.

Bugünün konusu Django çerçevesinin ötesinde geçerlidir. Flask (başka bir web çerçevesi) ve Pelican (statik bir site oluşturucu), şablonlama için aynı yaklaşımı kullanan diğer birçok Python projesinden sadece ikisidir. Jinja2, proje ayarlarını değiştirerek farklı bir çerçeve kullanabilmenize rağmen, üç çerçevenin de kullandığı şablonlama motorudur (kesinlikle söylemek gerekirse, Jinja2, Django şablonlamanın bir üst kümesidir). Çerçeve olmadan bile kendi projelerinize dahil edebileceğiniz bağımsız bir kitaplıktır, bu nedenle bu makaledeki teknikler genel olarak yararlıdır.

Serideki Önceki Parçalar :

• Django'da Öne Çıkanlar: Kullanıcı Modelleri ve Kimlik Doğrulama (Bölüm 1)
• Django'nun Öne Çıkanları: Modeller, Yönetici ve İlişkisel Veritabanından Yararlanma (3. Kısım)
• Django'nun Öne Çıkanları: Statik Varlıkları ve Medya Dosyalarını Uğraşmak (4. Kısım)
  

Sunucu Tarafı Oluşturma

Şablon, yalnızca HTML'nin ek sembollerle genişletildiği bir HTML dosyasıdır. HTML'nin ne anlama geldiğini hatırlayın: H yper T ext Markup L anguage . Şablonlama dilimiz olan Jinja2, dile ek anlamlı işaretleme sembolleri ekler. Bu ek yapılar, sunucu şablonu kullanıcıya düz bir HTML sayfası sunmak için oluşturduğunda yorumlanır (başka bir deyişle, şablonlama dilinden gelen ek semboller onu nihai çıktıya dönüştürmez).

Sunucu tarafı oluşturma, bir isteğe yanıt olarak bir web sayfası oluşturma işlemidir. Django, istemciye HTML sayfaları sunmak için sunucu tarafı oluşturmayı kullanır. Yürütmenin sonunda, bir görüntüleme işlevi, istemciye yanıt olarak gönderdiği tek bir HTML sayfası oluşturmak için HTTP isteğini, bir veya daha fazla şablonu ve isteğe bağlı olarak işlevin yürütülmesi sırasında erişilen verileri birleştirir. Veriler veritabanından görünümden geçerek şablona gider ve kullanıcıya ulaşır. Bu soyut açıklama tam olarak bir anlam ifade etmezse merak etmeyin, bu makalenin geri kalanı için somut bir örneğe döneceğiz.

Kurulum

Örneğimiz için, oldukça karmaşık bir web sayfası olan Start Bootstrap'in yönetici şablonunu alacağız ve HTML'yi bir Jinja2 şablonu olarak yeniden yazacağız. MIT lisanslı kitaplığın, gördüğünüz sayfayı oluşturmak için farklı bir şablonlama sistemi (JavaScript ve Pug'a dayalı) kullandığını, ancak yaklaşımlarının Jinja2 tarzı şablonlamadan önemli ölçüde farklı olduğunu unutmayın, bu nedenle bu örnek bir çeviriden çok tersine mühendisliktir. mükemmel açık kaynaklı projelerinden. Oluşturacağımız web sayfasını görmek için Start Bootstrap'ın canlı ön izlemesine göz atabilirsiniz.

Bu yazı için örnek bir uygulama hazırladım. Django projesini kendi bilgisayarınızda çalıştırmak için Python 3 sanal ortamınızı başlatın ve ardından aşağıdaki komutları çalıştırın:

 pip install django git clone https://github.com/philipkiely/sm_dh_2_dashboard.git cd sm_dh_2_dashboard python manage.py migrate python manage.py createsuperuser python manage.py loaddata employee_fixture.json python manage.py runserver

Ardından, web tarayıcınızı açın ve https://127.0.0.1:8000 gidin. Aşağıdaki resimle eşleşen önizleme ile aynı sayfayı görmelisiniz.

Bu öğretici ön yüze odaklandığından, temel alınan Django uygulaması çok basittir. Bu, tek bir web sayfasını sunmak için çok fazla yapılandırma gibi görünebilir ve adil olmak gerekirse. Ancak bu kadar kurulum, çok daha sağlam bir uygulamayı da destekleyebilir.

Şimdi, bu 668 satırlık HTML dosyasını düzgün bir şekilde tasarlanmış bir Django sitesine dönüştürme sürecinden geçmeye hazırız.

Şablonlama ve Kalıtım

Yüzlerce HTML satırını temiz koda yeniden düzenlemenin ilk adımı, öğeleri kendi şablonlarına bölmektir; bu, oluşturma adımı sırasında Django'nun tek bir web sayfasında oluşturacağıdır.

Sayfalara/şablonlara bir göz atın. Beş dosya görmelisiniz:

• base.html , her web sayfasının genişleteceği temel şablon. Başlığı, CSS içe aktarmalarını vb. içeren <head> içerir.
• navbar.html , üst gezinme çubuğunun HTML'si, gerektiğinde eklenecek bir bileşen.
• footer.html , sayfa alt bilgisinin kodu, gerektiğinde eklenecek başka bir bileşen.
• sidebar.html , kenar çubuğu için HTML, gerektiğinde eklenecek üçüncü bir bileşen.
• index.html , ana sayfaya özgü kod. Bu şablon, temel şablonu genişletir ve üç bileşeni içerir.

Django, dizin sayfasını oluşturmak için Voltron gibi bu beş dosyayı birleştirir. Buna izin veren anahtar kelimeler {% block %} , {% include %} ve {% extend %} . base.html'de :

 {% block content %} {% endblock %}

Bu iki satır, base.html'yi kendi HTML'lerini eklemek üzere genişleten diğer şablonlar için yer bırakır. content değişken bir ad olduğunu unutmayın, bir şablonda farklı adlara sahip birden çok blok olabilir, bu da alt şablonlara esneklik sağlar. Bunu index.html'de nasıl genişleteceğimizi görüyoruz:

 {% extends "base.html" %} {% block content %} <!-- HTML Goes Here --> {% endblock %}

extends anahtar sözcüğünü temel şablon adıyla birlikte kullanmak, dizin sayfasına yapısını verir ve bizi başlığa kopyalamaktan kurtarır (dosya adının çift tırnaklı dize biçiminde göreli bir yol olduğuna dikkat edin). Dizin sayfası, sitedeki çoğu sayfada ortak olan üç bileşeni de içerir. Bu bileşenleri aşağıdaki gibi include etiketleri ile getiriyoruz:

 {% extends "base.html" %} {% block content %} {% include "navbar.html" %} {% include "sidebar.html" %} <!--Index-Specific HTML--> {% include "footer.html" %} <!--More Index-Specific HTML--> {% endblock %}

Genel olarak, bu yapı sayfaları tek tek yazmaya göre üç temel fayda sağlar:

• DRY (Kendinizi Tekrar Etmeyin) Kodu
  Ortak kodu belirli dosyalara ayırarak, kodu yalnızca tek bir yerde değiştirebilir ve bu değişiklikleri tüm sayfalara yansıtabiliriz.
• Artan Okunabilirlik
  Dev bir dosyada gezinmek yerine, ilgilendiğiniz belirli bileşeni ayırabilirsiniz.
• Endişelerin Ayrılması
  Örneğin, kenar çubuğunun kodunun artık tek bir yerde olması gerekiyor, kodun altında yüzen herhangi bir sahte script etiketi veya ayrı bileşenler olması gerekenler arasında başka bir karışma olamaz. Tek tek parçaları faktoring etmek, bu iyi kodlama uygulamasını zorlar.

Belirli bileşenleri base.html şablonuna yerleştirerek daha da fazla kod satırı kaydedebilsek de, onları ayrı tutmak iki avantaj sağlar. Birincisi, onları tam olarak ait oldukları yere tek bir bloğa gömebilmemizdir (bu, yalnızca content bloğunun ana div'inin içine giren div ile ilgilidir). Diğer bir avantaj ise, bir sayfa oluşturacaksak, diyelim ki bir 404 hata sayfası ve kenar çubuğunu veya altbilgiyi istemedik, bunları dışarıda bırakabilirdik.

Bu yetenekler, şablon oluşturma kursu için eşittir. Şimdi dinamik özellikler sağlamak ve yüzlerce kod satırı kaydetmek için index.html'mizde kullanabileceğimiz güçlü etiketlere dönüyoruz.

İki Temel Etiket

Bu, kullanılabilir etiketlerin kapsamlı bir listesinden çok uzaktır. Şablon oluşturmayla ilgili Django belgeleri böyle bir numaralandırma sağlar. Şimdilik, şablonlama dilinin en yaygın iki öğesinin kullanım örneklerine odaklanıyoruz. Kendi çalışmamda, temelde yalnızca for ve if etiketlerini düzenli olarak kullanıyorum, ancak bir düzine veya daha fazla başka etiketin kendi kullanım durumlarına sahip olması sağlandı, şablon referansında incelemenizi tavsiye ederim.

Etiketlere geçmeden önce sözdizimi hakkında bir not düşmek istiyorum. {% foo %} etiketi, "foo"nun şablonlama sisteminin kendisinin bir işlevi veya başka bir yeteneği olduğu anlamına gelirken, {{ bar }} etiketi "bar"ın belirli şablona iletilen bir değişken olduğu anlamına gelir.

Döngüler için

Kalan index.html'de , kodun birkaç yüz satırlık en büyük bölümü tablodur. Bu sabit kodlanmış tablo yerine, tabloyu veritabanından dinamik olarak oluşturabiliriz. Kurulum adımından python manage.py loaddata employee_fixture.json dosyasını geri çağırın. Bu komut, 57 çalışan kaydının tamamını uygulamanın veritabanına yüklemek için Django Fikstürü adlı bir JSON dosyası kullandı. Bu verileri şablona iletmek için views.py'deki görünümü kullanırız:

 from django.shortcuts import render from .models import Employee def index(request): return render(request, "index.html", {"employees": Employee.objects.all()})

Oluşturulacak üçüncü konumsal argüman, şablona sunulan bir veri render . Tabloyu oluşturmak için bu verileri ve for etiketini kullanırız. Bu web sayfasını uyarladığım orijinal şablonda bile, çalışanlar tablosu sabit kodluydu. Yeni yaklaşımımız, yüzlerce satırlık tekrarlayan sabit kodlanmış tablo satırlarını keser. index.html şimdi şunları içeriyor:

 {% for employee in employees %} <trv <td>{{ employee.name }}</td> <td>{{ employee.position }}</td> <td>{{ employee.office }}</td> <td>{{ employee.age }}</td> vtd>{{ employee.start_date }}</td> <td>${{ employee.salary }}</td> </tr> {% endfor %}

Daha büyük avantaj, bunun tabloyu güncelleme sürecini büyük ölçüde basitleştirmesidir. Bir geliştiricinin, maaş artışını veya yeni işe alımları yansıtmak için HTML'yi manuel olarak düzenlemesini ve ardından bu değişikliği üretime geçirmesini sağlamak yerine, herhangi bir yönetici, gerçek zamanlı güncellemeler yapmak için yönetici panelini kullanabilir (https://127.0.0.1/admin, kullanın python manage.py createsuperuser ile oluşturduğunuz kimlik bilgilerine erişmek için). Bu, Django'yu statik bir site oluşturucuda veya başka bir şablonlama yaklaşımında kendi başına kullanmak yerine bu oluşturma motoruyla kullanmanın bir avantajıdır.

Aksi takdirde

if etiketi, şablon içindeki ifadeleri değerlendirmenize ve HTML'yi buna göre ayarlamanıza izin veren inanılmaz derecede güçlü bir etikettir. {% if 1 == 2 %} gibi satırlar, her seferinde aynı sonucu değerlendirdikleri için biraz işe yaramazsa tamamen geçerlidir. if etiketinin parladığı yer, görünüm tarafından şablona iletilen verilerle etkileşimde bulunulurken ortaya çıkar. sidebar.html'den alınan aşağıdaki örneği göz önünde bulundurun:

 <div class="sb-sidenav-footer"> <div class="small"> Logged in as: </div> {% if user.is_authenticated %} {{ user.username }} {% else %} Start Bootstrap {% endif %} </div>

Kullanıcı nesnesinin tamamının, bunu gerçekleştirmek için görünümde herhangi bir şey belirtmeden varsayılan olarak şablona aktarıldığını unutmayın. Bu, kullanıcının kimlik doğrulama durumuna (veya eksikliğine), kullanıcı adına ve bir kullanıcı profilinde veya diğer bağlı modelde depolanan verilere erişmek için yabancı anahtar ilişkilerinin izlenmesi de dahil olmak üzere diğer özelliklere, tümü HTML dosyasından erişmemizi sağlar.

Bu erişim düzeyinin güvenlik riskleri oluşturabileceğinden endişe duyabilirsiniz. Ancak, bu şablonların sunucu tarafı işleme çerçevesi için olduğunu unutmayın. Sayfayı oluşturduktan sonra, etiketler kendilerini tüketir ve saf HTML ile değiştirilir. Bu nedenle, eğer bir if ifadesi bazı koşullar altında bir sayfaya veri getiriyorsa, ancak veriler belirli bir durumda kullanılmıyorsa, if ifadesi sunucu tarafında değerlendirildiği için bu veriler istemciye hiç gönderilmeyecektir. Bu, uygun şekilde oluşturulmuş bir şablonun, gerekli olmadıkça bu veriler sunucudan ayrılmadan hassas verileri sayfalara eklemenin çok güvenli bir yöntemi olduğu anlamına gelir. Bununla birlikte, Django şablonlamanın kullanılması, hassas bilgileri güvenli, şifreli bir şekilde iletme ihtiyacını ortadan kaldırmaz, sadece user.is_authenticated gibi güvenlik kontrollerinin sunucu tarafında işlendiğinden HTML'de güvenli bir şekilde gerçekleşebileceği anlamına gelir.

Bu özelliğin bir dizi başka kullanım durumu vardır. Örneğin, genel bir ürün ana sayfasında, "kaydol" ve "oturum aç" düğmelerini gizlemek ve oturum açmış kullanıcılar için bunları bir "çıkış" düğmesiyle değiştirmek isteyebilirsiniz. Diğer bir yaygın kullanım, form gönderme gibi işlemler için başarı veya hata mesajlarını göstermek ve gizlemek içindir. Kullanıcı oturum açmadıysa, genellikle tüm sayfayı gizlemeyeceğinizi unutmayın. Tüm web sayfasını kullanıcının kimlik doğrulama durumuna göre değiştirmenin daha iyi bir yolu, onu views.py içindeki uygun işlevde kullanmaktır.

filtreleme

Görünümün işinin bir kısmı, verileri sayfaya uygun şekilde biçimlendirmektir. Bunu başarmak için etiketler için güçlü bir uzantımız var: filtreler. Django'da metni yaslamak, tarihleri ​​biçimlendirmek ve sayı eklemek gibi eylemleri gerçekleştirmek için birçok filtre mevcuttur. Temel olarak, filtreyi bir etiketteki değişkene uygulanan bir işlev olarak düşünebilirsiniz. Örneğin, maaş numaralarımızın "1200000" yerine "1.200.000$" okumasını istiyoruz. Index.html'de işi bitirmek için bir filtre kullanacağız:

 <td>${{ employee.salary|intcomma }}</td>

Boru karakteri | intcomma komutunu employee.salary değişkenine uygulayan filtredir. “$” karakteri şablondan gelmiyor, her seferinde görünen böyle bir öğe için onu etiketin dışına yapıştırmak daha kolay.

intcomma , index.html dosyamızın üst kısmına {% load humanize %} ve settings.py içindeki INSTALLED_APPS 'django.contrib.humanize', eklememizi gerektirdiğini unutmayın. Bu, sağlanan örnek uygulamada sizin için yapılır.

Çözüm

Jinja2 motoruyla sunucu tarafı işleme, temiz, uyarlanabilir, duyarlı ön uç kodu oluşturmak için temel araçlar sağlar. Sayfaları dosyalara ayırmak, esnek bileşime sahip DRY bileşenlerine izin verir. Etiketler, görünüm işlevleriyle veritabanından geçirilen verileri görüntülemek için temel yetenekler sağlar. Doğru yapıldığında, bu yaklaşım sitenin hızını, SEO yeteneklerini, güvenliğini ve kullanılabilirliğini artırabilir ve Django ve benzeri çerçevelerde programlamanın temel bir yönüdür.

Henüz yapmadıysanız, örnek uygulamaya bakın ve tam listeyi kullanarak kendi etiketlerinizi ve filtrelerinizi eklemeyi deneyin.

Django Highlights, Django'da web geliştirmenin önemli kavramlarını tanıtan bir seridir. Her makale, ön uç geliştiricilerin ve tasarımcıların kod tabanının "diğer yarısı" hakkında daha derin bir anlayışa ulaşmalarına yardımcı olmayı amaçlayan Django geliştirmesinin bir yönüne yönelik bağımsız bir kılavuz olarak yazılmıştır. Bu makaleler çoğunlukla teori ve gelenek hakkında bir anlayış kazanmanıza yardımcı olmak için oluşturulmuştur, ancak Django 3.0'da yazılmış bazı kod örnekleri içerir.

Serideki Önceki Parçalar :

• Django'da Öne Çıkanlar: Kullanıcı Modelleri ve Kimlik Doğrulama (Bölüm 1)
• Django'nun Öne Çıkanları: Modeller, Yönetici ve İlişkisel Veritabanından Yararlanma (3. Kısım)
• Django'nun Öne Çıkanları: Statik Varlıkları ve Medya Dosyalarını Uğraşmak (4. Kısım)