bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
django_lliga

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
django_lliga [2023/04/13 16:24]
enric_mieza_sanchez [Formularis] 		django_lliga [2024/03/14 18:15] (actual)
enric_mieza_sanchez [Menu form]
Línia 13: Línia 13:
   - Una taula de classificació per cada lliga, que compti els punts dels partits celebrats, gols a favor i en contra de cada equip.   - Una taula de classificació per cada lliga, que compti els punts dels partits celebrats, gols a favor i en contra de cada equip.
   - Una taula de "pichichis" amb el rànking de golejadors de cada lliga.   - Una taula de "pichichis" amb el rànking de golejadors de cada lliga.
 +
 +{{ futbol-chilena.png?300 }}
  
 Referències: Referències:
Línia 19: Línia 21:
   * [[Django Frontend]] ídem.   * [[Django Frontend]] ídem.
  
-{{tag> #Daw #DawMp07 #DawMp07Uf2 django framework web }}+{{tag> #Daw #DawMp07 #DawMp07Uf2 #DawMp07Uf02 django framework web }}
  
 \\ \\
 +
 +<WRAP tip>
 +Podeu veure una mostra d'aquest projecte en producció a https://lliga.up.railway.app/
 +</WRAP>
  
 ===== Crear projecte ===== ===== Crear projecte =====
Línia 188: Línia 194:
 En particular [[https://faker.readthedocs.io/en/master/|per Python disposem de la llibreria Faker]] que ens facilitarà molt aquesta tasca. En particular [[https://faker.readthedocs.io/en/master/|per Python disposem de la llibreria Faker]] que ens facilitarà molt aquesta tasca.
  
-Podem crear el //seeder// dins una [[https://docs.djangoproject.com/en/stable/howto/custom-management-commands/|comanda personalitzada de Django]] que podrem cridar amb el ''admin.py'' tipus: +Podem crear el //seeder// dins una [[https://docs.djangoproject.com/en/stable/howto/custom-management-commands/|comanda personalitzada de Django]] que podrem cridar amb el ''manage.py'' tipus: 
-  $ ./admin.py crea_lliga "Lliga fake 2"+  $ ./manage.py crea_lliga "Lliga fake 2"
  
 L'argument "Lliga fake 2" serà el nom de la lliga que cal crear. La resta de dades les inventarem amb l'ajuda de Faker. L'argument "Lliga fake 2" serà el nom de la lliga que cal crear. La resta de dades les inventarem amb l'ajuda de Faker.
Línia 402: Línia 408:
 ===== Formularis ===== ===== Formularis =====
  
-Referències sobre formularis: +<WRAP info> 
-  * [[https://docs.djangoproject.com/en/stable/topics/forms/|Forms]] +Podeu llegir referències sobre els potents formularis de Django a [[django_frontend#formularis|Django Formularis]]. 
-  * [[https://docs.djangoproject.com/en/stable/topics/forms/modelforms/|ModelForms]] +</WRAP>
-  * [[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]]+
  
-Altres: +==== Menu form ====
-  * https://docs.djangoproject.com/en/stable/topics/http/shortcuts/+
  
-Un formulari sempre implica diverses passes: +Anem a fer un menú que ens permeti triar la lliga entre les lligues que tenim a la BD. Per tant, es tracta d'un camp depenent de les dades i no pot ser //hardcoded//.
-  - 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//.+{{ django:menu_lliga.png?400 }}
  
-En Django tenim, al menys, 4 aproximacions per a realitzar formularis: +Ho farem amb l'objecte ''Form'' de Django:
-  - 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//). +
- +
-==== Menu form ====+
  
 +--> View i template per formulari de lliga#
 <file python views.py> <file python views.py>
 from django import forms from django import forms
Línia 444: Línia 436:
         if form.is_valid():         if form.is_valid():
             lliga = form.cleaned_data.get("lliga")             lliga = form.cleaned_data.get("lliga")
 +            # cridem a /classificacio/<lliga_id>
             return redirect('classificacio',lliga.id)             return redirect('classificacio',lliga.id)
     return render(request, "menu.html",{     return render(request, "menu.html",{
Línia 450: Línia 443:
 </file> </file>
  
-I la plantilla ens quedaria així de simple:+La plantilla o //template// ens quedaria així de simple:
 <file html menu.html> <file html menu.html>
 <h1>Menu Lligues</h1> <h1>Menu Lligues</h1>
Línia 461: Línia 454:
 </form> </form>
 </file> </file>
 +
 +També necessitarem modificar les URLs per poder accedir adequadament a la classificació i passar-li el ID de la lliga que volem visualitzar:
 +
 +<file python urls.py>
 +urlpatterns = [
 +    path("menu", views.menu, name="menu"),
 +    path("classificacio/<int:lliga_id>", views.classificacio, name="classificacio"),
 +]
 +</file>
 +
 +Finalment modifiquem ''views.py'' per tal que rebem el paràmetre ''lliga_id'' i filtrem la lliga que volem mostrar:
 +
 +<file python views.py>
 +def classificacio(request, lliga_id):
 +    lliga = get_object_or_404( Lliga, pk=lliga_id)
 +    equips = lliga.equip_set.all()
 +    #...
 +</file>
 +
 +<--
 +
 +\\
  
 ===== Exercicis ===== ===== Exercicis =====
 <WRAP todo> <WRAP todo>
 +**Formularis**
 +
 Elabora formularis per: Elabora formularis per:
   - Crear lliga.   - Crear lliga.
 +    * Assegura't que si ja hi ha una lliga amb el mateix nom, no ens deixi guardar.
 +    * Pots fer-ho amb Form o amb ModelForm.
   - Crear equip.   - Crear equip.
   - Assignar equips a una lliga (afegir o treure).   - Assignar equips a una lliga (afegir o treure).
 +</WRAP>
 +
 +<WRAP todo>
 +**Workflow**
  
 Elabora el //workflow// per afegir un partit i les seves dades en temps real. Haurem de fer-ho en diversos passos: Elabora el //workflow// per afegir un partit i les seves dades en temps real. Haurem de fer-ho en diversos passos:
Línia 478: Línia 501:
 </code> </code>
   - Protegeix les rutes per tal que només puguin entrar usuaris loguejats.   - Protegeix les rutes per tal que només puguin entrar usuaris loguejats.
 +</WRAP>
 +
 +<WRAP todo>
 +**View avançada**
  
 Elabora una pàgina de visualització d'un partit en temps real. Ens mostrarà el resultat actual i a continuació una llista amb els Events que van sortint en temps real. Caldrà refrescar el resultat un cop cada 5 segons. Pots implementar crides AJAX com es descriu a [[Django API]]. Elabora una pàgina de visualització d'un partit en temps real. Ens mostrarà el resultat actual i a continuació una llista amb els Events que van sortint en temps real. Caldrà refrescar el resultat un cop cada 5 segons. Pots implementar crides AJAX com es descriu a [[Django API]].
 +</WRAP>
 +
 +\\
 +
 +===== Integrant AJAX en Django =====
 +
 +Per poder utilitzar AJAX en Django caldrà disposar d'una API, pots consultar com fer-ho a [[Django API]].
 +
 +Les crides AJAX caldrà implementar-les dins el codi JS, que en el cas de Django ha d'anar dins els arxius estàtics o dins la pròpia plantilla HTML.
 +
 +==== Exercicis ====
 +
 +{{ django:edita_partit_advanced.png?450 }}
 +
 +<WRAP todo>
 +Crea els endpoints per a les APIs (recorda consultar [[Django API]]:
 +  * /api/get_lligues
 +  * /api/get_equips/<lliga_id> : ens filtrarà els equips que participen en aquesta lliga.
 +
 +Crea la pàgina ''edita_partit_advanced'' on hi hagi un formulari per editar un partit amb:
 +  * Selector de lliga
 +  * Selector d'equip local
 +  * Selector d'equip visitant
 +  * Botó "Editar": inicialment estarà ''disabled''
 +
 +Tots els selectors estan buits inicialment. Els omplirem utilitzant les APIs abans creades.
 +
 +El selector de lliga es crearà immediatament al carregar la pàgina. Els selectors d'equips es carregaran de dades quan es seleccioni lliga.
 +
 +Un cop seleccionem la lliga i els equips, pots habilitar el botó "Editar" per tal que iniciem l'entrada de  dades del partit.
 +
 +Fes un control d'errors o de casos:
 +  * S'ha seleccionat el mateix equip local i visitant: error.
 +  * Si el partit ja existeix, no cal crear-ho.
 +  * Si el partit no existeix, es crea.
 +
 +Finalment oferim el link per a editar el partit (afegir Events) en una nova //view//.
  
 </WRAP> </WRAP>
 +
 +\\
 +
 +===== Autenticació =====
 +<WRAP info>
 +Per saber més de com autenticar-nos pots llegir [[Django Auth]]
 +</WRAP>
 +
 +\\
  
django_lliga.1681403080.txt.gz · Darrera modificació: 2023/04/13 16:24 per enric_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki