bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • jocs_android • django_heroku • vagrant_ubuntu_libvirt • python_herencia_multiple • django_auth • flask_basic • jocs_libgdx • opendata_pandas • java • cordova_install
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:25]
enric_mieza_sanchez [Crear nova view llista] 		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 popular. Està 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 127: Línia 134:
 ==== Afegir un template (plantilla) ==== ==== Afegir un template (plantilla) ====
 Crea nova carpeta ''polls/templates''. Crea nova carpeta ''polls/templates''.
 +
 A dins crearem l'arxiu ''polls/templates/llista.html'' amb el contingut (després veurem com funciona): A dins crearem l'arxiu ''polls/templates/llista.html'' amb el contingut (després veurem com funciona):
-<sxh html>+ 
 +<file html polls/templates/llista.html>
 <!DOCTYPE html> <!DOCTYPE html>
 <html> <html>
 <head> <head>
- <title></title>+ <title>llista</title>
 </head> </head>
 <body> <body>
Línia 139: 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 145: Línia 154:
 </body> </body>
 </html> </html>
-</sxh>+</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 ====
 Per poder visualitzar el contingut del //template// crearem aquest codi dins de ''polls/views.py'': Per poder visualitzar el contingut del //template// crearem aquest codi dins de ''polls/views.py'':
-<sxh python>+<file python views.py>
 def llista(request): def llista(request):
-    items = Option.objects.all()+    items = User.objects.all()
     return render( request, "llista.html",      return render( request, "llista.html", 
         {         {
Línia 159: Línia 180:
     )     )
  
-</sxh>+</file> 
 + 
 +\\
  
 ===== Filtrat amb paràmetres GET ===== ===== Filtrat amb paràmetres GET =====
Línia 184: 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.1673378709.txt.gz · Darrera modificació: 2023/01/10 19:25 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