Atelier Django Frontend : interfaces publiques d'un site

Transcriptions des ateliers dispensés par messagerie instantanée dans le cadre de la Semaine tech 2012

Transcription séance du 2012-08-31 02h00 GMT

22h00 heure locale retranscrite ici

[...] historique tronqué suite à rupture connexion...
[...] reprise autour de la partie ORM
(23:56:46) davin.baragiotta: dans le code c'est université
(23:56:47) davin.baragiotta: :
(23:56:56) davin.baragiotta: personnes = Personne.objects.filter(universite__nom__contains='Montréal')
(23:57:00) davin.baragiotta: voilà
(23:57:20) davin.baragiotta: toutes les personnes qui ont une université dont le nom contient "Montréal"
(23:57:21) davin.baragiotta: :D
(23:57:31) davin.baragiotta: ça marche pour tous?
(23:57:33) khone-cc: :-o
(23:57:49) davin.baragiotta: oubliez les reques complexes en SQL!
(23:57:56) davin.baragiotta: *requêtes
(23:58:20) davin.baragiotta: ok, pendant que je fais une pause santé... voici un exercice :
(23:58:35) davin.baragiotta: le code que vous avez préféré, dans le shell... en explorant :
(23:58:45) davin.baragiotta: copiez-le dans la fonction home()
(23:59:12) davin.baragiotta: stockez l'infos que vous aimez dans les variables
(23:59:27) davin.baragiotta: et passez les au template (à travers c = {} )
(23:59:43) davin.baragiotta: il faut au minimum la variable :
(23:59:49) davin.baragiotta: etablissements = Etablissement.objects.all()
(23:59:50) davin.baragiotta: svp ;)
(23:59:57) davin.baragiotta: (de retour dans 2 minutes)
(00:02:10) davin.baragiotta: de retour
(00:10:52) davin.baragiotta: bon retombons sur nos pieds
(00:10:55) davin.baragiotta: on faisait quoi?
(00:11:18) davin.baragiotta: on explorait, dans le shell... l'utilisation de l'ORM pour appeler la DB en Python (pas en SQL)
(00:11:29) davin.baragiotta: pour créer des variables dans home()
(00:11:32) davin.baragiotta: donc
(00:11:45) davin.baragiotta: on va maintenant coder le fruit de nos investigations :
(00:12:31) davin.baragiotta: ajoutez dans home :
(00:12:46) davin.baragiotta: 
    etablissements = Etablissement.objects.all()
    c = {
        'etablissements': etablissements,
    }
