II. PASSAGE D'UN ALGORITHME GRAPHIQUE VERS UN ALGORITHME LITTÉRAL▲
II-A. Méthodologie▲
Nous voici enfin dans le quasi concret. Nous apprendrons dans ce chapitre comment coder dans un langage accessible, formaté en PHP. C'est-à-dire qu'il prendra en compte la façon dont est parsée une page PHP. L'objet action rouge y est pour quelque chose.
II-A-1. Exemple de traduction▲
Dans l'exemple de la porte, il faut prendre en compte que la page PHP qui affichera cet exemple sera au début disons un bouton sur lequel il faudra cliquer pour faire l'action « frapper à la porte ». On aura donc une situation d'origine avec n=0, et un stand-by devant la porte. Cette situation en mode veille sera représentée par une action en rouge. On a d'autres situations de même type dans notre algorithme, et ces dernières seront représentées aussi par des rectangles en rouge. Voilà ce que ça donne :
La traduction en algorithme littéral est tout simplement la lecture à haute voix de cet algorithme graphique,
dans un langage qui utilise les si, sinon, et pour les actions : écrire, et demander. On aura aussi
les boucles usuelles. Il va sans dire que ça coule de source. Voilà la traduction :
0
->
n ;
répéter
attendre la frappe;
n +
1
->
n ;
attendre 10
secondes;
si réponse =
"entrez"
écrire "vous êtes entré"
;
3
->
n ;
sinon
si n >
2
écrire "vous êtes parti"
;
jusqu'à n >
2
;
Il s'agit ensuite de construire la structure algorithmique de l'algorithme graphique. Nous avons numéroté chaque situation (action effectuée) afin de pouvoir les localiser dans l'algorithme littéral. Nous serons ainsi en possession de toutes les situations possibles déterminées dans l'algorithme graphique. Notre algorithme littéral deviendra ainsi :
0
->
n;
0
->
step;
répéter
attendre la frappe;
n +
1
->
n;
attendre 10
secondes;
1
->
step;
si réponse =
"entrez"
écrire "vous êtes entré"
;
3
->
step;
3
->
n;
sinon
2
->
step;
si n >
2
écrire "vous êtes parti"
;
4
->
step;
3
->
n;
jusqu'à n>
2
;
Ceci vous permettra aussi avec un CTRL+F + "3" de trouver instantanément l'action numéro 3 dans votre algorithme littéral. Pensons maintenant PHP. Une fois l'action de frapper à la porte effectuée, la page porte.php sera resollicitée et parsée depuis le début. Donc le passage de ce code en PHP ne tient pas. La variable n sera nulle et le résultat escompté sera différent de celui recherché, dès lors qu'on traduit « frapper à la porte » par un bouton de formulaire. Par conséquent, pour se positionner dans la bonne branche de notre algorithme littéral, il faudra alors, avec deux variables POST, positionner le début du parsage à l'endroit correspondant de notre algorithme graphique. Les variables POST indiqueront :
- le numéro de l'action d'où on vient ;
- le numéro de l'action où on va.
Nous allons à présent coder de manière rigoureusement structurée ce programme, en prenant en compte les variables POST. Mais n'allons pas trop vite et restons dans l'algorithme littéral. Créons une fonction action pour traiter chacune des actions en fonction des variables POST step et previous_step. Le corps du programme consistera ensuite tout simplement en une implémentation de la structure de l'arbre.
Fonction action(step, previous_step)
{
SELON step, previous_step
CAS step =
0
:
n ->
0
;
S ->
0
;
NS ->
1
;
fin;
CAS step =
1
:
écrire "porte frappée"
;
n +
1
->
n;
fin;
CAS step =
2
:
attendre 10
secondes;
2
->
S;
3
->
NS;
fin;
CAS step =
3
:
écrire "vous êtes entré."
;
0
->
S;
0
->
NS;
fin;
CAS step =
4
:
écrire "vous êtes parti."
;
0
->
S;
0
->
NS;
fin;
}
SELON (PS,S)
CAS PS =
0
action(0
);
fin;
CAS PS =
2
, S =
3
:
CAS PS =
0
, S =
1
:
action(1
);
action(2
);
si réponse =
"entrez"
action(3
);
sinon
si n>
2
action(4
);
fin;
Pour la fonction action :
Step : numéro de l'action à effectuer ;
previous_step : action d'où l'on vient. On n'en a aucune utilité ici, mais ça nous servira
par exemple pour effectuer la même action avec un message différent ;
NS : POST à envoyer correspondant au numéro de l'action envisagée (« Next Step » abrégé) ;
S : POST à envoyer correspondant au numéro de l'action effectuée.
Pour le corps du programme :
PS : POST récupérée correspondant au numéro de l'action d'où on vient (« Previous Step ») ;
S : POST récupérée correspondant au numéro de l'action où on veut aller.
Fonction action
Je me suis permis d'enlever les variables S et NS pour le cas de « 1 » car l'action
effectuée entraine automatiquement la deuxième et on néglige l'absence de la porte. Assez déconseillé
car on aura peut-être besoin de changer les algorithmes initiaux à l'avenir, pour un programme
plus sérieux.
Pour les cas « 3 » et « 4 », je les ai mis chacun à zéro pour arrêter la boucle. (cas « 0,0 » non traité
dans le corps du programme).
Corps du programme
Pour le cas « 2,3 » acheminé vers « 0,1 », il s'agit de la branche faisant reboucler depuis l'action
effectuée « 2 » vers l'action à effectuer « 1 », les conditions ayant dirigé depuis leur symbole « non ».
Prière de ne pas prendre le concept d'une variable POST comme un élément intrinsèque d'algorithmique. C'est une variable réservée au langage PHP que je me permets d'utiliser dans un langage de profane. Tout comme la nouveauté du rectangle rouge symbolisant l'action en « stand-by » dans l'algorithme graphique. Ce sont les deux clés magiques des portes situées entre le monde PHPland et algoland.
II-A-2. Passage en PHP▲
Pour coder concrètement cet algorithme en PHP, nous utiliserons une variable aléatoire pour tester la
réponse de la personne à visiter. Il nous faudra aussi rajouter quelques fioritures pour le confort
de l'interface, sans nécessairement avoir à changer les algorithmes graphiques.
Code PHP final :
<?php
Function
action($step
,
$previous_step
=
false
)
{
global
$S
,
$NS
,
$n
,
$message
;
$chaine_switch
=
($previous_step
==
false
) ?
$step
:
$step
.
","
.
$previous_step
;
switch
($chaine_switch
)
{
case
"0"
:
$n
=
0
;
$S
=
0
;
$NS
=
1
;
break
;
case
"1"
:
$message
.=
"Porte frappée. <br />"
;
$n
++;
break
;
case
"2"
:
usleep(10000000
);
// bon le programme n'est pas parfait mais ce cahier des charges n'a pas beaucoup d'intérêt. ^^
$S
=
2
;
$NS
=
3
;
break
;
case
"3"
:
$message
.=
"Vous êtes entré."
;
$n
=
4
;
$S
=
0
;
$NS
=
0
;
break
;
case
"4"
:
$message
.=
"Vous êtes parti."
;
$n
=
4
;
$S
=
0
;
$NS
=
0
;
break
;
}
}
$message
=
""
;
if
(isset($_POST
[
'step'
]
)) $PS
=
$_POST
[
'step'
];
else
$PS
=
0
;
if
(isset($_POST
[
'next_step'
]
)) $S
=
$_POST
[
'next_step'
];
else
$S
=
0
;
if
(isset($_POST
[
'n'
]
)) $n
=
$_POST
[
'n'
];
else
$n
=
0
;
$chaine_switch
=
$PS
.
","
.
$S
;
// structure de l'arbre
switch
($chaine_switch
)
{
if
(isset($_POST
[
'n'
]
)) $n
=
$_POST
[
'n'
];
else
$n
=
0
;
case
"0,0"
:
action(0
);
break
;
case
"2,3"
:
case
"0,1"
:
action(1
);
action(2
);
$message_digit
=
mt_rand(0
,
1
);
$reponse
=
($message_digit
==
1
) ?
"entrez"
:
""
;
if
($reponse
==
"entrez"
)
{
action(3
);
}
else
{
$message
=
"Personne."
;
if
($n
>
2
) action(4
);
}
break
;
}
echo $message
;
?>
<
form action=
'
./porte.php
'
method=
'
post
'
>
<
INPUT TYPE=
HIDDEN NAME=
"
step
"
VALUE=
"
<?php echo
$S
?>
"
>
<
INPUT TYPE=
HIDDEN NAME=
"
next_step
"
VALUE=
"
<?php echo
$NS
?>
"
>
<
INPUT TYPE=
HIDDEN NAME=
"
n
"
VALUE=
"
<?php echo
$n
?>
"
>
<?php
if
($n
<
4
)
{
?>
<
input type=
'
submit
'
value=
"
frapper à la porte
"
/>
<?php
}
?>
</
form>
global : ceci est nécessaire pour passer les variables en global, afin de les prendre en
compte dans les fonctions.
$n = 4 : le cas « 0,0 » étant traité dans le corps du programme, on a
recours à cette affectation pour enlever le bouton, i.e. stopper la boucle.
Ce programme n'ayant qu'une fin théorique, prière de ne le faire fonctionner qu'en local, car j'ai occulté tout ce qui concerne les entêtes HTML et n'ai utilisé aucun CSS.
Voilà on arrive enfin au code PHP. On a fait le plus difficile... avant le TP. Mais rassurez-vous, c'est le même refrain.
II-B. Énoncé du TP▲
Solidifions tout ça en nous appuyant sur une application pertinente, qui est celle de la partie gestion
des identifiants d'un compte personnel sur un site. Je vais vous fournir toutes les données de l'exercice,
et les parties qui suivront traiteront d'abord de l'algorithme graphique qui en découle, puis l'algorithme
littéral et le code PHP final. Vous serez ainsi en possession de votre code, et de votre dossier
depuis lequel il sera miraculeusement facile de changer ou d'ajouter ce que vous voulez sur votre
site par cette méthode.
Il s'agit donc de concevoir la partie d'un site s'occupant de gérer l'identification du compte d'un
membre. On va voir en détail toutes les données d'entrée à avoir pour restituer les données de sortie
en fonction de données externes ou déjà fournies (données de contrôle). Les données de sortie seront
donc déterminées selon les données de contrôle et d'entrée. Nous allons construire l'algorithme
graphique où seront représentées toutes les situations de sortie possibles (représentées par des
actions rouges) dictées par le cahier des charges, i.e. l'énoncé du TP.
II-B-1. Présentation▲
Voici les aperçus de ce que doit donner ce gestionnaire de compte. Procédons par onglet. On aura les onglets : Connexion, Inscription, Déconnexion. Ils comprendront plusieurs choix possibles en rapport avec leur thème. Voici les options possibles pour chaque onglet :
II-B-1-a. Connexion▲
- Connexion automatique - ceci permettra à l'utilisateur de ne pas avoir à entrer ses identifiants à chaque fois qu'il se connecte sur le site ;
- liens - lien direct vers la partie de traitement d'oubli des identifiants ;
- liens du message d'accueil - le message d'accueil sera en fonction d'où on vient et comprendra éventuellement un lien vers l'inscription ou bien vers la section qui traite de l'oubli des identifiants.
II-B-1-b. Inscription▲
- Liens du message d'accueil - Le message d'accueil sera en fonction d'où on vient et comprendra éventuellement un lien vers la connexion ou l'oubli des identifiants.
II-B-1-c. Déconnexion▲
- Se déconnecter - bouton menant vers l'onglet connexion après déconnexion de la session.
- Se désinscrire - bouton menant vers l'onglet connexion après la déconnexion/désinscription du membre.
- Mon profil - bouton menant vers la gestion de profil du membre (non traité).
- Liens du message d'accueil - Le message d'accueil sera comme dans l'image et comprendra le lien vers la consultation du profil de l'utilisateur (partie non traitée).
II-B-2. Fonctionnement▲
II-B-2-a. Introduction▲
- Lorsqu'un individu lambda arrive sur le site, cette partie s'affichera si : son IP n'est pas bannie ; son pseudo de session ou de cookie n'est pas celui d'un banni. Pour les deux cas, on incrémentera une variable entière SQL correspondant au pseudo banni, et on effacera ses cookies.
- Si pour l'individu, la session existe encore, la connexion sera automatique.
- Sinon, s'il avait coché connexion automatique, la connexion sera automatique, et on ajoutera une visite de l'individu dans une table SQL, avec la date.
La partie bannissement d'un utilisateur n'est pas traitée, donc si vous voulez tester les cas bannis, il vous faudra passer par des requêtes SQL sur phpmyadmin du site sur lequel vous travaillez.
II-B-2-b. Connexion▲
- Si le pseudo rentré est introuvable, recommencer depuis ce même onglet et mettre un message d'erreur comportant des liens vers identifiants oubliés ou inscription.
- Idem pour mot de passe incorrect.
- Si tout est bon, créer une session personnalisée avec le pseudo, puis éventuellement s'en souvenir si connexion automatique est cochée. Enfin, on ajoutera une visite de l'individu dans une table SQL, avec la date.
II-B-2-c. Inscription▲
- En cas d'erreur, si l'e-mail avait été saisi, ce dernier sera prérempli dans la case e-mail.
- Stipuler si le pseudo ou l'e-mail est déjà présent dans la table des bannis ou des membres, et on recommence. Conformité de l'e-mail à tester.
- Si tout est bon, on demande à l'utilisateur d'activer son compte en consultant le message envoyé sur sa boite mail. Le message contiendra un lien vers cette page, et les identifiants de l'utilisateur. Ce dernier cliquera sur le lien, et son compte sera activé si on sait qu'il vient de sa boite mail.
Ce principe d'activation de compte empêche assez efficacement les spammers de s'inscrire dans votre site. Il est fait d'une URL vers le site faisant intervenir une chaine de caractères aléatoire comme ?var_link=mqsoidunrmqsiocsdfqclnsk.
II-B-2-d. Déconnexion▲
No comment.
II-B-2-e. Oubli d'identifiants▲
Les mots de passe des utilisateurs seront cryptés. Il faudra donc :
- rentrer son e-mail via un textbox (en boucle tant que l'e-mail n'est pas le bon avec dans le message d'erreur un lien vers connexion (depuis un autre compte)) ;
- effacer dans la table des membres la ligne correspondant à l'e-mail rentré ;
- procéder de la même manière qu'une inscription normale avec pour identifiants : pseudo = e-mail de l'utilisateur, mot de passe = chaine aléatoire d'un nombre suffisant de caractères.
Cette partie peut paraître un peu en trop vu que l'utilisateur pourrait lui-même se réinscrire. Mais des fonctionnalités supplémentaires (non demandées dans ce TP) telle que la récupération des données de son profil pourront être traitées en passant par là.
Suite : solution du TP : algorithme graphique avec liste des variables utilisées.