BTS Services informatiques aux organisations – 1re année

DÉVELOPPEMENT D’APPLICATIONS
COURS

BTS Services informatiques aux organisations – 1re année

Élisabeth Martins Da Silva

DÉVELOPPEMENT
D’APPLICATIONS
COURS
Retrouvez la liste de nos formations sur www.cned.fr
Pour plus d’informations, appelez le 05 49 49 94 94
Du lundi au vendredi, 8 h 30-18 h.
Coût d’une communication ordinaire.

*82946TGPA0013* www.cned.fr
 Sommaire
Conseils généraux 3
Séquence 1 : Approche d'un développement d'application 7
Séquence 2 : Travail sur un existant 33
Séquence 3 : Accès aux bases de données 41
Séquence 4 : Tests et documentation 57
Séquence 5 : Back office et RAD 73
Séquence 6 : Travail collaboratif : gestion de versions 83
Séquence 7 : Mise en ligne 89
Séquence 8 : Autocorrection 99

CONNECTÉ À VOTRE AVENIR

Les cours du CNED sont strictement réservés à l’usage privé de leurs destinataires et ne sont pas destinés à une utilisation collective.
Les personnes qui s’en serviraient pour d’autres usages, qui en feraient une reproduction intégrale ou partielle, une traduction sans
le consentement du CNED, s’exposeraient à des poursuites judiciaires et aux sanctions pénales prévues par le Code de la propriété
intellectuelle. Les reproductions par reprographie de livres et de périodiques protégés contenues dans cet ouvrage sont effectuées
par le CNED avec l’autorisation du Centre français d’exploitation du droit de copie (20, rue des Grands Augustins, 75006 Paris).

© CNED 2013
Conseils généraux
Présentation générale du module
Ce module intervient au second semestre de la première année, dans le cadre du cours
2946 « Développement d’applications ». Le référentiel lui réserve 4 heures de cours/TP
par semaine sur 15 semaines, ce qui représente un volume total de 60 heures. Il faut
cependant compter beaucoup plus d’heures de travail personnel pour le développement
(vous passerez certainement beaucoup de temps sur le fascicule de TP).
Ce module concerne les deux options de la formation (SLAM et SISR), cependant il a plus
d’importance pour l’option SLAM.
À l’examen, il va intervenir à différents niveaux. L’épreuve écrite U5 «  Production et
fourniture de services  » comportera une partie sur les notions de programmation, qui
sera bien sûr plus importante pour l’option SLAM, mais qui existera aussi pour l’option
SISR. L’épreuve technique U4 « Conception et maintenance de solutions informatiques »
sera, pour l’option SLAM, une démonstration des capacités acquises entre autres dans ce
cours. Enfin, en ce qui concerne l’épreuve orale U6 « Parcours de professionnalisation »,
là encore, en particulier pour l’option SLAM, l’utilisation professionnelle des notions
acquises sera primordiale. Pour l’option SISR, les épreuves U4 et U6 peuvent être l’oc-
casion de montrer aussi des capacités en programmation, toujours appréciables dans ce
domaine.

Connaissances nécessaires pour aborder ce module

Il est nécessaire d’avoir acquis les connaissances abordées dans le module 2944 «  Base
de la programmation » (procédural et surtout événementiel) ainsi que le module 2943
« Exploitation des données » (en particulier le SQL). Conseils généraux

Organisation du module Page 3

Ce module se présente en trois fascicules. Le fascicule de « cours », le fascicule de « tra-
vaux pratiques » et enfin le fascicule de « devoirs ».
Le fascicule de cours contient les informations minimales utiles aux deux options : il est
donc à étudier dans son intégralité quelle que soit l’option. Le fascicule de travaux pra-
tiques comporte un ensemble de TP qui ne sera pas à aborder de la même façon suivant
votre option : vous trouverez toutes les explications au début du fascicule de travaux
pratiques.
Les TP seront à réaliser à votre rythme en parallèle du cours, mais en respectant au moins
les conseils suivants :
Les TP 1 à 8 peuvent être réalisés dès la séquence 1 terminée.
Les TP 9 à 11 ne peuvent être réalisés qu’après avoir étudié la séquence 3.
Même si certaines séquences s’appuient sur l’application réalisée en TP, vous avez le droit
d’avancer le cours même si les TP ne sont pas abordés. En fin de première séquence, vous
trouverez toutes les indications nécessaires pour aborder les TP. N’essayez pas de faire
directement les travaux pratiques sans suivre les indications du cours.
Vous avez deux devoirs à renvoyer :
Le premier devoir va uniquement porter sur les connaissances abordées dans le fascicule
de cours, le second devoir va porter sur les connaissances abordées dans le fascicule de
Travaux pratiques.

8 2946 TG PA 00
 Organisation du fascicule
Ce fascicule s’articule en huit séquences :
Séquence 1 « Approche d’un développement d’application » : permet d’aborder toutes
les notions théoriques qui concernent le développement d’applications, en particulier
dans le domaine du web. C’est à l’issue de cette séquence que les TP peuvent être réa-
lisés.
Séquence 2 « Travail sur un existant » : montre comment aborder des modifications sur
une application existante. Cette séquence prend appui sur l’application créée en TP.
Cependant, même si vous n’avez pas terminé les TP, vous pouvez aborder cette séquence
car elle utilise la correction officielle.
Séquence 3 « Accès aux bases de données » : présente la notion de curseurs pour accéder
à une base de données à partir d’un programme.
Séquence 4 « Tests et documentation » : présente la notion de tests unitaires ainsi qu’un
outil de génération de documentation technique.
Séquence 5 « Back office et RAD » : explique l’importance et le rôle du back office et une
technique pour le générer automatiquement à l’aide d’un RAD.
Séquence 6 « Travail collaboratif : gestion de versions » : montre comment installer et
utiliser un outil de gestion de versions, en particulier utile pour le travail collaboratif.
Séquence 7 « Mise en ligne » : explique tout ce qu’il faut savoir pour mettre en ligne un
site.
Séquence 8 « Autocorrection » : contient la correction des exercices de ce fascicule.
Conseils généraux Seules les séquences 1 à 4 comportent des exercices avec les corrections en séquence 8.
Les séquences 5 et 6 vous invitent à réaliser directement des manipulations de confi-
Page 4 gurations et de tests. Enfin la séquence 7 est une séquence informative qui deviendra
indispensable si vous avez besoin de mettre en ligne un site.
Les séquences sont à traiter de préférence dans l’ordre en réalisant bien, à chaque fois,
les exercices demandés. Le cours comporte volontairement peu d’exercices car le fasci-
cule de TP est très volumineux pour donner la priorité au développement d’applications,
puisque c’est l’objectif de ce module.

Logiciels nécessaires
Plusieurs séquences vont faire appel à certains logiciels. En plus des logiciels nécessaires
dans le fascicule de travaux pratiques, vous allez utiliser les logiciels listés ci-dessous (vous
trouverez aussi toutes les explications au moment où vous aurez besoin de ces logiciels).
PHPMaker
Ce logiciel est un RAD pour le PHP. Il peut être facilement trouvé en faisant une recherche
« télécharger phpmaker ». Il se trouve par exemple sur le site www.01net.com.
Version utilisée lors de la création de ce cours : 8.0.2.

8 2946 TG PA 00
Subversion
Ce logiciel est un logiciel serveur de gestion de versions. Il peut être récupéré directe-
ment sur le site officiel : subversion.tigris.org
Récupérez le fichier setup pour Windows de subversion (dans Projects/subversion).
Version utilisée lors de la création de ce cours : Setup-Subversion-1.6.0.msi
Tortoise
Ce logiciel est un client pour communiquer avec Subversion. Il peut être récupéré direc-
tement sur le site officiel : http://tortoisesvn.net/downloads.html
phpDocumentor
Ce logiciel permet de générer une documentation technique. Il peut être récupéré direc-
tement sur le site officiel : http://www.phpdoc.org/
Version utilisée lors de la création de ce cours : PhpDocumentor-1.4.3.zip

Bon courage !

Conseils généraux

Page 5

8 2946 TG PA 00
Séquence 1
Approche d’un développement
d’application
Cette séquence présente les notions fondamentales liées au développement d’applica-
tions. Vous allez mieux cerner les techniques et les outils existants dans ce domaine. La
présentation approfondit l’aspect développement web avec une mise en pratique dans
le fascicule de travaux pratiques.

X Prérequis
Pour mieux appréhender cette séquence, il faut avoir des connaissances de base
dans le développement et dans la manipulation des données. Pour cela, il est
préférable d’avoir fait les modules 2943 et 2944.

X Capacités attendues en fin de séquence

Avoir compris les enjeux d’un développement d’application et l’ampleur des
domaines concernés.
Séquence 1

X Contenu Approche d'un

développement
d'application
1. Notions de développement d’application ...................................................... 8
2. Problème de persistance des données .......................................................... 10 Page 7
3. Outils de développement .............................................................................. 13
4. Introduction au développement web ........................................................... 20
5. Identification des besoins .............................................................................. 26

Synthèse ......................................................................... 29

8 2946 TG PA 00
 1. Notions de développement d’application
L’approche d’un développement d’application n’est pas la même pour un projet nécessi-
tant 30 personnes sur 2 ans et pour un projet nécessitant une personne sur 4 semaines.
Cependant, les grandes lignes sont similaires.
Il faut savoir repérer les besoins, contrôler l’opportunité d’informatiser et les solutions
les plus adaptées, en accord avec les attentes et les possibilités financières du client.
Ensuite vient la phase de développement qui peut être abordée de différentes façons.
À travers les "cycles de développement", vous aurez un très rapide aperçu des grands
modèles possibles pour gérer la phase de développement.
À travers les "couches applicatives", vous comprendrez mieux quelles sont les orienta-
tions possibles de développement, en vue d’une maintenance et d’une évolution plus
aisée de l’application.

Cycles de développement
Très globalement, les tâches du développement comportent : le recensement des
besoins, la conception, le codage et l’intégration. Il existe ensuite différentes façons
d’aborder ces tâches.
Modèle en cascade
C’est le modèle le plus ancien. Il aborde le développement de façon linéaire en exécutant
Séquence 1
les tâches les unes à la suite des autres.
Approche d'un Tout se base sur les besoins recensés dès le début et le développement supporte mal
développement
d'application
(voire pas du tout) d’éventuelles modifications qui seraient exprimées en fin de cycle. De
telles modifications peuvent avoir des conséquences lourdes.
Page 8 Cycle en V
Par rapport au modèle précédent, ce modèle permet de limiter les problèmes en cas
d’anomalie.

Besoins Validation

Conception globale Tests d’intégration

Tests
Conception détaillée
unitaires

Codage

Les attendus des tests sont définis lors de la phase descendante. Les tests unitaires per-
mettent le contrôle de chaque unité de code indépendamment les unes des autres. Les
tests d’intégration permettent de contrôler la cohérence globale une fois toutes les
unités de code réunies.

8 2946 TG PA 00
Il peut y avoir retour et correction d’une des étapes suivant le résultat des tests corres-
pondants.
Il est question aussi de cycle en spirale, basé sur le modèle en V mais avec l’implémenta-
tion de versions successives, donc répétition du cycle.
Cycle itératif
Le but est de livrer au plus tôt un produit même incomplet mais qui peut être testé, puis
les améliorations sont insérées et testées au fur et à mesure des demandes du client.
Au final, le produit doit être au plus proche des attentes.
Ce modèle est le plus adapté dans le cadre d’un développement d’application car il part
d’un constat : les attentes du client peuvent évoluer en fonction de l’avancée du produit
et le but est de livrer un produit qui corresponde aux attentes.
Ce modèle a donné naissance à différentes méthodes dont une des plus connues : la
méthode Agile.

Couches applicatives
Dans une application, il existe plusieurs niveaux appelés couches applicatives. Certaines
peuvent être nettement distinguées des autres, certaines sont parfois fusionnées. Tout
dépend des décisions prises par les développeurs.
Voici un exemple de ce que l’on pourrait trouver comme couches applicatives :
• Présentation : représente la partie visualisation, donc ce que voit l’utilisateur.
Séquence 1
• Coordination : représente le premier niveau de réaction pour répondre aux
demandes de l’utilisateur (par exemple en plaçant un écouteur sur un bouton pour Approche d'un
développement
réagir lorsque l’utilisateur va cliquer).
d'application
• Service : représente les traitements qui s’exécutent soit suite à une demande de la
couche Coordination, soit suite à une demande de la couche Métier, soit enfin suite Page 9
à une demande d’un autre traitement.
• Métier : représente les informations mémorisées dans l’application et les moyens
d’interagir dessus.
• Persistance : représente l’enregistrement de la couche Métier, dans une base de
données ou tout autre support qui permet de mémoriser les informations au-delà
de la vie du programme.
Logiquement, chaque couche communique juste avec la ou les couches voisines.
Il existe différents modèles qui présentent des règles pour gérer ces couches. Un des
plus connus est le modèle MVC (Modèle Vue Contrôleur) qui réunit la Présentation et la
Coordination dans une seule couche (la Vue), le Métier et la Persistance dans une seule
couche (le Modèle), et enfin le Service dans une couche (le Contrôleur).
À quoi peuvent bien servir de telles séparations ? À permettre de faciliter les mises à jour
de l’application. Un changement de méthode dans la couche Persistance (par exemple
en changeant le type de base de données) ne devrait avoir des conséquences que dans
la couche Métier et aucune autre couche.
La programmation objet a largement permis de faciliter le développement en couches.
Pour les étudiants de l’option SLAM, vous aurez l’occasion d’aborder le modèle MVC
dans le module de programmation objet.

8 2946 TG PA 00
 Exercice 1

Un client vous demande la réalisation d’un site. Après avoir recensé précisément ses
besoins, vous rédigez un cahier des charges très précis que le client valide. Le déve-
loppement a été estimé sur 5 semaines.
Au bout du temps fixé, vous mettez en ligne le site et donc vous le livrez au client. Le
client découvre alors le site. Le résultat correspond exactement aux attentes notées
dans le cahier des charges. Cependant, le client n’est pas satisfait.
a) D’après vous, pour quelles raisons le client n’est-il pas satisfait ?
b) Quel cycle de développement avez-vous choisi pour réaliser ce site ?
c) Compte tenu du résultat, que concluez-vous sur votre choix de cycle de dévelop-
pement et que préconisez-vous pour un prochain développement ?
d) Pour l’application actuelle, comment réagir face aux demandes du client et quelles
en seront les conséquences ?

2. Problème de persistance des données

Séquence 1
Un des plus gros problèmes qui peut se poser lors d’un développement, c’est la persis-
Approche d'un tance des données.
développement Vous savez que toutes les variables d’une application sont libérées au plus tard à la fin de
d'application
l’exécution de l’application. Il est souvent nécessaire que ces données persistent au-delà
pour pouvoir être exploitées à nouveau, soit par la même application, soit éventuelle-
Page 10 ment par une autre.
Il existe différents moyens pour mémoriser des données. Voici les principaux.

Base de données
La base de données représente le moyen le plus utilisé et qui apporte le plus de possi-
bilités.
Intérêt d’une base de données
Mémorisation
La base de données va permettre de mémoriser de façon permanente des informations
qui pourront être exploitées dans une ou plusieurs applications.
La mémorisation se fait sous un format spécifique, en assemblant les informations liées
par un sens commun dans des tables, avec la possibilité de lier les tables entre elles. Ces
aspects seront étudiés plus en détail dans un autre module.
Accès partagé
Les logiciels qui gèrent les bases de données possèdent des outils qui permettent d’éviter
les conflits d’accès en cas d’accès partagé.
Donc, dans le cas par exemple d’un développement web, si plusieurs utilisateurs cher-
chent à accéder en modification à la même information, un système de verrous va se

8 2946 TG PA 00
mettre en place pour éviter tout problème. Cette sécurité est spécifique aux bases de
données.
Cette gestion du partage fonctionne aussi si plusieurs applications différentes accèdent
à la même base de données.
Protection
Il est possible de gérer des niveaux de protection d’accès aux données.
Une protection peut limiter voire empêcher l’accès à une table ou une ligne. La protec-
tion peut aussi concerner le type d’accès (limiter l’accès en lecture, par exemple).
Outils de gestion des bases de données
Les logiciels qui permettent de gérer les bases de données relationnelles sont appelés des
SGBDR (Systèmes de Gestion de Bases de Données Relationnelles).
Ils offrent, souvent avec des outils graphiques, la possibilité d’effectuer toutes les mani-
pulations nécessaires sur la base de données (création, suppression, modification, ajout,
interrogation...).
Dans ce module, vous allez utiliser MySQL qui est gratuit et le plus recommandé pour
être exploité avec le langage PHP. Cela ne signifie pas que PHP ne peut pas discuter avec
un autre SGBDR : tous les langages peuvent accéder à tous les SGBDR.
Vous aurez (ou vous avez eu) l’occasion, dans d’autres modules, d’utiliser PostgreSQL, lui
aussi gratuit et un des plus puissants.
Séquence 1
Outils de conception d’une base de données
Vous aurez l’occasion de découvrir, dans un autre module, un outil de conception qui Approche d'un
permet, à partir de la construction d’un schéma, de générer le script SQL nécessaire à la développement
d'application
création d’une base de données dans un SGBDR précis. On utilisera pour cela le logiciel le
plus connu dans ce domaine : Win’Design (qui par contre n’est pas gratuit, mais auquel
Page 11
vous aurez accès par le CNED, dans le cadre de votre formation).
Accès à une base de données
L’accès aux données mémorisées dans une base de données se fait par le SQL, soit directe-
ment dans le SGBDR, soit à travers une application qui a besoin d’exploiter les données.

XML
Le XML est le format standard d’internet. Il est très utilisé mais pas dans les mêmes
domaines que les bases de données.
Principe
C’est un langage de balisage générique (on peut décider du nom des balises) permet-
tant de mémoriser des données au format texte. Un fichier XML est construit de façon
hiérarchique.
Avantages et inconvénients du XML
Un fichier au format XML peut être lu par n’importe quel navigateur.
Il est nettement plus léger (format texte) qu’une base de données, pour une quantité
équivalente d’information.
En revanche, il n’offre pas la protection ni la gestion de partages d’une base de données.
Il n’accepte pas non plus le SQL.

8 2946 TG PA 00
 Utilisation du XML
Les fichiers XML sont intéressants pour mémoriser des informations qui n’auront pas
vocation à être modifiables par plusieurs personnes.
Ils permettent par exemple de mémoriser des présentations (le format natif de Microsoft
Word est en XML) et des configurations.
Une des utilisations les plus courantes sur le web, et que vous allez avoir l’occasion de
découvrir dans le TP, est la gestion de flux RSS.
Vous avez peut-être déjà eu l’occasion de vous abonner à un flux RSS : si un site offre un
tel flux, le navigateur permet son abonnement et ensuite il est possible de consulter ce
flux d’information sans aller sur le site. Les flux RSS sont au format XML.
Accès à un fichier XML
L’accès à un fichier XML se fait soit en faisant une lecture du fichier comme un fichier
texte (déconseillé), soit en utilisant un "parseur".
Un parseur est un outil offert par quasiment tous les langages et qui propose un
ensemble de fonctions pour accéder à un fichier XML.
Vous découvrirez ce type d’outil en PHP dans le TP.

Autres fichiers
D’autres types de fichiers peuvent être utilisés dans une application.
Séquence 1
Différents types de fichiers
Approche d'un Fichiers binaires
développement
d'application Vous avez eu l’occasion d’utiliser ce type de fichiers pour mémoriser (sérialiser) des don-
nées dans le TP réveil en C# du module 2944 "Base de la programmation". Ce type de
Page 12 fichiers est utilisé pour enregistrer des objets, très souvent dans le but de les transférer :
vous verrez cet aspect dans l’application abordée en Java dans le module portant sur la
programmation objet.
Fichiers texte
Les fichiers textes peuvent être lus avec un simple éditeur. Du coup, ils ont l’avantage
d’être très simples.
Ils peuvent être lus et modifiés par programme.
Ils ont cependant un intérêt très limité : ils peuvent par exemple mémoriser un texte qui
sera ensuite inclus dans une page.
Fichiers image
Les images sont très utilisées dans les sites. Vous apprendrez à les manipuler et surtout à
les rendre les plus légères possibles pour minimiser le temps de chargement.
Fichiers PDF
Le format PDF est le format standard sur internet pour la visualisation de documents. Le
contenu n’est pas modifiable et, après avoir téléchargé le lecteur de PDF, la visualisation
sera identique pour tout le monde.
Autres formats
Tous les formats peuvent être intégrés dans une application, très souvent sous forme
d’objet indépendant, parfois avec un lien direct vers l’application liée au format (si elle

8 2946 TG PA 00
est installée sur l’ordinateur). Par exemple, vous pouvez intégrer une vidéo dans une
page web.
Accès à un fichier
Tous les langages offrent des possibilités d’accès à différents formats de fichiers. Ces
possibilités sont spécifiques à chaque langage.

Exercice 2
Vous devez créer un site et les informations suivantes doivent être manipulées. Pour
chaque type d’information, vous préciserez le format qui vous paraît le plus adapté
(base de données, fichier XML, fichier texte...).
a) Page informative sur l’histoire de la société.
b) Page présentant la liste des membres (photo, nom, texte de présentation...).
c) Forum accessible aux membres.
d) Les dernières informations du site (avec possibilité de s’abonner au flux RSS).
e) Contrat d’inscription pour devenir membre, pouvant être visualisé et téléchargé
par les internautes.

3. Outils de développement Séquence 1

Développer une application, c’est aussi utiliser une batterie d’outils : langages, environ- Approche d'un
nement de développement, outils collaboratifs et bien d’autres. Nous allons essayer de développement
faire un rapide tour d’horizon de ces différents types d’outils. d'application

Choix des langages Page 13

Si vous développez dans une entreprise, la plupart du temps le ou les langages pour une
application spécifique vous seront imposés.
Si vous avez le choix, il faut alors avoir une idée des principaux langages existants. Les
critères de choix sont :
• le coût : la plupart du temps vous allez vous orienter vers un langage gratuit sauf si
vous êtes une entreprise, avec certains moyens, et que certaines solutions payantes
vont représenter un apport d’outils qui peut vous faciliter la vie ;
• le besoin : la plupart des langages ont des spécificités qui les rendent plus adaptés
à un type d’utilisation, donc autant éviter d’utiliser un langage à contre-emploi ;
• la popularité : plus un langage est utilisé, plus il existe des outils récupérables et une
aide développée, généralement accessible par internet ;
• l’apprentissage : enfin si plusieurs langages répondent aux attentes précédentes et
que vous en connaissez un mieux que les autres, autant ne pas perdre de temps à
apprendre un nouveau langage. Cependant ce critère doit arriver en dernier. Ne
choisissez pas un langage juste parce que vous le connaissez : s’il n’est pas du tout
adapté aux besoins, ce sera une perte de temps.
Il existe tout de même deux grands types d’applications qui n’ont pas les mêmes
attentes : les applications classiques et les applications web. Même si certains langages
peuvent être utilisés dans les deux types d’applications, il y a quelques préférences.

8 2946 TG PA 00
 Applications classiques
Dans le cadre du module 2944 "Base de la programmation", vous avez eu l’occasion
de découvrir trois langages : C++, Visual Basic 6 et C#. Pour ceux qui ont choisi l’option
SLAM, vous étudierez aussi Java avec le module portant sur la programmation objet.
C++
Ce langage vous a permis de faire vos premiers programmes en mode console et sans
toucher à la programmation objet. C’est d’ailleurs un peu paradoxal puisque le C++
est avant tout LE langage objet de référence. Soyez bien conscient que vous n’avez vu
qu’une infime partie de ce langage extrêmement vaste.
Le C++ est le successeur du langage C qui est, après l’assembleur, le langage le plus
proche de la machine. Cela lui confère une rapidité d’exécution inégalée.
Le C++ est le langage de référence. Environ un quart des développements se font soit en
C, soit en C++. De nombreux langages sont calqués sur la syntaxe du C.
Au niveau utilisation, le C++ est très utilisé dans les domaines du jeu (pour sa rapidité),
scientifique (pour le grand nombre de bibliothèques déjà codées dans ce domaine) et
dans le développement sous Windows. Couplé avec le framework Qt, C++ est effective-
ment très puissant dans un environnement graphique.
Visual Basic
La version 6 que vous avez eu l’occasion de découvrir n’est plus commercialisée mais
est cependant encore utilisée. La version actuelle (VB.net) fait partie du pack .net de
Séquence 1
Microsoft, au même titre que C#. Le nouveau langage a vaguement gardé la syntaxe de
Approche d'un VB6 mais le moteur qu’il utilise n’est plus du tout le même : c’est le même moteur que
développement le C# et il est devenu un langage tout objet. Ce langage n’est pas très adapté pour les
d'application
applications qui nécessitent une réelle rapidité d’exécution. En revanche, il offre, avec le
.net, une batterie d’outils assez impressionnante.
Page 14
C#
Le C# se présente comme l’alternative Microsoft au Java. Par rapport au C++, c’est un lan-
gage tout objet, dans l’environnement .net de Microsoft. La rapidité d’exécution n’est
pas son fort mais il offre des outils nombreux et puissants.
Java
Java est un langage multiplateformes. Son code, une fois précompilé, peut être exécuté
sur n’importe quel système équipé de la machine virtuelle. Il s’est ainsi imposé dans le
monde de la technologie embarquée (smartphone...). Il est aussi très puissant dans un
environnement client/serveur. C’est le langage tout objet de référence. Il est très utilisé
(environ 1 cinquième des développements se font en Java). Son seul réel inconvénient,
directement lié à la portabilité et à l’utilisation d’une machine virtuelle, est sa lenteur.
Sans réelle conséquence sur des applications classiques, ce n’est pas gérable dans des
domaines qui nécessitent une réelle rapidité d’exécution, comme le jeu.
Les autres
Il existe de nombreux autres langages, mais ceux-là vous donnent déjà un aperçu des
trois langages les plus utilisés (donc à l’exception de VB6). C’est aussi pour cette raison
que vous allez travailler sur ces langages dans le cadre de votre formation.

