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


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

U Delu 1 ove serije naučili ste kako da instalirate i konfigurišete Django u virtuelnom okruženju i kreirali ste kostur svog prvog projekta.

Zatim smo u Drugom dijelu kreirali aplikaciju i model za objekte Post, koje smo kasnije migrirali u bazu podataka. Konačno, pokazali smo vam kako da integrišete vašu novokreiranu aplikaciju u korisnički interfejs Django administracije.

Ovi članci su dio Django serije:

Instaliranje i konfiguriranje Django Web Frameworka s virtualnim okruženjima – 1. dio

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

U ovom završnom vodiču ćemo razgovarati 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. Rečeno je, počnimo.

Kreiranje objekata preko Django admin interfejsa

Da kreiramo objekte tipa Post (zapamtite da je to model koji smo definisali u Drugom delu ove serije), koristićemo Django admin interfejs.

Uvjerite se da Django ugrađeni web server radi na portu 8000 (ili nekom drugom po vašem izboru) tako što ćete pokrenuti sljedeću naredbu 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, a zatim se prijavite koristeći vjerodajnice koje ste postavili u prethodnom članku i počnite pisati objavu (što, opet, će kreirati objekat tipa Post i umetnuti povezane podatke u osnovnu bazu podataka):

Ponovite postupak 2 ili 3 puta:

Nakon što smo kreirali nekoliko postova, hajde da vidimo šta treba da uradimo da bismo ih prikazali pomoću našeg web pretraživača.

Naš početni pogled

Naš prvi prikaz (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) će biti zadužen za filtriranje svih Post objekata i vraćanje onih u kojima je vrijednost whenPublished je manji ili jednak trenutnom datumu i vremenu (whenPublished__lte=timezone.now()) poredanim po opadanju whenPublished, što je isto kao da kažete " prvo najnovije“.

Ovi objekti se pohranjuju u promjenljivu zgodno nazvanu postove i vraćaju se (identificirani kao svi postovi) kako bi bili ugrađeni 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 donja crta u whenPublished__lte iznad se koristi za odvajanje polja baze podataka (whenPublished) od filtera ili operacije (lte=manje od ili jednaki).

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

Kreirajte predložak za naš prvi projekat

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


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

Šablon ćemo pozvati posts.html i umetnuti sljedeći kod u njega. Primijetit ćete da dodajemo online reference za jQuery, Bootstrap, FontAwesome i Google fontove.

Osim toga, Python kod smo zagradili unutar vitičastih zagrada unutar HTML-a. Napominjemo da ćemo za svaki objekt tipa Post prikazati njegov naslov, datum objave i autora i na kraju njegov tekst. Konačno, crvenom bojom ćete vidjeti da pravimo referencu 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 šablonu, filter prijeloma reda se koristi za zamjenu prijeloma reda u običnom tekstu odgovarajućim HTML ekvivalentom (
ili

) za pravilno formatiranje svake objave sa odvajanjem pasusa.

Zatim moramo postaviti mapiranje između URL-ova u našoj aplikaciji i odgovarajućih pogleda koji vraćaju podatke. Da biste to učinili, kreirajte 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. Vodeći r nalaže Djangu da tretira string unutar jednostrukih navodnika kao regularni izraz.

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

Na kraju, ali ne i najmanje važno, uključit ćemo datoteku urls.py 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 server:


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

Sada bismo trebali moći vidjeti liste postova koje smo kreirali ranije:

Zahvaljujući Bootstrap-u, još uvijek možete imati odličnu vizualizaciju na manjem uređaju:

Sažimanje

Pogledajmo sada koncepte koje smo pokrili u ovom članku i kroz ovu seriju:

1. Svaki model definira objekt i preslikava u tabelu baze podataka, čija se polja zauzvrat mapiraju na svojstva tog objekta. S druge strane, šablon definira korisničko sučelje gdje će biti prikazani podaci vraćeni pregledom.

Recimo da želimo izmijeniti naš model dodavanjem polja pod nazivom sažetak objektu Post, gdje ćemo pohraniti opcionalni kratak opis svake objave. Dodajmo sljedeći red u myblog/models.py:

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

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


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

Zatim koristite administrativno sučelje za uređivanje postova i dodavanje kratkog sažetka svakoj objavi. Na kraju, zamijenite sljedeći red u predlošku (posts.html):

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

sa

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

Osvježite početnu stranicu da vidite promjene:

2. Funkcija view uzima HTTP zahtjev i vraća HTTP odgovor. U ovom članku, def posts(request) u views.py poziva osnovnu bazu podataka za preuzimanje svih postova. Ako želimo da dohvatimo sve postove sa riječju ansible u naslovu, trebali bismo ih zamijeniti.

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

sa

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

Odvajajući korisničko sučelje od logike aplikacije u web aplikacijama, Django olakšava zadatke održavanja i eskalacije aplikacija.

3. Ako ste slijedili upute date u ovoj seriji, struktura vašeg projekta bi trebala 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 gornja lista ne prikazuje ispravno u vašem pretraživaču, evo snimka ekrana izlaza sljedeće naredbe:


tree myfirstdjangoenv/myfirstdjangoproject

Sažetak

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

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

Uvjeravam vas da Django ima puno više nego što možemo adekvatno obraditi u nizu članaka, pa slobodno istražite i učite radeći!

Slobodno nam pošaljite bilješku sa pitanjima ili prijedlozima koristeći formu ispod.