Django Çerçevesini Kullanarak Mobil Dostu Web Uygulamaları Nasıl Oluşturulur - Bölüm 3
“Bu makale Django'nun en son sürümüyle revize edildi ve güncellendi – Mayıs 2016 ”
Bu serinin 1. Bölümünde, Django'yu sanal ortamda nasıl kurup yapılandıracağınızı öğrendiniz ve ilk projenizin iskeletini oluşturdunuz.
Daha sonra Bölüm 2'de Post nesneleri için bir uygulama ve model oluşturduk ve bunları daha sonra veritabanına taşıdık. Son olarak yeni oluşturduğunuz uygulamanızı Django yönetim kullanıcı arayüzüne nasıl entegre edeceğinizi gösterdik.
Bu makaleler Django serisinin parçasıdır:
Django Web Çerçevesini Sanal Ortamlarla Kurmak ve Yapılandırmak – Bölüm 1
Python Temellerini İncelemek ve Django ile İlk Web Uygulamanızı Oluşturmak – Bölüm 2
Bu son kılavuzda, kullanıcı arayüzünü kullanarak uygulamaya nasıl erişileceğini ve uygulamanın her tür cihaz için nasıl mobil uyumlu hale getirileceğini tartışacağız. Bu, hadi başlayalım dedi.
Django yönetici arayüzü aracılığıyla nesneler oluşturma
Post türünde nesneler oluşturmak için (bunun, bu serinin 2. Bölümünde tanımladığımız model olduğunu unutmayın), Django yönetici arayüzünü kullanacağız.
Dış myfirstdjangoproject dizininden aşağıdaki komutu çalıştırarak, Django yerleşik web sunucusunun 8000 bağlantı noktasında (veya seçtiğiniz başka bir bağlantı noktasında) çalıştığından emin olun:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Şimdi web tarayıcınızı açın ve http://ip-address:8000/admin adresine gidin, ardından önceki makalede ayarladığınız kimlik bilgilerini kullanarak oturum açın ve bir yazı yazmaya başlayın (ki bu da yine Post türünde bir nesne oluşturacak ve ilişkili verileri temel alınan veritabanına ekleyecektir):
İşlemi 2 veya 3 kez tekrarlayın:
Birkaç gönderi oluşturduktan sonra bunları web tarayıcımızda görüntülemek için ne yapmamız gerektiğine bakalım.
İlk görüşümüz
İlk görünümümüz (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py), tüm Post nesnelerinin filtrelenmesinden ve whenPublished değerinin bulunduğu yerlere döndürülmesinden sorumlu olacaktır. , geçerli tarih ve saatten küçük veya ona eşittir (whenPublished__lte=timezone.now()), whenPublished'den başlayarak sıralanır; bu, "" demekle aynı anlama gelir. Önce en yeni".
Bu nesneler, uygun şekilde gönderiler olarak adlandırılan bir değişkene kaydedilir ve bir sonraki bölümde göreceğimiz gibi, HTML'ye gömülmek üzere döndürülür (tüm gönderiler olarak tanımlanır):
from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
return render(request, 'myblog/posts.html', {'allposts': posts})
Son olarak, yukarıdaki whenPublished__lte içindeki çift alt çizgi, (whenPublished) veritabanı alanını bir filtreden veya işlemden ayırmak için kullanılır (lte=less than veya eşit).
İlk görünümümüzü tanımladıktan sonra ilgili şablon üzerinde çalışalım.
İlk Projemiz için Şablon Oluşturun
Önceki bölümde verilen yönergeleri ve yolları takip ederek ilk şablonumuzu myblog/templates/myblog içinde saklayacağız. Bu, şablonlar adında bir dizin ve blogum adında bir alt dizin oluşturmanız gerekeceği anlamına gelir:
cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog
Şablonu posts.html olarak adlandıracağız ve içine aşağıdaki kodu ekleyeceğiz. jQuery, Bootstrap, FontAwesome ve Google fontlarına çevrimiçi referanslar eklediğimizi fark edeceksiniz.
Ek olarak, Python kodunu HTML'nin içinde küme parantezleri içine aldık. Lütfen Post türündeki her nesne için başlığını, yayınlanma tarihini ve yazarını ve son olarak metnini göstereceğimizi unutmayın. Son olarak kırmızı renkte, myblog/views.py yoluyla döndürülen nesnelere referans yaptığımızı göreceksiniz:
Tamam, işte posts.html dosyası:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<style>
.title {
font-family: 'Indie Flower', serif;
font-size: 30px;
color: #1E90FF;
}
h1 {
font-family: 'Pacifico', serif;
font-size: 45px;
color: #1E90FF;
}
</style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
<div>
<div class="title">{{ post.title }}</div>
<strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</div>
</body>
</html>
Yukarıdaki şablonda, satır sonları filtresi, düz metindeki satır sonlarını karşılık gelen HTML eşdeğeriyle (
Daha sonra, uygulamamızdaki URL'ler ile verileri döndüren karşılık gelen görünümler arasında bir eşleme ayarlamamız gerekir. Bunu yapmak için blogum içinde aşağıdaki içeriğe sahip urls.py adında bir dosya oluşturun:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.posts, name='posts'),
]
r'^$' biraz daha açıklamayı hak ediyor. Baştaki r, Django'ya tek tırnak içindeki dizeyi normal ifade olarak ele alması talimatını verir.
Özellikle, r'^$' boş bir dizeyi temsil eder, böylece tarayıcımızı http://ip-address:8000'e (ve başka hiçbir şeye) yönlendirdiğimizde, views.py içindeki posts değişkeni tarafından döndürülen veriler (önceki bölüme bakın) ana sayfamızda sunulacaktır:
Son olarak, blog uygulamamızın urls.py dosyasını (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) 'ye dahil edeceğiz. ana projemizin urls.py'i (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py):
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'', include('myblog.urls')),
]
O halde web sunucusunu başlatalım:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Artık daha önce oluşturduğumuz gönderilerin listesini görebilmemiz gerekir:
Bootstrap sayesinde daha küçük bir cihazda da mükemmel bir görselleştirmeye sahip olabilirsiniz:
Özetliyor
Şimdi bu makalede ve bu seri boyunca ele aldığımız kavramları gözden geçirelim:
1. Her model bir nesneyi tanımlar ve alanları o nesnenin özellikleriyle eşlenen bir veritabanı tablosuyla eşleşir. Öte yandan şablon, görünümün döndürdüğü verilerin görüntüleneceği kullanıcı arayüzünü tanımlar.
Diyelim ki, Post nesnesine summary adlı bir alan ekleyerek modelimizi değiştirmek istiyoruz; burada her gönderinin isteğe bağlı kısa açıklamasını saklayacağız. myblog/models.py'ye aşağıdaki satırı ekleyelim:
summary = models.CharField(max_length=350, blank=True, null=True)
Önceki makalede öğrendiğimiz gibi değişiklikleri veritabanına taşımamız gerekiyor:
python manage.py makemigrations myblog
python manage.py migrate myblog
Daha sonra gönderileri düzenlemek ve her gönderiye kısa bir özet eklemek için yönetici arayüzünü kullanın. Son olarak şablondaki (posts.html) aşağıdaki satırı değiştirin:
<p>{{ post.text|linebreaks }}</p>
ile
<p>{{ post.summary }}</p>
Değişiklikleri görmek için ana sayfayı yenileyin:
2. Bir view işlevi bir HTTP isteğini alır ve bir HTTP yanıtı döndürür. Bu makalede, views.py'deki def posts(request), tüm gönderileri almak için temeldeki veritabanına çağrı yapar. Eğer başlığında ansible kelimesi bulunan tüm gönderileri almak istiyorsak, değiştirmeliyiz.
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
ile
posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')
Django, web uygulamalarındaki kullanıcı arayüzünü uygulama mantığından ayırarak uygulamaların bakımı ve yükseltilmesi görevlerini kolaylaştırır.
3. Bu seride verilen talimatları izlediyseniz projenizin yapısı aşağıdaki gibi olmalıdır:
myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│ ├── admin.py
│ ├── admin.pyc
│ ├── __init__.py
│ ├── __init__.pyc
│ ├── migrations
│ │ ├── 0001_initial.py
│ │ ├── 0001_initial.pyc
│ │ ├── __init__.py
│ │ └── __init__.pyc
│ ├── models.py
│ ├── models.pyc
│ ├── templates
│ │ └── myblog
│ │ └── posts.html
│ ├── tests.py
│ ├── urls.py
│ ├── urls.pyc
│ ├── views.py
│ └── views.pyc
└── myfirstdjangoproject
├── __init__.py
├── __init__.pyc
├── settings.py
├── settings.pyc
├── urls.py
├── urls.pyc
├── wsgi.py
└── wsgi.pyc
Yukarıdaki listenin tarayıcınızda düzgün görüntülenmemesi durumunda aşağıdaki komutun çıktısının ekran görüntüsünü burada bulabilirsiniz:
tree myfirstdjangoenv/myfirstdjangoproject
Özet
Tüm bu kavramlar ilk başta biraz korkutucu görünse de sizi temin ederim ki Django, onu tanımak için gereken tüm çabalara değer.
Umarım bu seride sizi bu olağanüstü web çerçevesiyle tanıştırmak için kullandığımız örnek, sizi daha fazlasını öğrenmeye motive edecektir. Eğer öyleyse, resmi Django belgeleri (sürekli güncel tutulur) başlamak için en iyi yerdir.
Sizi temin ederim ki, Django'da bir dizi makalede yeterince ele alabileceğimizden çok daha fazlası var; o yüzden onu keşfetmekten ve yaparak öğrenmekten çekinmeyin!
Aşağıdaki formu kullanarak bize soru veya önerilerinizi içeren bir not bırakmaktan çekinmeyin.