8 2946 TG PA 00
Applications web
Certains langages sont spécialisés dans les applications web. Voici les langages que vous
allez étudier dans le TP qui est associé à ce cours. Ce sont les langages les plus utilisés
dans ce domaine. Certains n’ont d’ailleurs pas de concurrents.
HTML
Le HTML est l’unique langage de balises qui permet d’afficher des informations dans un
navigateur. Il est donc incontournable.
CSS
Le CSS est aussi un langage de balises, qui permet d’ajouter des caractéristiques de pré-
sentation aux balises HTML (couleur, position...). Pas de concurrent.
JavaScript
Le JavaScript est un vrai langage (ce n’est pas juste un langage de balises) qui est inter-
prété par le navigateur et permet ainsi d’exécuter des commandes qui vont s’exécuter
dans la page et qui ne nécessitent pas d’informations provenant du serveur. On aura
cependant l’occasion de voir comment le JavaScript peut tout de même faire appel au
serveur (avec la technologie AJAX). Même s’il en existe d’autres (VBScript), le JavaScript
est de loin le langage client le plus utilisé dans le développement web.
PHP
Le PHP est un langage serveur. Il n’est pas visible dans les pages côté navigateur.
Lorsqu’un utilisateur demande l’affichage d’une page, le serveur exécute le code PHP de
Séquence 1
la page et ainsi génère des balises HTML et/ou du JavaScript qui est ensuite envoyé au
navigateur pour être affiché. Approche d'un
Il existe plusieurs langages serveurs : ASP, JSP... mais le PHP est le plus utilisé. Il a aussi développement
d'application
l’avantage d’être gratuit.
Les autres Page 15
Finalement on a déjà un peu commencé à parler des autres... En dehors du HTML, du CSS
et de JavaScript, incontournables, il existe donc plusieurs langages qui s’exécutent côté
serveur. Mais comme quasiment tous les hébergeurs acceptent le PHP (car ils ont un ser-
veur qui interprète ce langage), le PHP est devenu le langage le plus utilisé. Pourquoi un
tel choix de la part des hébergeurs ? Parce que ce langage est puissant et surtout gratuit.

Environnement de développement
Une fois le langage choisi, il faut décider de l’environnement de développement.
Autrement dit, où allez-vous écrire le code ?
Excepté certains cas particuliers, la plupart des langages permettent une certaine diver-
sité d’environnements de développement.
Éditeur simple
Très souvent, un simple éditeur, du genre Notepad, peut être utilisé pour saisir le code
source.
Dans ce cas, c’est vous qui avez la maîtrise totale de ce que vous écrivez. Mais en contre-
partie vous n’avez aucune aide.
Cette solution n’est pas idéale. Cependant elle existe !

8 2946 TG PA 00
 Éditeur évolué
Il existe des éditeurs évolués, qui offrent quelques fonctionnalités basiques d’aide au
développement, en particulier la colorisation du code.
C’est le cas, par exemple, de PsPad que vous allez utiliser dans le TP associé à ce module.
Un autre éditeur évolué très connu : Notepad++.
Le gros avantage d’utiliser ce type d’éditeur est double : la colorisation vous aide dans
l’écriture du code, et le code écrit est bien votre propriété (rien n’y est ajouté).
Comment tester ?
Dans le cas de l’utilisation d’un éditeur simple ou d’un éditeur évolué, il faut ensuite pré-
voir de tester le code. Pour cela, il faut installer les outils nécessaires qui varient suivant
les langages.
Voici deux exemples :
Pour le C++ : il faut installer le compilateur (par exemple mingw) qui va permettre de
générer le fichier exécutable.
Pour le PHP : il faut installer un logiciel qui va simuler en local un serveur web et qui va,
entre autres, interpréter le code PHP (par exemple WampServer que vous allez utiliser
dans le TP).
IDE
(Integrated Development Environment)
Séquence 1
Principe
Approche d'un
développement C’est un environnement regroupant un ensemble d’outils d’aide au développement.
d'application Vous avez utilisé plusieurs IDE : Eclipse et Code::Blocks pour le C++, VB6 et Visual Studio
pour le C#.
Page 16
La plupart des IDE sont dédiés à un langage (comme VB6, Code::Blocks), d’autres accep-
tent plusieurs langages (comme Eclipse que vous utiliserez sous une autre version, pour
Java).
Fonctionnalités
Les IDE offrent généralement les fonctionnalités suivantes (et souvent bien d’autres) :
Éditeur de texte : il permet de saisir le code et généralement offre des facilités (colorisa-
tion, aide à la saisie, aide aux indentations...).
Compilateur ou interpréteur : il est soit directement intégré à l’IDE, soit ce dernier utilise
le compilateur déjà installé.
Exécution : il est généralement possible d’exécuter directement le code dans l’IDE, ce qui
n’enlève pas la possibilité de le faire à l’extérieur de l’IDE.
Débogueur : il offre des outils de débogage comme les points d’arrêt, l’exécution pas à
pas, le suivi des variables...
Interface graphique : c’est une aide à la construction de l’interface en positionnant
directement les objets graphiques, le code correspondant étant généré automatiquement.
Framework : éventuellement un framework peut être associé à un IDE. Le framework va
offrir, entre autres, une bibliothèque d’outils que l’IDE va pouvoir mettre à disposition.
RAD
(Rapid Application Development)
C’est un environnement qui permet, à partir de certaines spécificités de départ (souvent
une conception de données ou de classes), de générer automatiquement le code qui va
permettre d’exploiter ces données.

8 2946 TG PA 00
Les RAD permettent donc d’accélérer considérablement le développement mais sont
souvent accusés (à raison) de générer du code lourd et inutile. De plus, le résultat obtenu
correspond rarement aux attentes et nécessite d’importantes retouches.
On parle aussi de "fonction RAD" pour la partie interface graphique des IDE, car le code
est automatiquement généré sur cette partie-là.

Outils collaboratifs
Dans le cadre d’un projet, vous pouvez être amené à travailler avec d’autres déve-
loppeurs. Plusieurs outils existent pour faciliter le travail collaboratif.
Communication
Avant tout vous devez pouvoir communiquer facilement, pour échanger des idées, des
remarques, voire des fichiers.
Ces outils sont classiquement l’envoi de mails, le ‘chat’, le tableau blanc, la visioconfé-
rence...
Annotations
Il existe dans les traitements de texte (et d’autres logiciels) la possibilité d’apporter des
annotations, soit sous forme de commentaires dans la marge (avec le nom de l’auteur),
soit sous forme de correction directement dans le texte mais présentée avec une colori-
sation ou une marque spécifique.
Un tel document annoté peut ainsi circuler entre les collaborateurs et chacun peut ajou-
Séquence 1
ter des informations. Il est aussi possible à tout moment de valider une modification ou
de la supprimer. Approche d'un
développement
Planning partagé d'application
Vous pouvez aussi travailler à plusieurs sur un même planning.
Page 17
Gestion de versions
C’est nettement le point qui nous intéresse le plus.
Si vous devez travailler à plusieurs sur des parties identiques ou interdépendantes d’un
projet, voire sur des fichiers identiques, cela peut s’avérer difficile à gérer. Sans outil
adapté, vous devez contrôler en permanence qui fait quoi pour éviter d’écraser le tra-
vail du collaborateur. Ce contrôle peut s’avérer encore plus complexe si vous travaillez à
distance l’un de l’autre ou si vous êtes plus de deux.
Il existe donc des outils de gestion de versions qui permettent assez bien de pallier ce
problème.
Fonctionnalités
Généralement ces outils utilisent un serveur qui va mémoriser l’ensemble des fichiers
concernés, puis offrent à chaque utilisateur les fonctionnalités suivantes :
• récupération en local d’une copie des fichiers ;
• mise à jour des fichiers du serveur par rapport aux modifications locales, sans perdre
les modifications faites sur les fichiers du serveur depuis la dernière mise à jour ;
• mise à jour des fichiers locaux par rapport aux fichiers du serveur, sans perdre les
modifications faites localement ;
• gestion des conflits ;
• mémorisation de toutes les versions ;

8 2946 TG PA 00
 • possibilité de retour à une version précédente ;
• traçabilité de toutes les modifications apportées.
Autrement dit, vous allez travailler en local avec des fichiers et, à tout moment, vous
pourrez demander de mettre à jour le serveur avec vos fichiers locaux. Le serveur ne va
pas se contenter de copier vos fichiers car peut-être qu’entre-temps, d’autres collabo-
rateurs auront travaillé sur le même fichier. Le serveur s’occupe donc de fusionner les
différentes modifications. Cette manipulation est valable dans l’autre sens : si vous met-
tez à jour vos fichiers locaux avec ceux du serveur, une fusion sera faite et vos dernières
modifications ne seront pas perdues.
Il arrive tout de même qu’il y ait des conflits, par exemple s’il y a eu, par deux personnes
différentes, des modifications de la même ligne de code. Dans ce cas le serveur le signale
et présente le fichier en mettant en évidence les lignes concernées. Généralement le ser-
veur propose plusieurs fichiers : il suffit de choisir celui qui paraît juste et de supprimer
les autres.
En cas de gros problème, il est toujours possible de revenir à une version antérieure.
Mise en place et utilisation
Il faut configurer un serveur avec un logiciel serveur de gestion de versions. Une fois le
logiciel installé, il faut tout configurer correctement et, entre autres, créer le dossier qui
va contenir les fichiers mis en commun.
Il faut ensuite installer sur chaque ordinateur client un logiciel client qui fonctionne avec
Séquence 1
le logiciel serveur.
Approche d'un Exemple d’outil
développement
d'application Subversion est un logiciel serveur de gestion de versions. Il est distribué par Apache.
De nombreux logiciels clients fonctionnent avec Subversion. Par exemple Tortoise.
Page 18
Une fois Tortoise installé, un simple clic droit sur le dossier ou le fichier à partager per-
met d’accéder aux fonctionnalités offertes (transfert vers le serveur, récupération du
serveur...). Des icônes viennent s’ajouter pour savoir l’état du fichier.
Dans ce cours, vous allez apprendre à configurer et utiliser Subversion et Tortoise.

Outils de tests
Les phases de tests sont importantes dans un développement, afin de contrôler le bon
fonctionnement de toutes les fonctionnalités.
Il existe des outils dédiés aux tests, spécifiques à chaque langage. Ces outils sont dédiés
au développement objet : vous ne pourrez donc pas découvrir un tel outil dans ce cours,
cependant vous allez être initié à la philosophie des tests que l’on trouve dans ces outils.
Vous aborderez un tel outil quand vous saurez créer des classes, donc après avoir abordé
le module dédié à la programmation objet.

Outils de documentation
Il existe des outils, spécifiques à chaque langage, qui permettent de générer des docu-
mentations en fonction des informations, sous forme de commentaires intégrés dans le
code.
Vous aurez l’occasion de découvrir un de ces outils dans la suite de ce module.

8 2946 TG PA 00
Outils d’implantation
Une fois l’application terminée (ou une phase terminée), il faut la mettre à disposition.
Cas d’une application classique
Il existe des outils qui permettent de générer un installeur. Un package est ainsi créé,
contenant tous les fichiers nécessaires et pouvant être installé, comme n’importe quelle
application, sur un autre ordinateur.
Cas d’une application web
Les fichiers du site doivent être transférés sur le serveur web. Cela peut se faire de deux
façons :
• soit en utilisant un logiciel de transfert de fichiers (comme par exemple FileZilla) ;
• soit en utilisant les outils mis à disposition par le provider (souvent par l’intermé-
diaire d’un site).
Il faut ensuite, si nécessaire, transférer le script de la création de la base de données. Cela
se fait en passant par l’interface d’administration proposée par le provider. Si votre base
de données est au format MySQL, tous les providers proposent l’interface phpMyAdmin
que vous avez aussi utilisée en local pour faire vos tests.

Exercice 3

Voici plusieurs situations et plusieurs choix qui ont été faits. Vous direz si les choix
Séquence 1
vous paraissent judicieux ou non, et pourquoi. Dans le cas de choix non judicieux,
proposez une autre solution. Approche d'un
développement
a) Un ami vous demande de lui créer un petit site un peu personnalisé et original d'application
pour présenter son CV. Il est décorateur à la recherche d’un emploi et veut pouvoir
montrer certains de ses travaux.
Page 19
Vous avez eu l’occasion, lors d’un stage, de travailler sous ASP.net (la solution
Microsoft pour créer des pages serveur) et avec le SGBDR SQL Server (aussi de
Microsoft). Vous décidez de créer le site avec ces outils.
b) Pendant l’été, vous avez décidé de vous amuser à coder un petit jeu de combat
multijoueurs en 2D.
Vous connaissez un peu les langages C++ et Java. Vous avez eu une première
approche de Qt. On vous a dit que Java est LE langage le plus adapté pour la pro-
grammation client/serveur. Votre choix se porte sur Java.
c) Vous travaillez dans une société qui vous demande de réaliser une application de
gestion en client/serveur qui va servir en interne dans la société. Vous travaillez
à deux sur ce projet et vous êtes le chef d’équipe. Ce travail a été estimé à 6
semaines. Vous êtes à Paris, dans la maison mère, alors que le collaborateur qui va
travailler avec vous est dans la succursale installée à Lyon. Le choix des technolo-
gies est libre, à partir du moment où cela est gratuit !
Vous décidez de réaliser le développement en Java et vous prévoyez de communi-
quer par mail avec le collaborateur, afin de lui communiquer les informations et
d’échanger les fichiers du programme.

8 2946 TG PA 00
 4. Introduction au développement web
Le web est un domaine spécifique, où les règles classiques de développement ont dû
s’adapter pour correspondre à l’architecture imposée par internet. Pour mieux com-
prendre tout cela, il est utile de présenter plus précisément internet.

Petit historique
Pour la plupart des étudiants, le Web fait partie de la vie quotidienne et se présente même
comme un élément indispensable. Il n’y a pas si longtemps, quand j’ai demandé à mon
fils de 16 ans, comment d’après lui je faisais quand j’étais enfant pour faire mes exposés,
il m’a immédiatement répondu : "Tu cherchais sur internet !"… Quand je lui ai dit que la
première fois que j’ai touché à internet, c’était à sa naissance, il n’en revenait pas.
C’est vrai que les accès se sont vraiment implantés en France depuis seulement le début
des années 90 et que les connexions ont pris de l’ampleur quelques années plus tard !
Ça vous étonne ? Faisons un rapide historique :
• 1964 : naissance du projet ARPANET (système distribué). C’est un réseau militaire
créé pendant la guerre froide. Objectif : pouvoir communiquer même avec des
lignes coupées (en prévision de bombardements). Seuls les militaires sont concernés.
• 1973 : réseau mis en place par les scientifiques (naissance du protocole TCP/IP, machines
possédant une adresse IP unique). Seules certaines universités sont concernées.
• 1989 : naissance du WWW grand public (il faudra quelques années pour que cela
Séquence 1
devienne vraiment "grand public", cependant l’expansion a vite été exponentielle).
L’internet représente l’interconnexion de réseaux (network) dans le monde entier.
Approche d'un
développement
d'application Les services accessibles
Plusieurs services sont accessibles sur internet. Certains ne sont plus ou quasiment plus
Page 20 utilisés, d’autres au contraire ont pris beaucoup d’ampleur :
• WWW (World Wide Web) : ensemble des sites. C’est ce que vous utilisez en navi-
guant sur la toile. Utilise le protocole http.
• FTP (File Transfer Protocol) : téléchargement de fichiers. Vous accédez parfois à des
liens dont l’adresse commence par FTP et qui vous permettent de télécharger des
fichiers. Utilise le protocole ftp.
• Courrier électronique : messagerie. Tout ce qui touche aux mails. Utilise les proto-
coles smtp, pop3…
• News Groups : groupes de discussions. Très utilisés dans les premières années, ils
sont maintenant essentiellement remplacés par les forums. Utilise le protocole nntp.
• IRC (internet Relay Chat) : discussion en direct. C’est le "chat" que vous devez cer-
tainement beaucoup pratiquer. Utilise le protocole irc.
• Etc.
Conclusion, ne confondez pas internet et web. Le second n’est qu’un des services offerts
par internet.

Les protocoles
Pourquoi des protocoles ?
Chaque service offert par internet fonctionne avec un protocole précis qui définit les règles
d’encodage et de transfert des informations. Ces règles étant universelles, tous les réseaux
reliés à l’internet sont capables de comprendre les informations qui sont véhiculées.

8 2946 TG PA 00
Les principaux protocoles
Ces protocoles, vous aurez l’occasion de les étudier plus en détail dans un autre module.
Vous apprendrez, entre autres, qu’ils n’interviennent pas tous au même "niveau".
Certains sont des protocoles d’application, d’autres des protocoles réseau… Voici juste à
titre indicatif les protocoles les plus utilisés sur internet :
• TCP (Transmission Control Protocol) : protocole de transport ;
• IP (internet Protocol) : protocole réseau ;
• HTTP (Hyper Text Transfer Protocol) : protocole d’application ;
• FTP (File Transfer Protocol) : protocole d’application.
Le protocole IP
Chaque machine est identifiée sur le réseau mondial par une adresse IP unique de type :
X.X.X.X (avec X compris entre 0 et 255 = 28).
Il est possible d’affecter un nom unique à une adresse IP. Dans ce cas, un serveur DNS
s’occupe de la résolution de nom. C’est le principe utilisé sur internet où, pour accéder à
un site, vous ne tapez pas son adresse IP mais un nom composé.

Le web
World Wide Web (la toile d’araignée mondiale).
C’est quoi ?
Le web représente l’ensemble des sites accessibles par internet. Séquence 1

Qu’est-ce qu’un site ? Approche d'un

Un site est un ensemble de pages consultables à partir d’un navigateur. Un site possède développement
d'application
une adresse unique : l’adresse du serveur qui l’héberge.
Qu’est-ce qu’un serveur web ? Page 21
Un serveur web est un logiciel qui permet d’héberger et de gérer des sites. Très souvent
une machine est dédiée à ce travail, ce qui fait que quand on parle de serveur web, on
parle directement de la machine qui héberge les sites.
Le nom du serveur web est généralement www. Le serveur étant dans un domaine, son
nom complet est sous la forme www.nomdomaine.
Le port d’écoute d’un serveur web est par défaut le port 80. Ce port peut être changé.
Cependant, sauf en intranet et pour des applications spécifiques, il est conseillé de ne
pas toucher au port, car cela forcerait les utilisateurs à préciser le port dans l’adresse.

Qu’est-ce qu’un site ?

Vous savez ce qu’est un site, mais voyons plutôt les catégories.
Les catégories d’accès
Les sites ne sont pas tous accessibles de la même façon :
• sites publics : accessibles à tous ;
• sites d’accès limités : accessibles avec mot de passe (cela peut concerner un site
entier, ou uniquement certaines pages) ;
• sites protégés (ou cryptés) : accessibles avec le protocole https (généralement utilisé
pour le paiement sécurisé : là aussi, cela peut concerner un site entier ou certaines
pages) ;
• sites privés : accessibles dans un réseau fermé, non connecté à internet.

8 2946 TG PA 00
 Les catégories de contenu
Dans un site, les pages sont classées en deux grandes catégories, en fonction de leur
contenu :
• pages statiques : informations fixes ;
• pages dynamiques : informations variables.
Contenu d’un site
Un site peut être constitué d’une ou plusieurs pages. Un site peut comporter des pages
statiques, des pages dynamiques ou un mélange des deux.

Page statique
Qu’est-ce que c’est ?
Elle ne contient que des informations fixes. C’est généralement une page d’information
simple, par exemple la présentation d’une entreprise.
Quels langages ?
Un page statique utilise essentiellement le langage HTML qui permet juste de formater
des informations.
Le langage JavaScript est normalement considéré comme un langage de pages statiques
puisqu’il ne s’exécute que côté client, donc sans utiliser des données provenant de l’ex-
térieur. Même si on peut faire de très jolies animations en JavaScript, cela reste "sta-
Séquence 1
tique" car le contenu informatif reste le même. Cependant, avec la technologie AJAX, le
JavaScript peut aussi accéder "en caché" au serveur. À partir de là on ne peut plus parler
Approche d'un de "page statique". Cette notion sera étudiée dans le TP.
développement
d'application Comment ça marche ?
Les balises HTML sont interprétées par le navigateur et permettent ainsi de formater
Page 22 l’affichage des informations directement insérées dans la page.
Par exemple, pour afficher le mot "bonjour" en gras :

<strong>Bonjour</strong>

Page dynamique
Qu’est-ce que c’est ?
Elle contient des informations fixes et des informations variables. C’est par exemple une
page affichant des articles avec leurs prix : les données sont censées changer dans le
temps, donc il est logique qu’elles soient stockées par exemple dans une base de données.
Quel langage ?
Les langages utilisés doivent être capables de manipuler des informations qui sont stoc-
kées côté serveur, comme une base de données, un fichier XML...
Côté serveur, on peut trouver par exemple les langages suivants : PHP, ASP, JSP...
Le choix du langage doit se faire en fonction de différents critères (puissance, sécurité…)
mais aussi des possibilités d’hébergement. Voilà pourquoi, pour de nombreux sites per-
sonnels et même professionnels, le PHP est favorisé car il est gratuit et du coup la majo-
rité des hébergeurs le proposent.

8 2946 TG PA 00
Comment ça marche ?
Le code dynamique est exécuté côté serveur afin de récupérer les données nécessaires,
puis le résultat (sous forme HTML et éventuellement JavaScript) est envoyé au naviga-
teur client. C’est le principe de l’architecture 3 tiers qui va être étudiée plus loin.

Exemple de code
Aspect multilangages
La particularité de la programmation d’un site par rapport à une application classique
réside dans l’aspect multilangages.
Un site contient :
• des parties comportant du code qui sert à afficher les informations (les balises HTML) ;
• d’autres parties comportant du code un peu plus évolué mais qui s’exécute directe-
ment dans le navigateur sur la machine cliente (le JavaScript) ;
• et enfin d’autres parties comportant du code pour manipuler des informations côté
serveur (comme des bases de données) et qui s’exécute donc uniquement côté ser-
veur (le PHP, par exemple).
Exemple de code
Pour que les choses soient tout de suite plus claires, voyons un exemple de page qui
mélange ainsi les trois langages :

Code JavaScript client Séquence 1

<html> interprété par le
<script language="JScript"> navigateur (côté client) Approche d'un
function Hello(message) { développement
d'application
var chaine = "Vous avez cliqué sur : " + message 
window.alert(chaine)
} Page 23
</script>

Liste des classes (cliquez sur le bouton de votre classe) :

Code PHP interprété par le serveur de

<?php
traitements (côté serveur)
$crsClasse = new Curseur() ;
$crsClasse->reqSelect("select nom from classe") ;
while (!$crsClasse->Eof()) {
$val = $crsClasse->Champs("nom") ; ?>
<input type="BUTTON" value="<?php echo $val ?>"
onclick="Hello(‘<?php echo $val ?>’)"> <?PHP
$crsClasse->Suivant() ;
}
$crsClasse->Fermer() Balises HTML interprétées par le
?> navigateur (côté client)

</html>

Que fait cette page de code ?

8 2946 TG PA 00
 Le code JavaScript du haut de la page n’est exécuté qu’au moment où la fonction concer-
née est appelée. Donc, pour le moment, on l’oublie. Ensuite une ligne de titre s’affiche
("Liste des classes…").
Puis le code PHP va interroger la base de données avec un objet que l’on appelle un
curseur ($crsClasse), pour récupérer les noms des classes (attention ici il est question de
classes dans le sens "section de formation", par exemple "1re année de BTS"). Une boucle
permet d’afficher une balise HTML qui va s’occuper d’afficher un bouton avec comme
titre le nom de la classe (récupérée dans le curseur) et, sur le clic du bouton, la fonction
JavaScript est appelée avec comme paramètre le nom de la classe.
La fonction JavaScript s’occupe d’afficher une fenêtre avec comme message "vous avez
cliqué sur " suivi du paramètre, donc du nom de la classe.
Le but ici n’est pas de comprendre toutes les subtilités des langages, mais juste de voir
qu’il y a effectivement mélange entre plusieurs langages, ce à quoi vous n’êtes pas habi-
tué.
Le serveur de données
Le code côté serveur a souvent besoin d’accéder aux données du serveur, par exemple
à une base de données, comme on le voit dans ce petit exemple. Dans ce cas, le serveur
de traitements, qui s’occupe d’interpréter le code serveur, va faire appel au serveur de
données, à travers par exemple des requêtes SQL. Ce dernier va retourner le résultat de
la requête au serveur de traitements.
Séquence 1
Architecture 3 tiers
Approche d'un L’exécution d’une page de code d’un site se fait sur le principe de l’architecture 3 tiers.
développement
d'application Un client fait appel à un serveur de traitements qui lui-même fait appel à un serveur de
données. Dans le cas de pages statiques, seul le client et le serveur de traitements inter-
Page 24 viennent. Le serveur de données n’intervient que sur les pages dynamiques.

Re
qu
êt
eH
TT
P

8 2946 TG PA 00
Les serveurs de traitements et de données peuvent éventuellement être installés sur la
même machine.
Principe
• Vous tapez, dans la barre d’adresse du navigateur, l’adresse d’une page de site (ou
vous cliquez sur un lien).
• Une requête http est envoyée au serveur web qui héberge la page.
• Le serveur web invoque l’interpréteur PHP (ou autre langage serveur) pour traduire
le code PHP de la page en code HTML (le code JavaScript n’est pas modifié).
• Le code PHP qui manipule des curseurs envoie des requêtes SQL au serveur de don-
nées auquel il s’est connecté.
• Le serveur de données qui héberge la base de données sollicitée, renvoie en
réponse, au serveur web, le résultat de la requête SQL.
• L’interpréteur PHP inclut le résultat de la requête dans le code HTML de la page.
• La page, une fois interprétée, donc ne contenant plus que du code client (HTML et
JavaScript), est envoyée en réponse au client, donc au navigateur.
• La page, une fois côté client, est interprétée par le navigateur qui va utiliser les
balises HTML et exécuter le code JavaScript pour afficher la page.

La norme W3C
Depuis 1994, le W3C (World Wide Web Consortium) a mis au point un ensemble de règles
précises à respecter dans l’écriture d’un site (uniquement le code client). Ces règles sont
là pour pallier d’importantes différences qui existent entre les navigateurs. Vous avez cer- Séquence 1
tainement remarqué que parfois, d’un navigateur à l’autre, les pages ne s’affichent pas
tout à fait de la même façon. La norme W3C, lorsqu’elle est respectée, permet d’obtenir Approche d'un
développement
un site qui fonctionnera de façon quasi équivalente quel que soit le navigateur. En réa-
d'application
lité, il arrive que malgré le respect de la norme W3C, il y ait encore de belles surprises...
mais les problèmes sont limités.
Page 25
À la fin de ce cours, vous apprendrez comment contrôler le contenu d’un site en respec-
tant cette norme.

Exercice 4
Répondez aux questions suivantes :
a) Quel est le protocole qui permet le transfert de fichiers sur internet ?
b) Quel est le nom du projet à l’origine d’internet ?
c) Quelle est la différence entre internet et web (www) ?
d) Quel est le format d’une adresse IP ? À quoi sert-elle ?
e) Quel type de serveur permet de faire le lien entre une adresse IP et un nom
(ce qui vous permet de taper dans votre navigateur www.google.fr plutôt que
209.85.148.147) ?
f) Un serveur de données et un serveur de traitements peuvent-ils être sur le même
ordinateur ?
g) Une page statique peut-elle contenir des informations provenant d’une base de
données ?
h) Lorsque vous demandez à voir le code source d’une page dans un navigateur
(généralement en faisant clic droit sur une page et en demandant d’afficher le
code source), vous pouvez voir : du HTML ? du JavaScript ? du PHP ?

8 2946 TG PA 00
 5. Identification des besoins
Avant de démarrer le développement d’un site, ou de n’importe quelle application, il est
nécessaire de réfléchir sur les besoins afin de correctement les identifier.
Suivant le volume des projets de développement, ce n’est pas la même personne (ou
équipe de personnes) qui s’occupe de l’identification des besoins et du développement.
Cependant, pour les petits projets, il arrive souvent que ce soit le développeur qui s’oc-
cupe de toutes les étapes du développement de l’application.
Voici, de façon très simplifiée, l’approche à adopter par exemple dans le cadre du déve-
loppement d’un site.

But du site
Avant de commencer à créer un site, il faut se poser les bonnes questions.
Pourquoi un site ?
La décision d’élaboration d’un site suppose qu’un objectif précis est recherché. Il faut
dans un premier temps se demander dans quel cadre doit être utilisé le site :
• site en intranet : il permet, dans le cadre d’un intranet donc d’un nombre d’utili-
sateurs restreints, de mettre à disposition des informations et des traitements. Ce
type de site est souvent utilisé en entreprise. Il a parfois une ouverture sécurisée sur
internet, pour que les collaborateurs puissent y accéder de chez eux ;
Séquence 1 • site public sécurisé : il est accessible sur internet, mais en accès limité. Certains sites
sont entièrement sécurisés, d’autres ne possèdent que certaines pages sécurisées ;
Approche d'un • site grand public : il est accessible à tous et souvent cherche à être connu de tous.
développement
d'application Pour qui ?
Le but est de déterminer le public concerné par le site. Cela peut aller d’un groupe de
Page 26
personnes faisant partie d’un service d’une entreprise à la planète entière. La détermina-
tion du public va pousser à mettre en place d’éventuelles restrictions d’accès.
Dans le cadre d’un site commercial, sauf cas particulier, il faut éviter les restrictions qui
pourraient faire fuir les éventuels acheteurs.
Quelles sont les fonctionnalités nécessaires ?
Qu’est-ce que les utilisateurs doivent pouvoir consulter ou faire sur le site ? La détermi-
nation des fonctionnalités doit être d’une grande précision. Elle se fait par rapport aux
attentes du demandeur du site et aussi par rapport aux propositions que vous allez lui
faire. Par exemple, vous pouvez lui proposer d’afficher des news et d’inclure un flux RSS
sur le site pour que les personnes qui le désirent s’abonnent à ce flux et soient informées
des dernières nouveautés. C’est une fonctionnalité à laquelle le demandeur n’avait peut-
être pas pensé mais qui peut l’intéresser.
Il faut ensuite faire le tri entre ce qui est attendu, ce qui est proposé, ce qui est techni-
quement possible et ce qui est réalisable par rapport au délai de développement fixé et
aussi au budget.
Comment et par qui va-t-il être géré ?
Ce point est souvent occulté et pourtant il est fondamental. Tout site doit être géré par
au moins une personne. Même un simple site vitrine doit être mis à jour régulièrement. Il
ne faut donc pas penser juste à la création du site mais aussi à son suivi. Plusieurs points
sont à prévoir :

8 2946 TG PA 00
 • mise à jour du contenu informatif fixe des pages (normalement rare, sinon les don-
nées ne doivent pas être mises en fixe) ;
• mise à jour des informations variables intégrées dans les pages (par exemple, les
prix des articles, les news…) ;
• traitement des messages (si l’internaute a la possibilité de laisser un message) ;
• modération (si l’internaute a la possibilité de laisser des informations, par exemple
dans un livre d’or ou un forum) ;
• traitement des commandes (pour un site commercial).
Une fois que le but du site et son fonctionnement sont clairement définis, il est possible
de passer à la phase de conception du site.

Structure du site
Un site se présente sous la forme d’un ensemble de pages reliées entre elles. Dès le
début, il faut réfléchir sur la structure du site en déterminant les différentes pages et les
liens entre elles. La réflexion sur la structure est importante car elle va avoir un impact
non négligeable sur le comportement de l’internaute. Si la navigation est trop complexe,
trop longue, si les informations ne sont pas claires, l’utilisateur va se décourager et partir
du site.
Il faut donc respecter quelques règles :
• limiter les manipulations de navigation ;
• construire des pages claires, donc peu surchargées ;
Séquence 1
• éviter de demander des informations personnelles inutiles et surtout trop tôt dans
la navigation. Approche d'un
développement
Un des points les plus complexes est de trouver le bon compromis entre "pages non sur- d'application
chargées" et "nombre de pages limitées".
Page 27
Structure des données
Dans le cas d’un site manipulant des données variables, il faut prévoir le moyen de stoc-
ker et de mettre à jour ces données. Bien sûr, il n’est pas envisageable de stocker ces
informations directement dans le code des pages et de modifier le code à chaque fois
que cela est nécessaire.
Les structures de données possibles pour une application web sont les mêmes que pour
tout type d’application. Elles ont été présentées plus haut, dans la partie "problème de
persistance des données".
Rappelons tout de même que le format XML est un standard sur internet (c’est aussi le
format des flux RSS) et que le format PDF est aussi considéré comme un standard pour
la présentation de documents. Cependant, ces deux formats sont aussi utilisés en dehors
du cadre d’internet.

8 2946 TG PA 00
 TP 1 à 8

Maintenant que vous avez une vision théorique globale du développement d’appli-
cations, il est possible de passer à la pratique.
Le fascicule de travaux pratiques qui est associé à ce cours comporte un ensemble de
TP progressifs, liés les uns aux autres, qui permettent de construire étape par étape
un site commercial complet. Le but de l’ensemble de ces TP est de vous faire décou-
vrir comment créer un site complet et les technologies associées au développement
d’applications web.
Vous pouvez dès à présent réaliser les TP 1 à 8 contenus dans le fascicule de travaux
pratiques. Vous serez guidé pas à pas pour découvrir ces nouvelles technologies.
Cependant le travail demandé est volumineux et parfois complexe. Ne soyez pas
étonné d’y passer beaucoup de temps : vous êtes dans le module "développement
d’applications", il est donc normal que vous passiez du temps à développer, et ce
n’est qu’en y consacrant beaucoup de temps que vous pourrez réellement progresser.
Même si vous pouvez réaliser déjà plusieurs TP, vous pouvez aussi à tout moment
continuer l’apprentissage de ce cours. La suite de ce fascicule prend appui sur le
fascicule de TP mais en récupérant la correction finale mise à votre disposition. À
vous donc de gérer votre temps : vous pouvez commencer à réaliser certains TP, puis
alterner avec la suite du cours. Vous devez cependant au minimum avoir réalisé les
Séquence 1 deux premiers TP avant de poursuivre le cours.
Quel que soit votre choix, attention, selon que vous êtes de l’option SLAM ou de
Approche d'un
l’option SISR, les tp ne doivent pas être abordés de la même façon.
développement
d'application Étudiants de l’option SLAM : Vous devez réaliser l’ensemble des TP proposés. Vous
serez guidé pas à pas et, en cas de blocage, la correction de chaque étape est pro-
Page 28 posée. La réalisation de l’ensemble des TP vous donnera une culture et une autono-
mie dans le domaine du développement web. Vous pourrez ainsi créer vos propres
applications web entièrement par vous-même et mieux comprendre les technologies
associées.
Étudiants de l’option SISR : Dans le fascicule de TP, certaines parties sont à réaliser et
d’autres ne sont pas obligatoires et sont juste à lire. Vous trouverez toutes les indi-
cations sur la première page de chaque TP. Le but est d’éviter de vous décourager
et vous n’avez pas besoin d’avoir une connaissance technique aussi poussée que les
étudiants de l’option SLAM dans ce domaine. Cela dit, rien ne vous empêche d’en
faire plus si vous en avez envie.
Quelle que soit votre option, lorsque vous bloquez vraiment sur une partie, vous
avez toujours la possibilité de récupérer la correction de cette partie pour passer à la
suite. Tout est expliqué en détail dans le fascicule de travaux pratiques. Lorsque vous
"sautez" une partie, prenez tout de même le temps de tout lire pour suivre l’histoire.
Prenez aussi le temps de regarder le code de la correction.
Les connaissances abordées dans la suite de ce fascicule de cours sont indispensables
pour les deux options et vont prendre parfois pour base l’application abordée dans le TP.

8 2946 TG PA 00
 Synthèse

Développement d’application
Cycles de développement
Ils permettent de décider comment gérer le développement en choisissant un
modèle :
En cascade : linéairement, étape par étape, avec une possibilité très limitée de modi-
fication des spécifications en cours de développement.
En V : plus réactif, il anticipe les besoins de tests et les retours correctifs éventuels.
Itératif : mise à disposition rapide d’un produit même incomplet pour validation et
pour le faire évoluer suivant les demandes.
Couches applicatives
Elles représentent la séparation éventuelle des parties développées, suivant leurs
objectifs techniques, afin d’optimiser la mise à jour éventuelle de l’application.
Exemple de couches possibles : Séquence 1
Présentation : partie visuelle (IHM).
Approche d'un
Coordination : partie réactionnelle (événements). développement
Service : reçoit des demandes de la couche Coordination et de la couche Métier. d'application

Métier : partie informative (les données).

Page 29
Persistance : partie stockage des données de la couche Métier.
Une fois les couches déterminées (par forcément 5), chaque couche est censée dis-
cuter uniquement avec les couches frontalières.

Persistance de données
Base de données
La base de données représente le moyen le plus utilisé et qui apporte le plus de pos-
sibilités. Elle mémorise les informations dans des tables qui peuvent être liées entre
elles. Elle sécurise l’accès aux informations et gère l’accès partagé. Les données sont
accessibles avec le SQL.
XML
Le XML est le format standard d’internet. Il est très utilisé mais pas dans les mêmes
domaines que les bases de données. Il permet par exemple de mémoriser des confi-
gurations ou des présentations. C’est aussi le format des flux RSS. Il peut se lire avec
un simple éditeur. Par programme, l’accès se fait avec un outil de type parseur.
Autres fichiers
D’autres types de fichiers peuvent être utilisés dans une application (binaire, texte,
image, vidéo, PDF...).

8 2946 TG PA 00
 Outils de développement
Choix des langages
Applications classiques
C++ : Langage de référence. Environ un quart des développements se fait soit en
C, soir en C++. Très proche de la machine donc très rapide. Très puissant dans un
environnement graphique lorsqu’il est couplé avec le framework Qt.
C# : Alternative Microsoft au Java. Langage tout objet, dans l’environnement .net
de Microsoft. Un peu lent mais des outils nombreux et puissants.
Java : Langage multiplateformes. Très puissant dans un environnement client/ser-
veur. Langage tout objet de référence. Il est très utilisé (environ un cinquième des
développements se fait en Java). Un peu lent mais un grand nombre d’outils compte
tenu de sa popularité.
Les autres : Il existe bien sûr de nombreux autres langages.
Applications web
Certains langages sont spécialisés dans les applications web.
HTML : Unique langage de balises pour l’affichage d’informations dans un naviga-
teur.
CSS : Permet d’ajouter des caractéristiques de présentation aux balises HTML.
Séquence 1 JavaScript : Langage interprété par le navigateur pour exécuter des instructions
côté client.
Approche d'un
développement PHP : Langage serveur. Permet d’intégrer dans la page des informations provenant
d'application du serveur.
Les autres : Il existe d’autres langages serveurs. Le PHP reste le plus utilisé.
Page 30
Environnement de développement
Plusieurs environnements sont possibles :
Éditeur simple
Aucune aide apportée. Exemple : Notepad...
Éditeur évolué
Aide légère (colorisation du code...). Exemple : PsPad, NotePad++...
IDE
Application proposant un ensemble d’outils pour l’aide au développement (colori-
sation, indentation, aide à la saisie, débogage...).
RAD
Générateur automatique de code.
Outils collaboratifs
Pour faciliter le travail à plusieurs sur le même projet :
Communication
Mail, chat, visioconférence...

8 2946 TG PA 00
Annotations
Intégration d’annotations dans des documents textuels pour le suivi des remarques
et modifications.
Planning partagé
Possibilité de partager un planning de travail.
Gestion de versions
Partager des fichiers (programmes ou autres) et synchroniser les modifications.
Mémorisation de l’historique des versions.
Outils de tests
Outils pour intégrer des tests dans le code.
Outils de documentation
Outils pour générer automatiquement une documentation.
Outils d’implantation
Outils pour mettre à disposition une application.
Application classique
Générateurs d’installeurs (pour créer un package qui va permettre d’installer tous
les fichiers nécessaires sur un autre ordinateur).
Application web Séquence 1

Outils de transfert de fichiers (pour transférer les fichiers du site sur le serveur web). Approche d'un
Outils distants pour configurer la base de données. développement
d'application
Internet
Page 31
Protocole
Ensemble de règles afin de faire en sorte que deux entités qui communiquent entre
elles soient capables de se comprendre.
Les services accessibles
WWW (World Wide Web) : ensemble des sites.
FTP (File Transfer Protocol) : téléchargement de fichiers.
Courrier électronique : messagerie.
IRC (internet Relay Chat) : discussion en direct.
News Groups : groupes de discussions (remplacés par les forums).
Les protocoles les plus utilisés sur internet
TCP (Transmission Control Protocole) : protocole de transport.
IP (internet Protocole) : protocole réseau déterminant le formatage des adresses.
HTTP (Hyper Text Transfer Protocol) : protocole d’application utilisé pour les pages
web.
FTP (File Transfer Protocol) : protocole d’application utilisé pour le transfert des
fichiers.

8 2946 TG PA 00
 Site internet
Ensemble de pages statiques (contenu fixe) et/ou dynamiques (contenu variable).
Un site internet peut être public (accessible à tous), d’accès limité (accessible par
mot de passe), protégé (avec le protocole https), privé (accessible dans un réseau
fermé).
Langages du web
Langages clients : HTML (balisage pour l’affichage), JavaScript.
Langages serveurs : PHP, ASP, JSP…
Données sur le web (côté serveur)
Bases de données : MySQL (très répandu), PostgreSQL, SQL Serveur, Oracle…
XML : format texte balisé, standard.
Architecture 3 tiers
Un client (navigateur) envoie une requête http au serveur web qui interprète le
code serveur (par exemple PHP) en interrogeant éventuellement le serveur de
données et retourne au client une page ne contenant que du code client (HTML et
JavaScript).

Développement web
Séquence 1 Déterminer le but du site
Intérêt du site, public concerné, fonctionnalités attendues, responsables du site.
Approche d'un
développement Fixer la structure du site
d'application
Déterminer les différentes pages et les fonctionnalités par page.
Page 32 Structurer les données
Recenser les données nécessaires et les organiser, généralement dans une base de
données.

8 2946 TG PA 00
Séquence 2
Travail sur un existant
Cette séquence s’appuie sur le travail réalisé dans le fascicule de travaux pratiques pour
présenter les différentes possibilités de modifications sur une application existante.
Comme vous n’avez pas encore suffisamment de connaissances techniques, en particulier
au niveau des données, vous allez juste avoir un aperçu des possibilités d’évolution.

X Prérequis
Avoir acquis les connaissances abordées dans la séquence 1. Avoir réalisé au
minimum les deux premiers TP du fascicule de travaux pratiques.

X Capacités attendues en fin de séquence

Avoir mieux compris comment aborder le travail sur une application existante.

X Contenu
1. Cahier des charges.......................................................................................... 34
2. Données existantes ........................................................................................ 35 Séquence 2
3. Code existant .................................................................................................. 38
Travail sur
un existant

Synthèse ......................................................................... 39 Page 33

8 2946 TG PA 00
 Vous pouvez être amené à travailler sur un existant. Dans ce cas, un certain nombre d’élé-
ments peuvent éventuellement vous être fournis.
Nous allons travailler sur le site réalisé dans le fascicule de travaux pratiques.

1. Cahier des charges

Un cahier des charges permet de définir les spécifications de l’application à développer.
Il représente souvent un document contractuel.

Contenu du cahier des charges

Le cahier des charges comporte généralement les informations suivantes :
Les objectifs et la description du livrable
Cette partie présente la liste des fonctionnalités de l’application, mais aussi les demandes
sur l’aspect visuel.
Les modalités d’exécution
Dans cette partie, on retrouve entre autres le ou les délais (dans le cas de livraisons par-
tielles) à respecter.
Les modalités peuvent être plus fines. Par exemple, le client peut demander à voir l’évo-
lution du travail en direct.

Séquence 2
Les contraintes
Les contraintes sont de plusieurs ordres :
Travail sur
un existant
• les besoins matériels ;
• les besoins logiciels ;
Page 34 • les besoins humains.
Tous ces besoins sont estimés et le coût est basé sur ces besoins.
Les exclusions
Dans cette partie, on va retrouver tout ce qui va protéger la personne morale ou phy-
sique à l’origine de la rédaction du cahier des charges contre d’éventuels recours du
client.

Travail sur un cahier des charges

Vous n’êtes parfois pas à l’origine de la rédaction du cahier des charges. En revanche,
vous pouvez être amené à travailler à partir de son contenu.
Dans le fascicule de TP, relisez le TP 1 et testez en parallèle la version finale de l’applica-
tion (mise à votre disposition dans la correction officielle). Si vous n’avez pas encore com-
mencé le fascicule de TP, vous devez au moins réaliser les TP 1 et 2 avant de poursuivre.

8 2946 TG PA 00
 Exercice 1

1. Faites une comparaison détaillée entre le cahier des charges présent dans le TP 1
(qui ici ne contient que les objectifs) et l’application finale. Donnez la liste des
fonctionnalités manquantes ou mal adaptées.
2. En vous aidant de vos connaissances sur les IHM (vues dans le module 2944) et de
votre sentiment personnel, répondez aux questions suivantes :
a) Sur la page index, pourquoi la zone d’identification n’est-elle peut-être pas
positionnée à un endroit judicieux ?
b) Toujours sur la page index, que pensez-vous du défilement des news et des
images ?
c) Quel est le problème au niveau des liens favoris ?
d) Les différentes pages suivent-elles le même principe de présentation ?
e) Lors de la visualisation en plus grand des petites images (dessins du tee-shirt ou
images dans la boutique), il y a un problème. Lequel ?

2. Données existantes
Séquence 2
Analyse et évolution d’un schéma existant
Travail sur
Le site utilise une base de données qui a été construite à partir du schéma suivant :
un existant

CLIENT
COMMANDE Page 35
numclient 1,1
nom numcommande
0,n datecommande
prenom
adr1 livraison
adr2
cp 0,n
ville
infoslivraison
tel 1,1
mail
login
(R)
mdp
LIGNECOM
nomarticle
qte

L’avantage d’un tel schéma est de représenter visuellement les tables de la base de don-
nées et les liens qui existent entre ces tables.
Vous remarquez que l’on retrouve une table CLIENT qui contient toutes les informations
nécessaires à chaque client. L’attribut souligné représente l’identifiant : chaque client
aura un numéro unique.
La table COMMANDE possède un numcommande pour identifier la commande, puis
contient, pour chaque commande, une date ainsi que l’état de la commande (si elle a été
livrée ou non). Remarquez le lien entre la table COMMANDE et la table CLIENT. Ce lien

8 2946 TG PA 00
 signifie que pour une commande, il n’y a qu’un client (un et un seul, symbolisé par 1,1 du
côté de commande). Si on lit ce lien dans l’autre sens, cela donne : pour un client, il peut
y avoir 0 à plusieurs (n) commandes. C’est effectivement le cas : un client peut passer
plusieurs commandes. Dans la base de données, ce lien a été traduit par l’ajout de l’attri-
but numclient dans la table COMMANDE, afin d’avoir, pour chaque commande, le client
concerné. À partir du moment où on a son numéro, on peut accéder facilement, dans la
table CLIENT, au client concerné. Vous savez récupérer ce genre d’information en SQL.
Il reste la table LIGNECOM qui va permettre d’avoir le détail des articles commandés
dans une commande. Cette fois le lien est un peu particulier : il y a un (R) qui signifie
"Relatif". Cela représente un double identifiant dans LIGNECOM. La table possède en
identifiant nomarticle ET numcommande (à cause du lien). Effectivement, pour avoir la
quantité d’un article dans une commande, il faut le numéro de la commande et aussi
l’article concerné.
Pourquoi n’y a-t-il pas de table ARTICLE comportant les informations sur les articles
(photo, nom, description et prix) ? Parce que, dans l’application, ces informations ont
été directement enregistrées dans les photos. Cela n’est conceptuellement pas forcément
une bonne idée, mais c’était surtout pour vous montrer, dans le TP, les techniques d’en-
registrement d’informations dans des fichiers images. Cette solution est en revanche très
adaptée à la gestion d’albums photos.

Exercice 2

Séquence 2 1. Expliquer le 0,n qui se trouve du côté de COMMANDE. Par quoi vous paraît-il judi-
cieux de le remplacer ?
Travail sur
un existant 2. Par rapport au cahier des charges, dites quel attribut est en trop et pourquoi.
3. Modifiez le schéma pour prendre en compte les deux remarques précédentes.
Page 36

Modification de la base de données

Le schéma n’est que la représentation visuelle de la base de données. Les deux modifi-
cations précédentes, pour être prises en compte, doivent être reportées sur la base de
données.
La première modification n’a aucune incidence au niveau de la base de données. Elle
permet juste de signaler qu’au moment de la création d’une commande, il faudra ajou-
ter au moins un article, donc qu'une commande ne pourra pas être créée sans article.
La seconde modification donne lieu à la suppression d’un attribut dans la base de don-
nées.
Il existe plusieurs méthodes pour appliquer des modifications conceptuelles sur une base
de données existante :
Nouvelle création de la base de données ou d’une table.
Il est possible, à partir du schéma et suivant le logiciel de conception utilisé (par exemple
Win’Design que vous allez apprendre à utiliser dans un autre module), de générer auto-
matiquement le script SQL de création de la base de données, ou juste d’une table.
Ici, on pourrait demander le script de création de la table LIGNECOM.
Ensuite, dans le SGBD, il faut supprimer la base de données, ou juste la table concernée
et lancer le script de création.

8 2946 TG PA 00
Cette solution est bien sûr très simple et rapide, mais elle a tout de même un gros incon-
vénient : si la ou les tables qui ont été supprimées contenaient des informations, tout
sera perdu. Cette solution n’est donc valable que dans le cas où les tables concernées
sont vides.
Modification directement dans le SGBD
Pour des modifications ponctuelles et lorsque la base de données ou les tables concer-
nées contiennent déjà des informations, cette solution est la meilleure.
Il faut utiliser directement les outils du SGBD pour modifier la structure des tables
concernées. Ces modifications peuvent se faire aussi en exécutant des requêtes SQL.

Exercice 3

En utilisant phpMyAdmin, supprimez l’attribut en trop, repéré à l’exercice 2, dans la

base de données de la version finale de la correction.

Table temporaire pour le panier

Vous avez dû remarquer, dans la base de données, la présence d’une table supplémen-
taire : PANIER.
Cette table est en fait une table temporaire. Elle est là pour mémoriser les informations
du panier en attendant que la commande soit enregistrée définitivement.
Pour le moment, cet enregistrement n’est d’ailleurs pas géré.
Séquence 2
Pourquoi enregistrer le panier dans une table temporaire ? Voici les différentes autres
Travail sur
solutions : un existant
1re solution : enregistrement directement dans la commande
Page 37
Pourquoi pas, mais cela suppose que si la personne décide de ne plus commander, il faut
supprimer la commande en cours. Le problème est que l’on n’a aucun moyen de savoir
qu’elle ne veut plus commander. En revanche, on saura quand elle désire commander
son panier.
2e solution : garder le panier dans des variables de sessions
Cette fois, plus de problème d’enregistrement par erreur d’une commande. Mais si l’in-
ternaute quitte le site par erreur en cours de commande, à son retour tout sera perdu :
cela risque de l’agacer et il ne reviendra peut-être plus sur ce site.
3e solution : garder le panier dans des cookies
La vie des cookies est effectivement plus longue que celle des variables de sessions. Mais
si l’internaute a bloqué l’enregistrement des cookies, cela veut tout simplement dire qu’il
ne pourra jamais commander sur votre site !
4e solution : la table temporaire
C’est la solution qui a été adoptée. Les informations enregistrées dans la base de don-
nées peuvent être retrouvées à tout moment, même si l’internaute revient plusieurs
jours plus tard. De plus, la séparation de la commande et du panier évite toute confu-
sion : tant que les informations sont dans le panier, elles sont en attente.

8 2946 TG PA 00
 Problème classique du panier
Un problème se pose tout de même si la personne place des articles dans son panier puis
ne passe pas commande et ne vide pas son panier : les articles vont être indisponibles
pour les autres. Cela peut être une situation bloquante dans le cas d’articles uniques
comme dans l’exemple du TP. Si les articles existent avec une quantité, ce n’est pas un
problème car lorsque la personne reviendra pour commander, il pourra lui être précisé
les articles qui sont en rupture de stock. Si au contraire les articles sont uniques, le trans-
fert dans le panier va les bloquer et d’autres personnes ne pourront pas les commander.
Il faut alors prendre une décision conceptuelle. Voici par exemple deux solutions :
• envoi automatique de mail à l’internaute lui rappelant qu’un panier l’attend et lui
précisant un délai ;
• suppression automatique du panier après un délai, ce qui suppose qu’il faut enre-
gistrer dans le panier la date de la réservation de l’article.

3. Code existant
Lorsqu’il est nécessaire de faire évoluer une application, il faut savoir repérer les parties
de code à modifier.
Si une application a été construite suivant une architecture précise, le repérage est plus
facile. Dans le cas contraire, il se peut que la recherche de code se traduise par un jeu
Séquence 2 de piste.
Travail sur Voici quelques idées pour repérer l’emplacement du code à modifier.
un existant
Page concernée
Page 38
Par l’URL, vous pouvez savoir quelle est la page concernée.
Malheureusement cette information peut parfois ne pas être d’une grande aide :
• dans le cas de l’utilisation de l’URL rewriting (changement de nom de l’URL : cette
notion sera présentée dans la séquence 7) ;
• si le code à modifier vient d’une autre page incluse dans celle-ci ;
• si la modification doit être faite dans le JavaScript ou le CSS.

Langage concerné
Suivant la modification attendue, vous pouvez vous douter du langage concerné :
• ajout ou modification d’un élément d’affichage : c’est peut-être le HTML qu’il faut
toucher, ou le PHP qui génère le HTML ;
• modification d’aspect : c’est peut-être dans le CSS ;
• modification d’un événement : c’est peut-être dans le JavaScript ;
• etc.
Là, vous réalisez que plus vous aurez de connaissances techniques, plus vous pourrez
facilement repérer le code à modifier.

Recherche dans le code source

Vous pouvez toujours faire un clic droit sur la page et demander à voir le code source.
Cela peut permettre de repérer déjà dans le code source la zone concernée et de faire
le lien avec le code d’origine.

8 2946 TG PA 00
Exercice 4
Dans la version finale du site, vous avez remarqué, dans la page Tshirt et la page
espace perso, qu’il y a un problème au niveau du bouton d’enregistrement : un
texte s’affiche au niveau du bouton.
Trouvez dans le code où se trouve l’erreur et corrigez-la.

Synthèse

Cahier des charges

Un cahier des charges permet de définir les spécifications de l’application à déve-
lopper.
Il contient généralement :
• les objectifs et la description du livrable ;
• les modalités éventuelles d’exécutions ;
Séquence 2
• les contraintes ;
• les exclusions. Travail sur
un existant

Données existantes
Page 39
Les données peuvent se présenter sous différents formats. Très souvent vous les
retrouverez sous forme de base de données.
Il existe deux méthodes pour modifier une base de données :
• recréer la base ou la table concernée : rapide mais perte des données déjà
présentes ;
• modifier directement dans le SGBD : plus long s’il y a de multiples modifica-
tions à apporter, mais préservation des données présentes (suivant le type de
modification).

Code existant
Pour apporter une modification à un code existant, il faut arriver à repérer dans le
code l’endroit concerné.
Le repérage peut s’avérer parfois difficile. Utilisez entre autres ces quelques tech-
niques :
• nom de la page (dans l’adresse URL) ;
• langage concerné (en fonction du type de modification) ;
• positionnement du code dans le code source (en affichant le code source de
la page).
Cela dépend ensuite de la structure globale de l’application et de vos connaissances
techniques.

8 2946 TG PA 00
Séquence 3
Accès aux bases de données
Cette séquence aborde la communication entre une application graphique, donc événe-
mentielle, et les bases de données relationnelles. La plupart des applications de gestion
font appel à des bases de données. Les techniques utilisées pour y accéder sont donc
fondamentales.

X Prérequis
Avoir acquis les connaissances abordées dans les modules 2943 et 2944 (en par-
ticulier la partie portant sur la programmation événementielle) et avoir étudié
les séquences 1 et 2 de ce fascicule.

X Capacités attendues en fin de séquence

Avoir compris comment accéder à une base de données à partir d’une application.

X Contenu
1. Pourquoi le SQL en programmation ? ........................................................... 42
Séquence 3
2. Qu’est-ce qu’un curseur ? .............................................................................. 43
3. Vie d’un curseur .............................................................................................. 43 Accès aux bases
de données
4. Propriétés et méthodes d’un curseur ............................................................ 50
5. Exercices récapitulatifs ................................................................................... 50 Page 41

Synthèse ......................................................................... 56

8 2946 TG PA 00
 1. Pourquoi le SQL en programmation ?
Vous avez vu dans la séquence précédente qu’une base de données était utilisée pour
mémoriser les informations utiles dans l’application.
Mais comment exploiter ces données à partir d’une application ? C’est possible à travers
le langage SQL qui peut être utilisé à travers n’importe quel autre langage de program-
mation.

Qu’est-ce que le SQL ?

SQL = Structured Query Langage
Vous avez déjà abordé le SQL dans le module 2943. Mais vous l’avez utilisé jusqu’à mainte-
nant directement dans un SGBDR, ce qui est déjà très bien. Vous allez maintenant décou-
vrir un autre aspect de ce langage, en l’exploitant directement dans une application.

Petit rappel
Imaginons la relation suivante :
ARTICLE (idArticle, nom, prix)
idArticle : clé primaire

Dans la base de données, vous aurez donc la table correspondante ARTICLE qui contient
trois champs : idArticle, nom et prix, avec idArticle comme clé primaire.

Séquence 3 La table ARTICLE pourrait par exemple contenir ceci :

idatricle nom prix
Accès aux bases
de données 34 Mars 1,50
38 Lion 1,30
Page 42 39 KitKat 1,00
42 Nuts 1,20
45 Bounty 1,40

Imaginons que l’on désire récupérer les noms et prix des articles d’au moins 1,30  €.
Comment faire ? Le langage SQL permet de lancer une "requête" d’interrogation dans la
base de données pour récupérer les informations voulues. Voici la requête qu’il faudrait
écrire :

SELECT nom, prix FROM article WHERE prix >=1,30 ;

La requête précise les attributs que l’on veut récupérer (nom et prix), la table concernée
(article) et la condition d’extraction des informations (prix ≥ 1,30).

Comment l’utiliser ?
Le SQL peut être utilisé de deux façons : soit directement dans le SGBDR, comme vous
avez déjà eu l’occasion de le voir, soit dans une application à travers des curseurs. C’est
cette dernière solution que vous allez découvrir maintenant.

8 2946 TG PA 00
2. Qu’est-ce qu’un curseur ?
Un curseur est un objet non graphique qui permet de lancer une requête SQL d’interro-
gation vers une base de données et qui récupère et gère le résultat obtenu.
Plusieurs termes sont utilisés pour parler de curseur. En algorithme, on parle aussi de "jeu
d’enregistrements". En programmation, on parle parfois de "recordset". L’important est
de repérer que cela représente le moyen d’accéder à la base de données.

Un objet ?
Un curseur possède effectivement les caractéristiques d’un objet dans tous les nouveaux
langages. À ce titre, il a des propriétés et des méthodes qui lui sont propres. Dans les
sujets, vous aurez toujours la liste précise des propriétés et méthodes accessibles sur les
curseurs. Dans les langages, vous trouverez toujours la description détaillée des curseurs,
très similaires dans la logique même s’il existe des nuances d’un langage à l’autre.
Dans les anciens langages qui ne touchaient pas encore aux notions d’objets, il était
déjà possible de manipuler des curseurs. En fait, c’est le SQL lui-même qui offre cette
possibilité : on parle alors de langage hôte (par exemple le Cobol) qui permet d’intégrer
des ordres SQL balisés pour que le compilateur comprenne qu’il est en présence de SQL.
Nous n’aborderons pas cet aspect dans ce cours.

Non graphique ?
Un curseur n’est effectivement pas un objet graphique, comme par exemple un bouton.
Séquence 3
La différence ? Il ne possède donc pas d’événements.
Accès aux bases
de données

3. Vie d’un curseur Page 43

Voyons plus concrètement comment fonctionne un curseur à travers un exemple algo-

rithmique.
Imaginons une fenêtre frmProd contenant entre autres un objet graphique lstArticle de
type Liste. Au chargement de la fenêtre, la liste doit se remplir avec les noms et prix des
articles d’au moins 1,30 €. Ces informations doivent être récupérées dans une base de
données contenant entre autres la table ARTICLE vue précédemment.
Comme dans tous les sujets événementiels, vous avez à votre disposition les caractéris-
tiques du pseudo-langage.
Liste des objets graphiques :
objet type rôle
frmProd Feuille fenêtre de l’application
lstArticle Liste liste des articles

Liste des méthodes des objets graphiques :

type d'objet méthode rôle
Liste ajouter(valeur : chaîne) ajoute une valeur à la liste

8 2946 TG PA 00
 Liste des événements pris en charge par les objets graphiques :
type d’objet événement intervient quand…
Fenêtre chargement() la fenêtre se charge

En plus de ces objets graphiques, vous avez à votre disposition un nouveau type d’objet
non graphique : le Curseur.
Un objet de type Curseur peut exécuter une requête SQL pour récupérer des informa-
tions, puis il peut être parcouru dans l’ordre de son contenu (ligne par ligne) jusqu’à ce
qu’il arrive à sa fin. À chaque ligne du curseur lue, il est possible de récupérer des infor-
mations. Voici les propriétés et méthodes dont vous disposez :
Liste des propriétés possibles sur un objet de type Curseur :
propriété type rôle

eof booléen vrai lorsque la fin du curseur est atteinte

Liste des méthodes possibles sur un objet de type Curseur :

méthode rôle
init(sql : chaîne) initialise le curseur avec une requête SQL
ouvrir() ouvre le curseur et se positionne sur la 1re ligne
fermer() ferme le curseur
suivant() passe à la ligne suivante du curseur
Séquence 3
champ(nom : chaîne) : variant récupère le contenu d’un champ du curseur
Accès aux bases
de données Maintenant que nous avons tous les outils nécessaires, voyons étape par étape comment
construire le programme.
Page 44 Sur quel événement doit se remplir la liste ? Au moment du chargement de la fenêtre :

procedure frmProd_chargement()

Il est nécessaire de manipuler un objet de type Curseur qui peut être une variable locale
puisque le curseur va uniquement servir à remplir la liste lstArticle.
procedure frmProd_chargement()
crsProd : Curseur

Comme n’importe quelle variable, le nom du curseur est libre mais, comme d’habitude,
il respecte normalement les règles classiques de nommage des objets.
Dès le début de la procédure, il faut initialiser ce curseur pour récupérer les informations
désirées. Pour cela, on a à notre disposition la méthode init qui permet d’exécuter une
requête SQL sur la base de données concernée.
Vous vous doutez au passage qu’à un moment donné il a fallu préciser la base de don-
nées concernée, mais on ne s’en occupera pas ici.
La méthode init attend donc la requête qui va permettre de récupérer uniquement les
noms et prix des articles d’au moins 1,30 €.
procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")

8 2946 TG PA 00
Cette ligne de code va permettre de créer une sorte de minitable virtuelle (le curseur)
contenant uniquement les informations désirées, donc répondant aux critères de la
requête SQL.
Rappelons le contenu de la table ARTICLE et voyons ce que crsProd est censé contenir :
ARTICLE
idArticle nom prix crsProd
34 Mars 1,50 nom prix
38 Lion 1,30 Mars 1,50
39 KitKat 1,00 Lion 1,30
42 Nuts 1,20 Bounty 1,40
45 Bounty 1,40

Une fois le curseur initialisé, il faut l’ouvrir pour accéder à son contenu :
procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()

Un curseur se parcourt classiquement du début à la fin, en accédant à chaque fois à une

seule ligne d’information.
Séquence 3
D’après le sujet, le fait d’ouvrir le curseur positionne son pointeur de lecture automati-
quement sur la première ligne. Accès aux bases
de données
crsProd
nom prix
Page 45
pointeur de lecture ¨ 1,50
Lion 1,30
Bounty 1,40

Une fois le curseur initialisé et ouvert, il faut le parcourir du début à la fin puisque le but
est de remplir lstArticle avec les informations du curseur. Comment parcourir un curseur
contenant plusieurs lignes d’informations ? Forcément avec une boucle. Quel type de
boucle ? On ne connaît pas le nombre de lignes du curseur à l’avance. Le sujet propose
la propriété eof qui permet de savoir à quel moment la fin du curseur est atteinte. Le
parcours doit donc se faire tant que la fin n’est pas atteinte.
procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
tantque non crsProd.eof

Que se passe-t-il maintenant dans la boucle ? On est positionné sur une ligne du curseur
(lors de l’entrée dans la boucle, c’est la première ligne). Il suffit donc de transférer les
informations récupérées dans la ligne, en particulier le nom de l’article et son prix, pour
les insérer dans la liste. Pour cela, on utilise la méthode "ajouter" sur lstArticle et, en

8 2946 TG PA 00
 paramètre, il faut envoyer le contenu des champs provenant du curseur. La concaténa-
tion avec ":" permet d’avoir un affichage avec le nom de l’article, suivi de ":" puis du
prix.
procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
tantque non crsProd.eof
lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))

Après cela, les informations de la ligne active du curseur sont transférées dans lstArticle
pour obtenir l’affichage suivant :

crsProd
Mars: 1,50
nom prix
Mars 1,50
Lion 1,30
Bounty 1,40

Il ne reste plus qu’à passer à la ligne suivante du curseur :

Séquence 3 procedure frmProd_chargement()

crsProd : curseur
Accès aux bases debut
de données
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
Page 46
tantque non crsProd.eof
lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))
crsProd.suivant()
Le pointeur de lecture va alors avancer dans le curseur :

crsProd
nom prix
Mars 1,50
Lion 1,30
Bounty 1,40

Le fait de fermer la boucle ici va permettre de boucler sur le remplissage de la liste gra-
phique et la lecture du curseur jusqu’à ce que le curseur arrive à la fin. Après la boucle,
il suffit de fermer le curseur.

8 2946 TG PA 00
Voici donc l’algo complet :
procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
tantque non crsProd.eof
lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))
crsProd.suivant()
fintantque
crsProd.fermer()
fin

Continuons les étapes de la trace du programme sur notre exemple. La première ligne
vient d’être affichée dans lstArticle et le pointeur du curseur a avancé d’une ligne. En
tombant sur le fintantque, on remonte automatiquement au tantque :
procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
tantque non crsProd.eof
lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))
crsProd.suivant() Séquence 3
fintantque
crsProd.fermer() Accès aux bases
de données
fin
La fin du curseur n’étant pas atteinte, eof contient faux donc on reste dans la boucle. Page 47
procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
tantque non crsProd.eof
lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))
crsProd.suivant()
fintantque
crsProd.fermer()
fin
Un nouvel ajout va se faire dans lstArticle :

crsProd
Mars: 1,50
nom prix
Lion : 1,30
Mars 1,50
Lion 1,30
Bounty 1,40

8 2946 TG PA 00
 procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
tantque non crsProd.eof
lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))
crsProd.suivant()
fintantque
crsProd.fermer()
fin
Le pointeur de lecture avance dans le curseur :
crsProd
nom prix
Mars 1,50
Lion 1,30
Bounty 1,40

procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
Séquence 3
crsProd.ouvrir()
Accès aux bases tantque non crsProd.eof
de données lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))
crsProd.suivant()
Page 48 fintantque
crsProd.fermer()
fin
La fin du curseur n’étant pas atteinte, eof contient faux donc on reste dans la boucle.
procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
tantque non crsProd.eof
lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))
crsProd.suivant()
fintantque
crsProd.fermer()
fin

8 2946 TG PA 00
Un nouvel ajout va se faire dans lstArticle :

crsProd
Mars: 1,50
nom prix
Lion : 1,30
Mars 1,50 Bounty: 1,40
Lion 1,30
Bounty 1,40

procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
tantque non crsProd.eof
lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))
crsProd.suivant()
fintantque
crsProd.fermer()
fin
Le pointeur de lecture avance dans le curseur :
crsProd
nom prix Séquence 3

Mars 1,50 Accès aux bases

de données
Lion 1,30
Bounty 1,40 Page 49

procedure frmProd_chargement()
crsProd : curseur
debut
crsProd.init("select nom, prix from article where prix>=1,30")
crsProd.ouvrir()
tantque non crsProd.eof
lstArticle.ajouter(crsProd.champ("nom")+":"+crsProd.champ("prix"))
crsProd.suivant()
fintantque
crsProd.fermer()
fin
Cette fois, la fin du curseur a été atteinte (le pointeur est positionné au-delà de la der-
nière ligne). Du coup la propriété eof est passée à vrai et le test de la boucle n’est plus
vérifié. Le programme va alors passer après le fintantque et exécuter la fermeture du
curseur.
Le programme est alors terminé et la liste lstArticle complètement remplie avec les infor-
mations contenues dans le curseur.

8 2946 TG PA 00
 4. Propriétés et méthodes d’un curseur
Comme pour tous les objets manipulés en événementiel, qu’ils soient graphiques ou non,
il n’y a pas de liste de propriétés, méthodes et événements à retenir par cœur. Tous les
éléments nécessaires pour traiter un sujet vous seront donnés dans l’énoncé.
Cependant, pour les objets de type Curseur (ou JeuEnregistrement, ou Recordset, ...),
vous retrouverez de façon assez classique les propriétés et méthodes présentées dans
l’exercice précédent, avec parfois quelques nuances sur les noms.

Les caractéristiques standards

Pour tous les curseurs, il doit être possible :
• d'initialiser le curseur avec une requête SQL ;
• d'ouvrir le curseur ;
• d'avancer le pointeur de lecture dans le curseur ;
• de récupérer un champ de la ligne courante du curseur ;
• de repérer la fin du curseur ;
• de fermer le curseur.

Les autres caractéristiques

Il arrive que d’autres caractéristiques soient proposées, par exemple :
• reculer le pointeur de lecture dans le curseur ;
Séquence 3 • repositionner le pointeur de lecture sur la première ligne ;
• etc.
Accès aux bases
de données Suivant les langages, différentes possibilités sont offertes.

Page 50

5. Exercices récapitulatifs
Ces exercices réutilisent les notions de programmation événementielle en incluant l’utili-
sation de curseurs. Le premier exercice ne demande l’écriture que d’une seule procédure
événementielle mais qui est un peu longue tout en restant simple au niveau de l’utilisa-
tion des curseurs. Le second exercice propose l’écriture de plusieurs procédures événe-
mentielles en incluant à nouveau la notion de tableaux d’objets graphiques. Faites bien
les deux exercices. Ces exercices, tout en abordant la notion de curseur, représentent par
la même occasion une révision de la programmation événementielle qui reste indispen-
sable dans un environnement graphique. En effet, même si ces exercices reprennent le
contexte d’application événementielle classique, la notion de curseur sera aussi mise en
pratique dans le TP qui porte sur une application web. De plus, une application web gère
aussi des objets graphiques et des événements. Il est donc important que vous ayez une
vision des curseurs et des événements dans les deux types d’applications.

8 2946 TG PA 00
Exercice 1
L’action se situe dans une vidéothèque.
Vous allez travailler sur le schéma relationnel suivant :
DVD (n°dvd, titre, durée,n°genre#)
GENRE (n°genre, libellé)
PRET (n°dvd#, date emprunt, date_retour, n°client#)
CLIENT (n°client, nom, adresse, tel)

Remarque : l’attribut date_retour a la valeur NULL si le DVD n’est pas encore revenu.
Il est prévu de générer une application dans un langage graphique événementiel.
On vous a chargé de gérer la fenêtre qui va permettre de faire des recherches sur les
DVD et leur disponibilité.
La fenêtre doit permettre de sélectionner le titre du DVD dans une liste. Il devra être
aussi possible de sélectionner un genre et ainsi d’afficher tous les DVD de ce genre
pour pouvoir enfin sélectionner le DVD recherché.
Une fois un DVD sélectionné, il faut afficher, en plus du titre, sa durée, son genre et
surtout s’il est actuellement en rayon ou en cours d’emprunt.
Les contrôles graphiques qui doivent figurer sur la fenêtre sont les suivants :
Nom de l’objet Type Rôle
frmRecherche feuille Séquence 3
lstTitredvd liste permet de sélectionner un titre de DVD
Accès aux bases
lstGenre liste permet de sélectionner un genre et d’afficher de données
dans la liste des titres uniquement les dvd cor-
respondant au genre sélectionné Page 51
Une fois la liste des titres remplie, le premier élé-
ment est automatiquement sélectionné et les
trois labels du DVD ainsi que la case à cocher
sont mis à jour en fonction du titre sélectionné
cmdAnnul bouton annule la recherche du genre et remplit à nou-
veau la liste des titres de tous les DVD
lblTitre label affiche le titre sélectionné
lblDurée label affiche la durée correspondant au titre sélec-
tionné
lblGenre label affiche le genre correspondant au titre sélectionné
chbEmprunt case à cocher cochée si le dvd est actuellement loué
Lorsqu’un client se présente, il demande si un DVD est disponible : soit il précise le
titre, soit il ne se souvient pas de son titre et précise le genre. Dans ce dernier cas, il
faudra lui citer la liste des DVD de ce genre pour qu’il repère le bon. Une fois le DVD
trouvé, il faudra préciser au client si ce dernier est libre ou non. Le client annonce
alors s’il veut louer le DVD.

8 2946 TG PA 00
 Travail demandé :
Écrire l’algorithme qui s’exécute derrière l’événement clic sur la liste des genres
(attention, respectez bien les actions qui doivent être faites : elles sont décrites en
détail au-dessus : rôle de lstGenre, en gras)

Annexe : éléments du pseudo-langage

Liste des propriétés des objets :
Type d’objet Propriétés Type Signification
liste numSelect num numéro de l’élément sélectionné
(si aucun élément n’est sélectionné,
numSelect est à 0)
nbElement num nombre d’éléments de la liste
element tableau chaque case contient une ligne de
la liste de chaîne
label titre chaîne contenu du label
curseur eof booléen vrai si la fin du curseur a été
atteinte

Séquence 3
case à cocher sélectionné booléen vrai si la case est cochée, faux sinon
Remarque : les indices de liste commencent à 1.
Accès aux bases
de données
Liste des méthodes des objets :
Page 52 Type d’objet Méthodes Rôle
liste ajouter(nom:chaine) ajoute nom en fin de liste (nom est
de type chaîne)
vider() vide complètement la liste
curseur allerPremier() se positionne sur le premier enregis-
trement
allerSuivant() se positionne sur l’enregistrement
suivant
init(requete:chaine) initialise le curseur à partir de
la requete passée en paramètre
(requete est de type chaîne)
champ(nom:chaine):variant contenu du champ nom
ouvrir() ouvre le curseur et se positionne
automatiquement sur la première
ligne
fermer() ferme le curseur

8 2946 TG PA 00
Liste des événements pris en charge par les objets :
Type d’objet Événements Intervient quand…
liste clic l’utilisateur clique sur un élément
de la liste
Vous aurez besoin de créer des objets non graphiques de type curseur. À vous de les
nommer comme vous le désirez mais pensez à les déclarer.
Vous avez à votre disposition les fonctions classiques Val et Str qui permettent res-
pectivement de transformer une chaîne en numérique, et le contraire.

Exercice 2

Vous développez un programme de galeries de photos dont voici l’interface :

Séquence 3

Accès aux bases

de données

Page 53

Vous avez à votre disposition un extrait d’une base de données dont voici les relations :

Image (n°image, nom, n°categorie#)

Categorie (n°categorie, libellé)

Principe :
L’utilisateur choisit une catégorie de photos. Lors de ce choix, les photos de cette
catégorie apparaissent en miniature (les 9 premières photos). Si l’utilisateur utilise
les boutons de navigation (premier, dernier, suivant, précédent) il va se déplacer
au niveau des miniatures de la façon suivante : un clic sur suivant permet de passer
aux 9 miniatures suivantes. Même logique pour précédent. Sur le clic de dernier, les
9 dernières miniatures sont affichées.
Si l’utilisateur clique directement sur une des miniatures, l’image apparaît en grand
dans la zone de droite.
Au chargement du formulaire, le combo cboCategorie est rempli avec toutes les
catégories de la base de données.

8 2946 TG PA 00
 a) Écrire la procédure événementielle qui se fait sur le chargement du formulaire, et
qui remplit le combo avec les libellés des catégories issues de la base de données.
Il faudra aussi penser à remplir, en même temps, la liste cachée du combo, avec les
numéros des catégories (la clé primaire).
b) Écrire la procédure événementielle qui s’exécute lorsque l’utilisateur clique sur une
des miniatures, et qui permet d’afficher l’image en grande taille dans imgGrand.
Attention, la petite image doit être redimensionnée pour s’adapter à la taille de
imgGrand, sachant que imgPetit contient des images carrées de 60 pixels de côté,
et que imgGrand fait 240 pixels de côté. S’il n’y a pas d’image dans la miniature
concernée, la grande image ne doit rien afficher.
c) Écrire la procédure non événementielle affiche9 qui reçoit en paramètre un entier
représentant le rang de la première miniature (par exemple si cette valeur est 10,
la première miniature qui s’affiche en haut à gauche contient la 10e image de cette
catégorie, issue de la base de données). Les miniatures vont alors afficher de la 10e
à la 18e image de cette catégorie.
Il faut donc récupérer dans un premier temps toutes les images issues de la base
de données, et de la catégorie sélectionnée dans le combo. Voici la syntaxe de la
requête SQL (qu’il faudra adapter) :
select nom from Image
where n°categorie = numCategorieDeLaCategorieSelectionnéeDansLeCombo

Ensuite il faut remplir les objets imgPetit avec les bonnes images, à partir du rang
Séquence 3
passé en paramètre. Enfin, la première miniature doit être aussi affichée en grand,
dans imgGrand.
Accès aux bases (Pour ceux qui seraient tentés, l’utilisation de LIMIT du SQL n’est pas autorisée.)
de données S’il n’y a pas assez d’images pour remplir tous les objets imgPetit, il faudra penser
à supprimer les images dans les objets restants.
Page 54
d) Écrire la procédure événementielle qui s’exécute derrière le bouton cmdSuivant.
Vous avez à votre disposition une variable globale numActuel qui contient le rang
de la première miniature actuelle (voir explication du rang dans la question  c).
Vous avez aussi le droit d’utiliser la procédure non événementielle précédente
(affiche9), même si vous n’êtes pas arrivé à l’écrire.

Annexe
Propriétés des types d’objets :
Type d’objet Propriété Type Signification
Curseur eof booléen = vrai si la fin du curseur a été dépassée
Nom de l’image contenue dans l’objet ("" s’il n’y
Image image chaine
a pas d’image)
Combo numSelect entier Numéro de la ligne sélectionnée
nbLigne entier Nombre de lignes contenues dans le combo
tableau
invisible Tableau contenant la liste cachée du combo
d’entier
tableau de
element Tableau contenant la liste du combo
chaine

8 2946 TG PA 00
Méthodes des types d’objets :
Type d’objet Méthode Rôle
Curseur ouvrir() Ouvre le curseur pour accéder à son contenu
init(requete : chaine) Initialise le curseur avec une requête sql
suivant() Avance d’une ligne dans le curseur
precedent() Recule d’une ligne dans le curseur
fermer() Ferme le curseur
champ(nom:chaine):variant Retourne le contenu du champ passé en paramètre
Redimensionne l’image contenue dans l’objet, en
fonction du coefficient multiplicateur passé en
Image scale(coef : entier) paramètre (par exemple, si coef = 2, l’image sera
doublée).
Provoque une erreur si l’objet ne contient pas d’image
Combo ajouter(nom : chaine) Ajoute le paramètre dans la liste visible du combo

Événements sur les types d’objets :

Type d’objet Événement Intervient quand…
Formulaire chargement() Le formulaire s’ouvre

Image clic(index:entier) L’utilisateur clique sur l’image (le

paramètre n’est présent que dans le Séquence 3
cas d’un tableau d’images)
Accès aux bases
Bouton clic() L’utilisateur clique sur le bouton de données

Remarques :
Page 55
• Les indices de listes commencent à 1.
• L’ajout d’éléments dans une liste visible doit obligatoirement se faire avec la
méthode ajouter.
Vous avez à votre disposition les deux fonctions de conversions suivantes :
val(variable:chaine) : entier // retourne un entier à partir d’une chaîne
str(variable:entier) : chaine // retourne une chaîne à partir d’un entier

TP 9 à 11

