Semaine du 19 au 23 janvier

Journal de stage : semaine du lundi 19 au vendredi 23 janvier 2015

Voici mes entrées de journal pour cette deuxième semaine de stage. Lors de cette semaine je vais rapidement terminé la partie analyse et je commencerais le développement web.

► Lundi 19 janvier 2015

Dans la matinée j’ai finalisé mes diagrammes de cas d’utilisations, je les ai finalement découpé par acteur, de façon à ce que cela soit plus clair. J’ai également beaucoup détaillé mes cas d’utilisations avec des points d’extensions. Je pense que mes diagrammes sont a peu près compréhensible pour n’importe qui, et sont complet d’un point de vue analyse.

Après avoir finalisé mon rapport de réunion, je l’ai envoyé par mail à tout le monde lors de la matinée.

J’ai ensuite commencé le développement, en refaçonnant l’interface. Ce sera donc beaucoup de CSS dans un premier temps pour aller de plus en plus vers du PHP. J’ai appris les bases de PHP Objet par moi même, je vais essayer de développer une partie de mes amélioration grâce à lui si je trouve que le besoin de passer en objet est nécessaire.

J’ai commencé par le commencement, j’ai créé le début de la nouvelle barre de menu et refait le CSS global de façon brève, je continurais les feuilles de styles au long du développement. Je me suis souvenu que les mots de passe n’était pas crypté et stocké en clair dans la base de données. Il faudra que j’explore cette piste pour demain.


► Mardi 20 janvier 2015

Aujourd’hui j’ai directement commencé par étudié comment le script PHP de connexion à l’application se faisait, et dans un deuxième temps pour pouvoir crypter les mots de passe. Après une rapide lecture je m’aperçois que le fichier fais des redirections sur deux autres fichiers pour fonctionner, un peu comme le principe d’une fonction. J’ai donc tout réunis sur une seul page, j’ai épuré le code des commentaires inutiles et réécris ce qui n’allait pas. Et ce qui n’allait pas c’était surtout la sécurité, j’ai fais en sorte de protéger le formulaire pour évité les failles XSS et injections SQL en utilisant une petite fonction PHP toute bête.

/**
 * Cette fonction prend une données fourni en paramètre et
 * la formate en vue d'une requête SQL pour prévenir de certaines attaques
 *
 * @param string $data Données de champs de formulaire
 * @return string Données formaté pour la requête SQL
 */
function test_input($data) {
	$data = trim($data);
	$data = stripslashes($data);
	$data = htmlspecialchars($data);
	return $data;
}

Après avoir écrit tout le code proprement, commenté et indenté, j’ai jeter un coup d’œil sur la documentation PHP pour comprendre comment fonctionne la fonction de cryptage crypt().

Après avoir effectué quelque bref tests en affichant des chaînes de caractère passés en paramètre dans cette fameuse fonction, j’ai commencé à créer un script en php seulement qui, une fois exécuté, met à jour la table des mots de passe utilisateurs avec des mots de passe crypté.

J’ai ensuite essayé d’adapter ma page de connexion avec ce nouveau système de cryptage mais cela ne fonctionnais pas. Après quelque recherches, j’ai afficher les mots de passe crypté stocké dans la base de données et je me suis aperçu qu’ils étaient beaucoup plus court que ce qu’il devrai être, j’ai cherché dans la structure de la table, la colonne du mot de passe était un char(20), ce qui est beaucoup trop court pour un champs crypté.

fu

J’ai modifié la colonne en varchar(255), pour la fonction crypt() j’ai besoin de 60 caractères mais la documentation PHP recommande d’utiliser une colonne de type varchar(255). J’ai ajouté la requête (SQL ALTER TABLE) à mon script PHP pour crypté les mots de passe.

En poursuivant sur la documentation PHP j’ai trouvé la fonction password_hash(), qui a apparemment un plus haut niveau de sécurité que crypt(). J’utilise donc cette fonction, cela ne complique pas mon code et la sécurité en est augmentée.

string password_hash ( string $password , integer $algo [, array $options ] )

La fonction password_hash() crée une nouvelle clé de hachage en utilisant un algorithme de hachage fort en une pass.

– php.net

Cette fonction est faite pour fonctionner avec password_verify(), qui elle vérifie si le hashage est bon.

