HTML_Python.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "<h1><font color=red>Créer du HTML avec Python</font></h1>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h2><font color=red>Lancer le serveur</font></h2/>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "L'objectif est de pouvoir créer du code HTML à partir de script Python.\n",
    "\n",
    "Plus précisemment, nous allons lancer un serveur web écrit en Python qui agira en local (`localhost` ) sur un port précisé dans le script ( ici le port `7777` ).\n",
    "\n",
    "Pour des raisons de commodité, nous lancerons le script `serveur.py` depuis l'éditeur Spyder, avec la commande `Serveur_Start(7777)` exécutée dans le shell IPython.\n",
    "Pour arrêter le script, un simple `CTRL+C` dans le shell doit fonctionner.\n",
    "\n",
    "Vous pouvez alors dans votre navigateur ouvrir un onglet et vous rendre à l'adresse [http://localhost:7777](http://localhost:7777) - et obtenir pour l'instant une erreur 403...\n",
    "\n",
    "En réalité, tout fichier situé **dans le même répertoire** que le fichier `serveur.py` peut alors être appelé via l'intermédiaire du navigateur, et un fichier en `.py` sera interprété par le serveur. Si ce fichier est construit pour générer du code HTML, le serveur construira ce code puis l'enverra au navigateur, qui affichera une page HTML."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h2><font color=red>Une première page</font></h2/>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Regardons maintenant une page web simple, nommée `test.py` possédant un formulaire avec deux champs `nom` et `prenom`, page qui renvoie vers elle-même et affiche le nom de l'utilisateur. \n",
    "On peut accéder à cette page grâce au navigateur en utilisant cette url [http://localhost:7777/test.py](http://localhost:7777/test.py) Le code de la page est expliqué ci-dessous."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "#!/usr/bin/python3\n",
    "# -*- coding: utf-8 -*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Ces deux lignes dites * magiques* indiquent\n",
    "* que le langage utilisé est Python3 ;\n",
    "* que le texte a été encodé en `UTF8`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import cgi\n",
    "formulaire = cgi.FieldStorage() "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "On importe le module `cgi` (**Common Gateway Interface** -  Interface de passerelle commune )qui sera quasiment toujours utilisé lorsqu'on souhaite demander au serveur de fair appel à un programme externe plutôt que de déployer du texte html brut. Ce module est celui qui permet de gérer la relation entre la page `test.py` et le serveur web.\n",
    "\n",
    "Ensuite, une variable nommée `formulaire` est créée, et contient les données éventuellement saisies dans un formulaire précédemment rempli."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "print(\"Content-type: text/html; charset=utf-8\\n\")\n",
    "if formulaire.getvalue(\"nom\")!=None :\n",
    "    nom=formulaire.getvalue(\"nom\")\n",
    "    nom=nom.capitalize()\n",
    "    \n",
    "else :\n",
    "    nom=\"Inconnu\"\n",
    "if formulaire.getvalue(\"prenom\")!=None :\n",
    "    prenom=formulaire.getvalue(\"prenom\")\n",
    "    prenom=prenom.capitalize()\n",
    "    \n",
    "else :\n",
    "    prenom=\"\"\n",
    "   "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Ici on regarde si les valeurs saisies dans les formulaires existent avec la comparaison  `!=None`.\n",
    "Si les valeurs existent, elles sont stockées dans des variables `nom` et `prenom`, puis formatées grâce à la méthode `capitalize()`.\n",
    "Dans le cas où elles n'existent pas, des valeurs par défaut sont fournies."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "html = \"\"\"<!DOCTYPE html>\n",
    "<head>\n",
    "    <meta charset=\"utf-8\" />\n",
    "    <title>Bienvenue {nom_form}</title>\n",
    "</head>\n",
    "<body >\n",
    "    <h1 >Bonjour {nom_form}</h1>\n",
    "    <p >Bienvenue sur cette page, vous êtes {prenom_form} {nom_form}</p>\n",
    "    <form action=\"/test.py\" method=\"post\">\n",
    "    <p>Votre nom :<input type=\"text\" name=\"nom\" value=\"\" /></p>\n",
    "    <p>Votre prénom :<input type=\"text\" name=\"prenom\" value=\"\" /></p>\n",
    "    <p><input type=\"submit\" name=\"send\" value=\"Envoyer information au serveur\"></p>\n",
    "</form> \n",
    "</body>\n",
    "</html>\n",
    "\"\"\".format(nom_form=nom, prenom_form=prenom)\n",
    "\n",
    "print(html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Enfin, une variable `html` ( mais qui aurait pu s'appeler autrement ) est remplie avec un texte **HTML** sur plusieurs lignes ( à l'aide des triples guillemets ), lui-même formaté de la manière suivante :\n",
    "* des champs sont sont proposés avec la syntaxe `{nom_form}` et `{prenom_form}`. Ce sont les emplacements dans le code HTML des propositions variables ;\n",
    "* le texte est formaté grâce à la méthode `format()`, les arguments passés précisant que le champ `nom_form` doit être complété avec la valeur de la variable `nom` ;\n",
    "* quant au formulaire lui-même, il sera transmis avec la méthode `post` sur la page elle-même, i.e. les données du formulaire sont encalpsulée dans un *dictionnaire*, ici contenant deux entrées `nom` et `prenom` auquel on associe les valeurs saisies par l'utilisateur."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h2><font color=red>Ajouter le CSS</font></h2>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**<font color=red> Attention, cette méthode n'est pas fondamentalement correcte.</font>**\n",
    "Pour des raisons de trop grande simplicité du serveur python, il est impossible de faire appel à un fichier CSS avec la méthode habituelle.\n",
    "\n",
    "Mais il existe un moyen de contourner ce blocage: il s'agit de recopier l'intégralité du fichier CSS à l'intérieur du code HTML. Pour ce faire, à l'intérieur du fichier `test.py` :\n",
    "1. Ajouter en import le fichier `Serveur`. Celui-ci contient une méthode `Import_CSS()`.\n",
    "2. La ligne précédant la variable `html`, insérer la ligne de code suivante : `CSS=Serveur.Import_CSS(\"test_css.css\")`.  cette instruction permet à la méthode `Import_CSS()` d'importer sous la forme d'une chaine de caractère le contenu du fichier `test_css.css`, cette chaine de caractère étant stockée dans la variable `CSS`.\n",
    "3. Il faut alors ajouter cette chaine de caractère à la bonne place, c'est à dire entre les balises `<head>` et `<\\head>` de la varaible html. Pour ce faire, on inclut les ligne suivantes :\n",
    "\n",
    " `<style>`\n",
    " `{CSS_form}`\n",
    " `</style>`\n",
    "\n",
    "4. Reste à formater correctement le texte, en insérant en argument supplémentaire de la méthode `format()` la liaison `CSS_form=CSS`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Encore une fois, cette méthode est un *bidouillage* propre à cet exercice. Avec un serveur web bien configuré ( type Apache ou autre... ), la balise `<link>` ici inopérante est totalment fonctionnelle, et on peut alors bien séparer la forme ( CSS) du fond (HTML)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h2><font color=red>Intéragir avec la base de donnée</font></h2>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "La dernière chose à comprendre est comment faire intéragir Python avec la base de donnée afin de **créer un code HTML** valide.\n",
    "Donnons d'abord un exemple de création de formulaire avec liste déroulante puis expliquons le : [http://localhost:7777/test_formulaire_sql.py](http://localhost:7777/test_formulaire_sql.py)\n",
    "\n",
    "Ici le script python va, en plus de ce qui a été expliqué précédemment, aller chercher dans la base de données `Star_Wars.sql` la liste de tous les titres contenus dans le champ `Titre` de la table `Films`, et pour chacun de ces titres, va créer l'option correspondante de la balise `SELECT`, et *concaténer* le tout sous la forme d'une chaine de caractère.\n",
    "\n",
    "Analysons le code :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "#!/usr/bin/python3\n",
    "# -*- coding: utf-8 -*-\n",
    "\n",
    "print(\"Content-type: text/html; charset=utf-8\\n\")##Cette ligne est nécesaire \n",
    "#pour faire comprendre au navigateur qu'il s'agit d'un fichier HTML"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Comme pour tout script Python devant être exécuté, il est fortement recommandé de donner les deux premières lignes, à savoir le *shebang* ( qui indique l'emplacement logique de la commande `python3` dans une architecture `Linux/Unix`), et l'encodage du fichier.\n",
    "\n",
    "L'instruction `print()` quant à elle écrit en entête du fichier transmis au navigateur la nature du fichier, à savoir du texte HTML encodé en UTF-8, afin que celui-ci sache quoi faire avec ( c'est-à-dire l'afficher, et non pas le mettre en téléchargement par exemple)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import cgi, Serveur, sqlite3"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "On importe les modules nécessaires, à savoir :\n",
    "* `cgi` pour traiter avec la serveur via la `Common Gateway Interface` ;\n",
    "* `Serveur` afin d'importer la fonction `Import_CSS()` ;\n",
    "* `sqlite3` pour communiquer avec la base de donnée."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "##traitement d'un formulaire \n",
    "formulaire = cgi.FieldStorage()\n",
    "if formulaire.getvalue(\"film\")!=None :\n",
    "    choix_precedent=\"<p> Vous avez précédemment choisi le film {titre} !</p>\".format(titre=formulaire.getvalue(\"film\"))\n",
    "else :\n",
    "    choix_precedent=\"<p> Vou n'avez pas encore choisi de film !</p>\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Avant toute autre opération, on récupère les données précédemment envoyées ( ou non ) par l'intermédiaire d'un formulaire et de la méthode `POST`.\n",
    "Deux cas se présentent :\n",
    "* soit le champ `film` du formulaire a été rempli ( `!= None`), c'est-à-dire que quelqu'un a déjà sélectionné dans la liste déroulante un film ), dans ce cas on crée une variable `choix_precedent` à laquelle on affecte une chaine de caractères contenant le nom de la sélection ;\n",
    "* soit le champ `film` n'existe pas - typiquement lors d'un premier appel à la page, auquel cas la variable `choix_precedent` contient un message adéquat."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "##Import du fichier CSS\n",
    "CSS=Serveur.Import_CSS(\"test_css.css\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Conversion du fichier `test_css.css` en une chaine de caractère affectée à une variable `CSS`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "##traitement des appels à la base de donnée afin de préparer une chaine de \n",
    "#caractères formant un formulaire avec\n",
    "#liste déroulante des films de la bdd\n",
    "liste_choix=\"\"\n",
    "connexion=sqlite3.connect('StarWars.sql3')\n",
    "curs=connexion.cursor()\n",
    "Titres_extraits=curs.execute(\"SELECT Titre FROM 'Films';\")\n",
    "for Titre in Titres_extraits :\n",
    "    liste_choix=\"\\n\".join([liste_choix,\"<option>{titre}</option>\\n\"\n",
    "                               .format(titre=Titre[0])])\n",
    "curs.close()\n",
    "connexion.close()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Dans cette partie, on va ouvrir la base de données, puis envoyer une requête de sélection pour obtenir les contenus du champ `Titre` de la table `Films`.\n",
    "Une fois ces résultats obtenus, on extrait les différents titres puis on les insère dans une chaine de caractère, un par un, entre les balises `<options>` et `</options>`,chaine concaténée au fur et à mesure grâce à la méthode `join()` et le séparateur retour-chariot `\\n`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "##Squelette HTML complété en utilisant la méthode format\n",
    "html = \"\"\"<!DOCTYPE html>\n",
    "<head>\n",
    "    <meta charset=\"utf-8\" />\n",
    "    <title>Bienvenue</title>\n",
    "    <style>\n",
    "    {CSS}\n",
    "    </style>\n",
    "</head>\n",
    "<body >\n",
    "    <h1 >Bonjour </h1>\n",
    "    {choix_precedent}\n",
    "    <p >Choisissez un des films</p>\n",
    "    <form action=\"/test_formulaire_sql.py\" method=\"post\">\n",
    "    <SELECT name=\"film\" size=\"1\">\n",
    "    {liste_choix_form}\n",
    "    </SELECT>\n",
    "    \n",
    "    <p><input type=\"submit\" name=\"send\" value=\"Envoyer\"></p>\n",
    "    \n",
    "</form> \n",
    "</body>\n",
    "</html>\n",
    "\"\"\".format(CSS=CSS,liste_choix_form=liste_choix,choix_precedent=choix_precedent)\n",
    "\n",
    "print(html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Enfin, on construit le squelette HTML contenant le texte fixe, puis on complète les trous à l'aide de la méthode `format()`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h4><font color='blue'>Exercice</font></h4>\n",
    "\n",
    "Modifier le fichier `test_formulaire_sql.py` de manière à faire apparaître dans le formulaire une liste déroulante supplémentaire avec le nom des acteurs saisis dans la table `Acteurs` de la base de donnée."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}