bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


Barra lateral

ASIX Administració de Sistemes Informàtics i Xarxes
Tots els mòduls del cicle
MP01 Implantació de sistemes operatius
Totes les UFs del modul
MP02 Gestió de bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Fonaments de maquinari
Totes les UFs del modul
MP06 Administració de sistemes operatius
Totes les UFs del modul
MP07 Planificació i administració de xarxes
Totes les UFs del modul
MP08 Serveis de xarxa i Internet
Totes les UFs del modul
MP09 Implantació d'aplicacions web
Totes les UFs del modul
MP10 Administració de sistemes gestors de bases de dades
Totes les UFs del modul
MP11 Seguretat i alta disponibilitat
Totes les UFs del modul
MP12 Formació i orientació laboral
Totes les UFs del modul
MP13 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP14 Projecte
Totes les UFs del modul
DAM Desenvolupament d’aplicacions multiplataforma
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Accés a dades
Totes les UFs del modul
MP07 Desenvolupament d’interfícies
Totes les UFs del modul
MP08 Programació multimèdia i dispositius mòbils
Totes les UFs del modul
MP09 Programació de serveis i processos
Totes les UFs del modul
MP10 Sistemes de gestió empresarial
Totes les UFs del modul
MP11 Formació i orientació laboral
Totes les UFs del modul
MP12 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP13 Projecte de síntesi
Totes les UFs del modul
MPDual Mòdul Dual / Projecte
DAW Desenvolupament d’aplicacions web
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació
Totes les UFs del modul
MP04 Llenguatge de marques i sistemes de gestió d’informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Desenvolupament web en entorn client
Totes les UFs del modul
MP07 Desenvolupament web en entorn servidor
Totes les UFs del modul
MP08 Desplegament d'aplicacions web
Totes les UFs del modul
MP09 Disseny d'interfícies web
Totes les UFs del modul
MP10 Formació i Orientació Laboral
Totes les UFs del modul
MP11 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP12 Projecte de síntesi
Totes les UFs del modul
SMX Sistemes Microinformàtics i Xarxes
Tots els mòduls del cicle
MP01 Muntatge i manteniment d’equips
Totes les UFs del modul
MP02 Sistemes Operatius Monolloc
Totes les UFs del modul
MP03 Aplicacions ofimàtiques
Totes les UFs del modul
MP04 Sistemes operatius en xarxa
Totes les UFs del modul
MP05 Xarxes locals
Totes les UFs del modul
MP06 Seguretat informàtica
Totes les UFs del modul
MP07 Serveis de xarxa
Totes les UFs del modul
MP08 Aplicacions Web
Totes les UFs del modul
MP09 Formació i Orientació Laboral
Totes les UFs del modul
MP10 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP11 Anglès
Totes les UFs del modul
MP12 Síntesi
Totes les UFs del modul
CETI Ciberseguretat en Entorns de les Tecnologies de la Informació
Tots els mòduls del cicle
django_frontend

Django framework: frontend

Django és un framework web basat en Python molt popular. Està orientat a la rapidesa de desenvolupament.

Django és conegut com «The web framework for perfectionists with deadlines». Uau!

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.

Referències

Pàgina de referència del framework: http://djangoproject.com

Apunts previs: https://cacauet.org/wiki/index.php/Django

La documentació de Django és molt bona, tant en les referències tècniques com el tutorial oficial de Django, així que seguirem aquest per anar aprofundint.

El tutorial oficial consta de 2 parts:

  1. Backend (parts 1,2,7)
  2. Frontend (parts 3,4,6)

Per seguir aquest exercici cal haver fet prèviament la part de backend.

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.

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:

    from polls import views as pollviews
    
    urlpatterns = [
        path( '', pollviews.index ),
        ...
    ]

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:

    from django.http import HttpResponse

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

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:

    ...
    from django.urls import path, include

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

I afegiu l'arxiu urls.py amb el contingut:

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.index ),
]

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.

Afegiu a polls/urls.py:

from . import views
urlpatterns = [
    ...
    path('llista', views.llista ),
    ...]

I a polls/views.py creem la nova view (codi):

def llista(request):
    items = Option.objects.all()
    return render( request, "llista.html" )

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

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

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

</body>
</html>

Renderitzar dades des de la view

Per poder visualitzar el contingut del template crearem aquest codi dins de polls/views.py:

def llista(request):
    items = Option.objects.all()
    return render( request, "llista.html", 
        {
            "tipus":"coses",
            "elements":items
        }
    )

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í:

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

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?

django_frontend.txt · Darrera modificació: 2021/11/25 09:21 per enrique_mieza_sanchez