boolean password_verify ( string $password , string $hash )

Personnellement je ne comprend pas bien le fonctionnement du cryptage, avec les notions de « cost », « sels » … Néanmoins avec de tels outils j’ai pus très simplement créer un cryptage fort, sans pour autant en comprendre le fondement.

if ($id_usr == $id_bdd && password_verify($pass_usr, $pass_bdd)) {
  // Connexion à l'appli réussi
}

Une fois la page de connexion totalement fonctionnelle, j’ai terminé la journée en créant l’en-tête de l’application, qui contient la barre de navigation. J’ai été plutôt rapide, je me suis basé sur mes IHM que j’avais créer la semaine dernière, le rendu est plutôt triste mais ma feuille de style s’enrichira petit à petit.

head_v1

J’ai créer l’en-tête grâce à une fonction que j’ai créer, chaque élément du menu (icône + texte) est contenu dans un bloc, de cette façon le menu est très modulaire on peut créer les éléments très simplement, il y a juste a appelé la fonction.

<?php

/**
 * Créé une icône de navigation (iône + label)
 * @param string $label Label placé sous l'icône
 * @param string $icone Nom de l'icône se trouvant dans /atelier/images/iconnav/
 * @param string $action Chemin (lien) vers la page désirée
 * @return string Eléments HTML permettant d'afficher l'icône de navigation (à appeler dans l'en-tête)
 */
function createIconnav($label, $icone, $action) {
	return    '<li class="iconnav">'."\n"
		. '<a href="'.$action.'">'."\n"
		. '<img src="/atelier/images/iconnav/'.$icone.'.png" alt="'.$label.'">'."\n"
		. '<span>'.$label.'</span>'."\n"
		. '</a>'."\n"
		. '</li>';
}

?>

Demain je finaliserais ce menu et je commencerais à refaire le formulaire pour créer (émettre) un ticket.


 ► Mercredi 21 janvier 2015

Pour finaliser ma barre de menu d’hier, afin d’afficher les options nécessaires en fonction du type d’utilisateur connecté (administrateur, agent chef …), je n’ai eu qu’à adapter mon code avec l’ancien, voir même l’améliorer..