Quel que soit votre niveau d’avancée dans le fascicule de TP, vous pouvez maintenant
réaliser les TP 9 à 11. En particulier le TP 9 aborde l’accès à une base de données.
Cependant, même si la logique du curseur reste la même, vous verrez des particula-
rités liées au langage PHP.
Vous pouvez aussi continuer à étudier le cours même si vous avez à peine abordé le
fascicule de TP.

8 2946 TG PA 00
 Synthèse

Qu’est-ce qu’une base de données relationnelle ?

Une base de données relationnelle permet de regrouper et de mémoriser de façon
permanente des informations organisées en "tables" issues du modèle relationnel
et interrogeables/modifiables par le langage SQL.
Ces informations sont stockées sur un support permanent (disque dur, DVD, clé
USB…) pour pouvoir être réutilisées plus tard.
Qu’est-ce qu’un curseur ?
Un curseur est un objet non graphique qui permet de lancer une requête SQL d’in-
terrogation vers une base de données et qui récupère et gère le résultat obtenu.
Pour parler de curseurs, on utilise aussi les termes de Recordset ou de Jeu d’enre-
gistrements.
Propriétés et méthodes classiques des curseurs :
Les curseurs possèdent des propriétés et des méthodes. Classiquement, sur un cur-
seur, il doit être au moins possible :
Séquence 3 • d’exécuter une requête SQL pour récupérer son contenu ;
• de l’ouvrir pour accéder à son contenu ;
Accès aux bases
de données
• de le parcourir ligne par ligne ;
• de récupérer l’information contenue dans un champ de la ligne ;
Page 56 • de le fermer.
Les noms des propriétés et des méthodes dépendent du langage utilisé (ou du pseudo-
langage décrit dans un sujet algorithmique).

8 2946 TG PA 00
Séquence 4
Tests et documentation
Cette séquence permet de découvrir le principe des tests unitaires ainsi qu’un outil de
création de documentation technique. C’est aussi l’occasion de voir qu’il y a d’autres
aspects à prendre en compte que la production de code dans le développement d’une
application.

X Prérequis
Avoir acquis les connaissances abordées dans les séquences 1 et 2.

X Capacités attendues en fin de séquence

Avoir compris l’importance des tests ainsi que leurs règles fondamentales.
Savoir générer une documentation technique à partir d’un outil spécialisé.

X Contenu
1. Tests unitaires ................................................................................................. 58
2. Documentation ............................................................................................... 65 Séquence 4

Tests et
documentation
Synthèse ......................................................................... 71
Page 57

8 2946 TG PA 00
 1. Tests unitaires
Vous avez plusieurs fois eu l’occasion de voir l’importance des tests dans le développe-
ment.
Il existe différents types de tests et des méthodes pour les gérer correctement. Il existe
même des outils pour intégrer des tests dans un développement.
Les tests unitaires sont de plus en plus utilisés. Nous allons voir globalement leur prin-
cipe et leur fonctionnement. Cependant, ce type de tests pourra être vraiment mis en
pratique quand vous aborderez la programmation objet et la création de vos propres
classes. Ce sera le cas dans le module de programmation objet pour les étudiants de
l’option SLAM.

Principe
Un test unitaire est un procédé qui permet de contrôler le bon fonctionnement d’une
unité de programme en s’assurant, par rapport à des valeurs de départ, que le résultat
attendu est le bon.
Le but est d’isoler une unité, généralement un module, et de le tester indépendamment
du reste.
La couverture de code doit aussi être respectée : cela signifie que le test doit tester tout
le code de l’unité. Dit autrement, s’il y a des conditions dans l’unité, tous les cas de condi-
tions doivent être testés.
Séquence 4
En cas de problème et après correction, les tests doivent être à nouveau réalisés pour
Tests et contrôler qu’il n’y a pas de régressions (de nouveaux problèmes qui apparaissent).
documentation
Un test unitaire se présente sous forme de code : c’est donc un code qui est fait pour
Page 58 tester un autre code !
La méthode "Extreme programming" (XP) préconise la préparation de tests unitaires
en même temps, voire avant l’écriture du module concerné. Un peu comme le principe
d’écrire un commentaire avant même d’écrire le code, cela permet de définir précisé-
ment ce que l’on attend du module et les erreurs à ne pas faire.

Exemple
Voyons un exemple pour que la notion soit plus concrète.
Voici la fonction qui permet de convertir un nombre entier en binaire. Le principe est
basé sur les divisions successives par 2 et la récupération des restes. Les restes concaténés
à l’envers permettent d’obtenir la conversion en binaire :

fonction convertEntBin(unEntier : entier) : chaîne

binaire : chaîne
debut
binaire Å ""
tantque unEntier <> 0
binaire Å str(unEntier mod 2) + binaire
unEntier Å unEntier div 2
fintantque
retourner binaire
fin

8 2946 TG PA 00
Vous avez normalement abordé cette fonction dans le module 2940 "Algorithmique
appliquée". Si vous ne vous rappelez plus le fonctionnement, prenez le temps de faire
une trace pour bien comprendre le principe.
Pour tester cette fonction, vous avez à votre disposition la classe suivante (extrait) :
classe Assert
public à portée de classe :
// affiche le message d’erreur si la proposition est fausse
// ou rien si la proposition est vraie
estVrai(proposition : booléen, messageErreur : chaîne)

Rappel : une méthode à portée de classe (statique) est une méthode qui s’appelle non
pas en passant par un objet mais directement par le nom de la classe. Vous avez eu l’oc-
casion de le découvrir dans le module 2944 "Base de la programmation".
Imaginons maintenant la séquence suivante pour tester la fonction convertEntBin :
...
Assert.estVrai(convertEntBin(9) = "1001", "erreur pour 9")
...

Cet extrait n’affiche rien donc tout s’est bien passé. Effectivement, l’appel de la méthode
avec 9 en paramètre retourne la chaîne "1001". Vous pouvez faire la trace pour vous en
convaincre.
Maintenant, voici une autre séquence pour réaliser un nouveau test :
Séquence 4
...
Assert.estVrai(convertEntBin(0) = "0", "erreur pour 0") Tests et
... documentation

Cette fois on obtient "erreur pour 0". Pourquoi ? En analysant correctement le code de
Page 59
la fonction, on s’aperçoit que si au départ le paramètre contient 0, la variable binaire est
initialisée à "" et reste avec cette valeur car la boucle n’est pas effectuée.
On propose la correction suivante :
fonction convertEntBin(unEntier : entier) : chaîne
binaire : chaîne
debut
binaire Å "0"
tantque unEntier <> 0
binaire Å str(unEntier mod 2) + binaire
unEntier Å unEntier div 2
fintantque
retourner binaire
fin
La variable binaire est cette fois initialisée à "0".
On relance le test :
...
Assert.estVrai(convertEntBin(0) = "0", "erreur pour 0")
...

8 2946 TG PA 00
 Cette fois aucun message. C’est parfait ! Mais relançons le premier test :
...
Assert.estVrai(convertEntBin(9) = "1001", "erreur pour 9")
...

Cette fois on obtient le message "erreur pour 9". Si on fait la trace de la fonction avec la
valeur 9, en réalité on obtient "10010". Ce n’est pas correct. Donc la correction proposée
n’est pas bonne. Cela suppose que le 0 est vraiment un cas particulier qu’il faut traiter
comme tel en faisant un test. Voici la nouvelle proposition :

fonction convertEntBin(unEntier : entier) : chaîne

binaire : chaîne
debut
si unEntier = 0 alors
retourner "0"
sinon
binaire Å ""
tantque unEntier <> 0
binaire Å str(unEntier mod 2) + binaire
unEntier Å unEntier div 2
fintantque
retourner binaire
finsi
fin
Séquence 4

Tests et Cette fois, les 2 tests n’afficheront rien.

documentation
Bilan
Page 60 À travers cet exemple, on réalise bien l’importance de 2 notions mentionnées plus haut :
• la couverture de code : ce n’est pas parce qu’un test fonctionne que tout fonc-
tionne. Il faut donc penser à tous les cas particuliers. Dans le cas de la fonction prise
en exemple, le cas particulier était 0 puisque la boucle teste le paramètre avec 0.
Donc les cas particuliers sont dictés par les tests compris dans le module ;
• le contrôle de non-régression : une fois l’erreur corrigée, il faut relancer tous les
tests pour contrôler que la correction n’a pas engendré d’autres erreurs.

Utilisation d’un outil

Il existe de nombreux frameworks de tests unitaires, chacun étant dédié à un langage. Ils
sont généralement nommés xUnit (PHPUnit, JUnit...) et sont parfois intégrés dans les IDE.
Ces outils sont utilisables dans le cadre d’un développement objet : vous les aborderez
dans le module de programmation objet.

Exercice 1

Voici la définition de la factorielle :

factorielle de n, entier naturel (noté n!) est le produit de tous les entiers de 1 à n. Par
convention, factorielle de 0 donne 1.

8 2946 TG PA 00
Vous avez écrit le module suivant qui est censé retourner la factorielle d’un entier :
fonction fact (n : entier) : entier
result : entier
debut
si n = 0 alors
retourner n
sinon
result Å 1
pour k de 2 à n
result Å result * n
finpour
retourner result
fin

a) En utilisant la classe Assert donnée plus haut, dites tous les tests qui vous semblent
nécessaires pour une couverture de code correcte (ne donnez pas les résultats des
tests).
b) Faites le test avec n = 2 puis avec n = 3 et dites ce que vous pensez de ces résultats
et le problème que cela soulève.
c) Apportez les corrections nécessaires et faites un contrôle de non-régression.

Séquence 4

Exercice 2 Tests et
documentation

Extrait du sujet officiel Synapse (2007)

Page 61
Afin de gérer au mieux les affectations de ses différents collaborateurs informati-
ciens ainsi que le coût et la rentabilité des différents projets, SynapsInfo a commencé
à développer un logiciel en interne.
Un projet est constitué de plusieurs missions. Chaque projet a un coût de main-d’œuvre
facturé. Une mission est prise en charge par un intervenant de SynapsInfo. Pour chaque
mission, l’intervenant concerné remplit un relevé horaire (exemple en annexe 2) dans
lequel il précise, pour chaque jour, le nombre d’heures effectuées pour la mission.
Le développeur responsable de la classe Mission (annexe 1) a écrit des tests unitaires de
différentes méthodes. Ces tests ont pour but de vérifier que les méthodes se comportent
comme prévu. Pour cela le développeur utilise une classe dédiée aux tests, la classe Assert.
Un test unitaire est considéré comme conforme si durant son exécution aucune assertion
(affirmation) n'est violée. L'annexe 3 décrit plus précisément l'utilisation de la classe Assert.
Le développeur envisage de tester la méthode ajoutRelevé() de la classe Mission.
Cette méthode ajoute une date et un nombre d’heures au relevé ; une vérification
est effectuée afin de ne pas enregistrer plus de 8 heures pour une date.

8 2946 TG PA 00
 Voici le code actuel de cette méthode :
Procédure ajoutRelevé(jour : Date, nbHeures : entier)
Début
si nbHeures <= 8 alors
relevéHoraire.ajouter(jour, nbHeures)
sinon
relevéHoraire.ajouter(jour, 8)
finsi
Fin

Pour tester que la méthode ajoute correctement une date et un nombre d’heures, le
développeur a écrit un programme dont voici un extrait significatif :
...
laMission : Mission
laDate1, laDate2 : Date
nbHeures : entier
laMission Å new Mission(...) // instanciation d’une mission
laDate1 Å new Date(4, “avril”,2007)
laMission.ajoutRelevé(laDate1,5)
nbHeures ÅlaMission.getRelevéHoraire().donnerValeur(laDate1)

Assert.estVrai(nbHeures = 5,“résultat non conforme”)

Séquence 4
laDate2 Å new Date(6, “avril”,2007)
Tests et laMission.ajoutRelevé(laDate2,9)
documentation
nbHeures ÅlaMission.getRelevéHoraire().donnerValeur(laDate2)

Page 62
Assert.estVrai(nbHeures = 8,“résultat non conforme”)

Le résultat des deux tests est satisfaisant (pas de message affiché).

Le développeur poursuit les tests car les spécifications de la méthode ajoutRelevé pré-
cisent que dans le cas où deux relevés portent sur la même date, les heures doivent
être cumulées, sans toutefois dépasser 8 heures. L’extrait du programme est le suivant :
…
laMission : Mission
laDate: Date
nbHeures : entier
laMission Å new Mission(...) // instanciation d’une mission
laDate Å new Date(4, “avril”, 2007)
laMission.ajoutRelevé(laDate,6)
laMission.ajoutRelevé(laDate,5) // ajout d’un relevé pour la même date
nbHeures ÅlaMission.getRelevéHoraire().donnerValeur(laDate)

Assert.estVrai(nbHeures = 8, “résultat non conforme”)

Le résultat du test, cette fois, n’est pas satisfaisant (affichage du message “résultat
non conforme”).
Travail à réaliser :
1. Expliquer la cause de l’échec du test unitaire.
2. Réécrire le corps de la méthode ajoutRelevé() afin de corriger l’erreur.

8 2946 TG PA 00
Annexe 1 : classe Mission et classe Dictionnaire

Classe Mission
privé :
nom : chaîne
description : chaîne
nbHeuresPrévues : entier
// nombre d’heures prévues pour réaliser la mission
relevéHoraire : Dictionnaire de (Date,entier)
// nombre d’heures passées par jour par la personne chargée d’exécuter
// cette mission
exécutant : Intervenant
// personne chargée d’exécuter la mission
public :
Fonction getRelevéHoraire() : Dictionnaire de (Date, entier)
// accesseur sur l’attribut relevéHoraire
Fonction getExécutant() : Intervenant
// accesseur sur l’attribut exécutant
Procédure ajoutRelevé(jour : Date, nbHeures : entier)
// ajoute au relevé, une date et un nombre d’heures
Fonction nbHeuresEffectuées() : entier
// retourne le nombre d’heures réellement effectuées du relevé horaire
Séquence 4
finClasse
Tests et
documentation

Classe Dictionnaire de (typeClé,typeValeur) Page 63

// collection d’éléments (clé, valeur) permettant d’extraire une
// valeur (de type typeValeur) à partir de sa clé (de type typeCle) ;
// à une clé présente dans le dictionnaire correspond une et une
// seule valeur
Public :
procédure ajouter(clé : typeClé, valeur : typeValeur)
// ajoute un élément (clé, valeur) dont le premier paramètre est la
// clé et le second paramètre la valeur. Remplace la valeur de
// l’élément si cette clé est déjà présente.
fonction donnerValeur(clé : typeClé) : typeValeur
// accède à la valeur dont la clé est passée en paramètre.
fonction donnerToutesLesClés() : Collection de typeClé
// retourne une collection contenant toutes les clés du dictionnaire.
procédure retirer(clé : typeClé)
// retire du dictionnaire un élément dont la clé est fournie en
// paramètre ne fait rien si cette clé n’est pas présente
fonction existe(clé : typeClé) : booléen
// retourne vrai si l’élément dont la clé est passée en paramètre est
// présent dans le dictionnaire
Fin classe

8 2946 TG PA 00
 Annexe 2 : Exemple de relevé horaire

COMPTE-RENDU DE MISSION : "Client"

Periode : 4 JUIN 2006 AU 23 JUIN 2006

Nom du client : Karavel

Intitulé du projet : Ulysse
Tâche : conception vecteur
Mission : x22
04/06/06
05/06/06
06/06/06
07/06/06
08/06/06
09/06/06
10/06/06
11/06/06
12/06/06
13/06/06
14/06/06
15/06/06
16/06/06
17/06/06
18/06/06
19/06/06
20/06/06
21/06/06
22/06/06
23/06/06
Jours

Heures 8 4 8 4 4 8 8 8 8 8 8 8 8 8

Annexe 3 : Classe de test

La classe technique Assert dispose d’une méthode à portée classe (statique) permet-
tant de vérifier si une affirmation est ou non respectée : si oui, rien ne se passe, sinon,
le message d’erreur passé en paramètre est affiché.
Séquence 4
Classe Assert
Tests et public :
documentation Procédure estVrai(uneExprLogique : booléen, unMsgErr : chaîne)
// affiche le message unMsgErr lorsque l’expression uneExprLogique
Page 64 // n’est pas vraie.
Fin Classe

Exemple d’utilisation de la classe Assert :

Assert.estVrai (8*9 = 72, “résultat non conforme”)
// n’affiche rien puisque 8*9 est bien égal à 72
Assert.estVrai (9*9 = 83, “résultat non conforme”)
// affiche le message puisque 9*9 = 83 est une affirmation fausse
Assert.estVrai( 7*8 <> 64, “résultat non conforme”)
// n’affiche rien puisque 7*8 est différent de 64

8 2946 TG PA 00
2. Documentation

Principe d’une documentation

Dans le cadre du TP associé à ce cours, vous avez été invité à utiliser la documentation
du PHP.
Si vous ne l’avez pas encore utilisé, ouvrez ce fichier pour voir son contenu : faites une
recherche sur internet du fichier "php_manual_fr.chm", récupérez le fichier et ouvrez-le.
Vous obtenez une aide du langage PHP et, si vous allez dans l’onglet index, vous avez le
détail de tous les outils dans l’ordre alphabétique.
Faites par exemple une recherche sur la fonction substr. À droite, vous obtenez avant
tout le nom de la fonction, ce qu’elle fait en une ligne, sa description (signature), la liste
de ses paramètres, la valeur de retour et des exemples.
Chaque outil est présenté sur le même modèle.

Importance d’une documentation

Ce genre de documentation n’est pas réservé aux langages.
Lors de la création d’une nouvelle application, il faut aussi penser à ce genre de docu-
mentation qui va permettre de recenser tous les modules et de les présenter clairement.
Ce genre de documentation est d’autant plus important dans le cadre de la program-
mation objet pour décrire les classes et leur contenu. Pourquoi est-ce encore plus impor-
Séquence 4
tant  ? Car une classe a généralement vocation à être réutilisée, donc sa présentation
dans une documentation est primordiale. Tests et
documentation
De plus, une documentation technique va permettre à d’autres programmeurs de pou-
voir intervenir plus facilement sur une application déjà écrite.
Page 65

Normes de présentation des documentations

Pendant des années, chaque développeur créait ses propres documentations un peu
comme il le voulait. Cela aboutissait à une cacophonie générale et, au final, la lecture
d’une documentation était parfois aussi obscure que la lecture du code lui-même.
Voilà pourquoi des normes sont apparues et les outils qui vont avec. Le but est de faire en
sorte que les documentations aient un format similaire pour mieux s’y retrouver.

Outils de création de documentations

Dans cet esprit, il existe de plus en plus d’outils qui permettent de générer automatique-
ment des documentations techniques à partir du code.
Principe
Comment cela fonctionne-t-il ? L’outil va tout simplement parser (lire) le code et repérer
ce qui est repérable :
• les en-têtes de classes ;
• les en-têtes de modules (dans une classe ou à l’extérieur) ;
• les commentaires normalisés.
Il va ainsi récupérer les informations et les réunir dans un unique document, qui peut
être présenté sous différents formats, suivant l’outil utilisé (pages HTML, PDF...).

8 2946 TG PA 00
 Normalisation des commentaires
Que signifie un "commentaire normalisé" ?
Dans tous les langages "C like" (ressemblant au C, donc basés sur la syntaxe du lan-
gage C), les commentaires normalisés se présentent sous cette forme :
/**
* but du module
* @param typeParametre nomParametre rôle du paramètre
* @param typeParametre nomParametre rôle du paramètre
* ...
* @return typeRetourné
*/
function machin(...) {
...
}

Avant chaque module, il faut un cartouche précis présentant les informations dans
l’ordre indiqué ci-dessus et sans oublier le "@" devant "param" et "return".
Il existe d’autres tags que @param et @return mais pour le moment nous n’allons utiliser
que ceux-là.

Présentation d’un outil : PhpDocumentor

À partir de la normalisation des commentaires, il n’est pas difficile d’imaginer que des
Séquence 4 outils ont été créés pour générer automatiquement des documentations techniques. Ces
outils existent dans plusieurs grands langages.
Tests et
documentation Un des plus connus est la Javadoc qui est associée au langage Java.
Puisque dans ce module vous avez codé en PHP, voyons rapidement un outil associé au
Page 66
langage PHP : phpDocumentor.
Récupérez phpDocumentor : allez sur le site officiel http://www.phpdoc.org/ et récupé-
rez la dernière version ou celle utilisée au moment de la création de ce cours :
PhpDocumentor-1.4.3.zip
Une fois le fichier récupéré, dézippez-le et copiez le dossier dans votre dossier www de
wamp.
Exemple d’utilisation de l’outil
Le but va être de générer une documentation sur les fonctions PHP qui ont été écrites
dans le TP.
Allez dans la version finale, dossier PHP. Vous avez écrit du PHP dans toutes les pages,
mais ce ne sont pas des fonctions. Les seules fonctions PHP sont écrites dans ce dossier.
Dans la version finale, les commentaires ont été normalisés. Jusque-là, nous n’avions pas
appris à normaliser les commentaires, mais juste à les gérer le plus proprement possible
en gardant toujours la même présentation.

8 2946 TG PA 00
Ouvrez le fichier chaines.php et observez le code :
/**
* Affichage d’espaces
* @param int $nbEspaces nombre d’espaces à afficher
*/
function espace($nbEspaces=1) {
for ($k=0 ; $k<$nbEspaces ; $k++) {
echo "&nbsp;" ;
}
}

Ce premier module permet d’afficher un nombre d’espaces correspondant à la valeur

passée en paramètre. Il n’y a qu’un paramètre en entrée et rien n’est retourné puisque
l’affichage se fait directement dans le module.
Remarquez bien le formalisme à respecter : pour ce type de commentaires, vous ne pou-
vez pas utiliser // mais obligatoirement /* et */.
/**
* Enlève un caractère sur 2 dans une chaîne
* @param string $texte texte à modifier
* @return string
*/
function enleveUnSurDeux ($texte) {
$result = "" ; Séquence 4
$longueur = strlen($texte)-2 ;
for ($k=0; $k<$longueur; $k+=2) { Tests et
documentation
$result .= substr($texte, $k, 1) ;
}
Page 67
return $result ;
}

Ce second module permet d’enlever un caractère sur deux dans une chaîne. Il y a un
paramètre en entrée et une information retournée.
Ouvrez le fichier outils.php.
/**
* Création d’une case de tableau
* @param string $nom id de la case
* @param string $titre nom de l’attribut
* @param string $contenu contenu de l’attribut
* @param int $taille longueur de la zone de saisie
* @param bool $obligatoire ajout de * si obligatoire
* @param bool password zone de type mot de passe
* @return string
*/
function uneCase($nom, $titre, $contenu, $taille,
$obligatoire=false, $password=false) {
$case = '<tr>' ;
$case .= '<td class="td1p">'.$titre ;
if ($obligatoire) {
$case .= '*' ;
}

8 2946 TG PA 00
 $case .= ' :</td>' ;
$case .= '<td class="td2p">' ;
$case .= '<input id="'.$nom.'"' ;
if ($password) {
$case .= ' type="password"' ;
}else{
$case .= ' type="text"' ;
}
$case .= ' maxlength="'.$taille.'" size="'.$taille.'"
class="petitTexte" value="'.$contenu.'" /></td>' ;
$case .= '</tr>' ;
return $case ;
}

Cette fois, vous remarquez plusieurs paramètres.

Vous pouvez fermer les fichiers.
Dans le dossier "version finale", créez un dossier "doc". C’est dans ce dossier que sera
générée la doc du programme.
En passant par le navigateur et localhost, allez dans le dossier phpDocumentor. Le logi-
ciel est bien sûr écrit en PHP. Vous devriez obtenir l’écran suivant :

Séquence 4

Tests et
documentation

Page 68

Vous remarquez différents onglets qui vont permettre de paramétrer la création de la doc.
Allez dans l’onglet Files. Vous pouvez donner une liste de fichiers à traiter (première
zone) ou directement de dossiers à traiter (seconde zone). Dans la seconde zone
(Directory to parse), mettez le chemin complet du dossier PHP de la version finale. Cela
devrait être normalement :

8 2946 TG PA 00
C:\wamp\www\maBoutiquePerso\versions\version finale\php
Puis allez dans l’onglet Output. Dans la partie Target, vous devez préciser le chemin du
dossier où la doc doit être générée. Donnez le chemin du dossier doc que vous avez créé
dans la version finale. Cela devrait être normalement :
C:\wamp\www\maBoutiquePerso\versions\version finale\doc
Il est possible aussi de sélectionner le type de présentation dans le combo “output type”.
Il ne reste plus qu’à cliquer sur le bouton “create” qui se trouve en bas à droite.
Remarquez qu’il se passe des choses dans la zone grise du bas de la fenêtre. En fin de
création, vous trouverez plusieurs fichiers et dossiers qui se sont créés dans le dossier doc
de la version finale.
En passant par le navigateur, utilisez localhost pour aller à la version finale et dans l’URL,
ajoutez /doc :
http://localhost/maBoutiquePerso/versions/version%20finale/doc/
Vous devriez obtenir la page suivante :

Séquence 4

Tests et
documentation

Page 69

Vous remarquez à gauche la liste des fichiers qui se trouvent dans le dossier PHP.
Cliquez sur “chaines.php”. Cette fois vers le bas de la page vous retrouvez les deux fonc-
tions avec :
• le nom de la fonction (à gauche) ;
• la signature (juste en dessous) ;
• le rôle (centré) ;
• la liste des paramètres avec le type, le nom et le rôle.

8 2946 TG PA 00
 Faites un tour sur les autres liens. Vous pourrez voir par exemple dans “outils.php” la liste
des paramètres de la fonction. Remarquez que les paramètres initialisés sont mis entre
crochets pour signaler qu’ils sont optionnels.
Optimisé pour la programmation objet
Ce type de génération automatique est bien sûr optimisé pour la programmation objet,
où les classes seront bien repérées, avec la liste des membres et leurs portées, ainsi que
le détail des signatures et rôles des méthodes.
Vous aurez l’occasion de réutiliser ce type d’outil en Java en programmation objet.

Exercice 3

Voici un module :
fonction min (val1 : réel, val2 : réel) : réel
debut
si val1 < val2 alors
retourner val1
sinon
retourner val2
finsi
fin
Écrire le commentaire normalisé qui correspond à ce module.
Séquence 4

Tests et
documentation

Page 70

8 2946 TG PA 00
 Synthèse

