====== Django framework: frontend ======
 
[[Django]] és un framework web basat en Python molt popular. Està orientat a la rapidesa de desenvolupament, per això se'l coneix com "The web framework for perfectionists with deadlines".

En aquest article tenim per objectius:
  * Entendre el funcionament bàsic del paradigma MTV (Model-Template-View) de Django.
  * Clarificar el seu funcionament abans de seguir amb els tutorials oficials en les parts 2,3,6.
  * Entendre la separació per capes i l'aïllament del codi del disseny.
  * Veure alguns casos d'ús típics.

{{ django-logo.png?300 }}

{{tag> #FpInfor #Daw #DawMp07 #DawMp07Uf2 #DawMp07Uf02 #DawMpDual Django Python web framework }}

\\


===== Referències =====
Referències:
  * Site oficial: [[http://djangoproject.com]]
  * [[Django]] en aquesta wiki: setup, administració i posada en producció.
  * [[https://docs.djangoproject.com/en/stable/intro/tutorial01/|Tutorial oficial de Django]]
  * [[https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django|Tutorial Django a MDN Mozilla]].
  * [[https://docs.djangoproject.com/en/stable/topics/forms/|Treballant amb Forms]]
  * [[https://stackoverflow.com/questions/1622793/django-cookies-how-can-i-set-them|Cookies en Django]]
  * [[Integració de Django amb React]]

La documentació de Django és molt bona, tant en les referències tècniques com el [[https://docs.djangoproject.com/en/stable/intro/tutorial01/|tutorial oficial de Django]], així que seguirem aquests per anar aprofundint.

El tutorial oficial toca els següents temes:
  - Base i admin panel : parts 1, 2, 7
  - Views al frontend : parts 3, 4, 6
  - Testing : part 5

Per seguir aquest exercici cal haver fet prèviament la part de //base i admin panel//.


===== MVC vs MTV =====
El //frontend// de Django es basa en el paradigma MVC (Model-Vista-Controlador) però que en la versió Django té una petita variant: MTV (Model-Template-View).

    Model   VIEW   Controller
    Model Template   VIEW

Així que anem amb compte perquè la nomenclatura pot oferir confusió. Les //views// de Django (MTV) són en realitat el //controller// del MVC, és a dir, la part on tenim el codi.

{{ :django.png?600 |}}
===== Primer exercici de Django frontend =====
Un cop fet les parts 1,2,7 (//backend//) del tutorial, podem seguir aquesta guia per introduir-nos al //frontend//. Es recomana fer aquesta intro abans que el tutorial parts 3,4,6.

Si has fet el tutorial parts 1,2,7, has de tenir un projecte a la carpeta //mysite// amb una aplicació anomenada //polls//, on podeu crear preguntes (Questions) i respostes (Options) per a enquestes.

===== Afegir una nova URL (index) =====

==== Crear una pàgina index ====
Si no l'has fet abans, caldrà que enllacis una url buida (urls.py de mysite) amb una funció //index// a l'arxiu ''polls.views''

A l'arxiu urls.py de mysite afegeix:
<sxh python>
from polls import views as pollviews

urlpatterns = [
    path( '', pollviews.index ),
    ...
]
</sxh>

Visita la URL http://localhost:8000/ on hauries de veure el contingut de la view "index" (molt simple, amb HttpResponse). Si no tenies creada la view '''polls.views.index'' , crea-la ara:

<sxh python>
    from django.http import HttpResponse

    def index(request):
        return HttpResponse("Hello, <b>world</b>. You're at the polls index.")
</sxh>




==== Afegir nou arxiu de urls a la app "polls" ====
Enllaceu les urls de la app "polls" amb un include a l'arxiu urls.py de //mysite//.

Afegeix a mysite/urls.py:
<file python mysite/urls.py>
...
from django.urls import path, include

urlpatterns = [
    ...
    path('polls/', include("polls.urls")),
    ...
]
</file>

I afegiu l'arxiu ''urls.py'' amb el contingut:
<file python polls/urls.py>
from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.index ),
]
</file>

Ara teniu disponible la //view// index des de 2 URLs diferents:
  http://localhost:8000/
  http://localhost:8000/polls/

\\

===== Crear nova view llista =====
Si aneu a la URL http://localhost:8000/polls/llista ens donarà un error pq encara no hem creat la //view// (codi) ni la seva ruta.

Afegim ''polls/urls.py'':
<file python polls/urls.py>
from . import views
urlpatterns = [
    ...
    path('llista', views.llista ),
    ...]
</file>

Creem la nova //view// (codi):
<file python polls/views.py>
from django.shortcuts import render
from django.contrib.auth.models import User

...

def llista(request):
    items = User.objects.all()
    return render( request, "llista.html" )
</file>

==== Afegir un template (plantilla) ====
Crea nova carpeta ''polls/templates''.

A dins crearem l'arxiu ''polls/templates/llista.html'' amb el contingut (després veurem com funciona):

<file html polls/templates/llista.html>
<!DOCTYPE html>
<html>
<head>
	<title>llista</title>
</head>
<body>

	<h2>llistat de... {{tipus}}</h2>
	<ul>
	{% for element in elements %}
		<li>{{element}}</li>	
	{% endfor %}
	</ul>

</body>
</html>
</file>

<WRAP important>
Si et dona un error ''TemplateDoesNotExist'' inclús si has creat la carpeta ''template'', probablement necessites afegir la app al ''settings.py'':
<file settings.py>
INSTALLED_APPS = [
    'django.contrib.admin',
    ...
    'polls',
]
</file>

</WRAP>

==== Renderitzar dades des de la view ====
Per poder visualitzar el contingut del //template// crearem aquest codi dins de ''polls/views.py'':
<file python views.py>
def llista(request):
    items = User.objects.all()
    return render( request, "llista.html", 
        {
            "tipus":"coses",
            "elements":items
        }
    )

</file>

\\

===== Filtrat amb paràmetres GET =====
En moltes aplicacions haurem de recuperar paràmetres GET de la //request//. En aquest podem restringir les ''Options'' que visualitzem filtrant pel ID de la ''Question'' corresponent (enllaçada per FK). Ho podem fer així:

<sxh python>
def llista(request):
    items = None
    if request.GET.get("qid"):
        items = Option.objects.filter( question__id=request.GET["qid"] )
    else:
        items = Option.objects.all()
    return render( request, "llista.html", 
                    {
                        "tipus":"coses",
                        "elements":items
                    }
                )
</sxh>


Per visualitzar només les dades d'una ''Question'', ho farem afegint un paràmetre GET a la mateixa URL que estem fent:
  http://localhost:8000/polls/llista?qid=2

**Fixa't en la funció //filter//, com creus que funciona?**


\\

===== Formularis =====
<WRAP tip>
Pel //frontend// ens serà molt important la potent gestió de formularis de Django.
</WRAP>

Referències sobre formularis:
  * [[https://docs.djangoproject.com/en/stable/topics/forms/|Forms]]
  * [[https://docs.djangoproject.com/en/stable/topics/forms/modelforms/|ModelForms]]
  * [[https://docs.djangoproject.com/en/stable/ref/models/fields/|Fields]] : camps del Form
  * [[https://docs.djangoproject.com/en/stable/ref/forms/fields/#fields-which-handle-relationships|Camps amb FKs]]
  * [[https://docs.djangoproject.com/en/stable/topics/class-based-views/generic-display/|Generic Views]]: per operacions tipus CRUD genèriques es poden crear formularis molt ràpidament, ja que ens genera tant el codi de la //view// com el //template//.

Altres:
  * https://docs.djangoproject.com/en/stable/topics/http/shortcuts/

Un formulari sempre implica diverses passes:
  - Crear el formulari (pot ser senzill o més complex, i necessitarà codi).
  - Processar les dades del formulari.
  - Mostrar un resultat: pot ser senzill (operació OK), o complex (mostrar classificació). Sovint és molt pràctic fer una redirecció cap a una altre //view// i repartir la complexitat en diverses parts del codi.

Cada pas abans descrit pot necessitar el seu **template** i la seva **view**. A la //view// crearem i filtrarem les dades adequades per passar-les al //template//.

En Django tenim, al menys, 4 aproximacions per a realitzar formularis:
  - Plantilla //hardcoded// (HTML): dona més feina però és fàcil de modificar amb coneixements bàsics de HTML.
  - Utilitzar objecte ''Form'' de Django. Això ens facilita la renderització i el manteniment.
  - Utilitzar objectes més sofisticats com ''ModelForm'' que a partir d'un model ens generarà automàticament el formulari.
  - Utilitzar [[https://docs.djangoproject.com/en/stable/topics/class-based-views/generic-display/|generic views com DetailView]] : les operacions tipus CRUD es poden fer amb aquests objectes genèrics.

El processament del formulari és sempre similar (menys en el cas de les //generic views//).

\\

<WRAP info>
Podeu veure mes exemples a l'article [[Django Lliga#formularis|Django Lliga: formularis]].
</WRAP>

\\

===== Autenticació =====
<WRAP info>
En el frontend és important utilitzar la [[Django Auth]].
</WRAP>

\\