ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Programmation WEB en Python

Dr. ADAMOU HAMZA

Université de Yaoundé 1

1
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Objectifs du cours
● Ce cours permet aux apprenants de développer
les compétences pour la création des sites web
dynamiques en Python

2
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Présentation du cours
Contenu
● Chapitre 1 : Généralités sur la programmation Web
● Chapitre 2 : Programmation graphique
● Chapitre 3 : Framework Django et WEB2PY
● Chapitre 4 : Gestion des URLs, des templates et des base
de données
Pré-requis
● HTML 5/CSS 3, PHP
● Base de données
● Programmation en Python
Bibliographie : Bersini, H, Alexis, P, Degols G.(2018)
3 Apprendre la programmation web avec Python et Django.
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Chapitre 1 : Généralités sur la

programmation Web

4
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Plan du chapitre
1. Introduction
2. Rappels sur les langages web (HTML, CSS, PHP, ...)
3. Architecture Client/Serveur
4. Mise en place d’un serveur http
5. Modules cgi

5
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Historique/ARPANET

6
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Historique/World Wide Web

7
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Principes de fonctionnement du Web

8
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Principes de fonctionnement du Web

9
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Principes de fonctionnement du Web

10
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Principes de fonctionnement du Web

● <protocole>://<serveur>:<port>/<chemin>/<ressource>
○ Remarque : certains caractères doivent être encodés par %
suivi de leur valeur hexadécimale en ISO Latin ou ASCII
(ex : doc#[Link] ) doc%[Link]).
● Exemples :
○ [Link]
○ [Link]
○ [Link]
○ [Link]
○ s[Link]
11 ○ [Link]
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Principes de fonctionnement du Web

12
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Application Web
● C’est quoi une application web ?
○ Une application dont l'infrastructure d'exécution est
constituée :
■ d'un navigateur web pour l'interaction avec l'utilisateur
■ d'un serveur web pour la réalisation des services
■ éventuellement, d'autres serveurs pour la réalisation de services
spécialisés : sgbd, annuaire, authentification, …
● Sur quel type d’architecture l’installer ?
○ Souvent sur une architecture type Client/Serveur
■ Il s'agit de l'architecture habituelle utilisée sur les ordinateurs
■ Les clients (navigateurs) envoient des requêtes à un serveur
■ Le serveur retourne une réponse
13
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Architecture Client Serveur

● Architecture web
○ Un petit démon (programme : httpd) attend les requêtes
pour les analyser

14
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Application Web
● Aujourd’hui
○ Avec le Web 3.0, on s’oriente vers les services en ligne
■ Interaction avec un système d'information, banque, commerce,
réservation, météo…
○ Les services en ligne deviennent un des modes les plus
courants de développement d'applications
■ Offrent une
● interface fonctionnelle
■ Sont organisés autour d'une base de données stockant :
● Les données de l’application, sur l’administration de la base, sur le
site utilisé
● Offrent une interface d'administration de la base
■ le démon HTTPD n'est plus suffisant : on lui a ajouté un
15 programme d'échange : le cgi
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Vers une architecture orientée

davantage vers les services
● Le protocole CGI (Common Gateway Interface)
○ On a fait un ajout minime à HTTP pour permettre
l'implantation d'une relation client/serveur plus élaborée où
les requêtes comprennent des paramètres et les fichiers
retournés sont générés dynamiquement suite à l'exécution
de programmes

16
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Le réseau
● L'application est connectée sur le réseau

17
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Application Web
● Intérêts de l’application web
○ Portabilité de la partie cliente
■ Fonctionne sur tout navigateur
○ Déploiement facilité des applications
■ Langage simplifié et standard
○ Accès important :
■ Pas de limitation sur le nombre d’accès
○ Sécurité : 1 seul protocole
■ On accède par une URL : seule et unique
● Inconvénient
18 ○ Difficile à mettre au point et à tester
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Application Web
● Pourquoi ça marche ?
○ grâce aux standards créés autour du Web
■ Logiciels serveur : Apache -40.18%, Nginx -27.66%, IIS -11.06%
■ Navigateurs : Google Chrome, Safari (pour les MAC), Microsoft Edge
(l'évolution d'Internet Explorer), Mozilla Firefox, Opera, Konqueror, ....
■ Nombre sites : 1,93 milliard de sites web 2022 (source Netcraft)
■ Top 5 des CMS : WordPress -30 millions de sites, Wix -7 millions de sites,
Progress Sitefinity -3,5 millions de sites, Squarespace -2,9 millions de sites
et Plesk -2,3 millions de sites.
■ Nombre de TLD : 364,6 millions en 2021
■ Sites les plus visités : [Link] - 15,63 milliards de visites par mois,
[Link] - 4,11 milliards de visites par mois, [Link] - 3,36
milliards de visites par mois, [Link] - 2,69 milliards de visites par mois,
[Link] - 1,50 milliard de visites par mois, [Link] - 1,46 milliard de
19 visites par mois, ...
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Application Web
● Les technologies de base utilisées
○ Un protocole d'échange entre clients et serveurs
standardisé : HTTP
○ Un mécanisme de nommage uniforme et extensible : URL
○ Un langage de description des ressources uniforme,
standardisé et ouvert : HTML
● Un consortium W3C qui veille et qui propose
○ réunit les plus grands spécialistes de la communauté Internet
■ proposent des recommandations et des standards
■ fournissent des documents de références
■ aident à la mise en œuvre,
20 ■ standardisent et débattent de la majorité des normes
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

HTML/Historique
● Années 1990 : HTML est créé par Tim Berner-Lee au
Centre Européen de Recherche Nucléaire (CERN)
● 1995 : HTML 2.0 normalisation par l’IETF 1
● 1996 : HTML 3.2 ajout des tables, des applets (Java), etc.
● 1998 : HTML 4.01 ajout des feuilles de styles, des frames, etc.
● 2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
2002-2006 : XHTML 2.0 en cours de spécification
● 2007-maintenant : HTML5
○ Normalisation par le W3C depuis 1996.
■ World Wide Web Consortium [Link]
21
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

HTML/Langages à balises
● Un fichier HTML/XHTML est un fichier texte contenant des
balises appelant des commandes, dont l’action est limitée
au texte contenu entre la balise de début et la balise de fin.
○ Extension HTML : .htm ou .html ; XHTML : .xhtml
○ Balise de début : <commande>
○ Balise de fin : </commande>
○ Balise auto-fermante : <commande/>
○ Commentaires : <!--Ceci est un commentaire-->
● Remarques :
○ Les retours chariot, successions d’espaces et/ou de
tabulations ne sont pas pris en compte.
22
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments, balises et attributs

● Élément : sert à définir des objets dans une page.
○ paragraphe (élément p), des titres d’importances diverses
(éléments h1, h2, h3, h4, h5 et h6), un lien (élément a), …
● Les éléments sont constitués de balises.
○ Les balises reprennent le nom de l’élément et sont
entourées de chevrons

23
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments, balises et attributs

● Élément bloc (div) : élément précédé et suivi d’un saut de
ligne.
○ Il forme une boîte dans laquelle est inclus du texte ou
d’autres éléments. Exemples : les paragraphes, les tableaux, ...
● Élément inline (span) : élément qui s’insère dans le fil du
texte et ne peut contenir que du texte ou d’autres éléments
inlines. Exemples : mise en exergue, ...
● Élément auto-fermant : élément qui est une balise ouvrante
et fermante à la fois.
○ Il n’a donc pas de contenu. Ce sont soit des balises de type
bloc, soit de type inline.
24 ○ Syntaxe : <balise/> Exemples : saut de ligne, séparation horizontale ...
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments, balises et attributs

● Apporte du sens
○ <title></title> : titre de la page
○ <h1></h1> : grand titre
○ <h2></h2> : titre de second niveau
○ <p></p> : paragraphe
○ <code></code> : portion de code informatique
● Mise en forme
○ <br/> : génère un saut de ligne
○ Structuration d’un document : <section>,
<article>, <header>, <footer>, <aside>, <nav>
25
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments, balises et attributs

● Attribut : enfin, vont venir compléter les éléments en leur
donnant des indications ou des instructions
supplémentaires.
○ <balise[ attribut1=valeur1[ attribut2=valeur2 ...]]>
○ <balise[ attribut1=valeur1[ attribut2=valeur2 ...]]/>

26

ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Structure de base d’une page

27
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Titres
● Il y a 6 niveaux de titre :
○ <h1> ... </h1>
○ <h2> ... </h2>
○ <h3> ... </h3>
○ ...
○ <h6> ... </h6>

28
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Paragraphes
● L’élément de bloc <p> ... </p> permet de construire des
paragraphes et par un attribut.
● L’élément inline <br/> permet de contrôler les sauts de
lignes.

29
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Texte structuré

● em (emphasis) mise en exergue
● strong : mise en exergue plus importante
● mark : faire ressortir du contenu.
● cite : extrait ou référence à une autre source code :
portion de code informatique
● samp : exemple de résultat issu d’un programme
● kbd : frappe au clavier devant être effectuée par
l’utilisateur var : instance d’une variable ou le paramètre
d’un programme dfn : terme encadré a une définition
● abbr : forme abrégée
30 ● ...

ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Texte structuré

31
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Listes
● Chaque item d’une liste est déclaré par <li> …
● Liste simple : ● Liste numérotée :
<ul> <ol>
<li> item </li> <li> item </li>
<li> item </li> <li> item </li>
<li> item </li> <li> item </li>
</ul > </ol >

● Il existe aussi des listes de définitions (<dl> ... </dl>), les

items sont déclarés par les balises <dt> pour le terme et
32 <dd> pour la définition associée.
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Listes

33
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Tableaux
● Les éléments <thead> et
<tfoot> permettent de répéter l’
élément dans les tableaux sur
plusieurs pages.
● La balise <tr> déclare une ligne
● Les balises <td> (cellule
normale) ou <th> (cellule
titre/grasse) déclarent les cellule
dans la ligne
● Les attributs rowspan et
colspan fusionnent les cellules
34
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Tableaux

35
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Images
● La balise <img/> permet d’insérer une image
○ Les attributs suivants sont obligatoires :
■ src : l’URI où se situe l’image
■ alt : courte description de l’image
● Exemple
○ <img src="[Link]" alt="le logo Debian"/>
● Remarque : en spécifiant la taille des images, on accélère
le chargement (attributs width et heigth).

36
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Images

37
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Liens
● L’élément <a href="...">...</a> permet d’insérer un lien
○ Le contenu de l’élément est celui qui sera affiché en tant
que lien.
○ L’attribut href contient l’URI vers laquelle le lien pointe.
■ URL : [Link]
■ URL (mail) : [Link]
■ Fichier local avec chemin relatif : ./dossier/autre_page.html
■ Fichier local avec chemin absolu : /www/dossier/autre_page.html
● Exemple
○ <a href="lien_vers_une_autre_page.html">Texte affiché</a>

38
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Liens

39
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Formulaires
● L’élément <form> ... </form> déclare un formulaire
○ Les attributs :
■ action : URL spécifiant le traitement des données (script, mail, etc.)
■ method : spécifie la méthode d’acheminement des données (GET
par défaut ou POST)
■ enctype spécifie la méthode d’encodage pour un envoi en POST
● application/x-www-form-urlencoded : encodage par défaut
● multipart/form-data : aucun encodage, (utilisé notamment
pour le file-upload)
● text/plain : seul les espaces sont remplacés par des ‘+’

40
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Formulaires
● L’élément <fieldset>...</fieldset> permet de définir un
regroupement dans un formulaire.
● L’élément <legend>...</legend> permet de donner une
légende à un fieldset.
● L’élément <label>...</label> permet de définir une
étiquette.
● L’élément <input/> contient les attributs suivant :
○ type : spécifie le type d’élément à utiliser
○ name : donne un nom à l’élément
○ value : donne une valeur à l’élément
41
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Formulaires
● <input type =" text " name =" champs " size =" 10 " value =" texte "/ >
● <input type =" password " name =" mdp" size =" 10 " maxlength =" 8 "/ >
● <input type =" email " value =" saisir un email valable "/ >
● <input type =" hidden " name =" steak " value =" haché "/ >
● <input type =" checkbox " name =" chk1 " value =" ok"/ >
● <input type =" checkbox " name =" chk2 " value =" ok" checked =" checked "/ >
● <input type =" radio " name =" choix " value =" rd1 "/ >
● <input type =" radio " name =" choix " value =" rd2 " checked =" checked "/ >
● <input type =" radio " name =" choix " value =" rd3 "/ >

Remarques :
● pour les types checkbox/radio si l’attribut value n’est pas spécifié, la
valeur par défaut est on
42 ● le type hidden permet de passer des valeurs d’une page à une autre
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Formulaires
● Un élément <input/> de type :
○ submit : bouton d’envoi des données du formulaire au serveur
○ image : bouton avec image pour l’envoi des données du
formulaire
○ reset : bouton de restauration les valeurs par défaut du
formulaire
○ file : bouton d’ouverture de boite de recherche de fichiers
● Exemple
○ <input type="submit " name="action " value="Insert" />
○ <input type="file" name="unFichier " id="fichier" />
○ <input type="image" src="images/[Link] " name=" action
"value="Delete "/>
43 ○ <input type="reset " value="Reset "/>
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Formulaires
● Un élément <textarea> permet de créer un champs texte
○ Exemple
<textarea rows =" 4 " cols =" 50 " >
Ce texte est éditable et sera envoyé lors du submit
</ textarea >
● La balise <select> permet de définir une liste
○ Attributs :
● multiple : permet de sélectionner plusieurs éléments de la liste
● size : si > 2 affiche un tableau, sinon un menu déroulant

44
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Formulaires
● La balise <label> sert à nommer des champs
○ Attribut for indique champs décrit (attribut id)
○ Utile sur les radio et checkbox : augmente la surface
d’activation
● Exemple

45
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Formulaires

46
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Formulaires

47
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

Éléments HTML5/Formulaires

48
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

HTLML/Documentation et liens
● HTML5
○ w2schools : [Link]
○ Toutes les balises :
■ [Link]
● Validation
○ W3C (DTD based) : [Link] [Link]
(non-DTD) : [Link] L’indispensable
Firebug pour le débuggage !
● Compatibilité navigateurs
○ [Link]
49
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Description
● Cascading Style Sheets : Feuilles de style en cascade
○ Un document en mode texte
○ Utilisable par des documents HTML ou XML
○ Présentation identique de tous les documents HTML ou
XML Apporte la modularité du formatage
○ Séparation du contenu et de la présentation
○ 3 normes : CSS 1, CSS 2, CSS 3

50
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Inclusion d’une CSS

● Trois possibilités d’inclusion :
○ Directement dans les balises (à éviter)
■ <h2 style="color:red">Titre en rouge</h2>
○ Définition de la CSS dans le fichier via la balise <style>
<head>
<style type="text/css"> déclaration des styles
</style>
</head>
○ Déclaration d’un lien vers la CSS via la balise <link>
<head>
<link href="[Link] " rel="stylesheet" type="text/css"/>
51
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Déclaration d’une règle

● On peut mettre autant de couples propriété/valeur que

voulu, séparés par des ;
● Commentaire : /* Commentaire */
● Exemple
h1 , h2 { color : red ;}
52
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Déclaration d’une règle

● Sélecteur de type : nom de balise
○ h1 {color: red; background-color: yellow}
● Sélecteur universel : *
● Sélecteur d’ID : #
○ #important {color: red}
○ Sélection de : <p id="important">paragraphe</p>
● Sélecteur de classe : .
○ .special {font-size: 20pt} ou [Link] {font-size: 60pt}
○ Sélection de : <h1 class="special">Titre spécial</h1>
● Remarque : Les id sont uniques sur une même page. Les
53 class s’appliquent à plusieurs balises.
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Déclaration d’une règle

● Sélecteur de descendant
○ p h2 {color: green} : "les h2 qui sont dans un p"
● Sélecteur d’enfant (descendant direct)
○ p > h2 {font-size: 30pt} : "les h2 qui sont directement dans un p"
● Sélecteur d’adjacent :
○ p ~ h2 {font-size: 10pt} : "les h2 qui sont après un p"
● Sélecteur d’adjacent direct :
○ p + h2 {font-size: 10pt} : "les h2 qui sont directement après un p"
● Sélecteur de pseudo-classe
○ a:visited {color: brown}
54
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Déclaration d’une règle

● Sélecteur de pseudo-élément "première lettre"
○ p:first-letter {font-size: 200%; font-weight: bold; float: left;
text-transform: capitalize}
● Sélecteurs de pseudo-élément "avant" et "après"
○ :before et :after génèrent du contenu avant et après un
élément
○ Le contenu généré est déclaré par la propriété content
○ Les pseudo-éléments générés héritent du style de l’
élément référence
■ dt:before { content: "->"; }

55
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Éléments et propriétés
● Propriétés ([Link]
○ polices de caractères : font-size, font-style, font-family, font-weight
○ paragraphes : line-height, text-align, text-indent, text-transform
○ blocs : height, width, margin-right, margin-left, margin-top, margin-
bottom, padding-right, border-style, border-top-width, ...

56
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Cascade
● Tous les styles, peu importe où ils sont définis, se
fusionnent dans l’ordre de chargement, en une seule
feuille de style avec un système d’héritage et peuvent s’
écraser.
●

57
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Cascade
● Tous les styles applicables sont appliqués.

58
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Positionnement
● Fonctionnement par défaut :
○ Dans le flux, les éléments sont positionnés les uns en
dessous des autres
● Positionnement flottant (par rapport au bloc contenant) :
float: left;
● Positionnement absolu (par rapport au conteneur, hors
flux) : position: absolute; top: x px; left: y px;
● Positionnement fixe (absolu même en cas de scroll) :
position: fixed; top: x px; left: y px;
● Positionnement relatif (par rapport à sa position dans le
flux) : position: relative; top: x px; left: y px;
59 ○ [Link]
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Exemple d’utilisation

60
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Exemple d’utilisation

61
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

CSS/Exemple d’utilisation

62
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Description
● PHP : Hypertext Preprocessor
● Langage de script intégré à HTML/XHTML, côté serveur
● Le serveur parse les documents et interprète le code PHP
● Le client reçoit uniquement le résultat du script (une page
“générée”)
● Le code PHP est inclus dans des balises PHP : <?php
code-PHP ?> Voir : [Link]

63
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Fonctionnement

64
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Premier script

65
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Syntaxe de base

66
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Les variables
● Le typage des variables est dynamique
○ Syntaxe : $NomDeVariable[=val];
■ règle de nommage : $[a-zA-Z\_]([a-zA-Z0-9\_])*
■ sensibilité à la casse
■ assignation par :
● valeur : $var1=$var2;
● référence : $var1=&$var2;
■ Portée : locale à la fonction où elle est déclarée

67
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Variables superglobales
● Quelques tableaux superglobaux :
○ $_GLOBAL contient des références sur les variables de
l’environnement d’exécution global (clefs = noms des
variables globales)
○ $_SERVER variables fournies par le serveur web
○ $_GET et $_POST variables transmises par les méthodes
GET et POST du protocole HTTP
○ $_COOKIE, $_REQUEST, $_SESSION, $_FILES, $_ENV

68
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Les constantes
● Syntaxe : define("NOM_DE_LA_CONSTANTE", valeur)
● Les constantes :
○ ne commencent pas par $
○ sont définies et accessibles globalement dans tout le code
ne peuvent pas être redéfinies
○ ne peuvent contenir que des booléens, des entiers, des
flottants et des chaînes de caractères
● Exemple
define (" PHP "," PHP Hypertext Preprocessor ");
echo PHP ;
69
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Les types

70
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Les tableaux
● Principe : associations ordonnées de type clef ⇒ valeur
○ Déclaration : array( [clef =>] valeur, ...)
■ la clef est facultative, elle est de type entier ou chaîne de
caractères ; en cas d’omission, la valeur sera associée à la clef
d’indice max+1
■ la valeur peut être de n’importe quel type

71
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Opérations sur les tableaux

● count($array) : nombre d’éléments
● sort($array) : trie le tableau
● array_pop($array) : récupère et supprime le dernier élément
d’une liste (i.e. fonctionne comme une pile)
● array_push($array, $elem1, ...) : ajoute des éléments à la fin
d’une liste (i.e. fonctionne comme une pile)
● array_shift($array) : récupère et supprime le premier élément
d’une liste
● array_unshift($array, $elem1, ...) : ajout d’éléments en début
de liste
● array_merge($array1, $array2, ...) : fusionne plusieurs
72
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Type d’une variable

● Type d’une variable : string gettype($var);
● Test : is_integer($var); is_double($var); is_array($var); ...
● Conversion dynamique : $result = (type-désiré)$var;
● Instructions de vérification d’existence (formulaires) :
○ boolean isset($var); retourne FALSE si $var n’est pas
initialisée ou a la valeur NULL, TRUE sinon ;
○ boolean empty($var); retourne TRUE si $var n’est pas
initialisée, a la valeur 0, "0", ou NULL, FALSE sinon ;
○ boolean is_null($var); retourne TRUE si $var n’est pas
initialisée ou vaut NULL, FALSE sinon (inverse de isset).
73
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Exemple

74
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Chaines de caractères
● Les chaînes peuvent être déclarées avec :
○ Simples quotes : $t=’texte’;
○ Doubles quotes : $t="texte";
● Fonctionnement différent : entre doubles quotes, les
variables et les caractères échappatoires sont interprétés

75
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Chaînes de caractères
● Longueur : int strlen(string $ch)
● Répétition : string str_repeat(string $cr, int nb)
● Minuscules : string strtolower(string $ch)
● Majuscules : string strtoupper(string $ch)
● Initiales en majuscules : string ucwords(string $ch)
● 1ere lettre en majuscule : string ucfirst(string $ch)
● Suppression de caractères en début de chaîne : string
ltrim(string $ch, string liste)
● Suppression de caractères en fin de chaîne : string
rtrim(string $ch, string liste)
● Suppression de caractères en début et fin de chaîne : string
76 trim(string $ch, string liste)
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Fichiers
● Ouverture : $fichier=fopen("NOM", "MODE"); avec
MODE valant :
○ r, r+ : lecture et lecture/écriture, pointeur au début
○ w, w+ : écriture et lecture/écriture, avec création ou effacement,
pointeur au début
○ a, a+ : écriture et lecture/écriture, pointeur à la fin, avec création
○ x, x+ : création en écriture et lecture/écriture, pointeur au début,
erreur en cas d’existence du fichier
○ c, c+ : création en écriture et lecture/écriture, pointeur au début,
sans erreur
● Fermeture : fclose($fichier);
77 ● Présence : file_exists($fichier);
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Fichiers
● Lecture d’une ligne :
○ string fgets($fichier [, integer nbOctets])
● Lecture d’un caractère :
○ string fgetc($fichier)
● Ecriture d’une ligne :
○ integer fputs($fichier, string)
● Test de fin de fichier :
○ boolean feof($fichier)
● Positionnement :
○ fseek($fichier, int $position);
78
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Fichiers

79
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Formulaires

80
 ISSEA : Institut Sous-régional de Statistique et d'Economie Appliquée

Analystes Statisticiens (AS3)

PHP/Formulaires

81