Test unitaire
Un test unitaire est un procédé qui permet de contrôler le bon fonctionnement
d’une unité de programme en s’assurant, par rapport à des valeurs de départ, que
le résultat attendu est le bon.
L’utilisation de tests unitaires doit respecter deux règles :
• la couverture de code : toutes les parties du code doivent être testées ;
• le contrôle de non-régression : après chaque modification, tous les tests doi-
vent être relancés.
Il existe des frameworks pour gérer des tests unitaires. On les appelle les xUnit :
JUnit pour le langage Java, PHPUnit pour le langage PHP...
Ces frameworks fonctionnent dans un environnement objet.
Documentation
Une documentation technique est fondamentale pour accompagner une applica-
tion.
Il existe des normes de documentations et des outils qui génèrent automatiquement
ces documentations (JavaDoc pour le langage Java, PHPdocumentor pour le langage Séquence 4
PHP...).
Tests et
Pour qu’un tel outil fonctionne, il faut que le code suive des règles de présentation documentation
précises. Chaque classe, méthode, module doit être précédé d’un cartouche norma-
lisé comportant des tags précis. Voici un exemple de présentation d’un cartouche : Page 71
/**
* but du module
* @param typeParametre nomParametre rôle du paramètre
* @param typeParametre nomParametre rôle du paramètre
* ...
* @return typeRetourné
*/
function machin(...) {
...
}

8 2946 TG PA 00
Séquence 5
Back office et RAD
Cette séquence aborde la notion de back office qui permet de gérer un site, ainsi que
la sécurité liée à ce type de gestion. Les techniques de création d’un back office seront
aussi abordées avec une démonstration en utilisant un outil de génération automatique
de code. Cette séquence ne comporte pas d’exercices mais des manipulations à réaliser.

X Prérequis
Avoir acquis les connaissances abordées dans les séquences 1 et 2 : notions de
développement d’applications et création d’une application web.

X Capacités attendues en fin de séquence

Savoir ce qu’est un back office, son importance et les techniques pour le créer.

X Contenu
1. Qu’est-ce qu’un back office ? ........................................................................ 74
2. Fonctionnalités du back office....................................................................... 74
3. Sécurité du back office ................................................................................... 75 Séquence 5

4. Utilisation d’un RAD ....................................................................................... 77 Back office et RAD

Page 73
Synthèse ......................................................................... 81

8 2946 TG PA 00
 1. Qu’est-ce qu’un back office ?
Lorsque vous créez un site, vous pensez en priorité aux internautes qui vont l'utiliser.
Mais dans le cadre d’un site dynamique, il faut aussi penser à celui ou ceux qui vont
devoir s’occuper de la gestion du site.
Dans un site dynamique, voici les travaux qui risquent d’être nécessaires pour que le site
côté internautes (le front office) fonctionne correctement :
• actualiser les informations variables qui s’affichent (par exemple, informations sur
les articles) ;
• modérer les informations provenant des internautes (forum, livre d’or…) ;
• récupérer des bilans, statistiques et tout autre type de regroupement d’informa-
tions provenant des données récupérées ;
• valider les inscriptions des internautes ;
• etc.
Qui doit réaliser ces travaux ?
La ou les personnes désignées pour gérer le site. Ces personnes ne sont pas forcément
des informaticiens. Ce qui signifie qu’il faut prévoir des moyens pour leur faciliter ces
travaux de maintenance.
Comment faciliter cette gestion ?
La solution la plus couramment utilisée est la création d’un "back office". En opposition au
"front office" qui représente le site accessible aux internautes, le "back office" est aussi un
Séquence 5
site contenant des pages uniquement accessibles au ou aux responsable(s) du site.
Back office et RAD

Page 74
2. Fonctionnalités du back office

Aspect du back office

Un back office se construit de la même façon qu’un site classique, à quelques exceptions
près :
• l’aspect visuel est généralement nettement moins travaillé, plus épuré ;
• la priorité est donnée à la facilité et à la rapidité de manipulation (même si ce point
est aussi vrai pour un "front office", mais pas tout à fait dans le même esprit) ;
• il n’y a pas d’intégration de publicité.

Fonctionnalités
Le back office doit offrir les fonctionnalités suivantes :
• ajout/modification/suppression de toutes les données variables manipulées dans le
site (base de données, fichiers XML, autres fichiers comme les images…) ;
• validation/modération d’informations provenant des internautes ;
• obtention d’informations provenant de bilans, statistiques… ;
• diverses recherches.
En résumé, le back office, au-delà de la gestion des données, doit offrir toutes les fonc-
tionnalités attendues par les responsables du site et leur permettant de leur faciliter la vie.

8 2946 TG PA 00
Cela suppose que, lors de la création d’un site, il faut poser toutes les questions néces-
saires aux futurs responsables du site, pour savoir ce qu’ils attendent du back office.

3. Sécurité du back office

Comment accéder au back office ?

Il existe plusieurs méthodes pour mettre à disposition un back office :
• intégrer un lien dans le front office (déconseillé car les internautes ne comprennent
pas la présence de ce lien, sauf si le lien n’apparaît qu’après identification et uni-
quement pour les personnes concernées) ;
• mettre le back office dans un dossier spécifique (très souvent nommé "admin") du
site, ce qui fait qu’on y accède avec la même adresse, mais juste en ajoutant /admin ;
• mettre le back office à une adresse différente (cette solution est plus rare).

Comment sécuriser son accès ?

Le back office ne doit être accessible qu'aux personnes autorisées. Comment gérer cette
limitation d’accès ? Voici différentes solutions :
• demander la saisie d’un login et d'un mot de passe et ne diriger vers la page princi-
pale du back office que si les informations sont correctes, sans pour autant sécuriser
la page : cette solution n’est pas du tout fiable car on peut contourner la saisie en
tapant directement dans l’URL l’adresse du back office ;
Séquence 5
• utiliser une protection du dossier du back office avec le fichier .htaccess. C’est la
solution la plus courante. Back office et RAD

Comment fonctionne la protection avec .htaccess ? Page 75

Vous avez plusieurs étapes à suivre pour créer les deux fichiers nécessaires à la protection
du dossier et à son accès sécurisé.
Création du fichier .htaccess :
Dans le dossier du site, version finale, créez un dossier admin. Ce dossier va contenir les
pages du back office. Pour sécuriser l’accès à ce dossier, on va utiliser un fichier htaccess.
Ce type de fichier permet de paramétrer plein de choses, et entre autres de limiter l’accès
à un dossier. Dans le dossier admin, créez un fichier que vous appellerez dans un premier
temps "htaccess.txt". Dans ce fichier, vous allez intégrer les commandes suivantes :
AuthUserFile "C:/wamp/www/maBoutiquePerso/versions/version
finale/admin/.htpasswd"
AuthGroupFile /dev/null
AuthName "Acces Restreint"
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>
Explications :
La première ligne précise où se trouve le fichier qui va contenir le mot de passe pour
l’accès sécurisé au dossier.
La deuxième ligne précise le fichier contenant la liste des utilisateurs : dans notre cas il
n’y en a pas.

8 2946 TG PA 00
 La troisième ligne restreint l’accès au dossier, du coup une authentification va être
demandée.
La quatrième ligne précise qu’il faut utiliser AuthUserFile pour l’authentification.
Enfin la balise précise pour quel(s) type(s) de méthode(s) la restriction s’applique (GET
et/ou POST).
Attention : dans la première ligne, le chemin doit être le chemin absolu. En local, c’est
le chemin complet. Quand le site est en ligne, le seul moyen d’avoir le chemin absolu est
de placer sur la page d’entrée dans votre site un :
echo realpath ("admin/index.php") ;
(en supposant que dans le dossier admin, votre page principale s’appelle index.php).
La fonction PHP realpath donne le chemin réel de la page passée en paramètre. Vous
verrez, vous obtenez parfois des chemins très exotiques, qui sont spécifiques à votre
hébergeur.
Une fois le fichier htaccess.txt terminé, sauvez-le, fermez-le et renommez-le en ".htac-
cess" (n’oubliez pas le "." devant).
Fichier .htpasswd
Il va falloir un fichier .htpasswd qui contiendra le login et le mot de passe de l’adminis-
trateur. Ce fichier est créé automatiquement car le mot de passe va être crypté. Voici
la procédure pour créer ce fichier : ouvrez une fenêtre dos (d’invite de commande) et
allez dans le dossier C:\wamp\bin\apache\apache2.2.11\bin (ou dossier équivalent suivant
Séquence 5
votre version d’Apache). Dans ce dossier se trouve le fichier htpasswd.exe qui va per-
mettre de générer le fichier qui nous intéresse. Tapez la commande :
Back office et RAD htpasswd -c "c:/wamp/www/maBoutiquePerso/admin/.htpasswd" Emds
Attention : remplacez Emds par le login que vous voulez donner à l’administrateur.
Page 76
Vérifiez aussi que le chemin est bien correct.
Validez cette commande : on va vous demander de saisir deux fois le mot de passe. Ce
mot de passe est alors crypté et l’utilisateur est créé dans le fichier .htpasswd. Par curio-
sité, allez voir le contenu du fichier .htpasswd. Vous allez y trouver votre login, suivi de
":" et d’une suite de caractères qui représentent votre mot de passe en crypté.
Page d’admin

Dans le dossier admin, créez la page index.php. Pour tester, mettez dedans l’affichage
d’un message (c’est juste pour voir si ça marche). Testez en lançant le site par Wamp et
en ajoutant à la fin de l’URL "/admin", puis en validant. Vous devriez obtenir une fenêtre

8 2946 TG PA 00
d’authentification qui demande un login et un mot de passe. Faites la saisie demandée
et cliquez sur OK : vous devriez alors obtenir la page index que vous venez de créer.

4. Utilisation d’un RAD

Méthodes pour ajouter du code

Il est parfois nécessaire d’apporter des fonctionnalités supplémentaires, voire de créer
une nouvelle application. Par exemple, dans le cas d’un site, il est nécessaire de penser
à la création du back office qui ne sera accessible qu’à un nombre limité de personnes
et qui permettra de gérer les informations contenues dans la base de données. Cette
gestion pourrait se faire directement dans phpMyAdmin mais, pour des utilisateurs non
initiés, il est souvent préférable de créer un outil plus adapté.
Pour la création de fonctionnalités complémentaires, ou d’une application complète
(comme un back office), il est possible de :
• soit créer le code dans l’esprit du code existant, éventuellement en améliorant sen-
siblement la méthode si celle-ci manque vraiment de rigueur : cette solution est la
meilleure car vous restez dans l’esprit global de l’application (ce qui la rendra plus
cohérente et plus facile à faire évoluer) et tout le code ajouté est de vous, donc il
n’y a pas de code parasite ;
• soit créer le code en s’appuyant sur une autre méthode qui vous paraît la meilleure,
même si elle est radicalement différente de la méthode employée pour le reste de
Séquence 5
l’application : dans cette solution, il n’y a pas de code parasite et le code que vous
allez écrire est peut-être nettement plus propre et structuré que le code existant, Back office et RAD
mais les mélanges de méthodes rendent l’ensemble incohérent. Cette solution peut
être adoptée quand les ajouts sont totalement indépendants du reste ou suffisam- Page 77
ment volumineux pour justifier le choix d’une méthode plus adaptée ;
• soit utiliser un RAD pour générer le nouveau code : cette solution est la plus rapide.
Cependant, le code obtenu non seulement ne correspond pas du tout à la méthode
utilisée pour le reste du code, mais en plus n’est pas de vous, donc contient forcé-
ment beaucoup de code généré qui n’est pas toujours très utile. Suivant les RAD, la
génération est assez rigide et ne permet pas toujours de créer des pages qui corres-
pondent exactement aux besoins. Cette solution peut éventuellement être adoptée
s’il est nécessaire de créer rapidement un back office comportant les fonctionnalités
de base.

Principe du RAD
Le RAD attend des informations de configuration et génère automatiquement du code.
Vous devez donc généralement répondre à un certain nombre de questions et choisir
certaines options. Au final, la demande de génération de code prend en compte toutes
les options choisies et crée tout le code nécessaire.
Il est possible ensuite d’entrer dans le code pour le modifier. Mais cette étape est souvent
fastidieuse compte tenu de la quantité de code produit.
Un RAD est spécifique à un langage. Il en existe des gratuits et des payants. Il faut donc
trouver le RAD correspondant au langage voulu.

8 2946 TG PA 00
 Création du back office avec un RAD
Au début de cette séquence, vous avez abordé la notion de back office ainsi que l’aspect
sécurité, mais vous ne l’avez pas créé.
Juste pour découvrir comment marche un RAD, nous allons créer le back office avec cette
méthode.
Un exemple de RAD pour PHP
Il existe plusieurs RAD pour le PHP. Nous allons tester PHPMaker.
La version utilisée lors de la création de ce cours est la 8.0.2. Attention, PHPMaker est
téléchargeable gratuitement en version test pendant 30 jours.
Vous pouvez le récupérer facilement sur internet en faisant une recherche "télécharger
phpmaker". Personnellement, je l’ai récupéré sur le site www.01net.com.
Vous devez normalement récupérer un fichier phpmkr.exe.
Si vous n’avez pas trouvé la même version ou si le fichier récupéré est différent, logique-
ment ça ne doit pas être très grave. Le principe d’installation et de configuration doit
être sensiblement le même.
Lancez le fichier récupéré et suivez les étapes classiques d’installation.
Configuration du RAD et génération du code
Une fois installé, ouvrez le logiciel.
Vous devez obtenir une fenêtre qui ressemble à ceci :
Séquence 5

Back office et RAD

Page 78

Le logiciel se présente avec plusieurs onglets pour configurer la base de données, le PHP,
le HTML et la sécurité.

8 2946 TG PA 00
Onglet Database
Cet onglet permet de sélectionner la base de données concernée. PHPMaker génère du
code pour administrer une base de données.
Vous remarquez, en ouvrant le combo du type de base de données, qu’il est possible
aussi d’administrer d’autres types de bases de données (PostgreSQL, Access, SQL Server).
Gardez MySQL.
Pour le serveur, sélectionnez localhost. Normalement vous n’avez que ce choix possible
sauf si vous avez configuré un autre serveur. Le but est de toute façon de sélectionner le
serveur où se trouve la base de données.
Le port étant le port par défaut, ne modifiez rien.
Pour le Username, si vous n’avez rien modifié par rapport au TP, c’est "root".
Pour le Password, si vous n’avez rien modifié par rapport au TP, il faut laisser vide.
Une fois ces informations remplies, le clic sur la flèche du combo Database doit norma-
lement prendre un peu de temps : le logiciel cherche les bases de données installées sur
ce serveur, pour ce SDBD et avec ce nom de user et ce mot de passe. Une liste apparaît.
Sélectionnez la bonne base de données dans la liste (Boutique).
Ne modifiez rien d’autre et cliquez sur Connect.
La partie gauche s’est remplie. Vous voyez normalement la liste des tables de la base de
données. Elles sont toutes cochées (donc sélectionnées). Il est possible de sélectionner
juste certaines tables pour limiter la génération de code aux tables sélectionnées. Laissez
toutes les tables sélectionnées. Séquence 5

On en a terminé avec le premier onglet. Back office et RAD

Onglet PHP
Page 79
Allez dans l’onglet PHP. Vous remarquez que des sous-onglets sont apparus.
Il est possible de gérer certains paramétrages liés à la génération de code PHP. Par
exemple choisir le format des dates ou, dans le deuxième sous-onglet, le nombre d’en-
registrements par page.
On ne touchera pas à la configuration du PHP.

Onglet HTML
Allez dans l’onglet HTML. Là aussi vous trouvez plusieurs sous-onglets.
Vous pouvez ajouter un titre au site ainsi qu’une icône.
Vous pouvez voir en bas de l’écran une visualisation du résultat. Dans le sous-onglet
Theme, il est possible de modifier les couleurs. Vous pouvez essayer et voir le résultat
dans la visualisation du bas. Vous pouvez aussi sélectionner un thème par défaut dans
le combo du haut.

8 2946 TG PA 00
 Dans le troisième onglet, vous pouvez même directement visualiser le code CSS généré.
Séquence 5
Onglet Security
Back office et RAD Allez dans l’onglet sécurité. Il est possible de se passer de cette configuration si on a géré
à la main la sécurité en créant un fichier .htaccess comme expliqué plus haut. Cependant,
Page 80 pour tester, on va utiliser la sécurité proposée ici.
Cochez la case "Administrator login" et saisissez un login et un mot de passe (évitez de
l’oublier : c’est juste un test, alors mettez quelque chose de simple, du genre "toto" et
"toto").

Onglet Generate
Allez dans l’onglet Generate.
Des chemins sont proposés, en particulier pour enregistrer les pages. Avant de modifier
les chemins ici, créez un dossier "version phpmaker admin" dans votre dossier de projet,
où se trouvent tous les dossiers des différentes versions du site.
Dans PHPMaker, partie "Application root folder", sélectionnez ce dossier. Le "destina-
tion folder" va aussi se modifier.
Cliquez sur Generate.

8 2946 TG PA 00
Normalement vous allez obtenir une fenêtre signalant quelques remarques :

Le logiciel vous signale que la table PANIER ne comporte aucune clé primaire. C’est vrai.
Ce n’est pas un problème mais le logiciel préfère le signaler car normalement toute table
possède une clé primaire. Cependant, PANIER est un cas particulier puisque c’est une
table temporaire.
Il est aussi précisé que la génération va inclure tous les fichiers nécessaires au-delà des be-
soins concernant juste les tables. Donc, au moment de la génération, il est aussi possible
de décider des fichiers présents dans la génération.
Ne modifiez rien et cliquez sur Generate.
Une fenêtre s’ouvre, montrant la progression de la génération du code.
Analyse du résultat Séquence 5
Voilà, le code est généré. Vous pouvez fermer PHPMaker. Inutile de sauver le projet.
Back office et RAD
Exécution
On va commencer par le tester. Page 81

Ouvrez le navigateur, comme d’habitude, en allant sur localhost et dans le dossier que
vous avez créé (version phpmaker admin).
Si tout s’est bien passé, vous devriez tomber sur une fenêtre d’authentification qui vous
demande un User name et un Password. Tapez ce que vous avez précisé lors de la confi-
guration sous PHPMaker (toto, toto ?) et cliquez sur login.
Vous êtes dans les pages d’administration de la base de données. Regardez à gauche,
vous retrouvez la liste des tables et, en cliquant sur une table, vous obtenez à droite un
tableau d’administration du contenu de la table. Vous pouvez faire une recherche, trier
par colonne, administrer un enregistrement...
Code généré
Allez faire un tour sur votre disque, dans le dossier "version phpmaker admin", et obser-
vez. Vous remarquez que de nombreuses pages ont été générées, ainsi que des dossiers.
D’ailleurs, l’organisation générale fait un peu penser à l’organisation de notre applica-
tion : un dossier par catégorie de fichiers (CSS, JS...) et les pages PHP en racine.
Mais la comparaison s’arrête là. Ouvrez par exemple la page clientlist.php. Vous remar-
quez la quantité de code simplement pour lister les clients, les répétitions de code et le
mélange avec le JavaScript.

8 2946 TG PA 00
 Sans aller plus loin, vous avez compris que beaucoup de code est généré alors qu’il en
faudrait certainement beaucoup moins pour faire les mêmes choses.
Cela dit, vous avez créé une mini-administration en quelques clics...

Synthèse

Back office
Site d’accès limité (uniquement le ou les responsables du site) permettant entre
autres de mettre à jour les données utilisées sur le site "front office" accessible à
tous.
Fonctionnalités
Le back office doit permettre toutes les manipulations possibles sur les données (pro-
venant de la base de données, des fichiers XML et de toute autre forme de données).

Séquence 5
Sécurité
Les pages du back office doivent être protégées. On utilise classiquement un fichier
Back office et RAD .htaccess pour ajouter un login et un mot de passe pour accéder au dossier du back
office.
Page 82
RAD
Le RAD permet de générer automatiquement du code. La création d’application est
plus rapide mais beaucoup de code inutile est créé et les fonctionnalités sont parfois
un peu rigides ou trop importantes par rapport aux besoins.
Le principe peut s’avérer intéressant pour la création par exemple d’un back office
simple et généré en quelques clics.

8 2946 TG PA 00
Séquence 6
Travail collaboratif : gestion de
versions
Cette séquence présente l’intérêt d’un logiciel de gestion de versions et montre concrète-
ment comment installer et utiliser un de ces logiciels : Subversion pour Windows couplé
au client Tortoise. Cette séquence ne comporte pas d’exercices mais des manipulations à
réaliser.

X Prérequis
Aucune connaissance préalable n’est nécessaire pour cette séquence.

X Capacités attendues en fin de séquence

Avoir compris l’intérêt d’un outil de gestion de versions. Savoir en installer et
en utiliser un.

X Contenu
Séquence 6
1. Principe ............................................................................................................ 84
Travail collaboratif :
2. Configuration du serveur............................................................................... 84
gestion de versions
3. Configuration du client .................................................................................. 87
4. Utilisation ........................................................................................................ 87 Page 83

8 2946 TG PA 00
 1. Principe
Le travail collaboratif a été abordé dans la première séquence.
Il intervient classiquement sur la gestion de projets où plusieurs personnes doivent tra-
vailler en collaboration.
Le travail collaboratif peut prendre plusieurs formes, comme cela a été expliqué de façon
plus détaillée dans la séquence 1 : échange de mails, visioconférences, annotations de
documents...
Le type d’outil de collaboration qui va être étudié plus en détail dans cette séquence per-
met de travailler à plusieurs sur le même document et de gérer les différentes versions.
Les outils de gestion de versions offrent, entre autres, les fonctionnalités suivantes :
• mémorisation de l’historique des versions enregistrées sur le serveur, avec possibilité
de revenir à une version précédente ;
• synchronisation des modifications apportées à un fichier, et ce, dans les deux sens
(lors d’un transfert vers le serveur ou lors d’une récupération du serveur) ;
• repérage des conflits éventuels et proposition de correction.
Ce type d’outil permet de gérer facilement des documents, en particulier du développe-
ment, à plusieurs.
Mais au-delà de l’aspect partage, vous pouvez utiliser ce type d’outil aussi pour avoir un
historique des versions de votre propre travail, même si vous travaillez seul.
Séquence 6
Il existe plusieurs outils de gestion de versions. Nous allons en étudier un qui est très
Travail collaboratif : utilisé et libre : Subversion.
gestion de versions

Page 84
2. Configuration du serveur
Subversion est un logiciel serveur. Il doit donc logiquement être installé sur un serveur.
Cependant, vous pouvez très bien l’installer sur votre ordinateur qui aura le rôle de ser-
veur et celui de client. C’est le même principe que lorsque vous avez installé WampServer
pour simuler un serveur Apache sur votre ordinateur.
Subversion peut être installé sur différents types de serveurs. Vous pouvez par exemple
l’installer sur un serveur Linux.
Voici la démarche pour l’installation et la configuration sur Windows.

Installation
Allez sur le site subversion.tigris.org et récupérez le fichier setup pour Windows de
Subversion (dans Projects/subversion). Au moment de la création de ce cours, le fichier
téléchargé était : Setup-Subversion-1.6.0.msi
Exécutez le fichier téléchargé et suivez les étapes d’installation.
Une fois l’installation terminée, allez dans "Panneau de configuration", "Système",
"Paramètres système avancés", "Variables d’environnement".

8 2946 TG PA 00
Dans les variables système, cliquez sur "nouvelle" et saisissez les informations suivantes :

Redémarrez l’ordinateur pour que la variable soit prise en compte.

Création du dossier et configuration des accès

Créez un dossier qui servira à enregistrer les fichiers et qui sera administré par le serveur
Subversion. Par exemple, j’ai créé le dossier SVN en racine du disque D.
Ouvrez une fenêtre de commande dos (en tapant par exemple cmd dans la zone de
recherche). Tapez :

svnadmin create "d:\svn"

(dans le cas où votre dossier est en racine de D et s’appelle SVN).

Fermez la fenêtre dos.
Allez dans le dossier que vous avez créé : vous remarquez que plusieurs fichiers et dos-
siers ont été créés.
Séquence 6
Entrez dans le dossier "conf".
Travail collaboratif :
Avec un simple éditeur, ouvrez le fichier svnserve.conf. Dans la partie [general], enlevez gestion de versions
le # et l’espace qui se trouvent en début des lignes suivantes :
anon-access = read Page 85
auth-access = write
password-db = passwd

La marque # est en fait une marque de commentaire. Le fait de l’enlever rend ces lignes
actives.
Enregistrez et fermez l’éditeur.
De même, avec un simple éditeur, ouvrez le fichier passwd. Remarquez après [users] les
lignes suivantes :

# harry = harryssecret
# sally = sallyssecret

Vous pouvez laisser ces lignes ou les enlever puisqu’elles sont en commentaire, mais vous
avez compris le principe : c’est ici que l’on peut configurer un nom d’utilisateur et son
mot de passe. Vous pouvez donc ajouter une ligne pour votre propre configuration, par
exemple :

# harry = harryssecret
# sally = sallyssecret
Emds = toto

Enregistrez et fermez l’éditeur.

8 2946 TG PA 00
 Démarrage du serveur et création d’un projet
Ouvrez à nouveau une fenêtre dos.

svnserve --daemon --root "d:\svn"

Il est possible que votre pare-feu réagisse : autorisez Subversion à continuer.

Normalement le curseur s’est positionné en dessous de la ligne.
Ouvrez une seconde fenêtre dos et tapez :
svn mkdir svn://localhost/projet

L’éditeur de texte qui a été paramétré s’ouvre avec le contenu suivant :

Faites les ajouts pour obtenir le résultat suivant (au niveau de la ligne commençant par
Séquence 6 A, mettez l’information à la place du point) :

Travail collaboratif :
gestion de versions

Page 86

Enregistrez et fermez. Dans la fenêtre dos (la seconde) un mot de passe est attendu :
validez pour que l’ordinateur vous demande d’abord de saisir le login (celui que vous
avez donné dans le fichier passwd) puis le mot de passe (aussi celui que vous avez donné
dans le fichier passwd). Au final vous devriez obtenir le message "Révision 1 propagée"
(peut-être avec des erreurs d’accents, ce qui n’est pas grave).
Fermez cette fenêtre dos.

Paramétrage du serveur comme service

Retournez dans la fenêtre dos qui exécute svnserve. Tapez Ctrl+C pour arrêter l’exécu-
tion, puis fermez la fenêtre.
Téléchargez le fichier de service à l’adresse suivante :
ftp://ftp-developpez.com/ericreboisson/install-subversion/fichiers/SVNService.zip

8 2946 TG PA 00
Une fois le fichier téléchargé, extraire son contenu. Copiez tous les fichiers (SVNService.
exe et les autres) dans le dossier bin du dossier Subversion (normalement dans Program
Files).
Ouvrez une fenêtre dos et tapez :
svnservice -install --daemon --root "d:\svn"
Vous devriez obtenir le message "SVNService installed".
Ouvrez le "panneau de configuration", puis "outils d’administration", "services". Double
cliquez sur "SVNService" et changez le type de démarrage de "Manuel" en "Automa-
tique". Appliquez et cliquez sur OK.
Maintenant, Subversion se lancera à chaque démarrage de Windows. Pour éviter de re-
lancer tout de suite Windows, faites un clic droit sur SVNService et cliquez sur Demarrer
pour que le service démarre tout de suite.
Ouvrez à nouveau une fenêtre dos et tapez :

svn ls svn://localhost/

