Python et le web - technologie CGI

Remarquez que durant 20 chapitres de ce tutoriel Python, je n'ai jamais employé le terme "Web". N'en concluez pas qu'il est impossible de développer des sites web, des applications web avec le langage Python.
Vous allez voir dans ce chapitre comment faire du développement web en Python en utilisant la technologie CGI.

CGI est l'acroynme de Common Gateway Interface.
Cette technologie est désormais dépassée et nous verrons pourquoi. Désormais tout développement web important en Python passe par l'utilisation d'un framework tel Django ou Flask.

Cependant même avec un framework comme Django ou Flask vous devrez maitriser HTML & CSS voire JavaScript.
Dans ce chapitre vous allez découvrir les gros inconvénients de la technogie CGI qui justifient son abondon progressif et je présente les principes qui régissent un framework Python pour le web.

Technologie CGI

Dans ce chapitre je vais vous montrer comment créer un serveur web en Python puis comment réaliser des scripts pouvant être affichés dans un navigateur tel Chrome ou Firefox avec la technologie CGI.

Un serveur HTTP en Python

Pour qu'un programme Python puisse être appelé à partir d'un navigateur il faut créer un serveur web.

À la racine de C: créez un nouveau dossier et nommez le "python_web".
Ce nouveau dossier va contenir un script nommé "serveur.py" dont le contenu est présénté ci-dessous.

import http.server
 
port = 8080
server_address = ("", port)

server = http.server.HTTPServer
handler = http.server.CGIHTTPRequestHandler
handler.cgi_directories = ["/"]
print("Serveur actif sur le port : ", port)

httpd = server(server_address, handler)
httpd.serve_forever()

des pages web statiques
des pages web dynamiques

Une page web statique écrite en python : "menu.py"

Le script de "menu.py" (toujours dans le répertoire c:\python_web)

# menu.py
# coding: utf-8
import cgi

code_html = """
<!DOCTYPE html>
<head>
<title>menu</title>
<meta charset = 'utf-8'>
<style>
	* {font-size : 16px ; color : navy ; }
	body {width : 90% ; margin : 10px auto ; }
	h2 {text-align : center ; line-height : 1.8em ; font-size : 1.4em ; background : gray ; }
	li { font-size : 1.2em ; margin : 10px ; }
</style>
</head> 
<body>
<h2>Menu</h2>
<ul>
	<li><a href ="#">lien 1</a>
	<li><a href ="#">lien 2</a>
	<li><a href ="#">lien 3</a>
</ul>
<p>Le menu est affiché avec trois items. </p>
</body> 
"""
print(code_html)

Il faut importer le module cgi.

Le code CSS & HTML de la page est contenu dans une chaine multilignes intitulée code_html
Pour afficher tout ce code il suffit donc d'une unique instruction Python : print(code_html) ...

Test

Il faut lancer le serveur HTTP.
Lancez le terminal windows ("invite de commandes") !

C:\Users\boulanger>cd c:\python_web
c:\python_web>python serveur.py
Serveur actif sur le port :  8080

Dans l'invite de commandes j'ai donc saisi : cd c:\python_web
puis j'ai saisi : python serveur.py (ou py serveur.py)

Alors je bascule sur le navigateur et je saisis dans la barre d'URL : localhost:8080/menu.py
La page web s'affiche alors.

Un problème d'encodage ! Mais comme la technologie CGI est obsolète je n'évoquerai pas la solution avec cet outil ...

Pour lancer le serveur local il y a une autre solution encore plus rapide : à partir de l'explorateur de fichiers de windows double-cliquez sur le fichier "serveur.py".

Une page dynamique en python

Je vous propose désormais une page web écrite en python qui sera utilisée par le visiteur pour se connecter à son espace personnel. Il y aura donc un interaction entre le script et le visiteur (qui doit effectuer des saisies).

Le code de "connexion.py"

# connexion.py
# coding: utf-8
import cgi 
print("Content-type: text/html; charset=utf-8\n")


form = cgi.FieldStorage()
print(form.getvalue("identifiant"))
print(form.getvalue("motdepasse"))

