1 2021-10-04¶

1.1 Bootstrap setup¶

In de vorige les maakten we een basis-template aan, dat door alle templates herbruikt kan worden.

Hierin kunnen we dus algemene HTML-code plaatsen, die we in elke pagina willen zien terugkomen.

Ga naar de Bootstrap website, en klik op ‘Get Started’. Zoek nu de sectie met naam ‘Starter template’ en kopieer de HTML-code naar je ‘base.html’ bestand.

Vervang ‘<h1>Hello world</h1>’ door je ‘{% block content %}{% endblock %}’ code.

Herlaad de website en merk op dat de lettertypes aangepast werden.

1.2 Bootstrap container¶

Open ‘tweet_detail.html’ en plaats de huidge informatie in een ‘div’ met class ‘container’:

{% extends 'tweet/base.html' %}

{% block content %}
<div class="container">
    Message: {{ object.msg }}
    Likes: {{ object.likes }}
    Timestamp: {{ object.timestamp }}
</div>
{% endblock %}

Herlaad de website en merk op dat er nu links een marge gebruikt wordt. Gebruikt ‘Google Inspector’ om deze ‘div’ te inspecteren, en merk op dat zowel links als rechts een marge gebruikt wordt.

De container CSS-class zorgt ervoor dat je website niet de gehele breedte van het scherm gebruikt, omdat dit als onpraktisch beschouwd wordt. De inhoud van je site wordt dan gecentreerd weergegeven, met links er rechts marges.

Open ‘tweet_list.html’ en voer dezelfde aanpassing uit in dit bestand.

1.3 Bootstrap list-group¶

Bestudeer het eerste voorbeeld op de Bootstrap documentatie pagina over ‘list group’: https://getbootstrap.com/docs/5.1/components/list-group/

We gaan deze code gebruiken om onze lijst-weergave van tweets mooier te maken.

Gebruik <ul class="list-group"> en <li class=”list-group-item”> tags om je lijst met tweets weer te geven.

1.4 Bootstrap grid¶

Bootstrap’s grid laat toe om HTML-elementen op bepaalde posities op het scherm weer te geven. Hiervoor voorziet Bootstrap een systeem van rijen en kolommen.

Ga naar de Bootstrap documentatie pagina over het Grid-systeem:: https://getbootstrap.com/docs/5.1/layout/grid/

Bestudeer hier het eerste voorbeeld waarin 1 rij met 3 kolommen aangemaakt wordt. Je ziet in Bootstrap’s documentatie telkens het resultaat van de code, en er vlak onder de code die dit mogelijk maakte. Rechtsboven in het code-voorbeeld staat telkens een “Copy” knop, die je toelaat om snel de code te kopieren.

Gebruik Bootstrap ‘<div class=”row”>’ en ‘<div class=”col”>’ om de informatie in je tweet in drie rijen weer te geven. Toon telkens links het label, en rechts de informatie:

Message:                So Epic React launched a swag store, and it includes
                        the most adorable merch I've ever seen.
Likes:                  22
Timestamp:              Oct. 4, 2021, 8:36 a.m.

1.5 Bootstrap badge¶

https://getbootstrap.com/docs/5.1/components/badge/

Open ‘tweet_list.html’ en zorg ervoor dat het aantal likes getoond wordt in een ‘Bootstrap badge’.

1.6 Django truncatechars¶

1.7 Bootstrap buttons¶

Bootstrap laat toe om HTML-elementen als button voor te stellen. Zo kan je de ‘<a>’ tags als knop tonen door de classes ‘btn btn-primary’ toe te voegen:

<a class="btn btn-primary" href="/tweet/1">Link naar tweet 1</a>

Bestudeer de code om de buttons in verschillende kleuren weer te geven op onderstaande pagina: https://getbootstrap.com/docs/5.1/components/buttons/

Open ‘tweet_detail.html’ en voeg een “Like” button toe aan de detail-pagina van de tweet.

1.8 Django link-view¶

Open tweet/views.py en voeg onderstaande code toe:

from django.shortcuts import redirect

def like(request, pk):
    tweet = Tweet.objects.get(pk=pk)
    tweet.likes = tweet.likes + 1
    tweet.save()
    return redirect('/tweet')

Open twitter/urls.py en voeg onderstaande code toe:

from tweet.views import like

urlpatterns += [
        # ...
        path('like/<int:pk>', like),
]

1.9 Django shell¶

Gebruik de admin om een aantal tweets in te voeren (minstens 4).

Installeer ipython via:

pip install ipython

Voer het volgende commando uit:

python manage.py shell

Je krijgt nu een Python shell waarin je commando’s kan uitvoeren. Voer eerst volgende regel in:

from tweet.models import Tweet

Nu kan je alle tweets opvragen via:

Tweet.objects.all()

Je kan de tweets sorteren via de order_by functie:

Tweet.objects.all().order_by("likes")

Om ze in omgekeerde volgorde te sorteren kan je een min-teken gebruiken bij de order_by functie:

Tweet.objects.all().order_by("-likes")

Je kan ook filters gebruiken om slechts bepaalde tweets te tonen. Met onderstaande regel toon je enkel de tweets met minstens 2 likes:

Tweet.objects.filter(likes__gt=1)

Voor IntegerField bestaan zo o.a. de volgende filters:

gt: groter dan
gte: groter of gelijk aan
lt: kleiner dan
lte: kleiner dan of gelijk aan

Met onderstaande regel toon je enkel de tweets met de letterlijke string “python” in de tweet:

Tweet.objects.filter(msg__icontains="python")