[...]

} else {
		
	if($classe == 2){

// On améliore ça 

} elseif($classe == 2){

J’ai ensuite commencé à refaire le formulaire de création d’un ticket, d’abord de façon visuelle puis dans le code, la version précédente passait par plusieurs fichiers (un pour les erreurs, un pour le formulaire et un dernier pour récupérer le formulaire à l’envoie), j’ai tout mis dans une même page et commencé à réécrire le code, et à mettre des commentaires dans le code plus structuré.

form_v1

Je commente mon code en suivant les recommandations de l’API phpDocumentor (http://www.phpdoc.org/), qui permet d’une part de générer une documentation de l’application que l’on créé à partir du code, et d’autre part de poser une « rigueur » dans la façon de placer et mettre en forme des commentaires dans le code.

Encore une fois, je n’ai pas à réfléchir au « design » de la page puisque je l’ai déjà fait de façon approximative avec mes IHM. Je pourrais facilement enrichir la feuille de style du formulaire mais ce n’est pas ce qui compte, la page doit être fonctionnelle d’abord.

En voulant améliorer les scripts de création des listes (<select>) j’ai voulu modéliser la base de données avec le concepteur de phpMyAdmin, et j’ai constater qu’il n’affichait aucune relation entre les tables, j’en ai d’abord déduis qu’il n’y avait pas de clef étrangère, ce qui m’a fait un peu peur … De plus, en regardant en détail les colonnes qui était sensée être des clefs étrangère n’était pas forcement du même type, ce qui confirmait mes déductions …

Mme Fichet est venu me rendre visite dans l’après midi pour se mettre au point par rapport à mon organisation au travail, nous avons convenu de se réunir une fois par semaine ainsi, pour faire un point sur ce qui a été fait, et de ce qu’il reste à faire, pour définir une itération par semaine et ainsi resté organisé. Il a été également convenu qu’il serait bien de donner des rendez-vous à l’équipe de l’atelier afin de les tenir au courant de ce qu’il ce passe et de leur montrer où en est le développement. Peut être même monter un petit serveur de production pour consulter en temps réel où en est le développement ?

J’ai parler de l’absence de clef étrangère dans la base de données à Mme Fichet et qui m’a conseiller de consulter dans les scripts comment était créer les tables, et il s’avère qu’il y a bien des relations de clef étrangère (ouf), du moins l’instruction pour les créées est présent dans le script mais que phpMyAdmin ne me les affichait pas dans son concepteur. Un problème avec le moteur InnoDB apparemment.

Ensuite j’ai fini ma journée en créant un objet « ticket » en PHP objet, comme je ne suis pas encore très à l’aise je n’ai fait que déclarer les attributs, créer les accesseurs et modificateurs et écrire le début d’une méthode pour insérer le ticket dans la base.

Demain je finaliserais mon formulaire d’ajout et je commencerais à faire les pages qui contiennent les listes de ticket.


 ► Jeudi 22 janvier 2015

J’ai terminer mon formulaire d’ajout de ticket, on peut désormais ajouter un ticket via l’application, j’ai repris l’ancien fonctionnement pour décider si le ticket est directement attribué avec une importance et un agent responsable et donc l’ajouter à la base en fonction de ces paramètres, d’après ce que je lis dans le code, je doute que cela fonctionne correctement mais je reviendrais dessus plus tard.

Maintenant je créé mes différentes pages de listes, d’abord la liste de tous les ticket, puis par copie (et une petite modification des requêtes) les listes des autres « fonctionnalités ». J’ai arranger mon algorithme pour qu’il ajoute une ligne dans le tableau HTML contenant uniquement la description, cette ligne sera cachée par défaut.

On m’avait demandé de l’afficher par exemple au survol de la souris, c’est ce que j’ai d’abord fais mais j’ai trouvé ça très agressif pour l’œil, le fait d’afficher une ligne en plus (de re-structuré le tableau en fait). J’ai donc mis cela sur la sélection de la ligne (état ou la souris est pressé), ce n’est pas parfait mais pour l’instant ça ira.

desc_1 desc_2

J’ai essayé de travailler mes sélecteurs CSS pour colorier une ligne sur deux avec un fond légèrement plus foncé, pour bien discerné chaque ligne, ce fut compliqué puisque j’avais ma ligne contenant la description (caché) en plus. Je n’ai pas réussi mais je suis sûr que c’est faisable.

table tbody tr:nth-child(3n + 1):nth-child(1n + 0) {
	background-color: #C8E6C9;
}
Ca ne fonctionne pas ...

J’ai ensuite passé le reste de la journée à créer une fonction pour effectuer cette fameuse fonctionnalité de tri, je ne créé pas de formulaire pour le moment, je passe les arguments en paramètre de façon manuelle dans un premier temps puis quand tout fonctionnera je passerais par un formulaire.

<?php
function trierListeGroup($regroup, array $order_by, $ordre, PDO $pdo) {}
?>

C’est très compliqué, je dois construire en PHP une requête SQL complexe, qui contient plusieurs clause (WHERE, ORDER BY, …) et tout doit être fait selon les paramètres, il ne faut pas non plus oublier le nom des colonnes pour le tableau vus par l’utilisateur … Pour résumé, pour un champs à sélectionné je dois gérer :

  • Une clause INNER JOIN, dans le cas où c’est une clé étrangère
  • Si c’est la colonne de regroupement des résultats, il faut la sortir de la requête (et faire une requête pour chaque valeur de celle-ci)
  • le « libellé », le nom de la colonne en français correct, pour l’affichage utilisateur

Tout fonctionne a peu près il me manque juste quelque INNER JOIN à faire pour le nom des colonnes de regroupement et réussir à la supprimer des champs du SELECT.

colreq

Ici on devrait voir « Basse » au lieu de « 1 », de plus la colonne importance est toujours visible

Pour la semaine prochaine j’améliorerais cette fonction de filtrage, puis je créerais un formulaire pour que l’utilisateur puisse utilisé cette fonction. Enfin je porterais le tout sur les autres pages contenant des listes.


 ► Vendredi 23 janvier 2015

Aujourd’hui c’était la journée de retour au lycée, nous avons rencontré les anciens étudiants de la section et assisté à une conférence sur la cybercriminalité. Donc pas d’entrée de journal aujourd’hui !

⇐ Page de journal pour la semaine précédente

Page de journal pour la semaine suivante ⇒

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *