Cours 6 : Introduction à Python

Python

Python et le Web

EISTI

Appuyer → pour continuer.

Commandes pour les slides

← et → pour avancer / reculer.
espace pour avancer.
Ctrl/Command et + or - pour zoomer plus ou moins.
N pour afficher / cacher les notes.
H pour afficher l'aide.

Formulaires

Présentation

Élément de la page web permettant la saisie de données aux travers de plusieurs éléments graphiques
Permet l'envoi de données d'une page vers un serveur ou vers une autre page html
Défini entre les balises <form>, </form>
Un élément graphique d'un formulaire est une balise

Présentation

Balise invisible permettant de regrouper les éléments graphiques entre eux
Permet d'automatiser l'envoi de données
Attention : Un élément graphique peut s'afficher en dehors des balises form.
Il ne sera alors pas lié aux autres éléments lors de l'envoi des données du formulaire

La balise form

Présentation

4 attributs principaux :

id, définit de manière unique le formulaire
name, permet de récupérer le formulaires simplement dans le document : document.forms.nomForm.submit()
method, définit la façon dont les données sont envoyées d'une page à une autre
action, indique ce qu'il faut faire lors de la falidation du formulaire

La balise form

Attribut method

2 valeurs :

GET, les données sont envoyées dans l'url pour être traitées par la page appelée, côté client (en javascript) ou serveur (PhP, Python). Dans ce cas, les données sont visibles :
http://www.monsite.fr/resultat.html?nom=Lino&prenom=toto
POST, les données sont envoyées dans le corps de la requête, elles sont sécurisées et peuvent ensuite être traitées par le serveur web

La balise form

Attribut method

action indique :

Une fonction javascript à exécuter
L'url de la page vers laquelle envoyer les données

<form action="verifFormu()">
<form action="resultat.html" method="GET">

Constituants d'un formulaire

La balise input

<input id="id" name="nom" type="..." ... />

permet la création d'éléments de plusieurs types

radio
checkbox
text, password
hidden
file
submit, reset, button

La balise input

type="text"


			<label>Votre pseudo : 

			   <input type="text" id="pseudo" name="pseudo" value="Saisir une valeur" />

			</label>

			<label>Votre mot de passe : 

			   <input type="password" id="pass" name="pass" value="" />

			</label>

Votre pseudo :

Votre mot de passe :

La balise input

type="radio"


			Civilité : 

			<label> 

			   <input type="radio" id="mme" name="civil" value="mme" /> Mme 
</label>

			<label> 

			   <input type="radio" id="mlle" name="civil" value="mlle" /> Mlle 
</label>

			<label> 

			   <input type="radio" id="m" name="civil" value="m" /> M 
</label>

Civilité : Mme Mlle M

La balise input

type="checkbox"


			Couleurs préférées : 

			<label> 

			   <input type="checkbox" id="boxrg" name="boxrg" value="blcl" /> Bleu ciel </label> 

			<label> 

			   <input type="checkbox" id="boxbl" name="boxbl" value="blanc" /> Blanc </label> 

			...

Couleurs préférées :
Bleu ciel
Blanc
...

La balise input

type="submit, reset, button"


			<input type="submit" id="btnok" name="btnok" value="OK" />

			<input type="reset" id="btnclr" name="btnclr" value="Annuler" />

			<input type="button" id="btnverif" name="verif" value="Vérifier" />

Boutons

Effets

submit, exécute l'action spécifiée dans l'attribut action,
équivalent à la commande js : document.forms.nomForm.submit()
reset, remet tous les champs du formulaire à leur état initial
équivalent à la commande js : document.forms.nomForm.reset()
button, ne fait "rien"...
exécute le code défini dans l'attribut onclick

La balise input

type="hidden"


			<input type="hidden" id="planque" name="planque" value="C'était caché!" />

Permet de cacher une valeur dans la page

Tester

La balise input

... et autres !


			<input type="file" id="fic" name="fic" />  

			<select  id="classe" name="classe">   

			<option value="cpi1">CPI1</option>

			<option value="cpi2">CPI2</option>

			<option value="ing1">ING1</option>

			<option value="ing2">ING2</option>

			<option value="ing3">ING3</option>

			</select>

			<textarea name="txt">Du texte</textarea> Du texte...

