Zoeken op website

Hoe u mobielvriendelijke webapplicaties kunt maken met het Django Framework - Deel 3

“Dit artikel is herzien en bijgewerkt met de nieuwste versie van Django – mei 2016 ”

In Deel 1 van deze serie heb je geleerd hoe je Django in een virtuele omgeving installeert en configureert en heb je het skelet van je eerste project gemaakt.

Vervolgens hebben we in Deel 2 een applicatie en een model gemaakt voor Post-objecten, die we later naar de database hebben gemigreerd. Ten slotte hebben we u laten zien hoe u uw nieuw gemaakte applicatie kunt integreren in de Django-beheergebruikersinterface.

Deze artikelen maken deel uit van de Django-serie:

Django Web Framework installeren en configureren met virtuele omgevingen – Deel 1

De basisprincipes van Python doornemen en uw eerste webapplicatie maken met Django – Deel 2

In deze laatste handleiding bespreken we hoe u toegang krijgt tot de applicatie via de gebruikersinterface en hoe u deze mobielvriendelijk kunt maken voor alle soorten apparaten. Dat gezegd hebbende, laten we aan de slag gaan.

Objecten maken via de Django-beheerinterface

Om objecten van het type Post te maken (onthoud dat dit het model is dat we in Deel 2 van deze serie hebben gedefinieerd), gebruiken we de Django-beheerinterface.

Zorg ervoor dat de ingebouwde webserver van Django draait op poort 8000 (of een andere poort naar keuze) door de volgende opdracht uit te voeren vanuit de buitenste map myfirstdjangoproject:


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

Open nu uw webbrowser en wijs naar http://ip-address:8000/admin, log vervolgens in met de inloggegevens die u in het vorige artikel hebt ingesteld en begin met het schrijven van een bericht (wat, nogmaals, zal een object van het type Post aanmaken en de bijbehorende gegevens in de onderliggende database invoegen):

Herhaal het proces 2 of 3 keer:

Nadat we een aantal berichten hebben gemaakt, gaan we kijken wat we moeten doen om ze weer te geven met onze webbrowser.

Onze eerste visie

Onze eerste weergave (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) zal verantwoordelijk zijn voor het filteren van alle Post-objecten en het retourneren van de objecten met de waarde van whenPublished is kleiner dan of gelijk aan de huidige datum en tijd (whenPublished__lte=timezone.now()) geordend door aflopend whenPublished, wat hetzelfde is als zeggen “ nieuwste eerst“.

Deze objecten worden opgeslagen in een variabele met de handige naam posts, en worden geretourneerd (geïdentificeerd als allposts) om te worden ingebed in de HTML, zoals we in de volgende sectie zullen zien:


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

Ten slotte wordt het dubbele onderstrepingsteken in whenPublished__lte hierboven gebruikt om een databaseveld (whenPublished) te scheiden van een filter of een bewerking (lte=kleiner dan of gelijk).

Nadat we onze eerste weergave hebben gedefinieerd, gaan we aan de bijbehorende sjabloon werken.

Maak een sjabloon voor ons eerste project

Door de richtlijnen en paden uit de vorige sectie te volgen, zullen we onze initiële sjabloon opslaan in mijnblog/templates/mijnblog. Dit betekent dat je een map met de naam templates en een submap met de naam mijnblog moet maken:


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

We noemen de sjabloon posts.html en voegen de volgende code erin in. U zult merken dat we online verwijzingen toevoegen naar de lettertypen jQuery, Bootstrap, FontAwesome en Google.

Bovendien hebben we Python-code tussen accolades in de HTML geplaatst. Houd er rekening mee dat we voor elk object van het type Post de titel, de publicatiedatum en auteur, en ten slotte de tekst tonen. Ten slotte zul je in het rood zien dat we verwijzen naar de objecten die zijn geretourneerd via myblog/views.py:

Oké, hier is het posts.html bestand:


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

