Python et le web

Remarquez que durant 19 chapitres je n'ai jamais employé le terme "Web". N'en concluez pas qu'il est impossible de développer des sites web et des applications web avec le langage Python.
Vous allez voir dans ce chapitre que l'on peut utiliser Python comme langage côté serveur.

Vous savez que pour avoir des pages web dynamiques on ne peut pas se contenter de HTML & CSS.
Pour que les documents HTML puissent être mis à jour automatiquement il faut qu'il soient reliés à une base de données via l'emploi d'un langage côté serveur.
Dans un autre tutoriel de mon site (tuto intitulé "débuter en programmation web") j'ai proposé la solution historique : emploi de PHP et de mySQL (SGBD relationnel). Et bien sachez que vous pouvez également utiliser Python à la place de PHP, SQLite à la place de mySQL.

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 un framework tel Django ou Flask.

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: je crée un nouveau dossier que je nomme "python_web". Puis je produis dans ce nouveau répertoire un fichier nommé "serveur.py" (donc un script python).
Ci-dessous le code du fichier "serveur.py" : 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 statiques
des pages dynamiques

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

Le script "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.
En python il est possible de créer une chaine multilignes à condition qu'elle soit délimitée par """
C'est que nous faisons pour écrire tout le code CSS & HTML de la page, code qui est contenu dans la variable code_html.
Pour que ce code CSS & HTML soit généré par le serveur HTTP doit être l'argument de la fonction print() de Python.

Tests

Il faut lancer le serveur HTTP.
Aspect du terminal windows (CMD ou PowerShell) : C:\Users\boulanger>cd c:\python_web c:\python_web>python serveur.py Serveur actif sur le port : 8080

J'ai donc saisi : cd c:\python_web
puis j'ai saisi : python serveur.py (ou py serveur.py)

Alors je peux basculer sur le navigateur et je saisis dans la barre d'URL : localhost:8080/menu.py
La page web s'affiche alors.
La feuille de style interne est prise en compte mais il y a un problème : la lettre E acentué du mot "affiché" apparait sous la forme de ? dans un losange. Il y a donc un problème d'encodage.

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

Solution au problème

Faites une copie (toujours dans le dossier "python_web") de "menu.py" et nommez cette copie "menu2.py".

Pour que les chaines de caractères soient bien interprétées en UTF-8 il faut rajouter dans le script une instruction complexe :
sys.stdout = codecs.getwriter("utf-8")(sys.stdout.detach() )
Cette instruction fait appel à des objets des modules sys & codecs. Il faut donc importer ces deux modules.

Le code du script "menu2.py" :
Il suffit donc d'insérer les trois instructions suivantes : import sys import codecs sys.stdout = codecs.getwriter("utf-8")(sys.stdout.detach() ) ...

Tapez dans la barre d'URL du navigateur : localhost:8080/menu2.py
La page web s'affiche désormais avec toutes les lettres accentuées.

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. Il y aura donc un interaction entre le script et le visiteur (qui doit effectuer des saisies).

Le code du script

# connexion.py
# coding: utf-8

import cgi 
import sys
import codecs
sys.stdout = codecs.getwriter("utf-8")(sys.stdout.detach() )
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. 
<br>Attention le mot de passe est affiché en clair. </p>
    <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)

Dans une première version de ce script l'instruction print("Content-type: text/html; charset=utf-8\n") n'existait pas mais la fenêtre du navigateur restait vide ...
Notez trois instructions en python pur :

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
Juste aussi 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 données soumissionnées ont bien été traitées par le script : apparaissent désormais en haut de la fenêtre.

Un script qui manipule une base de données

De même qu'avec PHP vous pouvez manipuler une base de données mySQL. Via Python on peut traiter une base SQLite (ou mySQL).

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

Rappels SQLite3

Je rappelle tout d'abord que SQLite est beaucoup plus simple à mettre en oeuvre que les autres SGBD : pas besoin d'installer un serveur sur votre ordinateur.
Par ailleurs une base de données se traduit par un seul fichier.
Dans les chapitres 17 et 18 de ce tuto j'ai évoqué la manipulation d'une base de données SQLite avec l'interface DB browser puis via des programmes python.

Le script "especes_liste.py"

Dans le même dossier créez un nouveau fichier nommé "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 sys import cgi import codecs print("Content-type: text/html; charset=utf-8\n") sys.stdout = codecs.getwriter("utf-8")(sys.stdout.detach() ) code_head = """<!DOCTYPE html> <head> <title>Liste des espèces</title> <meta charset = 'utf-8'> <style> * {font-size : 14px ; 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 =""" <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) 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>") connexion.close

Il faut toujours gérer l'encodage UTF-8 de la même façon.
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 des lignes (TR) et cellules(TD) du tableau.
L'instruction connexion.row_factory =sqlite3.Row permet de manipuler les noms des champs des champs (et non pas leur indice).
Notez bien l'instruction de boucle :

 for ligne in lignes:
    print('' +ligne['nom_espece'] + '' + ligne['code'] + '')

Le rendu

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

Le rendu est esthétique : un titre général et un tableau avec toutes les espèces classées par code.

Remarque

Pour afficher le code HTML généré par ce script Python (et en fonction du contenu actuel de la table "especes"), il suffit de sélectionner l'onglet "éléments" de la console du navigateur.

Conclusion

Le programme "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 à comprendre du fait du mélange 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
des scripts en Python
des feuilles de style en CSS

Récupérer le dossier "python_web"

Version compressée du dossier sous forme d'un zip

Traduction

Tutoriel Python - sommaire

Débuter en Python

Python - approfondissements

Tutoriel Python - recherche

L'auteur : Patrick Darcheville