Kako izraditi web-aplikacije prilagođene mobilnim uređajima koristeći Django Framework - 3. dio


“Ovaj je članak revidiran i ažuriran najnovijom verzijom Djanga – svibanj 2016.”

U 1. dijelu ove serije naučili ste kako instalirati i konfigurirati Django u virtualnom okruženju i izradili ste kostur svog prvog projekta.

Zatim smo u 2. dijelu stvorili aplikaciju i model za Post objekte, koje smo kasnije migrirali u bazu podataka. Konačno, pokazali smo vam kako integrirati svoju novostvorenu aplikaciju u Django administracijsko korisničko sučelje.

Ovi su članci dio Django serije:

Instaliranje i konfiguriranje Django web okvira s virtualnim okruženjima – 1. dio

Pregled osnova Pythona i stvaranje vaše prve web aplikacije s Djangom – 2. dio

U ovom završnom vodiču raspravljat ćemo o tome kako pristupiti aplikaciji pomoću korisničkog sučelja i kako je učiniti prilagođenom mobilnim uređajima za sve vrste uređaja. To je reklo, počnimo.

Stvaranje objekata putem Django admin sučelja

Za stvaranje objekata tipa Post (zapamtite da je to model koji smo definirali u Drugom dijelu ove serije), koristit ćemo Django administratorsko sučelje.

Provjerite radi li Django ugrađeni web poslužitelj na portu 8000 (ili nekom drugom po vašem izboru) pokretanjem sljedeće naredbe iz vanjskog myfirstdjangoproject direktorija:


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

Sada otvorite svoj web-preglednik i pokažite na http://ip-address:8000/admin, zatim se prijavite pomoću vjerodajnica koje ste postavili u prethodnom članku i počnite pisati post (koji, opet, će stvoriti objekt tipa Post i umetnuti povezane podatke u temeljnu bazu podataka):

Ponovite postupak 2 ili 3 puta:

Nakon što smo izradili nekoliko postova, pogledajmo što trebamo učiniti kako bismo ih prikazali pomoću našeg web preglednika.

Naš početni pogled

Naš prvi prikaz (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) bit će zadužen za filtriranje svih Post objekata i vraćanje onih gdje je vrijednost whenPublished manje je ili jednako trenutnom datumu i vremenu (whenPublished__lte=timezone.now()) poredano prema silaznom whenPublished, što je isto kao da kažete “ prvo najnovije“.

Ti se objekti spremaju u varijablu prikladnog naziva posts i vraćaju se (identificirani kao allposts) za ugradnju u HTML, kao što ćemo vidjeti u sljedećem odjeljku:


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})

Konačno, dvostruka podvlaka u whenPublished__lte iznad koristi se za odvajanje polja baze podataka (whenPublished) od filtra ili operacije (lte=manje od ili jednako).

Nakon što smo definirali naš početni pogled, poradimo na pridruženom predlošku.

Napravite predložak za naš prvi projekt

Slijedeći upute i putanje dane u prethodnom odjeljku, pohranit ćemo naš početni predložak unutar myblog/templates/myblog. To znači da ćete morati stvoriti direktorij pod nazivom templates i poddirektorij pod nazivom myblog:


cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog

Predložak ćemo nazvati posts.html i u njega umetnuti sljedeći kod. Primijetit ćete da dodajemo mrežne reference za jQuery, Bootstrap, FontAwesome i Google fontove.

Osim toga, Python kod smo zatvorili u vitičaste zagrade unutar HTML-a. Imajte na umu da ćemo za svaki objekt tipa Post prikazati njegov naslov, datum objave i autora te na kraju njegov tekst. Na kraju, crvenom bojom vidjet ćete da se pozivamo na objekte vraćene putem myblog/views.py:

U redu, evo datoteke posts.html:


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

U gornjem predlošku, filtar prijeloma redaka koristi se za zamjenu prijeloma redaka u običnom tekstu s odgovarajućim HTML ekvivalentom (
ili

) za pravilno formatiranje svake objave s odvajanjem odlomaka.