In de bovenstaande sjabloon wordt het filter voor regeleinden gebruikt om regeleinden in platte tekst te vervangen door het overeenkomstige HTML-equivalent (
 of

) om elk bericht correct op te maken met alineascheiding.

Vervolgens moeten we een mapping opzetten tussen URL's in onze applicatie en de bijbehorende weergaven die de gegevens retourneren. Om dit te doen, maakt u een bestand met de naam urls.py in mijnblog met de volgende inhoud:


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

De r'^$' verdient wat meer uitleg. De leidende r instrueert Django om de string tussen enkele aanhalingstekens te behandelen als een reguliere expressie.

In het bijzonder vertegenwoordigt r'^$' een lege string, zodat wanneer we onze browser naar http://ip-address:8000 (en niets anders) verwijzen, de gegevens die worden geretourneerd door de variabele posts binnen views.py (zie de vorige sectie) worden op onze startpagina weergegeven:

Als laatste, maar daarom niet minder belangrijk, zullen we het bestand urls.py van onze blogapplicatie (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) opnemen in de urls.py van ons hoofdproject (~/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')),
]

Laten we dan de webserver starten:


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

We zouden nu de lijsten met berichten moeten kunnen zien die we eerder hebben gemaakt:

Dankzij Bootstrap kun je nog steeds een uitstekende visualisatie krijgen op een kleiner apparaat:

Opsommen

Laten we nu de concepten bekijken die we in dit artikel en in deze serie hebben behandeld:

1. Elk model definieert een object en verwijst naar een databasetabel, waarvan de velden op hun beurt verwijzen naar de eigenschappen van dat object. Aan de andere kant definieert een sjabloon de gebruikersinterface waar de gegevens die door de weergave worden geretourneerd, worden weergegeven.

Laten we zeggen dat we ons model willen aanpassen door een veld met de naam samenvatting toe te voegen aan het object Post, waar we een optionele korte beschrijving van elk bericht opslaan. Laten we de volgende regel toevoegen aan myblog/models.py:

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

Zoals we in het vorige artikel hebben geleerd, moeten we de wijzigingen naar de database migreren:


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

Gebruik vervolgens de beheerdersinterface om de berichten te bewerken en een korte samenvatting aan elk bericht toe te voegen. Vervang ten slotte de volgende regel in de sjabloon (posts.html):

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

met

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

Vernieuw de startpagina om de wijzigingen te zien:

2. Een view-functie neemt een HTTP-verzoek en retourneert een HTTP-antwoord. In dit artikel roept def posts(request) in views.py de onderliggende database op om alle berichten op te halen. Als we alle berichten met het woord anible in de titel willen ophalen, moeten we vervangen.

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

met

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

Door de gebruikersinterface te scheiden van de applicatielogica in webapplicaties, faciliteert Django de taken van het onderhouden en escaleren van apps.

3. Als u de instructies in deze serie heeft gevolgd, zou de structuur van uw project er als volgt uit moeten zien:


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

In het geval dat de bovenstaande lijst niet correct wordt weergegeven in uw browser, is hier een screenshot van de uitvoer van de volgende opdracht:


tree myfirstdjangoenv/myfirstdjangoproject

Samenvatting

Hoewel al deze concepten in eerste instantie misschien een beetje intimiderend lijken, kan ik je verzekeren dat Django alle inspanningen die nodig zijn om er kennis mee te maken zeker waard is.

Ik hoop dat het voorbeeld dat we in deze serie hebben gebruikt om u kennis te laten maken met dit uitstekende webframework u zal motiveren om meer te leren. Als dat zo is, is de officiële Django-documentatie (die voortdurend up-to-date wordt gehouden) de beste plek om te beginnen.

Ik kan je verzekeren dat Django veel meer te bieden heeft dan we in een reeks artikelen adequaat kunnen behandelen, dus voel je vrij om het te verkennen en al doende te leren!

Stuur ons gerust een bericht met vragen of suggesties via het onderstaande formulier.