(00:12:57) davin.baragiotta: ensuite, dans le template
(00:13:08) davin.baragiotta: au lieu de faire {{ etablissements }}
(00:13:23) davin.baragiotta: je vais vous montrer à boucler avec le langage de templating de Django
(00:13:31) davin.baragiotta: ouvrez home.html
(00:13:39) davin.baragiotta: il existe des "tags"
(00:13:47) davin.baragiotta: qu'on peut utiliser dasn les templates
(00:13:52) davin.baragiotta: voici la doc :
(00:14:16) davin.baragiotta: https://docs.djangoproject.com/en/1.1/
(00:14:20) davin.baragiotta: 1.1
(00:14:31) davin.baragiotta: dans le centre y,a "Templage layer"
(00:14:38) davin.baragiotta: template, désolé
(00:14:51) davin.baragiotta: built-in tags and filters :
(00:14:52) davin.baragiotta: https://docs.djangoproject.com/en/1.1/ref/templates/builtins/#ref-templates-builtins
(00:15:02) davin.baragiotta: filters = un peu comme filtres SPIP
(00:15:10) davin.baragiotta: tag = plus puissant ;)
(00:15:15) davin.baragiotta: tag for
(00:15:25) davin.baragiotta: https://docs.djangoproject.com/en/1.1/ref/templates/builtins/#for
(00:15:38) davin.baragiotta: {% for e in etablissements %}
(00:15:48) davin.baragiotta: ça ressemble beaucoup à Python
(00:15:52) davin.baragiotta: mais c'en est pas
(00:16:01) davin.baragiotta: faut finir tout tag
(00:16:06) davin.baragiotta: avec son endtag
(00:16:12) davin.baragiotta: {% endfor %}
(00:16:24) davin.baragiotta: codez ceci dans votre template, pour le plaisir :
(00:17:35) khone-cc: <h2>Classe Etablisement</h2>
{% for e in etablissements %}
<li>{{ e }}</li>
{% endfor %}
(00:17:43) davin.baragiotta: ahaha oui!
(00:17:57) davin.baragiotta: (je fatigue! ;) )
(00:18:06) davin.baragiotta: 
<h2>Classe Etablisement</h2>
{% for e in etablissements %}
<li>{{ e }}</li>
{% endfor %}
(00:18:11) davin.baragiotta: mieux
(00:18:25) davin.baragiotta: ajoutez <ul> et </ul>
(00:18:29) davin.baragiotta: avant et après for
(00:18:34) davin.baragiotta: pour faire du vrai HTML ;)
(00:18:39) khone-cc: ok
(00:18:48) davin.baragiotta: ok, vous voyez la liste des établissements?
(00:19:25) davin.baragiotta: maintenant... malheureusement l,atelier tire à sa fin
(00:19:31) davin.baragiotta: on est déja`en retard
(00:19:37) davin.baragiotta:  mais moi j'ai un peu de temps
(00:19:40) khone-cc: moi, ça à l'aire bien affiché ..
(00:19:46) davin.baragiotta: au mois pour conclure ;)
(00:20:03) davin.baragiotta: revenons au plan :
(00:20:15) davin.baragiotta: ORM : utilisation réelle
(00:20:23) davin.baragiotta: on est rendu dans l'utilisation réelle de l'ORM
(00:20:26) davin.baragiotta: c'est fait
(00:20:35) davin.baragiotta: rendez-vous compte des possibilités :
(00:20:55) davin.baragiotta: vous appelez les données de la base de données comme vous voulez, pour créer une page HTML
(00:21:02) davin.baragiotta: ça pourrait être du RSS
(00:21:21) davin.baragiotta: appeller la DB pour lister dans un template respectant syntaxe RSS les nouvelles
(00:21:30) davin.baragiotta: (mais y,a des outils qui font ça automatiquement)
(00:21:44) davin.baragiotta: je voulais vous faire coder d'autres trucs
(00:21:50) davin.baragiotta: mais tout est toujours trop long
(00:21:57) davin.baragiotta: je vous propose donc de vous téléporter
(00:21:59) davin.baragiotta: dans le temps
(00:22:07) davin.baragiotta: en téléchargeant les sources finales de l'atelier
(00:22:16) davin.baragiotta: avec plein truc dont je peux parler en démo
(00:22:22) davin.baragiotta: (fini le code pour vous)
(00:22:25) davin.baragiotta: ça vous va?
(00:22:45) davin.baragiotta: https://wiki.auf.org/wikiteki/Ateliers/Django/Frontend/Support?action=AttachFile&do=get&target=carto_1_1_final.tar.gz
(00:22:52) davin.baragiotta: sources finales
(00:23:08) davin.baragiotta: décompresser + aller dans répertoire
(00:23:16) davin.baragiotta: + python manage.py runserver
(00:24:23) davin.baragiotta: tout le monde y est?
(00:33:11) davin.baragiotta: messieurs... l'heure est grave....
(00:33:21) davin.baragiotta: c'est la finale en feu d'artifice
(00:33:31) davin.baragiotta: vous avez téléchargé les sources finales
(00:33:43) davin.baragiotta: vous avez décompressé le .tar.gz
(00:33:58) davin.baragiotta: vous êtes dans le répertoire du projet décompressé
(00:34:08) davin.baragiotta: vous allumez le feu :
python manage.py runserver
(00:34:12) davin.baragiotta: et allez sur :
(00:34:22) davin.baragiotta: http://127.0.0.1:8000
(00:34:27) davin.baragiotta: tadaaaaaaaaaaaaaaaaaaaaaaaaaam!!!!!!
(00:35:12) davin.baragiotta: vous devriez avoir un super site avec des styles
(00:35:15) davin.baragiotta: entre autres
(00:35:26) davin.baragiotta: ça marche? (mais cachez votre joie!)
(00:36:59) davin.baragiotta: bon je termine en vous montrant ce qui a été fait... que vous n'avez pas fait :
(00:37:07) davin.baragiotta: https://wiki.auf.org/wikiteki/Ateliers/Django/Frontend/Support
(00:37:13) davin.baragiotta: héritage de template
(00:37:20) davin.baragiotta: regardez bien... y,a un base.html
(00:37:30) davin.baragiotta: qui déclare des {% block ...
(00:37:37) davin.baragiotta: et toutes les autres pages
(00:37:47) davin.baragiotta: {% extends "base.html"
(00:38:01) davin.baragiotta: de sorte que tout le vrai code HTML qu'on veut pas coder dans chaque page
(00:38:05) davin.baragiotta: est dans base.html
(00:38:14) davin.baragiotta: et les autres pages remplissent les block
(00:38:18) davin.baragiotta: autre chose
(00:38:27) davin.baragiotta: les URLs avec paramètres
(00:38:36) davin.baragiotta: ouvres annuaire/urls.py
(00:38:47) davin.baragiotta: voyez la syntaxe particulière pour capter l'id
(00:39:00) davin.baragiotta: ouvrez annuaire/views.py
(00:39:28) davin.baragiotta: regardez le id passé à la fonction... qui nous permet de faire un .get() dans l'ORM... comme on a fait dans le shell
(00:39:47) davin.baragiotta: avec ça : on fait une page de détail... pour CET établissement ou CETTE personne
(00:40:06) davin.baragiotta: le plus impressionnant, c'est le style
(00:40:15) davin.baragiotta: mais c'est rien d'autre que du CSS
(00:40:23) davin.baragiotta: dans répertoire /media/
(00:40:31) davin.baragiotta: correctemetn configuré dans settings.py
(00:40:45) davin.baragiotta: et utilisé dans base.html : {{ MEDIA_URL }}
(00:40:59) davin.baragiotta: finalement...
(00:41:03) davin.baragiotta: la connexion du user
(00:41:15) davin.baragiotta: que je vous laisse expérimenter dans les interfaces
(00:41:30) davin.baragiotta: et étudier sur : urls.py, connexion.html, deconnexion.html
(00:41:38) davin.baragiotta: voilà, c'est tout?
(00:41:56) davin.baragiotta: (24 minutes de dépassé)
(00:41:59) davin.baragiotta: des questions?
(00:42:58) davin.baragiotta: si pas de question... je conclue
(00:43:36) khone-cc: (11:43:37) khuon.tiv: Combien de web codes ont dans cet interface ? Python-Django CSS HTML quoi d'autre ?
(00:44:41) davin.baragiotta: web codes? pas sûr de comprendre... mais les technos impliqués :
(00:45:08) davin.baragiotta: oui : python, django (framework Python), Apache éventuellement, HTTP, CSS, HTML, JS au besoin
(00:45:11) davin.baragiotta: voir le schéma :
(00:45:19) davin.baragiotta: http://montrealpython.org/r/attachments/13/web-development.jpg
(00:45:28) davin.baragiotta: autres questions?
(00:45:43) khone-cc: Non
(00:45:46) khone-cc: yeap, GRAND MERCI PROF PYTHON-DJANGO...
(00:46:02) davin.baragiotta: :D
(00:46:04) khone-cc: on lui laisse à Dodo...
(00:46:09) davin.baragiotta: je conclue donc rapido :
(00:46:16) davin.baragiotta: vous avex une bombe entre les mains :
(00:46:23) davin.baragiotta: la puissance de Python sur le web
(00:46:40) davin.baragiotta: tout ce que vous êtes capables de faire avec des import de Python...
(00:46:52) davin.baragiotta: ... vous pouvez l'utiliser sur le web avec les views...
(00:47:00) davin.baragiotta: et stocker vos data dans une DB
(00:47:24) davin.baragiotta: (là c'était sqlite... mais on peut mettre MySQL évidemment, ou autre)
(00:47:36) davin.baragiotta: tous nos projets SI de l'AUF = Django
(00:47:45) davin.baragiotta: y,a du Python partant dans git.auf.org!
(00:48:00) davin.baragiotta: je vous laisse apprécier la montée en puissance que vous venez de faire
(00:48:02) davin.baragiotta: et surtout
(00:48:13) davin.baragiotta: on est tous ensemble, tout le temps... la communauté tech :
(00:48:22) davin.baragiotta: on vit dans le salon tech, ari-si ou autres
(00:48:32) shafeek.sumser: davin une dernière question: est-ce qu'avec django on peut faire du ajax et jquery?
(00:48:33) davin.baragiotta: n'hésitez à poser les questions et...
(00:48:59) davin.baragiotta: ... on n'est pas obligés d,attendre la prochaine semaine Tech pour continuer d'apprendre et collaborer ;)
(00:49:02) davin.baragiotta: réponse :
(00:49:19) davin.baragiotta: oui, Ajax = rien d'autre qu'un appel de JS sur serveur...
(00:49:39) davin.baragiotta: un appel partiel, en quelque sorte car veut pas une page complète
(00:49:40) davin.baragiotta: donc
(00:49:55) davin.baragiotta: on met le code JQuery qu'on veut dans notre template HTML
(00:50:39) davin.baragiotta: dans une balise link qui lie vers un script : dans /media/js ( {{ MEDIA_URL }}/js/le_script_qui_tue.js
(00:50:45) davin.baragiotta: ensuite
(00:50:50) davin.baragiotta: ce script appelle une URL
(00:50:55) davin.baragiotta: gérée dans urls.py
(00:51:05) davin.baragiotta: qui appelle une fonction dans views.py
(00:51:14) davin.baragiotta: qui retourne un FRAGMENT HTML
(00:51:22) davin.baragiotta: même principe qu'on vient de voir
(00:51:34) davin.baragiotta: sauf un appel partiel pour raffraichir un fragmenr de code
(00:51:51) davin.baragiotta: le JS dans jQuery qui reçoit la réponse partielle...
(00:52:00) davin.baragiotta: ... va ajouter ce fragment dans le DOM en cours
(00:52:03) shafeek.sumser: ok j'étais pas présent, viens d'arriver au bureau je rattraperai ce soir
(00:52:06) davin.baragiotta: voilà ;)
(00:52:22) davin.baragiotta: ok à ce soir (ce matin pour moi... en fait ;) )
(00:52:39) davin.baragiotta: ---------------------- FIN ATELIER DJANGO FRONTEND --------------------------------

Transcription séance du 2012-08-31 15h00 GMT

TEST