code_html = """
<!DOCTYPE html>
<head>
<title>Authentification</title>
<meta charset = 'utf-8'>
<style>
* {font-size : 16px ; color : navy ; }
body {width : 90% ; margin : 10px auto ; }
h2 {text-align : center ; line-height : 2em ; font-size : 1.6em ; background : gray; }
p {text-align : justify ; margin : 10px ; padding : 5px ; font-size ; 1.4em}
input {height :30px ; line-height : 30px ; display : block; margin : 10px;  }
</style></head>
<body>
<h2>Authentification</h2>
<p>Saisissez dans le premier champ votre identifiant 
puis dans le second champ votre mot de passe afin de vous connecter. 

    <form action="#" method="get">
        <input type="text" name="identifiant" placeholder="Votre identifiant " />
         <input type="text" name="motdepasse" placeholder="Votre mot de passe " />
        <input type="submit" name="envoi" value="Validez">
    </form> 
</body></html>
"""
print(code_html)

Notez trois instructions en python basées sur la méthode Fieldstorage du module cgi (donc des instructions qui sont obsolètes et ne seront plus reconnues dans un avenir proche ...):

form = cgi.FieldStorage()
print(form.getvalue("identifiant"))
print(form.getvalue("motdepasse"))

Grâce à ces instructions nous pouvons manipuler récupérer les valeurs saisies dans les champs de formulaire nommés respectivement "identifiant" et "motdepasse".

Le code HTML relatif au formulaire ne pose aucune difficulté. Notez cependant la valeur de l'attribut action qui vaut #. Ce qui veut dire que les données sont envoyées vers "connexion.py".

Le rendu dans le navigateur

Le serveur HTPP étant toujours ouvert (sur le port 8080), tapez dans la barre d'URL du navigateur : localhost:8080/connexion.py

python et le web

Juste au desus du titre de la page, le terme "none" apparait deux fois. C'est normal car vous n'avez pas encore renseigné le formulaire.

Remplissez les deux champs puis cliquez sur le bouton de soumission et observez.
Les "none" sont remplacées par les valeurs saisies dans le formulaire.

Exerccice

Afin de vérifier si vous avez compris, je vous propose de réaliser un embryon de calculatrice en ligne.

La page web "puissance.py"

Extraits du script

# puissance.py
# coding: utf-8
...
<h2>Calcul de puissances</h2>
<form action="#" method="get">
      ...
	<input type="submit"  value="Calculez">
</form> 
</body></html>
"""
print(code_html)

# récupération des données saisies dans le formulaire
form = cgi.FieldStorage()
nombre =eval( form.getvalue("nombre"))
n = int(form.getvalue("exposant"))
resultat = nombre ** n
print("<h2>Le résultat de " , nombre ," par ", n, " est : ",  resultat, "</h2>")

Je vous communique entièrment le traitement des données du formulaire en Python.
À vous de reconstituer le contenu de la chaine multilignes "code_html" (et code CSS interne).
Inspirez vous de la page "connexion.py" ; le style est identique !

Deuxième exercice : calculatrice_web.py

C'est l'occasion de faire une bonne révision sur les formulaires HTML ; vous aurez besoin de maitriser le HTML pour la suite.

Le code (extraits)

...
</body></html>
"""
print(code_html)

# récupération des données saisies dans le formulaire
form = cgi.FieldStorage()
n1 =eval( form.getvalue("n1"))
n2 = eval(form.getvalue("n2"))
ope = form.getvalue("ope")
if ope =="+" :
        resultat = n1 + n2
if ope == "-" :
        resultat = n1 - n2
if ope == "*" :
        resultat = n1 * n2
if ope == "/" :
        resultat = n1 / n2

print(f"<h2>Le résutlat de {n1} {ope} {n2} est  {resultat} </h2>")

Le contrôle nommé "ope" est une liste.

Aperçu dans le navigateur

Python et le web

Une page web qui manipule une base de données

C'est ici que nous allons voir les inconvénients de la technologie CGI.

Travaux préalables