La balise input

HTML5

<input type="color" name="couleur" /> :
<input type="date" name="madate" /> :
0 <input type="range" name="note" min="0" max="20" /> 20
0 20
<input type="number" name="note" min="0" max="20"> :
<input type="time" name="hdebut"> :
et bien d'autres !

Autres balises

Organisation de la page

fieldset encadre des zones de balises
legend donne un nom à la zone
HTML5 : nouvelles balises (attention à la comptaibilité)

canvas
audio
datalist
... et bien d'autres encore !

Récupération des valeurs

En javascript, dans la page :

Champs texte :
document.getElementById('id').value ou document.forms.nomform.nomcomp.value
Boutons radio :
document.getElementById('id').checked ou document.forms.nomform.nomcomp[i].checked
Listes select :
nd = document.getElementById('id'); nd.options[nd.selectedIndex].value;

En Python !

Serveur Python

Requête

Serveur

Serveur Python : server.py

#!/usr/bin/python

import BaseHTTPServer
import CGIHTTPServer

PORT = 8888
server_address = ("localhost", PORT)

server = BaseHTTPServer.HTTPServer
handler = CGIHTTPServer.CGIHTTPRequestHandler
handler.cgi_directories = ["/"]
print "Serveur actif sur le port :", PORT

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

Serveur

CGI - Common Gateway Interface

Exécute un programme, et retourne le contenu généré
Indépendant de tout langage de programmation
Historiquement utilisé par Perl, il est possible d'écrire un programme CGI en C, Python, PHP, ...

CGI - Page HTML

Exemple : hello.py

#! /usr/bin/env python

print "Content-type:text/html\r\n\r\n"
print '<html>'
print '<head>'
print '<title>Hello World</title>'
print '</head>'
print '<body>'
print '<h2>Hello World! Ceci est ma première page CGI</h2>'
print '</body>'
print '</html>'

CGI - Requête GET

Exemple : helloNoms.py

#! /usr/bin/env python

# Import des modules pour gérer CGI
import cgi, cgitb
# Crée une instance pour récupérer les réponses d'un formulaire
form = cgi.FieldStorage()
# Récupère les données depuis les champs du formulaire
prenom = form.getvalue('prenom')
nom = form.getvalue('nom')
print "Content-type:text/html\r\n\r\n"
print '<html>'
print '<head>'
print '<title>Hello Dude</title>'
print '</head>'
print '<body>'
print "<h2>Hello %s %s</h2>" % (prenom, nom)
print "</body>"
print "</html>"

CGI - Requête GET/POST

Exemple : helloFormulaire.html

#! /usr/bin/env python
print """
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hello You </title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
Please, tell me about you! <br/>
<form action="helloNoms.py" method="get">
Prénom: <input type="text" name="prenom"> <br />
Nom: <input type="text" name="nom" /> <br />
<input type="submit" value="Valider" />
</form>
</body>
</html>
"""

CGI - Valeurs des formulaires

Récupérer les valeurs

Nommer les balises input afin de pouvoir récupérer la valeur
Récupération : form.getvalue('nomInput')
Exemple de récupération de données pour des inputs de type radio, checkbox, textarea et dropdown : ici

CGI - Types de fichiers

Gestion du CSS

Inclusion de la balise STYLE dans le HEAD
Utilisation de la balise LINK avec un fichier CSS monCSS.py

#! /usr/bin/env python

print "Content-type: text/css\n"
print """
body{
background-color: lightgray;
}

p {
color : blue;
}
"""

CGI - Types de fichiers

Gestion des Images

Utilisation de la balise IMG avec une image image.py

#! /usr/bin/env python

print "Content-type: image/png\n"
print file(r"toto.png", "rb").read()

Content-type : image/png, image/jpeg, image/gif

CGI - Scripts

Complexifier le code

#! /usr/bin/env python

print "Content-type:text/html\r\n\r\n"
print '<html>'
print '<head>'
print '<title>Hello World</title>'
print '</head>'
print '<body>'
if ( condition ) :
print '<h2>Hello World! Ceci est ma première page CGI</h2>'
else :
print <h2>Hello World! Réponse alternative</h2>'
print '</body>'
print '</html>'

Move forward/back	← →
Move forward	spacebar
Hidden Notes	N
Help	H