Tutos Django

Inclusion CSS et Static Files

Incorporer des feuilles de styles en cascade autrement dit CSS dans un projet django 1.3.1 pourrait s'avérer difficile s'il on ne dispose pas des bonnes clefs de compréhension.

Car en effet, depuis la version 1.3, django utilise les STATIC_FILES pour servir des fichiers medias. Entendez fichiers medias, tout fichier qui sera publique, tels que les fichiers css, javascript, images, vidéos etc...

Il faut savoir que django n'est pas fait pour servir ces fichiers sur le même serveur où est hébergé la logique de votre code, car cela en réduit considérablement les performances. Comprenez qu'une fois que vous voulez mettre en production votre projet, vous devriez avoir un serveur qui héberge la logique de votre code, un serveur qui héberge les fichiers media, et pour aller encore plus loin, un serveur qui héberge votre base de données.

Cependant, dans notre cas particulier où nous sommes dans une optique de développement, nous n'utiliserons qu'un seul serveur pour réaliser toutes ces choses : notre propre machine.

Il vous sera présenter dans ce tutoriel comment configurer votre projet pour utiliser des fichiers medias en développement. Le cas de la production se fera dans un autre tutoriel :)

Comme base de code, nous allons reprendre notre application 'myform' réalisée dans le tutorial précédent.

Nous allons directement créer un dossier nommé 'static' dans le répertoire de notre application, et créer trois sous dossiers à l'intérieur de celui-ci : 'css', 'img', 'js'.

$ cd myform
$ mkdir static
$ cd static/
$ mkdir css img js

A présent nous allons configurer notre projet pour qu'il sache où trouver les fichiers medias que nous créerons. On édite ainsi notre fichier settings.py contenu dans le dossier de notre projet comme ceci :

STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".                                                                                                                                          
    # Always use forward slashes, even on Windows.                                                                                                                                                                   
    # Don't forget to use absolute paths, not relative paths.                                                                                                                                                        
    '/path_to/my_project/myform/static',
)

Et voilà ! Pas besoin de plus de configuration pour un environnement de développement. Surtout n'oubliez pas de mettre une virgule à la fin de votre déclaration. Vous pouvez également ajouter plusieurs sous répertoires 'static' provenant de différentes applications :)

Vous remarquerez que nous n'avons pas besoin de toucher à la variable STATIC_URL qui est déjà configurée par défaut à :

# URL prefix for static files.                                                                                                                                                                                       
# Example: "http://media.lawrence.com/static/"                                                                                                                                                                       
STATIC_URL = '/static/'

Créons à présent un fichier css pour mettre en valeur notre formulaire. Pour cela créez un fichier 'base.css' dans votre dossier 'css' précédemment créé et remplissez le comme ceci :

.niceform dl {clear:left;}

.niceform dt {float:left;text-align:right;width:120px;line-height:25px;margin: 0 10px 10px 0;}

.niceform dd {float:left;margin: 0 0 10px 0;}

Nous définissons ici des styles pour les champs 'dl', 'dt', 'dd' appartenant à la classe 'niceform'.

Modifions à présent le fichier html affichant notre formulaire afin qu'il utilise les balises dl, dt et dd afin de mieux réorganiser celui-ci. Je vous conseille d'ailleurs d'utiliser toujours ces balises lorsque vous créez des formulaires, les balises de table tr, th, td n'étant pas faites pour cela mais bien pour créer des tableaux !

Voici le nouveau code du fichier html 'contact.html' présent dans le dossier 'templates' de votre application 'myform' :

<!DOCTYPE html>
<html>
  <head>
    <title>Formulaire de contact</title>
    <link rel="stylesheet" type="text/css" media="all" href="/static/css/base.css" />
  </head>
  <body>
    <form action="/contact" method="post" class="niceform">{% csrf_token %}
      <dl>
        <dt>{{form.subject.label_tag}} :</dt>
        <dd>{{form.subject}}</dd>
      </dl>
      <dl>
        <dt>{{form.message.label_tag}} :</dt>
        <dd>{{form.message}}</dd>
      </dl>
      <dl>
        <dt>{{form.sender.label_tag}} :</dt>
        <dd>{{form.sender}}</dd>
      </dl>
      <dl>
        <dt>{{form.cc_myself.label_tag}} :</dt>
        <dd>{{form.cc_myself}}</dd>
      </dl>
      <div style="clear:left;margin-left:200px;">
        <input type="submit" value="Submit" />
      </div>
    </form>
  </body>
