bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


django_frontend

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_frontend [2023/01/10 19:27]
enric_mieza_sanchez [Renderitzar dades des de la view]
django_frontend [2023/07/06 07:00] (actual)
raquel_alaman_navas
Línia 1: Línia 1:
 ====== Django framework: frontend ====== ====== 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".
  
-Django és un framework web basat en Python molt popularEstà orientat a la rapidesa de desenvolupament+En aquest article tenim per objectius: 
- +  * Entendre el funcionament bàsic del paradigma MTV (Model-Template-View) de Django
-Django és conegut com "The web framework for perfectionists with deadlines"Uau!+  * 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 }} {{ django-logo.png?300 }}
Línia 9: Línia 13:
 {{tag> #FpInfor #Daw #DawMp07 #DawMp07Uf2 #DawMp07Uf02 #DawMpDual Django Python web framework }} {{tag> #FpInfor #Daw #DawMp07 #DawMp07Uf2 #DawMp07Uf02 #DawMpDual Django Python web framework }}
  
 +\\
  
-===== 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 ===== ===== Referències =====
-Pàgina de referència del //framework//: [[http://djangoproject.com]] +Referències: 
- +  * Site oficial: [[http://djangoproject.com]] 
-Apunts previs: [[https://cacauet.org/wiki/index.php/Django]]+  * [[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 aquest per anar aprofundint.+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 consta de 2 parts+El tutorial oficial toca els següents temes
-  - Backend (parts 1,2,7) +  - Base i admin panel : parts 1, 2, 7 
-  - Frontend (parts 3,4,6)+  - Views al frontend : parts 3, 4, 6 
 +  - Testing : part 5
  
-Per seguir aquest exercici cal haver fet prèviament la part de //backend//.+Per seguir aquest exercici cal haver fet prèviament la part de //base i admin panel//.
  
  
Línia 141: Línia 148:
  <ul>  <ul>
  {% for element in elements %}  {% for element in elements %}
- <li>{{element.text}}</li> + <li>{{element}}</li>
  {% endfor %}  {% endfor %}
  </ul>  </ul>
Línia 148: Línia 155:
 </html> </html>
 </file> </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 ==== ==== Renderitzar dades des de la view ====
Línia 188: Línia 207:
  
 **Fixa't en la funció //filter//, com creus que funciona?** **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>
 +
 +\\
  
django_frontend.1673378860.txt.gz · Darrera modificació: 2023/01/10 19:27 per enric_mieza_sanchez