Si vous avez bien suivi tous les chapitres de ce tutoriel, vous disposez d'une base SQLite nommée "animaux.db" dans le dossier c:\python_prog.
Je rappelle que cette base contient deux tables "especes" & "taxons" ; tables reliées entre elles par un champ de jointure nommé "code" dans les deux tables ; "taxons.code" est clé primaire et "especes.code" est clé étrangère.
Copiez cette base dans c:\python_web

Le script "especes_liste.py"

Toujours dans "c:`\python_web" créez un nouveau script et nommez le "especes_liste.py" .

se connecter à la base "animaux.db"
générer des données (exécuter une requête sélection sur la table 'especes'
générer du code HTML qui affiche lesdites données dans le cadre d'un superbe tableau HTML

Ci-dessous le code de "especes_liste.py". # especes_liste.py # coding: utf-8 import sqlite3 import cgi print("Content-type: text/html; charset=utf-8\n") code_head = """<!DOCTYPE html> <head> <title>Liste des espèces</title> <meta charset = 'utf-8'> <style> * {font-size : 16px ; color : navy ; } body {width : 90% ; margin : 10px auto ; } h2 {text-align : center ; line-height : 1.8em ; font-size : 1.4em ; background : gray; } table {width : 60% ; margin : 10px auto; border : 2px solid black ; } td {font-size : 1.2em ; border : 1px solid black;} </style></head> """ print(code_head) code_body_debut =""" <body> <h2>Liste des espèces classées par taxons sous forme d'un tableau</h2> <table> <tr><th>nom espèce</th><th>code taxon</th></tr> """ print(code_body_debut) connexion = sqlite3.connect("animaux.db") connexion.row_factory =sqlite3.Row curseur = connexion.cursor() curseur.execute ("select nom_espece, code from especes order by code") lignes = curseur.fetchall() for ligne in lignes: print('<tr><td>' +ligne['nom_espece'] + '</td><td>' + ligne['code'] + '</td></tr>') print("</table></body></html>")
Les données produites par la requête sélection étant affichées dans un tableau, il faut styler ce dernier d'où deux règles de style.
Il faut se connecter à la base, le problème du chemin étant résolu (script et base dans le même répertoire). Mais n'oubliez pas d'importer le module sqlite3.
Il faut exécuter une requête sélection sur la table "especes".
Il faut créer une boucle pour afficher toutes les données dans un tableau HTML.
L'instruction connexion.row_factory =sqlite3.Row permet de manipuler les noms des champs des champs (et non pas leur indice).

Aperçu dans le navigateur

Le serveur web étant toujours ouvert, tapez dans la barre d'URL : localhost:8080/especes_liste.py

Python et le web

Oui, il y a encore un problème d'encodage des lettres accentuées.
La solution existe en CGI mais comme cette technologie est obsolète ...

Conclusion

Le script "especes_liste.py" reposant sur la technologie CGI est une "joyeux" mélange de SQL, de Python et de HTML.
Pour des développements complexes, l'emploi de la technologie CGI aboutirait à des scripts impossibles à maintenir car très difficiles à lire donc à comprendre en raison des mélanges de langages.

Nous allons donc passer dans les chapitres qui suivent à une autre technologie : l'emploi d'un framework Python et plus précisément le plus populaire : Flask.

des templates en HTML (mais enrichi)
des scripts en Python
des feuilles de style en CSS

Ce qui signifie qu'il pourra y avoir une division du travail : un développeur web pourra maintenir les templates et feuilles de style alors qu'un développeur Python gérera les fichiers d'extension .py.

Traduction

Tutoriel Python - sommaire

Débuter en Python

Python - approfondissements

Tutoriel Python - recherche

L'auteur : Patrick Darcheville

Python et le web - technologie CGI

Technologie CGI

Un serveur HTTP en Python

Une page web statique écrite en python : "menu.py"

Le script de "menu.py" (toujours dans le répertoire c:\python_web)

Test

Une page dynamique en python

Le code de "connexion.py"

Le rendu dans le navigateur

Exerccice

La page web "puissance.py"

Extraits du script

Deuxième exercice : calculatrice_web.py

Le code (extraits)

Aperçu dans le navigateur

Une page web qui manipule une base de données

Travaux préalables

Le script "especes_liste.py"

Aperçu dans le navigateur

Conclusion