</html>

Nous réécrivons complètement notre fichier afin qu'il dispose de l'organisation d'un vrai document html, contenant une tête 'head' et un corps 'body'. Entre les balises head, nous déclarons où aller chercher notre fichier css.

<link rel="stylesheet" type="text/css" media="all" href="/static/css/base.css" />

Enfin, nous personnalisons complètement la façon doit doit s'afficher notre formulaire. Remarquez que nous utilisons par exemple 'label_tag' qui nous permet de récupérer le 'label' de notre champs entouré des balises '<label>'. Et que nous rajoutons la class 'niceform' à notre formulaire.

Nous pouvons alors tester en lançant notre serveur avec la commande :

$ python manage.py runserver

Et admirez le résultat en vous dirigeant vers la page http://127.0.0.1:8000/contact :

Form CSS

Nous obtenons un formulaire mieux structuré et plus agréable !
Et vous venez également de comprendre comment charger des fichiers media dans votre application en environnement de développement. Vous pouvez faire la même chose pour vos fichiers javascript, images, vidéos etc...

Cependant, vous remarquerez que lorsque l'on soumet notre formulaire, les messages d'erreurs n'apparaissent plus !
Ceci est du au fait que nous avons personnalisé la façon dont doit s'afficher le formulaire, et nous n'avons pas inclus les messages d'erreurs.
Vous pouvez cependant décider de les afficher en modifiant le code html par :

   <form action="/contact" method="post" class="niceform">{% csrf_token %}
      {{ form.non_field_errors }}
      <dl>
        <dt>{{form.subject.label_tag}} :</dt>
        <dd>{{form.subject}}</dd>
        <dd>{{ form.subject.errors }}</dd>
      </dl>
      <dl>
        <dt>{{form.message.label_tag}} :</dt>
        <dd>{{form.message}}</dd>
        <dd>{{ form.message.errors }}</dd>
      </dl>
      <dl>
        <dt>{{form.sender.label_tag}} :</dt>
        <dd>{{form.sender}}</dd>
        <dd>{{ form.sender.errors }}</dd>
      </dl>
      <dl>
        <dt>{{form.cc_myself.label_tag}} :</dt>
        <dd>{{form.cc_myself}}</dd>
        <dd>{{ form.cc_myself.errors }}</dd>
      </dl>
      <div style="clear:left;margin-left:200px;">
        <input type="submit" value="Submit" />
      </div>
    </form>

Et rajoutez cette ligne à votre fichier css :

.niceform ul.errorlist {float:left;margin: 0 0 10px 0;}

Pourtant, nous n'en avons pas fini ! Il nous faut voir plus loin et penser au code de production. Car en effet, ici nous chargeons directement notre fichier css depuis une adresse que nous connaissons, le mieux serait d'utiliser la variable d'environnement STATIC_URL, ce qui nous permettra à l'avenir de simplement changer la valeur de cette variable si nous décidons de changer le chemin vers lequel sont hébergés nos fichiers médias. Et ainsi éviter de changer dans tous nos fichiers html le chemin vers nos fichiers médias.

Nous allons donc modifier cela en éditant cette ligne :

<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/base.css" />

Et voilà ! Nous utilisons directement la variable de valeur '/static/' définie dans notre configuration qui permet de savoir où sont stockés nos fichiers medias.
Vous devriez alors TOUJOURS utiliser cette façon de faire pour charger vos fichiers medias, ce qui permet de très facilement maintenir votre code.

Notez également, que l'utilisation de la variable {{ STATIC_URL }} dans notre fichier template n'est disponible uniquement parce que dans notre contrôleur, fichier 'views.py', nous avons passé le contexte de la requête :

return render_to_response('contact.html', { 'form': form, }, context_instance=RequestContext(request))

Si cela n'avait pas été réalisé, une erreur serait survenue nous indiquant que la variable STATIC_URL est inconnue.
Nous verrons d'ailleurs dans un prochain tutorial comment fonctionne cette notion de contexte, et comprendre pourquoi nous pouvons utiliser certaines variables définies par ces contextes spécifiquement chargés.

Vous pouvez à présent facilement charger vos fichiers medias en utilisant ce que nous avons vu dans ce tutoriel :)

Pour ceux qui veulent aller plus loin avec les STATIC_FILES, voici la documentation officielle : Managing static files

Article suivant

Article précédent

Articles similaires

Commentaires

Les commentaires sont fermés.

Pingbacks

Les pingbacks sont fermés.