Serveur de fichiers

En utilisant les routes dynamiques, il est possible de créer un serveur de fichier en quelques lignes.

Bottle dispose d’une fonction static_file qui permet de renvoyer la réponse correspondant à un fichier donné.

Cette fonction prend au moins 2 arguments obligatoires :

  • filename : un nom de fichier ou un chemin vers un fichier
  • root : un paramètre root qui indique à partir de quel répertoire de la machine on va chercher le fichier ci-dessus

Références :

Ajouter une route pour les fichiers statiques

Il faut d'abord créer le répertoire de base pour les fichiers. Traditionnellement, il s'appelle static ou assets ou public mais on peut l'appeler comme on veut. Nous allons l'appeler static, dans le répertoire serveur, et nous allons y ajouter un sous-répertoire images pour y placer des images.

mkdir -p static/images

Si vous êtes en manque d'inspiration, vous pouvez télécharger quelques Tux (il y en a 946) à partir de l'adresse suivante : https://solidev.net/tux/tux1.png et les placer dans le répertoire static/images.

cd static/images
wget https://solidev.net/tux/tux1.png
wget https://solidev.net/tux/tux2.png
wget https://solidev.net/tux/tux3.png
wget https://solidev.net/tux/tux4.png

Ce répertoire static doit être précisé dans le paramètre root de la fonction static_files. On peut le définir de plusieurs manières :

  • "en dur" : root=/home/user/serveur/static mais ce n'est pas "portable".
  • "en relatif" : root=./static mais ce n'est pas "portable" non plus, le chemin relatif est pris à partir du répertoire courant d'exécution du script, qui peut être différent selon l'endroit où on lance le script.
  • "calculé" : root=join(dirname(__file__), "static") qui permet de calculer le chemin à partir du répertoire du script en cours d'exécution. C'est la méthode la plus portable (il faut au préalable importer join et dirname de os.path).
from os.path import join, dirname
from bottle import static_file #...
# ...

@route('/static/<filename:path>')
def server_static(filename):
    return static_file(filename, root=join(dirname(__file__), "static"))

En pratique

Ajouter la route static

Rajouter la route /static/<filename:path> dans le fichier main.py pour servir les fichiers statiques.

Correction

Télécharger le code

from bottle import route, run, template, static_file
from os.path import dirname, join

# ...
# Fichiers statiques
@route('/static/<filename:path>')
def server_static(filename):
    return static_file(filename, root=join(dirname(__file__), "static"))

Afficher une image dans la page d'accueil

Dans le template de la page d'accueil, rajouter l'affichage d'une image provenant de notre serveur de fichier statique au dessus du message d'accueil.

Correction

 
  <body>
    <h1>Page d'accueil</h1>
    <img class="home-img" src="/static/images/tux1.png" alt="Tux" width="200">
    <p>Bienvenue sur notre site !</p>
    <p><a href="/hello/Bob">Dire bonjour à Bob</a></p>
  </body>

Créer un fichier CSS et l'utiliser

Créer un fichier style.css et y déplacer les styles définis dans les templates, et lier ce fichier CSS dans le template de la page d'accueil avec <link rel="stylesheet" href="/static/style.css">.

Correction

Télécharger le code

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page d'accueil</title>
    <link rel="stylesheet" href="/static/style.css">
  </head>

Télécharger le code

body {
    background-color: #f0f0f0;
    color: #333;
    font-family: Arial, sans-serif;
}
h1 {
    color: #007BFF;
}
.home-img {
    display: block;
    margin: 0 auto;
    border: 2px solid #007BFF;
    border-radius: 10px;
    padding: 5px;
}

Programme

  • SNT : thème Internet
  • NSI 1ère : intéraction client/serveur, requêtes HTTP, réponses du serveur