Si tout marche bien, vous devriez obtenir en début de ligne suivante : "projet".

3. Configuration du client
Une fois le serveur installé, il faut installer et configurer un client.
Rappelez-vous que vous avez installé le serveur sur votre ordinateur, donc le client et le Séquence 6
serveur vont être sur le même ordinateur, mais normalement le serveur devrait être ins-
Travail collaboratif :
tallé sur un ordinateur distant qui aurait le rôle de serveur. gestion de versions
Récupérez le logiciel client TortoiseSVN (vous devriez trouver le logiciel ici : http://tor-
toisesvn.net/downloads.html). Installez le logiciel en suivant les étapes d’installation. Page 87
Créez un dossier de travail, où vous voulez. Ouvrez le dossier et faites un clic droit dans le
dossier. Sélectionnez "SVN Checkout...". Dans la fenêtre qui s’ouvre, tapez l’adresse URL
suivante :

svn://localhost/projet

Faites OK.
Le client est configuré.

4. Utilisation
Votre dossier est maintenant relié au serveur Subversion. Vous remarquerez la petite
marque verte sur le dossier.

Ajout d’un fichier

Dans le dossier, créez un petit fichier texte, mettez un contenu, enregistrez-le et fermez-le.
Faites un clic droit sur le fichier, allez dans TortoiseSVN et sélectionnez "add". Remarquez
le "+" bleu qui s’est ajouté sur le nom du fichier. Le fichier n’est pas encore sur le serveur,
mais il est prêt à être monté sur le serveur.
L’ajout d’un fichier fonctionne aussi pour un dossier complet.

8 2946 TG PA 00
 Transfert d’un fichier sur le serveur : commit
Pour transférer un fichier sur le serveur, il suffit de faire un clic droit sur le fichier et de
sélectionner "SVN Commit". Une fenêtre s’ouvre, présentant le ou les fichiers à trans-
férer sur le serveur. Faites OK. Une nouvelle fenêtre présente le transfert. Une fois le
transfert terminé, faites OK.
Le fichier est maintenant sur le serveur.
Ce transfert fonctionne aussi avec un dossier complet.
À chaque transfert, les versions antérieures sont gardées.

Récupération d’un fichier : update

Pour vous prouver que le fichier est bien sur le serveur, supprimez le fichier que vous venez
de créer et pour lequel vous avez fait un commit. Faites un clic droit dans le dossier vide et
choisissez "update". Le fichier réapparaît. Effectivement, le fichier étant sur le serveur, une
demande d’update dans le dossier permet de récupérer tous les fichiers du dossier.

Modification d’un fichier

Modifiez le contenu du fichier récupéré et enregistrez. Vous remarquez que la marque
verte s’est transformée en point d’exclamation rouge. C’est pour vous signaler que le
fichier en local a été modifié depuis le dernier commit. Si vous faites un nouveau com-
mit, la marque verte revient.
Il serait intéressant aussi de faire des tests pour contrôler les conflits. Mais pour cela il
faudrait qu’un autre ordinateur accède à votre serveur et apporte des modifications sur
Séquence 6 le même fichier. Si vous avez un autre ordinateur, vous pouvez installer Tortoise et para-
métrer l’URL du serveur non pas avec localhost mais avec l’adresse IP de votre ordinateur
Travail collaboratif : qui a le rôle de serveur.
gestion de versions

Page 88

8 2946 TG PA 00
Séquence 7
Mise en ligne
Cette séquence présente les points indispensables à connaître pour mettre en ligne un
site.

X Prérequis
Avoir des connaissances de développement web.

X Capacités attendues en fin de séquence

Avoir les connaissances nécessaires pour la mise en ligne d’un site.

X Contenu
1. Intégration de publicité ................................................................................. 90
2. Référencement................................................................................................ 90
3. URL rewriting .................................................................................................. 90
4. Informations légales et CNIL.......................................................................... 92
5. Choix du provider et nom de domaine ......................................................... 94 Séquence 7
6. Mise en ligne et contrôle de la configuration .............................................. 94
Mise en ligne
7. Tests sous différents navigateurs et norme W3C ......................................... 95
8. Gestion et maintenance ................................................................................. 96 Page 89

Synthèse ......................................................................... 97

8 2946 TG PA 00
 1. Intégration de publicité
Vous avez la possibilité d’intégrer des publicités sur votre site. De nombreux sites propo-
sent l’intégration de publicités.
Globalement, les publicités sont déconseillées car en règle générale les internautes ne les
apprécient pas trop. Si toutefois vous choisissez cette option, faites en sorte d’intégrer
des publicités qui ne soient pas trop gênantes sur la page et qui soient en concordance
avec les sujets que vous abordez dans votre site.
Un des programmes les plus classiques de publicité est celui proposé par Google :
Google adsense. Vous devez par internet, sur le site www.google.com/adsense, faire
une demande d’intégration de publicité. Si le site est approuvé, vous recevrez le code à
insérer où vous le désirez sur votre site. Les publicités intégrées sont en relation avec le
contenu textuel de votre page qui est analysé en permanence.

2. Référencement
Si le but du site est d’attirer le plus de monde possible, ce qui est par exemple le cas pour
un site marchand, il faut penser à son référencement.
Comment faire en sorte que le site soit le mieux référencé possible dans les moteurs ? On
peut agir à plusieurs niveaux :
Séquence 7
• il faut correctement remplir les balises META du site ;
• l’ensemble des balises étant testé, le but est de limiter les textes explicites unique-
Mise en ligne ment sous forme d’image (par exemple, si vous réalisez un joli titre sous Photoshop,
dites-vous que son contenu ne sera pas pris en compte, donc sans pour autant enle-
Page 90 ver votre titre, faites en sorte que l’information apparaisse aussi à un autre endroit,
dans une balise, pour être prise en compte) ;
• les liens externes qui mènent vers votre site augmentent ses chances de référence-
ment (si par exemple on parle de votre site dans des forums) ;
• il faut favoriser l’utilisation de l’URL rewriting.

3. URL rewriting
(Merci à Yannick qui est à l’origine de la rédaction de cette partie.)
La technique de l’URL rewriting permet de changer les noms des pages PHP en nom de
pages HTML. Cette transformation a le triple avantage de sécuriser les pages (en mas-
quant les éventuelles variables passées en paramètre), de faciliter la mémorisation de
noms (simplifiés par rapport aux noms d’origine) et de faciliter le référencement (les
robots d’indexation de la plupart des moteurs de recherche dont Google ne lisent pas
les URL qui ont plus de deux paramètres, de plus la découpe des mots clés d’une URL
favorise le référencement).
Comment ça marche ?
Dans un premier temps, des modules d’Apache doivent être activés. Pour le cas de
WampServer, faites un clic gauche sur l’icône de Wamp, allez dans le menu Apache /

8 2946 TG PA 00
Modules Apache, puis cochez l’option rewrite_module. Le serveur devrait alors se relan-
cer tout seul. Si ça ne marche pas, ou pour les autres serveurs, il faut modifier le fichier
httpd.conf pour dé-commenter les lignes suivantes :
LoadModule rewrite_module libexec/mod_rewrite.so
AddModule mod_rewrite.c
Si ces lignes ne sont pas présentes, rajoutez-les puis sauvegardez et redémarrez le ser-
veur. Une fois ces actions effectuées, on peut attaquer la réécriture.
Tout se passe dans le fichier .htaccess qui se trouve à la racine du site. Il faut le créer s’il
n’existe pas. Commençons notre premier test. Créez une page test.php où l’on met ce
qu’il y a de plus basique :
<html><head><title>Ceci est un test</title></head><body>Bonjour !
Ceci est un test !</body></html>
Puis, dans le fichier .htaccess (n’oubliez pas le point devant le nom), écrivez ces lignes :
Options +FollowSymlinks
RewriteEngine on
RewriteBase /
Explications : les deux premières lignes sont nécessaires pour activer et dire au serveur
que l’on souhaite utiliser l’URL rewriting pour notre site. La troisième ligne sert à défi-
nir le répertoire de base de notre site. La plupart du temps c’est / mais dans le cas de
WampServer la racine du site est http://localhost/ et non http://localhost/monSite/. Il faut
donc la modifier avec ce paramètre : /monSite/. Par la suite, les règles de réécriture peu-
vent être mises en place. Séquence 7
Pour notre exemple, voici la ligne qui correspond :
Mise en ligne
RewriteRule ^test.html$ test.php [L]
Page 91
Petite explication : RewriteRule indique que l’on souhaite commencer l’écriture d’une
URL. Le ^ indique que l’on prend toutes les URL de notre site avant le nom de la page
puis nous retrouvons la page que l’on souhaite appeler à la place de test.php.
Enregistrez le fichier puis rendez-vous sur l’URL suivante :
http://localhost/monSite/test.html

Si le navigateur affiche une erreur 404 c’est que l’URL rewriting n’est pas bien mise en
place, sinon félicitations : ça fonctionne ! Vous pouvez maintenant modifier le test.html
en ceQueVousVoulez.html : elle appellera toujours la page test.php.
Vous savez utiliser de façon basique l’URL rewriting. Allons plus loin en ajoutant des
règles d’écriture. Les règles d’écriture permettent d’utiliser l’URL rewriting de façon
dynamique. Un site internet est susceptible d’avoir des adresses du type :
article.php ?id=34&titre=Coucou
Si l'on écrit manuellement les règles de renommage comme précédemment, on risque de
ne plus s’en sortir. Pour cela on peut utiliser ce genre d’écriture :
RewriteRule ^article-([0-9]+)-(.*).html$ article.
php?id=$1&titre=$2 [L]
Petite explication : la première partie, comme on l’a déjà vu, correspond à la page que
l’on va demander. Ici, article est donc notre page fictive. Ce qui suit l’article est une

8 2946 TG PA 00
 valeur qui ne peut être qu’un chiffre ou plusieurs chiffres et rien d’autre. Ensuite le (.*)
permet d’indiquer que l’on peut avoir différents caractères, que ce soient des chiffres,
des lettres ou des caractères spéciaux. Il est vivement conseillé d’utiliser les – au lieu des _
car les moteurs de recherche découpent les différents mots clés avec le caractère -. Pour
récupérer les valeurs, l’utilisation des variables $1 et $2 est nécessaire. $1 prend la valeur
du premier paramètre qui est ici le ([0-9]+) et $2 prend la valeur du deuxième paramètre
qui est ici le (.*). Si une troisième valeur était présente on aurait mis $3, et ainsi de suite…
L’ordre n’est pas établi au hasard : le premier paramètre dans l’URL en .html correspond
à la variable $1. Ainsi, on peut écrire les unes à la suite des autres les différentes règles
d’écriture.
Voici les différentes restrictions des URL que l’on peut trouver :
(.*) : Tous caractères, que ce soient des chiffres, des lettres, des caractères spéciaux…
([0-9]+) : Que des chiffres (le + permet de spécifier que l’on peut trouver plusieurs
chiffres).
([a-z]+) : Que des lettres.
([a-z0-9]+) : Un ou plusieurs chiffres/lettres.
Voici une explication succincte de l’utilisation de l'URL rewriting.
Une petite règle qui permet de renommer toutes les pages en .html en .PHP :

RewriteRule ^(.*).html$ $1.php [L]

Vous avez compris que ces modifications peuvent avoir de lourdes retombées sur le code.
Séquence 7
Il est donc a priori conseillé de penser à cette solution dès le début, pour éviter d’impor-
Mise en ligne tantes modifications.

Page 92

4. Informations légales et CNIL

Mentions légales
Le droit dicte un certain nombre d’informations légales qui doivent figurer sur un site.
Les règles sont bien sûr plus strictes pour un site commercial (plus largement, les sites
industriels, commerciaux ou de service) que pour un site personnel.
Sites personnels
• Informations sur l’hébergeur : nom, adresse, téléphone.
Sites commerciaux
• Informations sur l’éditeur du site : nom ou raison sociale, adresse, téléphone,
numéro d’inscription au répertoire des métiers ou registre du commerce, capital
(pour les sociétés).
• Informations sur le responsable du contenu du site : nom du directeur ou co-direc-
teur de publication.
• Informations sur l’hébergeur : nom, adresse, téléphone.

8 2946 TG PA 00
Données personnelles
Un site, personnel ou commercial, manipule parfois des données personnelles relatives
aux internautes (à travers, par exemple, une fiche d’inscription).
Si le site manipule ce genre de données, il est obligatoire de faire une déclaration à la
CNIL (Commission nationale de l’informatique et des libertés) et de faire mentionner sur
le site un certain nombre d’informations :
• le numéro de déclaration fourni par la CNIL ;
• le droit d’accès des internautes à leurs données collectées, ainsi que leur droit de
modification et suppression ;
• dans le cas d’utilisation de cookies, une mention précisant que ces cookies ne sont
pas destinés à collecter des informations personnelles ;
• une mention précisant que les données collectées ne seront pas revendues ni com-
muniquées à des tiers.

Propriété intellectuelle
Il n’est pas obligatoire de mentionner, sur le site, les droits des internautes en ce qui
concerne la réutilisation partielle ou totale du contenu du site (texte, images…). En l’ab-
sence d’informations, la loi de la propriété intellectuelle s’applique par défaut :
"Toute représentation ou représentation intégrale ou partielle faite sans le consente-
ment de l’auteur ou de ses ayants droit ou ayant cause est illicite. Il en va de même pour
la traduction, l’adaptation ou la transformation, l’arrangement ou la reproduction par
un art ou un procédé quelconque."
Bien sûr cela s’applique dans l’autre sens : quand vous créez un site, faites attention à son Séquence 7
contenu, en particulier lorsque vous récupérez des textes ou des images sur d’autres sites
ou d’autres supports. Vous devez contrôler que ce qui est récupéré est libre de droit, ou Mise en ligne
demander une autorisation auprès des auteurs.
Page 93
Liens hypertextes
L’intégration de liens hypertextes pointant vers d’autres sites est possible, mais sous cer-
taines conditions :
• il faut demander l’autorisation auprès du webmaster du site destination ;
• notre responsabilité est engagée en ce qui concerne le contenu du site destination
(si par exemple le contenu est illicite).

Spécificités des sites marchands

Certaines règles viennent s’ajouter au niveau des sites marchands :
• si des photos sont utilisées pour présenter les articles, une mention doit préciser
qu'elles sont non-contractuelles et qu’elles n’engagent pas le vendeur ;
• les prix doivent être clairement affichés, avec obligatoirement la mention HT ou TTC ;
• la disponibilité du produit doit être précisée (et les délais d’obtention) ;
• les frais et délais de livraison ;
• la durée de validité du prix et de l’offre ;
• les conditions générales de vente (informations sur l’offrant – identité, adresse,
téléphone, informations sur la prestation – étapes de réalisation du contrat, infor-
mations relatives à la contre-prestation).

8 2946 TG PA 00
 5. Choix du provider et nom de domaine
Pour que le site soit accessible sur internet, il doit être hébergé chez un FAI (Fournisseur
d’accès à internet, ou hébergeur, ou le terme anglais "provider"). Il existe plusieurs
hébergeurs, français ou même étrangers. Vous trouverez sur internet tous les hébergeurs
possibles, et aussi des sites qui permettent de comparer les différents hébergeurs.
Lors du choix d’un hébergeur, vous devez prendre en compte un certain nombre de
critères :
• le langage serveur et la base de données acceptés (le provider doit être capable
d’héberger votre site, il doit donc posséder l’interpréteur de code serveur nécessaire
et aussi le SGBDR correspondant). Si vous avez utilisé le couple PHP/MySQL, vous
avez accès à la majorité des providers ;
• la place réservée au site (pages mais aussi documents, photos, vidéos…) ;
• la place réservée à l’éventuelle base de données (en prévoyant son expansion) ;
• la bande passante (suivant la fréquentation prévue et la quantité de télécharge-
ment) ;
• éventuellement le nombre de connexions simultanées ;
• les tarifs.
Si vous désirez que l’adresse de votre site soit spécifique, vous devez aussi prendre (ache-
ter) un nom de domaine. De nombreux sites proposent la possibilité d’acquérir un nom
de domaine (par exemple, le site officiel de l’AFNIC pour les noms de domaine .fr).

Séquence 7 Un nom de domaine doit être bien sûr unique, donc un contrôle sera fait au préalable
avant de vous permettre d’acquérir le nom demandé. Un nom de domaine est payant,
Mise en ligne et il est affecté pour une durée limitée.

Page 94

6. Mise en ligne et contrôle de la configuration

Pour mettre en ligne le site, il faut utiliser un logiciel FTP, ou les fonctions FTP éventuel-
lement proposées sur le site du provider, pour monter les pages.
Une fois le site en ligne, vous pouvez avoir des surprises, parfois très importantes et pré-
judiciables, quant à l’exécution des pages. Comment peut-il y avoir des différences entre
votre exécution en local et celle en ligne ? C’est une histoire de différence de version et/
ou de configuration. Par exemple, vous avez peut-être utilisé PHP5 et, en ligne, le provi-
der utilise l’interpréteur de PHP4. Évidemment ça change tout. Cependant, la plupart des
providers offrent la possibilité de modifier certaines configurations, notamment avec le
fichier .htaccess. Pour reprendre l’exemple assez courant qui vient d’être cité, pour for-
cer le provider à utiliser la version 5 du PHP (si toutefois cette version est installée), vous
devez mettre en racine de votre site un fichier portant le nom ".htaccess" et contenant
la ligne :

SetEnv PHP_VER 5

Si votre site respecte les normes W3C, normalement, les problèmes liés aux balises HTML
seront limités. Les problèmes principaux que vous pouvez rencontrer seront au niveau du
langage serveur. Par exemple, si vous avez utilisé les balises raccourcies <? et ?> au lieu
de <?PHP et ?> et que vous avez configuré en local le PHP pour qu’il accepte ces balises
raccourcies, ne soyez pas surpris si, une fois en ligne, le site ne fonctionne plus du tout.

8 2946 TG PA 00
Donc la règle à respecter est de ne pas changer en local la configuration par défaut de
PHP afin d’avoir une compatibilité maximale avec les versions en ligne.
En ce qui concerne les modules d’extension (comme celui qu’on a utilisé avec Exif pour
gérer les images), c’est différent : les hébergeurs ont généralement une configuration
assez large à ce niveau-là.
Conclusion, il faut toujours tester le site une fois en ligne.

7. Tests sous différents navigateurs et norme W3C

Les navigateurs
Lorsque vous créez un site, il faut prendre en compte le fait que, suivant les internautes,
le site va tourner sur des navigateurs différents. Il se trouve que, malheureusement, il n’y
a pas une compatibilité totale entre les navigateurs. Cela signifie qu’il faut coder en fai-
sant attention au résultat non pas sur un navigateur mais sur plusieurs. Personnellement,
j’ai réalisé ce TP en testant systématiquement sous IE et Firefox.
Est-il possible de tester un site sur tous les navigateurs qui existent ? La réponse est
a  priori non car, contrairement à ce que l’on pourrait penser, il existe de nombreux
navigateurs : plus d’une cinquantaine. De plus, chaque navigateur existe en plusieurs
versions qui ne réagissent pas toutes de la même façon. Cependant, le pourcentage
d’utilisation des différents navigateurs n’est pas équivalent. Une étude datant de juin
2011 donne les pourcentages suivants :
Séquence 7
internet Explorer (44,4%), Firefox (29,6%), Chrome (16,1%), Safari (8,3%), Autres (1,6%).
Mise en ligne
Cela suppose que tester le site sur internet Explorer, Firefox, Chrome et Safari permet de
réunir un panel extrêmement large d'internautes. Page 95
Attention, ici seuls les navigateurs ont été cités. Cependant, pour chaque navigateur, il
existe plusieurs versions qui souvent ont des différences notoires. Vous n’obtiendrez pas
le même résultat sous la version 9 d’internet Explorer et sous les versions antérieures.

La norme W3C
La norme W3C permet justement de pallier ce problème d’incompatibilité entre les
navigateurs. Plus concrètement, comment est-ce possible ? La norme W3C édicte un
ensemble de règles précises d’écriture du code HTML, de sorte que le code qui suit la
norme soit compatible sur tous les navigateurs. Cela permet aussi de faire en sorte que
l’ensemble des développeurs suivent les mêmes règles.
Où trouver l’ensemble des règles de la norme ? Vous pouvez aller directement sur le
site officiel du W3C, cependant, pour avoir une information plus claire et résumée, il y a
d’autres sites comme celui-ci : http://openweb.eu.org/articles/html_au_xhtml
Est-il possible de faire contrôler son site pour voir s’il respecte les règles W3C ? Oui. Pour
cela, il faut que le site soit en ligne, donc placé chez un hébergeur. Puis il suffit de donner
le lien sur le site suivant pour que votre site soit testé (attention, le lien ne représente
qu’une seule page, donc il faut à chaque fois donner le lien de chaque page pour qu’elles
soient toutes testées) : http://validator.w3.org/

8 2946 TG PA 00
 Si vous obtenez une liste impressionnante d’erreurs, ne vous inquiétez pas trop : comme
dans un programme classique, une erreur provoque parfois en cascade de nombreuses
autres erreurs. Le but bien sûr au final est d’éliminer toutes les erreurs.

Les tests
Pour tester votre site, en dehors des tests classiques des fonctionnalités, vous devez :
• faire tester votre site par le validateur W3C et éliminer toutes les erreurs ;
• tester votre site sur plusieurs navigateurs, au moins les plus connus, pour contrôler
que l’affichage correspond bien à ce que vous attendez (même validé, il y a parfois
des petites différences, généralement anodines mais on ne sait jamais…) ;
• réaliser les tests aussi en ligne.

8. Gestion et maintenance
Enfin, il faut prévoir une gestion du site et sa maintenance.

Gestion du site
Si le site est statique, il se suffit à lui-même et ne nécessite a priori pas de gestion. En réa-
lité, il faut tout de même vérifier de temps en temps si son contenu n’est pas obsolète.
Si le site est dynamique, alors il est nécessaire de mettre à jour les données (générale-
ment par la partie back office), voire de modérer le site, s’il contient des informations
Séquence 7 déposées par les internautes (dans un forum, un livre d’or…).

Mise en ligne Une personne, ou plusieurs, doivent donc être désignées et posséder les droits néces-
saires pour intervenir dans ce sens.
Page 96
Maintenance
Au-delà de la gestion du site, se pose le problème de la maintenance. Le site peut com-
porter des erreurs qui vont éventuellement se révéler en cours d’utilisation. Il peut aussi
faire l’objet d’attaques malveillantes. Autre problème courant : la base de données peut
rencontrer des problèmes qui se répercutent sur le site.
Pour régler tous ces problèmes, il faut des compétences techniques. Une personne ayant
les compétences doit être aussi désignée pour gérer la maintenance.

TP

Vous avez terminé l’étude du cours. Attention, l’étude du fascicule de TP est tout
aussi importante. Les connaissances apportées par la pratique sont primordiales.
D’ailleurs, le second devoir porte exclusivement sur le fascicule de TP. Si vous n’avez
pas encore terminé les TP, ne faites pas d’impasse et passez-y le temps nécessaire.

8 2946 TG PA 00
 Synthèse

Référencement
Pour améliorer le référencement (quelques pistes) :
– remplir les balises META ;
– mettre des informations pertinentes dans les autres balises ;
– mettre le site à jour régulièrement ;
– augmenter les liens externes qui pointent sur le site (forums…) ;
– favoriser l’utilisation de l’URL rewriting.
URL rewriting
Informations dans le fichier .htaccess permettant de renommer les URL du site en
URL plus simples en favorisant les extensions HTML. Ce renommage permet de pro-
téger les données transférées en mode GET et aussi d’améliorer le référencement.
Informations légales
Attention, mettre un site en ligne suppose de respecter un certain nombre de règles
édictées par les lois. Ces règles sont différentes suivant le type de site (personnel,
commercial…).
Séquence 7
Choix de l’hébergeur et nom de domaine
Mise en ligne
Le choix de l’hébergeur va se faire suivant certains critères : place réservée au site et
à la base de données, bande passante, nombre de connexions simultanées, tarifs…
Page 97
Il est possible aussi d’acheter un nom de domaine pour avoir une adresse personnalisée.
Mise en ligne et contrôle de configuration
La mise en ligne se fait en utilisant un logiciel FTP pour monter les pages, ou en
passant directement par les fonctions FTP proposées sur le site de l’hébergeur.
Il faut contrôler le site en ligne pour voir les éventuels problèmes de configuration.
Tests sur différents navigateurs
Le site peut avoir des réactions différentes suivant les navigateurs : il faut donc faire
des tests.
Le respect de la norme W3C permet de minimiser les problèmes. Pour voir si le site
passe le test de la norme W3C, voici le lien :
http://validator.w3.org/
Gestion et maintenance
Pour qu’un site dynamique fonctionne, il faut un ou plusieurs responsables du site
pour gérer le back office, ainsi qu’un administrateur pour s’occuper de la mainte-
nance en cas de problème technique.

8 2946 TG PA 00
Corrigés des exercices
Vous trouverez ici la correction de tous les exercices du fascicule. Les exercices étant
numérotés par séquence, vous les retrouverez classés par séquence.

Séquence 1
Exercice 1

a) D’après vous, pour quelles raisons le client n’est-il pas satisfait ?

Même si le site répond précisément aux attentes fixées dans le cahier des charges, le
visuel permet toujours de découvrir d’autres aspects. En découvrant visuellement les
fonctionnalités, le client peut réaliser qu’il manque finalement certaines options. Le
client peut aussi être déçu par l’aspect "présentation" du site : il peut ne pas apprécier
tous les choix esthétiques qui ont été faits.
Il faut donc bien réaliser que des informations écrites textuellement dans un cahier des
charges ne sont pas perçues de la même façon lorsqu’elles sont présentées visuellement
dans une application.
b) Quel cycle de développement avez-vous choisi pour réaliser ce site ?
Puisque le résultat n’est présenté qu’à la fin et que tout est basé uniquement sur le
cahier des charges, on est soit dans le cadre d’un modèle linéaire dit "en cascade", soit
dans le cadre d’un modèle en V. Quel que soit le modèle, il ne correspond pas à un cycle
Corrigés des
itératif. exercices

c) Compte tenu du résultat, que concluez-vous sur votre choix de cycle de développe-
ment et que préconisez-vous pour un prochain développement ? Page 99

