2021-10-04
==========

.. sectnum::

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.


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.


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 :code:`<ul class="list-group">` en `<li class="list-group-item">` tags om
je lijst met tweets weer te geven.


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.


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'.


Django truncatechars
--------------------

{{ tweet.msg|truncatechars:80 }}

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.


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),
        ]


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


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

- contains: bevat de string (hoofdlettergevoelig)
- icontains: bevat de string waarbij hoofdletters en kleine letters als gelijk beschouwd worden

Je kan niet enkel lijsten tweets opvragen, je kan ook nieuwe objecten aanmaken::

        Tweet.objects.create(msg="Yeah")