Zatim moramo postaviti mapiranje između URL-ova u našoj aplikaciji i odgovarajućih prikaza koji vraćaju podatke. Da biste to učinili, stvorite datoteku pod nazivom urls.py unutar myblog sa sljedećim sadržajem:


from django.conf.urls import url
from . import views
urlpatterns = [
    url(r'^$', views.posts, name='posts'),
]

r'^$' zaslužuje malo više objašnjenja. r na početku upućuje Django da tretira niz unutar jednostrukih navodnika kao regularni izraz.

Konkretno, r'^$' predstavlja prazan niz tako da kada usmjerimo naš preglednik na http://ip-address:8000 (i ništa drugo), podaci koje vraća varijabla posts unutar views.py (pogledajte prethodni odjeljak) bit će predstavljeni na našoj početnoj stranici:

Na kraju, ali ne manje važno, uključit ćemo urls.py datoteku naše blog aplikacije (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) u urls.py našeg glavnog projekta (~/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')),
]

Zatim pokrenimo web poslužitelj:


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

Sada bismo trebali moći vidjeti popise postova koje smo ranije izradili:

Zahvaljujući Bootstrapu još uvijek možete imati izvrsnu vizualizaciju na manjem uređaju:

Sumirati

Pregledajmo sada koncepte koje smo obradili u ovom članku i kroz ovu seriju:

1. Svaki model definira objekt i preslikava se u tablicu baze podataka, čija se polja preslikavaju u svojstva tog objekta. S druge strane, predložak definira korisničko sučelje na kojem će se prikazati podaci koje vraća pogled.

Recimo da želimo modificirati naš model dodavanjem polja pod nazivom summary objektu Post, gdje ćemo pohraniti izborni kratki opis svake objave. Dodajmo sljedeći redak u myblog/models.py:

summary = models.CharField(max_length=350, blank=True, null=True)

Kao što smo naučili u prethodnom članku, moramo premjestiti promjene u bazu podataka:


python manage.py makemigrations myblog
python manage.py migrate myblog

Zatim upotrijebite administratorsko sučelje za uređivanje postova i svakom postu dodajte kratki sažetak. Na kraju zamijenite sljedeći redak u predlošku (posts.html):

<p>{{ post.text|linebreaks }}</p>

s

<p>{{ post.summary }}</p>

Osvježite početnu stranicu da vidite promjene:

2. Funkcija view preuzima HTTP zahtjev i vraća HTTP odgovor. U ovom članku def posts(request) u views.py upućuje poziv temeljnoj bazi podataka za dohvaćanje svih postova. Ako želimo dohvatiti sve postove s riječju ansible u naslovu, trebali bismo zamijeniti.

posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')

s

posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')

Odvajanjem korisničkog sučelja od logike aplikacije u web aplikacijama, Django olakšava zadatke održavanja i eskalacije aplikacija.

3. Ako ste slijedili upute navedene u ovoj seriji, struktura vašeg projekta trebala bi biti sljedeća:


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

U slučaju da se gornji popis ne prikazuje ispravno u vašem pregledniku, evo snimke zaslona izlaza sljedeće naredbe:


tree myfirstdjangoenv/myfirstdjangoproject

Sažetak

Iako se svi ovi koncepti u početku mogu činiti pomalo zastrašujućim, uvjeravam vas da je Django vrijedan svih napora potrebnih da se s njim upoznate

Nadam se da će vas primjer koji smo koristili u ovoj seriji kako bismo vas upoznali s ovim izvanrednim web okvirom motivirati da naučite više. Ako je tako, službena Django dokumentacija (koja se stalno ažurira) je najbolje mjesto za početak.

Uvjeravam vas da Django ima mnogo više od onoga što možemo adekvatno pokriti u nizu članaka, pa ga slobodno istražite i učite radeći!

Slobodno nam pošaljite poruku s pitanjima ili prijedlozima koristeći obrazac u nastavku.