Puisque, malgré le bon respect du cahier des charges, le résultat n’est pas satisfaisant, le
choix de cycle de développement n’est de toute évidence pas adapté.
Le client a besoin de voir l’évolution du travail et de donner son avis au fur et à mesure
du développement. Bien sûr, cet avis ne doit pas avoir de conséquences lourdes : dans le
cas de demandes conséquentes, des ajouts devront être faits dans le cahier des charges,
ce qui peut aussi influer sur la facturation. Un cycle itératif, avec livraison rapide d’un
prototype qui évolue sous les yeux du client, reste la meilleure solution pour réaliser un
produit correspondant à ses attentes.
d) Pour l’application actuelle, comment réagir face aux demandes du client et quelles en
seront les conséquences ?
Trois solutions possibles :
– Soit vous ne faites rien : le produit a été livré dans les temps et correspond au cahier
des charges. Même si vous êtes dans votre droit, l’inconvénient de cette solution est
que vous perdez un client (il y a peu de chances qu’il vous redemande de travailler
pour lui) et qu'il risque de vous faire une mauvaise publicité.
– Soit vous acceptez les modifications demandées en les facturant. Le client peut très
bien refuser ou accepter à contrecœur. Dans les deux cas, il ne sera pas vraiment
satisfait.
– Soit vous acceptez les modifications en les faisant gratuitement. Le client sera en partie
satisfait : en partie seulement car il y a tout de même une perte de temps, le produit
n’étant plus livré dans les délais. Et, de votre côté, vous perdez du temps donc de l’argent.

8 2946 TG PA 00
 Exercice 2

a) Page informative sur l’histoire de la société

Ces informations de toute évidence ne vont pas évoluer, ou très peu, et ne comportent
a priori pas de structure (hiérarchisation ou classification) : c’est juste un texte.
Le fichier texte paraît la solution la plus simple. Le code de la page pourra directement
intégrer le contenu du fichier. De plus, modifier le contenu d’un fichier texte est très
simple.
b) Page présentant la liste des membres (photo, nom, texte de présentation...)
La liste des membres n’est pas fixe (puisque le point e, précise que l’on peut s’inscrire)
et comporte des informations précises (photo, nom...). On peut aussi imaginer que cette
liste doit pouvoir être gérée en dehors du site.
La solution la plus adaptée semble être l’enregistrement des informations dans une base
de données. Les photos ne seront pas directement enregistrées dans la base de données
(qui serait rapidement trop volumineuse) mais dans des fichiers images. La base contien-
dra alors juste le nom du fichier pour y accéder.
c) Forum accessible aux membres
Même sans plus de précisions, on se doute qu’un forum comporte des sujets, des mes-
sages par sujet... Chaque message comporte généralement une date, un titre, le nom de
la personne qui l’a posté (le membre).
De plus, il faut généralement prévoir une modération.
Cela donne envie de tout intégrer dans une base de données pour que la gestion en soit
Corrigés des facilitée. Le fait que le forum concerne les membres pousse encore plus à mémoriser ces
exercices informations dans la base de données, la même que les membres, pour pouvoir faire le
lien entre les messages et les membres.
Page 100
d) Les dernières informations du site (avec possibilité de s’abonner au flux RSS)
D’une manière générale, on l’a vu, l’enregistrement de news peut se faire facilement
dans un fichier XML. Cela dit, le choix de l’enregistrement dans une base de données
n’est pas incohérent... sauf dans le cas présent où il est précisé que les informations
seront accessibles en flux RSS. Un flux RSS est forcément au format XML. Ce serait dom-
mage du coup de créer en plus une table dans la base de données : autant utiliser le
même fichier XML pour le flux RSS et pour afficher les informations sur le site.
e) Contrat d’inscription pour devenir membre, pouvant être visualisé et téléchargé par
les internautes
Le contrat doit être visualisable et téléchargeable, donc aussi imprimable. Le format le
plus adapté semble être le PDF : le format est standard sur internet et le document peut
être affiché dans une page et proposé au téléchargement.

8 2946 TG PA 00
Exercice 3
a) Un ami vous demande de lui créer un petit site un peu personnalisé et original pour
présenter son CV. Il est décorateur à la recherche d’un emploi et veut pouvoir montrer
certains de ses travaux.
Vous avez eu l’occasion, lors d’un stage, de travailler sous ASP.net (la solution Microsoft
pour créer des pages serveur) et avec le SGBDR SQL Server (aussi de Microsoft). Vous
décidez de créer le site avec ces outils.
Même si vous avez utilisé une technologie pour développer sur internet, cela n’est pas
une raison pour l’utiliser dans tous les développements web.
De toute évidence, le travail demandé ici est léger et ne nécessite pas des outils aussi
lourds, en particulier un SGBDR du type SQL Server. De plus, vous aurez du mal à trou-
ver un hébergeur qui accepte ces technologies. Dans le cadre de votre stage, vous aviez
certainement travaillé sur un gros projet.
Travailler en PHP associé à MySQL est nettement plus adapté dans ce cas.
b) Pendant l’été, vous avez décidé de vous amuser à coder un petit jeu de combat multi-
joueurs en 2D.
Vous connaissez un peu les langages C++ et Java. Vous avez eu une première approche
de Qt. On vous a dit que Java est LE langage le plus adapté pour la programmation
client/serveur. Votre choix se porte sur Java.
Java est effectivement un langage très puissant en programmation client/serveur. Cela
dit, C++ n'est pas nul dans ce domaine.
Dans le cas présent, Java n’est pas un bon choix car il est plus lent que le C++ (à cause
Corrigés des
de la machine virtuelle). exercices
Dans le domaine du jeu, comme un jeu de combat, lorsque la réactivité et la rapidité
sont des critères essentiels, le C++ est le langage le plus adapté. Si en plus vous avez des Page 101
notions en Qt, c’est parfait.
c) Vous travaillez dans une société qui vous demande de réaliser une application de ges-
tion en client/serveur qui va servir en interne dans la société. Vous travaillez à deux sur
ce projet et vous êtes le chef d’équipe. Ce travail a été estimé à 6 semaines. Vous êtes à
Paris, dans la maison mère, alors que le collaborateur qui va travailler avec vous est dans
la succursale installée à Lyon. Le choix des technologies est libre, à partir du moment où
cela est gratuit !
Vous décidez de réaliser le développement en Java et vous prévoyez de communiquer
par mail avec le collaborateur, afin de lui communiquer les informations et d’échanger
les fichiers du programme.
Java est un très bon choix pour ce type d’application : il est très adapté pour des déve-
loppements client/serveur et une application de gestion n’attend pas une rapidité d’exé-
cution comme un jeu. De plus, Java est gratuit.
Le travail est estimé à 6 semaines pour 2 personnes, donc ce n’est pas une application
très volumineuse. Cela suppose que la collaboration va devoir être étroite et qu’il faudra
assez souvent travailler sur les mêmes fichiers. Le contact par mail n’est pas suffisant. Il
est préférable d’utiliser un outil de gestion de versions comme Subversion pour travailler
ensemble sur les mêmes fichiers.

8 2946 TG PA 00
 Exercice 4
a) Quel est le protocole qui permet le transfert de fichiers sur internet ?
FTP : File Transfert Protocol.
b) Quel est le nom du projet à l’origine d’internet ?
ARPANET : réseau militaire créé pendant la guerre froide pour arriver à garder un
contact même en cas de lignes détruites.
c) Quelle est la différence entre internet et web (www) ?
WWW est un des services accessibles sur internet. Le web représente l’ensemble des sites.
D’autres services sont accessibles comme le transfert de fichiers, le chat...
d) Quel est le format d’une adresse IP ? À quoi sert-elle ?
Une adresse IP est constituée de quatre parties :
X.X.X.X (avec X compris entre 0 et 255 = 28).
Une adresse IP permet d’identifier une machine sur internet.
e) Quel type de serveur permet de faire le lien entre une adresse IP et un nom (ce qui vous
permet de taper dans votre navigateur www.google.fr plutôt que 209.85.148.147) ?
DNS : Domain Name System.
Amusez-vous à ouvrir une fenêtre de commande (tapez cmd dans la recherche de pro-
grammes sous Windows, par exemple) et tapez la commande suivante :

ping www.google.fr

Corrigés des
exercices
Vous pouvez remplacer www.google.fr par n’importe quel autre site.
Vous obtiendrez la véritable adresse IP du site. Ensuite, dans un navigateur, au lieu de
Page 102 taper le nom, vous pouvez vous amuser à taper l’adresse IP. Vous obtiendrez le même
site.
f) Un serveur de données et un serveur de traitements peuvent-ils être sur le même
ordinateur ?
Oui. Il ne faut pas confondre programme serveur et machine serveur. Cependant, suivant
la puissance et la capacité mémoire attendues par le programme serveur, il est préférable
de l’installer sur une machine serveur qui lui est dédiée.
g) Une page statique peut-elle contenir des informations provenant d’une base de don-
nées ?
Non. Le principe d’une page statique est justement qu’elle ne contient pas d’informa-
tions provenant du serveur. Une base de données est forcément configurée côté serveur.
h) Lorsque vous demandez à voir le code source d’une page dans un navigateur (généra-
lement en faisant clic droit sur une page et en demandant d’afficher le code source),
vous pouvez voir : du HTML ? du JavaScript ? du PHP ?
HTML : oui.
JavaScript : oui.
PHP : non (le code PHP est interprété côté serveur et ce n’est que le résultat, sous forme de
HTML ou de JavaScript, qui est envoyé au client et affiché dans le navigateur).

8 2946 TG PA 00
Séquence 2
Exercice 1

1. Faites une comparaison détaillée entre le cahier des charges présent dans le TP 1 (qui
ici ne contient que les objectifs) et l’application finale. Donnez la liste des fonction-
nalités manquantes ou mal adaptées.
• La liste des liens favoris est limitée à deux : ce n’était pas spécifié.
• L’espace perso ne comporte pas la visualisation des factures.
Il n’y a que ces deux points qui ne correspondent pas ou mal au cahier des charges.
2. En vous aidant de vos connaissances sur les IHM (vues dans le module 2944) et de
votre sentiment personnel, répondez aux questions suivantes :
a) Sur la page index, pourquoi la zone d’identification n’est-elle peut-être pas position-
née à un endroit judicieux ?
Rappelez-vous que le regard va du coin haut gauche au coin bas droit. Cela signifie que
l’identification est l'une des premières informations que l’on voit. L’internaute va donc
rapidement penser qu’il va devoir s’inscrire et cet aspect peut le faire fuir.
Il serait préférable de positionner ce calque plus vers la droite et vers le bas.
b) Toujours sur la page index, que pensez-vous du défilement des news et des images ?
Il y a trop de défilement et en plus dans deux sens différents. Cela finit par faire trop
gadget et par être visuellement fatigant.
Il serait préférable de garder le défilement des news pour accrocher le regard et trouver
Corrigés des
une autre solution pour la bande d’images. Par exemple, pourquoi ne pas faire un sys- exercices
tème de fondu d’images pour passer de l’une à l’autre ?
c) Quel est le problème au niveau des liens favoris ? Page 103

En passant la souris dessus, ils disparaissent. Les liens sont normalement configurés pour
tous apparaître de la même façon. Par défaut ils sont soulignés mais, ici, leur présenta-
tion a été modifiée dans le CSS. Si vous passez la souris sur le menu, vous voyez que les
différents titres, qui sont aussi des liens, apparaissent en blanc. C’est parce qu’ils appa-
raissent aussi en blanc sur fond blanc dans la zone des liens favoris qu’ils ne sont plus
visibles.
d) Les différentes pages suivent-elles le même principe de présentation ?
Globalement oui.
On remarque que le haut et le bas de chaque page sont identiques. De plus, excepté la
page d’accueil qui est naturellement un peu spéciale, les autres pages sont formatées de
la même façon. Du coup l’internaute sait où trouver les informations et s’habitue rapi-
dement au fonctionnement global.
e) Lors de la visualisation en plus grand des petites images (dessins du tee-shirt ou
images dans la boutique), il y a un problème. Lequel ?
Le problème concerne la visualisation des images qui sont vers le bas. L’image grandie
sort du cadre du site et apparaît tronquée.

8 2946 TG PA 00
 Exercice 2

1. Expliquer le 0,n qui se trouve du côté de COMMANDE. Par quoi vous paraît-il judicieux
de le remplacer ?
0,n signifie que, pour une commande, il peut y avoir 0 à plusieurs articles. Pourtant, si
une commande est enregistrée, c’est qu’il y a forcément au moins un article commandé.
Il paraît plus logique de remplacer le 0 par un 1.
2. Par rapport au cahier des charges, dites quel attribut est en trop et pourquoi.
Le cahier des charges précise que les articles sont uniques. Il n’y a donc pas plusieurs
exemplaires d’un même article. Donc la quantité n’a aucun sens : c’est cet attribut qu’il
faut enlever.
3. Modifiez le schéma pour prendre en compte les deux remarques précédentes.

CLIENT
COMMANDE
numclient 1,1
nom numcommande
0,n datecommande
prenom
adr1 livraisonok
adr2
cp 1,n
ville
infoslivraison
tel 1,1
mail
login
(R)
Corrigés des mdp
exercices LIGNECOM
nomarticle
Page 104

Exercice 3
Lancez la page de phpMyAdmin, sélectionnez la base de données Boutique.
À gauche, sélectionnez la table lignecom.
Dans la zone du milieu où la liste des attributs apparaît, cliquez sur le X rouge qui se
trouve dans la partie "Action" et sur la ligne de l’attribut "qte".
Une fenêtre s’ouvre, vous proposant d’exécuter la requête suivante :
ALTER TABLE lignecom DROP qte
Cette requête permet effectivement de modifier (ALTER) la table lignecom en suppri-
mant (DROP) l’attribut qte. Si vous aviez exécuté cette requête directement, vous auriez
obtenu le même résultat. Cliquez sur OK.
Vous remarquez que l’attribut a été supprimé.

8 2946 TG PA 00
Exercice 4
Si vous avez fait le travail demandé dans le fascicule de TP, vous n’avez pas dû avoir de
mal à trouver le code à modifier.
Cependant, l’analyse de l’application permet de repérer la méthodologie globale adop-
tée :
Vous remarquez, dans le dossier de l’application, que les pages se trouvent en racine,
puis que chaque dossier permet la séparation de fichiers d’un type précis.
Puisque les pages principales se trouvent en racine, allons voir directement le code de la
page tshirt.php.
Les commentaires permettent de repérer les grandes parties de la page.
Le code est disposé dans l’ordre des grandes parties de la page. C’est donc relativement
facile à repérer. Le code concerné est le suivant :
<!-- validation -->
<div id="divValidation">
<input id="cmdValid" type="button" value="Enregistrer" />
</div>

Vous remarquez, dans la balise du bouton, qu’il y a l’attribut "value". C’est cet attribut
qui est incorrect. On ne veut pas affecter de valeur au bouton puisqu’il contient une
image (de toute évidence par le CSS). En revanche, il faut remplacer "value" par "alt".
Dans la norme W3C, le "alt" est obligatoire et permet d’afficher une information dans
le cas où l’image n’est pas trouvée.
Il faut réaliser la même modification dans la page perso.php. Corrigés des
exercices

Page 105

8 2946 TG PA 00
 Séquence 3
Exercice 1
Dans cet exercice, même si vous avez la description détaillée des objets graphiques ainsi
que leur rôle, l’interface n’est pas présentée et n’est pas demandée. Cependant il n’est
pas nécessaire d’avoir l’interface pour écrire le code demandé.
Une seule procédure événementielle était demandée : lorsqu’un élément de la liste
lstGenre est sélectionné (donc sur le clic de la liste).
La correction qui va suivre contient les commentaires nécessaires pour la compréhension
de la démarche. Cependant, voici une petite explication sur la concaténation utilisée
pour la première requête. On désire obtenir la liste des DVD (plus précisément le n°dvd,
le titre et la durée) dont le genre a été sélectionné dans lstGenre. Imaginons que l’on
cherche les DVD du genre "aventure", cela donnerait la requête suivante :
"select n°dvd, titre, duree from DVD D, Genre G where D.n°genre = G.n°genre
and libelle = 'aventure'"

Remarquez bien que 'aventure' a été entouré de cotes (') car il n’est pas possible d’utili-
ser les guillemets (") déjà utilisés pour délimiter l’ensemble de la requête. Il se trouve que
'aventure' est une chaîne, donc il faut forcément l’entourer de guillemets ou de cotes.
Maintenant, imaginons que 'aventure' soit contenu dans une variable appelée genre.
Il faut alors faire une concaténation de chaîne pour récupérer le contenu de genre et le
mettre à la place de 'aventure' :
Corrigés des "select n°dvd, titre, duree from DVD D, Genre G where D.n°genre = G.n°genre
exercices
and libelle = '"+genre+"'"

Page 106
Remarquez bien le principe : après la cote ('), je ferme les guillemets (") de ma chaîne
générale afin de concaténer (+) le contenu de la variable genre, puis je concatène à nou-
veau (+) un dernier bout de chaîne entre guillemets. Le dernier bout de chaîne contient
en fait la dernière côte (') qui est censée entourer le contenu de la variable genre.
Prenez le temps de bien comprendre.
Dans l’exercice, on va remplacer genre par l’élément sélectionné dans la liste, donc :
"select n°dvd, titre, duree from DVD D, Genre G where D.n°genre = G.n°genre
and libelle = '"+lstGenre.element[lstGenre.numSelect]+ "'"

Maintenant que vous avez compris le principe, voici l’algo dans sa totalité :

8 2946 TG PA 00
procedure lstGenre_clic()
cdvd, cpret : curseur
debut

//--- curseur récupérant les dvd du genre sélectionné ---

cdvd.init("select n°dvd, titre, duree from DVD D, Genre G where
D.n°genre = G.n°genre and libelle = '" + lstGenre.element[lstGenre.
numSelect] + "'")
cdvd.ouvrir()

//--- la liste des dvd est vidée ---

lstTitredvd.Vider()
//--- boucle sur le curseur pour remplir la liste ---
tantque non cdvd.eof
lstTitredvd.Ajouter(cdvd.champ("titre"))
cdvd.allerSuivant()
fintantque

//--- repositionnement sur la première ligne du curseur ---

cdvd.allerPremier()

//--- si le curseur n’est pas vide (il y a au moins un dvd) --

si non cdvd.eof alors

//--- sélection du premier élément de la liste des dvd ---

Corrigés des
lstTitredvd.numSelect Å 1 exercices

//--- les labels sont valorisés --- Page 107

lblTitre.titre Å cdvd.champ("titre")
lblDuree.titre Å str (cdvd.champ("duree"))
lblGenre.titre Å lstGenre.element[lstGenre.numSelect]

//--- curseur pour savoir si le dvd est actuellement loué -

cpret.init("select * from Prêt where date_retour = NULL and n°dvd
= " + str(cdvd.champ("n°dvd")))
cpret.ouvrir()

//--- valorisation de la case à cocher ---

chbEmprunt.selectionné Å non cpret.eof

//--- fermeture du curseur cpret ---

cpret.fermer()

finsi

//--- fermeture du curseur cdvd ---

cdvd.fermer()
fin

8 2946 TG PA 00
 Exercice 2

Cet exercice reprend les notions précédemment abordées, excepté le principe de la liste
cachée. Dans les listes et les combos, il est possible de remplir une seconde liste invisible
dont les indices vont fonctionner sur le même principe que la liste visible. Du coup, ces
listes cachées sont bien pratiques pour enregistrer les clés primaires correspondant aux
valeurs affichées dans les listes visibles.
a) Procédure événementielle sur le chargement de la fenêtre
Avec un curseur, il faut récupérer les catégories pour remplir le combo. Cet aspect est la
mise en pratique directe de l’exemple vu dans le cours. En parallèle, il fallait aussi remplir
la liste cachée avec les clés primaires. Remarquez au passage que la méthode ajouter ne
s’applique qu’à la liste visible. La liste cachée se remplit donc de façon traditionnelle, en
valorisant directement la case du tableau de l’indice voulu.
procedure frmGalerie_chargement()
cCateg : curseur
debut
cCateg.init("select * from Categorie")
cCateg.ouvrir()
tantque non cCateg.eof
cboCategorie.ajouter(cCateg.champ("libellé"))
cboCategorie.invisible[cboCategorie.nbLigne] Å cCateg.
champ("n°categorie")
cCateg.suivant()
fintantque
Corrigés des cCateg.fermer()
exercices
fin

Page 108 b) Procédure événementielle sur le clic d’une petite image

Il suffit de transférer l’image de la petite case vers la grande (en utilisant l’index reçu en
paramètre). Si l’image n’est pas vide, alors il faut la redimensionner avec un coefficient
multiplicateur. Pour passer de 60 pixels à 240, il faut multiplier par 4.
procedure imgPetit_clic(Index:entier)
debut
imgGrand.image Å imgPetit[Index].image
si imgGrand.image <> "" alors
imgGrand.scale(4)
finsi
fin

c) Procédure non événementielle qui permet d’afficher les 9 miniatures à partir d’un
rang précis
Avec un curseur, il faut dans un premier temps récupérer toutes les images de la catégorie.
Ensuite il faut avancer dans le curseur jusqu’à ce qu’on se positionne sur le bon rang (cor-
respondant à la valeur passée en paramètre) sans pour autant dépasser la fin du curseur.
Puis il faut boucler dans le curseur pour récupérer 9 images (ou moins si on atteint la fin
du curseur) pour les afficher. Il ne reste plus qu’à appeler la procédure événementielle sur
le clic de la première image en miniature, pour l’afficher en grand.

8 2946 TG PA 00
 procedure affiche9(debut:entier)
cImg : curseur
debut

//--- récupération de toutes les images de la catégorie ---

cImg.init("select nom from Image where n°categorie = " + str(cboCategorie.
invisible[cboCategorie.numSelect])
cImg.ouvrir()

//--- positionnement sur la bonne image dans le curseur ---

k Å 1
tantque k<debut et non cImg.eof
k Å k + 1
cImg.suivant()
fintantque

//--- affichage de 9 images (maximum) ---

kÅ 1
tantque k<=9 et non cImg.eof
imgPetit[k].image Å cImg.champ("nom")
k Å k + 1
cImg.suivant()
fintantque

//--- efface les images restantes ---

tantque k<=9
Corrigés des
imgPetit[k].image Å ""
exercices
k Å k + 1
fintantque Page 109
//--- ferme le curseur ---
cImg.fermer()

//--- exécute la procédure sur le clic de l’image 1 ---

imgPetit_clic(1)
fin

d) Procédure événementielle sur le clic du bouton suivant

Compte tenu de la procédure précédente, le code est très simple : il suffit de modifier le
contenu de la variable globale puis d’appeler affiche9 avec le bon paramètre.
procedure cmdSuivant_clic()
debut
numActuel Å numActuel + 9
affiche9(numActuel)

fin

8 2946 TG PA 00
 Séquence 4
Exercice 1
a) En utilisant la classe Assert donnée plus haut, dites tous les tests qui vous semblent
nécessaires pour une couverture de code correcte (ne donnez pas les résultats des
tests).
Puisque le code contient un test, il faut contrôler le cas 0. De plus, la boucle commençant
à 2, il paraît logique de contrôler le cas 1 (qui ne fait pas partie de la boucle). Enfin, il
faut contrôler une valeur quelconque à partir de 2.
Les tests seront donc les suivants :
Assert.estVrai(fact(0) = 1, "erreur pour 0")
Assert.estVrai(fact(1) = 1, "erreur pour 1")
Assert.estVrai(fact(5) = 120, "erreur pour 5")

b) Faites le test avec n = 2 puis avec n = 3 et dites ce que vous pensez de ces résultats
et le problème que cela soulève.
Le test avec 2 est correct alors que le test avec 3 ne l’est pas. Cela remet en cause les tests
que l’on s’était fixés. En effet, dans la question précédente, le dernier test devait porter
sur une valeur quelconque à partir de 2. On aurait très bien pu prendre 2 et du coup on
n’aurait pas vu l’erreur... En effet l’Assert avec 3 ou avec 5 renvoie une erreur. Cela nous
pousse à penser que les bornes d’une boucle doivent être prises comme des cas particu-
Corrigés des liers à tester. Cependant, il peut rester des cas particuliers cachés : il est toujours bon de
exercices faire plusieurs tests de valeurs quelconques. Dans cet exemple, l’erreur vient du fait que
dans la boucle, au lieu de multiplier par k, on multiplie par n. Du coup on obtient non
Page 110 pas une factorielle mais une puissance. Et il se trouve que 2! donne le même résultat que
21. D’où ce résultat trompeur.
Voici donc tous les tests qu’il est préférable de faire, avec leurs résultats respectifs :
Assert.estVrai(fact(0) = 1, "erreur pour 0")
// résultat : erreur pour 0
Assert.estVrai(fact(1) = 1, "erreur pour 1")
// résultat :
Assert.estVrai(fact(2) = 2, "erreur pour 2")
// résultat :
Assert.estVrai(fact(5) = 120, "erreur pour 5")
// résultat : erreur pour 5

Effectivement, le cas 0 a été mal traité puisqu’il est précisé dans le sujet que, par conven-
tion, 0! = 1. La fonction retourne n donc 0.
c) Apportez les corrections nécessaires et faites un contrôle de non-régression.

8 2946 TG PA 00
Voici les corrections à apporter :
fonction fact (n : entier) : entier
result : entier
debut
si n = 0 alors
retourner 1
sinon
result Å 1
pour k de 2 à n
result Å result * k
finpour
retourner result
fin

Le contrôle de non-régression consiste à relancer tous les tests. Cette fois les tests n’af-
fichent aucun message.

Exercice 2
Le problème essentiel de ce type de sujet est la compréhension du contexte. Il y avait un
certain nombre d’informations à traiter. Pourtant, au final, les notions abordées et les
questions sont très simples. Il fallait aussi se plonger dans le code, même très court, mais
qui faisait tout de même appel à un dictionnaire.
1. Expliquer la cause de l’échec du test unitaire
La méthode ajoutRelevé() appelle la méthode ajouter du Dictionnaire ; les spécifications Corrigés des
exercices
de la classe Dictionnaire précisent que si la clé est déjà présente, le nouvel élément (clé,
valeur) remplacera l’élément existant. L’élément conservé est donc (laDate, 5) parce que le
Page 111
test est réalisé avant le cumul avec les heures déjà enregistrées.
2. Réécrire le corps de la méthode ajoutRelevé() afin de corriger l’erreur
Le problème vient du fait que la durée déjà enregistrée pour ce jour, si elle existe, n’est
pas prise en compte.
Il faut donc ajouter la durée passée en paramètre à la durée déjà enregistrée avant de
contrôler que la limite de 8 heures est atteinte :
Procédure ajoutRelevé(jour : Date, nbHeures : entier)
Début
si relevéHoraire.existe(jour)
nbHeures Å nbHeures + relevéHoraire.donnerValeur(jour)
finsi
si nbHeures <= 8 alors
relevéHoraire.ajouter(jour, nbHeures)
sinon
relevéHoraire.ajouter(jour, 8)
finsi
Fin

8 2946 TG PA 00
 Exercice 3
Il suffit de préciser le rôle de la fonction, ces deux paramètres et le type retourné :
/**
* retourne la plus petite des 2 valeurs initiales
* @param réel val1 première valeur à comparer
* @param réel val2 seconde valeur à comparer
* @return réel
*/

Corrigés des
exercices

Page 112

8 2946 TG PA 00