Semaine du 16 au 20 février

Journal de stage : semaine du lundi 16 au vendredi 20 février 2015

Voici mes entrées de stages pour cette sixième et dernière semaine de stage. Cette semaine je procéderais à quelques améliorations de l’application et je la mettrais sur le serveur de production, prête dans les temps !

 Lundi 16 février 2015

Ce matin j’ai rapidement amélioré le module d’évolutions pour qu’il enregistre les anciennes valeurs des champs modifiés, ce ne fut pas compliqué, j’ai juste eu un peu de mal au début, je voulais passer par un tableau associatif, contenant deux tableau, dont un pour stocké l’intitulé du champ modifié et l’autre pour stocké la valeur du champ modifié. Mais finalement j’en utilise deux distinct puisque je n’ai pas réussi avec le tableau associatif.

<?php

/*
 * Titre
 * -----
 * ~ Requis
 * ~ Pas de condition de validation particulière 
 */
if (empty($_POST["titre"])) {
	$titre_err = TRUE;
} else {

	if ($_POST["titre"] != $titre) {
		$champ_mod[] = 'Titre';
		$champ_lib[] = $titre;
	}

	$titre = test_input($_POST["titre"]);
}

?>

Ensuite Samuel Josseau est passé me voir pour commencer à mettre en place l’application. Nous avons donc commencé par installer la base de données via le phpMyAdmin installé sur le serveur actuel, sauf que lorsqu’on exécutait le script de création de la base, rien ne se passait, l’interface de phpMyAdmin ne réagissait même pas …

Vielle interface de PMA

Vielle interface de PMA

J’ai également mentionné à Samuel que cela serait plus simple si PHP 5.5 était installé, pour le cryptage des mots de passe. Nous avons regardé et la version installée était 5.4, problème en plus donc … J’ai donné le script de création de la base à Samuel et il m’a dit qu’il essayerait de faire les mises à jour et d’installer la base de données depuis le serveur et qu’il repasserait dans l’après-midi lorsque tout sera bon.

En attendant je regarde dans mon application pour peaufiner quelque détails, j’ai ajouté quelques redirections sur mes pages de détails (qu’on obtenait elles-mêmes à partir des listes) même si les listes était bloqué, un utilisateur non-autorisé pouvais accéder aux détails d’un ticket en entrant l’URL manuellement.

<?php

// Si l'utilisateur est un agent
if ($_SESSION['usr_connected']['classe'] == 3){

	$_SESSION['msg'] = "Vous n'avez pas l'autorisation d'accèder à cette page.";
	header('Location: ../accueil.php');
	exit();

}

?>

J’ai également ajouté un message d’erreur spécifique à une erreur de clef étrangère pour les pages d’administration. Désormais quand un utilisateur essaie de supprimé un lieu par exemple, et que ce même lieu possède des références dans d’autres tables de la base, un message d’erreur apparaît et explique à l’utilisateur pourquoi il ne peut pas faire ça.

fk

J’ai amélioré ma page de gestion des utilisateurs, j’ai fait en sorte que le formulaire fonctionne, pour le moment je n’ai pas fait de contrôle sur les champs hormis le contrôle du mot de passe, je demande à ce qu’il soit taper deux fois, et s’il est différent,  le formulaire renvoie une erreur.

idmpd

Désormais sur cette page d’administration on peut voir les utilisateurs, en ajouter et en supprimer. L’idéal serait de découper tous ces fonctionnalités dans des pages différentes afin de bien séparé chaque vue.

Samuel est donc repassé me voir, et apparemment mon script de création de la base utilise une syntaxe trop récente, il n’a pas réussi à l’installer sur le serveur. Donc soit son serveur est trop vieux, soit mon script est trop récent. Ou les deux. Il m’a dit qu’il allait reprendre tout cela de façon propre, et installer le service de virtualisation Proxmox sur son serveur, et ainsi créé un serveur pour chaque service, dont un serveur web pour moi évidement.

Ça à l’air très bien, il m’a dit que ça serait prêt pour demain. De toute façon pour moi j’ai encore quelque test à faire avant la mise en place, donc ça ne me dérange pas d’attendre quelque jours s’il faut, l’application en sera d’autant plus prête.

J’ai fait tous les tests que j’avais en tête pour les accès utilisateurs, et tout me semble en ordre, je referais tous ces tests sur le serveur une fois que tout sera en place.

Comme je pense que tout est à peu près prêt, je vais essayer d’améliorer mon application. J’avais en tête d’afficher en page d’accueil quelques statistiques comme le nombre de ticket total, résolus, etc. et même se permettre une petite folie et afficher un diagramme.

Sortir les données de la base pour afficher des statiques, comme des pourcentages, est quelque chose de vraiment très simple, j’ai rapidement sortis les données nécessaires et je les ai affichés sous formes de listes à puces sur la page d’accueil. Dans un premier temps je faisais une requête pour obtenir un nombre, ce que fait que je faisais 6 ou 7 requêtes sur ma base pour obtenir quelque chiffre, de plus c’est très redondant dans le code. Je pense que c’est améliorable.

stats

Pour un projet de PPE, j’avais déjà créé un script pour créer un diagramme circulaire, il y a juste à fournir les données, les couleurs pour les secteurs et ça fonctionne, je l’ai donc réutilisé. Pour dessiner de façon très simple en HTML il suffit d’utiliser la balise canvas.

The HTML <canvas> element (introduced in HTML5) is a container for canvas graphics.

An HTML canvas is a rectangular area on an HTML page.

Canvas has several methods for drawing paths, boxes, circles, text, and graphic images.

w3schools

Canvas est un conteneur HTML pour dessiner avec javascript sur une page web, c’est vraiment très puissant pour le dessin et avec la liste des méthodes de dessins sous les yeux c’est vraiment un outil abordable.

J’ai donc ajouté un élément « canvas » sur ma page, et appelé ma fonction javascript.

<canvas id="canvas" width="300" height="300">
	Votre navigateur ne supporte pas canvas, pas de diagramme pour vous !
</canvas>
<script type="text/javascript">
	var canvas = document.getElementById('canvas')
	graph(canvas.getContext('2d'), canvas.width, canvas.height, [<?php echo $nb_tickets_attribuer.', '.$nb_tickets_encours.', '.$nb_tickets_attente.', '.$nb_tickets_resolu; ?>]);
</script>

Et voici la fonction, c’est améliorable. Je n’ai pas trop commenté les parties complexe car c’est simplement des mathématiques, il faut juste connaître les radians et savoir comment ils fonctionnent. Je ne vais pas réinventer les maths …

  console.log('graphique.js ouvert')

/**
 * Permet de dessiner un diagramme circulaire
 * @param  {object} ctx     Conexte du canvas, nécéssaire pour dessiner
 * @param  {int} largeur    Largeur du canvas
 * @param  {int} hauteur    Hauteur du canvas
 * @param  {array} donnees  Tableau des données pour dessiner les secteurs
 */
function graph(ctx, largeur, hauteur, donnees) {
  console.log('graph() appelé')

  /**
   * @var {int} rayon Rayon du cercle, -5 pour ne pas qu'il dépasse du canvas
   * @var {int} posx_centre Valeur de la position du centre du canvas sur l'axe horizontal (x)
   * @var {int} posy_centre Valeur de la position du centre du canvas sur l'axe vertical (y)
   * @var {array} couleurs Tableau des couleurs pour les différents secteurs
   */
  var rayon = hauteur / 2 - 5;
  var posx_centre = largeur / 2;
  var posy_centre = hauteur / 2;
  var total = 0;
  var couleurs = ['#2196F3', '#FFEB3B', '#607D8B', '#4CAF50'];

  /*
   * Détermination du total de la somme des valeurs
   */
  for (i = 0; i < donnees.length; i++) {
    total += donnees[i];
  };

  var derniere_part = 0;

  // On déplace le départ à midi
  var quart_cercle = Math.PI / 2;

  /*
   * Si aucune données, on affiche un message
   * Sinon, on affiche le diagramme
   */
  if (total == 0) {
    console.log("Aucune données !");

    ctx.fillText('Aucune données !', posx_centre - 15, posy_centre + 10);
    ctx.font = "30px Consolas";

  } else {
    console.log("il y a des données, on fait une tarte ... Hmmm !")

    for (i = 0; i < donnees.length; i++) {

      ctx.beginPath();

      ctx.fillStyle = couleurs[i];

      ctx.moveTo(posx_centre, posy_centre);

      var part = Math.PI * (2 * donnees[i] / total);
      ctx.arc(posx_centre, posy_centre, rayon, derniere_part - quart_cercle, derniere_part + part - quart_cercle, false);

      ctx.lineTo(posx_centre, posy_centre);

      ctx.fill();
      ctx.closePath();
      derniere_part += part;

    };
  };
};
graphique.js

Et voici le résultat, je pense qu’avec une légende ça sera mieux.

pieold

Demain Samuel passera me voir pour me donner les accès sur le serveur final et je procéderais donc enfin à la mise en place. Il y a beaucoup de petites améliorations « détails » à faire dans l’application, j’ai donc de quoi m’occuper.


  Mardi 17 février 2015

Samuel est passé me voir dès le matin, le serveur est prêt, il avait déjà mis en place la base de données, il m’a donné un accès FTP et sur la base de données SQL, ainsi je peux continuer de travailler sur l’application et apporter des modifications ou des corrections au fur et à mesure.

Au début il y avait quelque problème de droit, j’ai accès au FTP mais je n’ai aucune permission une fois dedans, Samuel m’a dit qu’il corrigerait ça dans l’après-midi, et normalement tout pourra être prêt pour cette après-midi.

Adresse du serveur depuis le lycée : http://172.20.255.85/atelier_v2

Comme Samuel n’est pas présent le mercredi, et que je voulais me garder l’après-midi pour faire les tests sur la version final, nous avons convenu qu’il donnerait à l’équipe de l’atelier la nouvelle adresse de l’application mais qu’ils devaient commencer à s’en servir demain, de cette façon je pourrais faire mes tests tranquillement sans entraver leurs travail et eux le miens.

Sur mon diagramme en page d’accueil j’ai ajouté une petite légende, avec des pourcentages de chaque type de tickets présent dans la base, ça rend plutôt bien maintenant.

pie

Sur le module administration j’ai ajouté un formulaire pour modifier les différentes tables paramètres, on retrouve donc sur la page « Catégories » un formulaire pour modifier les catégories de façon tabulaire, ce n’est pas très beau mais ça marche bien alors ça fera l’affaire vus que je n’ai pas le temps d’implémenter une solution complète. J’ai également fait le même formulaire mais pour les Lieux.

mod

Nous avons avec Samuel temporairement activer les erreurs PHP, tant que je suis là on peut se permettre de les afficher, de cette façon je peux les voir et corriger le problème s’il faut, bien sûr il faudra les désactiver à la fin de la semaine.

Apparemment le problème des droits sur mon utilisateur ayant accès au FTP de l’application est résolu, je peux donc envoyer mes fichiers sur l’application.

Et justement, il y avait encore quelque erreur de casse sur certaines requêtes SQL ce qui faisait que certaine page s’affichait mal. J’ai pu corriger rapidement ce problème.

J’ai donc procédé à tous mes tests dans le reste de l’après, création du ticket, vie du ticket, suppressions, et ce avec différents utilisateurs … Je pense vraiment que tout est prêt maintenant, l’application est enfin prête pour le lancement, demain.

Demain je pense rédiger une documentation utilisateurs et surement enchaîner sur une documentation développeur. Je peux aussi améliorer la page d’administration des utilisateurs pour ajouter une modification tabulaire comme pour les lieux et les catégories.


   Mercredi 18 février 2015

Maintenant l’application est en place et prête à être utilisé et devrais être utilisé ! Normalement Samuel à communiquer les nouveaux accès à l’équipe de l’atelier, pour qu’ils commencent à s’en servir. Je « surveille » l’application pour voir si tout se passe bien.

Je vais commencer à rédiger une documentation utilisateur, je pense simplement résumer toute les fonctionnalités disponibles pour chaque utilisateurs et expliqué comment faire passer l’état du ticket à un autre grâce aux diverses pages disponibles.

La documentation utilisateurs me prend du temps, j’essaye d’expliquer tout le plus clairement possible, avec des captures d’écrans, etc. De temps en temps je retourne sur l’application pour relire le code et corrigé les fautes d’écritures quand j’en vois.

J’ai amélioré brièvement la façon dont l’utilisateur peut afficher/cacher la ligne de description depuis une liste de ticket. Auparavant j’utilisais un sélecteur CSS pour afficher la colonne au clic de souris, dès que le bouton de la souris était relâché, la colonne se cachait. Ça fonctionnait mais c’était un peu téméraire, d’autant plus que le sélecteur s’activer avec n’importe quel clic, comme sur l’icône pour accéder aux détails ou pour les cases à cocher pour imprimer.

table tbody tr:active + tr.description,
table tbody tr:focus + tr.description {
  display: table-row;
}

Désormais j’utilise du JQuery, pour afficher cette ligne de description il faut maintenir le clic dans les cases où aucunes action ne peut être faite, et j’utilise un petit fondu pour montrer/cacher cette ligne, c’est moins agressif pour l’œil.

$('table td:not(:last-child)').mousedown(function(){
	console.log('mousedown!');
	$(this).parent().next('.description').show('fast');
}).mouseup(function(){
	console.log('mouseup!');
	$(this).parent().next('.description').hide('fast');
});

Emillien Dousset est passé me voir pour savoir s’il pouvait commencer à utiliser la nouvelle application, je lui ai confirmé que oui. J’ai donc vus les premiers tickets apparaître, tout à l’air fonctionnel pour le moment. Je lui ai dit que s’il trouvait quelque erreurs il pouvait me tenir au courant, pendant que je suis là je pourrais les corriger si besoin.

J’ai passé le reste de ma journée à continuer mes documentations elles ne sont pas finis mais la documentation utilisateur avance bien j’aurais peut être fini.

Demain je ferrais comme aujourd’hui, je rédigerais mes documentations tout est supervisant l’application pour voir si tout se passe correctement.


Jeudi 19 février 2015

Aujourd’hui je poursuis la rédaction de mes documentations, c’est plutôt long surtout pour la documentation développeur surtout que je trouve toujours des précisions supplémentaires à ajoutés. Je revois mes diagrammes de cas d’utilisation et mon diagramme d’état pour les intégrés, au propre,  dedans.

J’ai également commencé à remplir mon portefeuille de compétence, là encore il y a beaucoup de chose à faire.

Emillien Dousset est passé pour me faire parvenir quelque petites erreurs qu’il a recenser :

  • Sur les fiches détails, le bouton de retour ne fonctionnerait pas
  • Il voudrait pouvoir modifier un ticket dans l’état « En cours d’attribution » sans pour autant attribuer un agent au ticket
  • Pour afficher la ligne de description, il trouve le fait de maintenir le clic sur une ligne peut pratique.
  • Il aimerait également pouvoir imprimer une fiche de ticket peut importe leurs statut, et non seulement les tickets « en cours ».

Pour l’histoire du bouton retour qui ne fonctionne pas, je suis étonné puisque j’ai vérifié depuis mon poste et tout semble en ordre, je lui ai conseillé de recharger la page sans le cache (Ctrl + F5) voir si c’était ça mais si je ne vois pas comment il a pu récupérer une version buggué, même dans le cache.

Il m’a confirmé que le problème persistait, alors j’ai vérifié plus en profondeur le problème et c’était tout bête : j’ai oublié l’extension du fichier « .php » sur l’adresse vers la page retour …

<?php

echo getBack("Retour à la liste des ticket à attribuer", "lister_ticket_attribuer.php");

?>
<?php

/**
 * Créer un élément de navigation pour faire un lien de retour vers une page.
 * @param  string $message Texte à afficher
 * @param  string $lien    lien (balise ancre <a></a>) vers le fichier
 * @return string          Element de navigation pour faire le lien de retour vers une page.
 */
function getBack($message, $lien) {

	$back = '<nav class="retour">'
		  . '<a href="'.$lien.'" title="Retour">'
		  . '<img src="../images/iconnav/back.png" alt="">'
		  . '<p>'.$message.'</p>'
		  . '</a>'
		  . '</nav>';

	return $back;
}

?>

Ensuite j’ai immédiatement modifié ce qui n’allait pas, j’ai été efficace car je savais exactement quoi modifié. J’ai passé l’affichage de la ligne de description sur un fonctionnement de bascule : on clique, la ligne s’affiche; on re-clique, elle se cache.

$('table td:not(:last-child)').click(function(){

	console.log('Click!');
	var desc = $(this).parent().next('.description');

	if (desc.is(':visible')) {
		desc.hide('fast');
	} else {
		desc.show('fast');
	}

});

Puis j’ai ajouté la colonne pour l’impression sur la liste de « Tous » les tickets, c’est ce que j’avais convenu avec Emillien, et non seulement sur la liste des tickets « En cours ». J’ai eu juste à ajouter une condition dans mon script qui générait les tableaux de regroupement.

// Si la page est la liste des tickets en cours ou tous, on ajoute la colonne "Imprimer"
if ($action == 'encours' || $action == 'tous') {
	$thead .= '<th class="icoprint">'.'<img alt="Imprimer" src="../images/iconnav/print.png">'.'</th>';
}

Et enfin j’ai modifié la condition de validation du formulaire de modification d’un fichier, pour qu’on puisse le modifier alors qu’il est à « attribuer » sans avoir à fournir l’agent responsable.

Après avoir mis à jour tous les fichiers du serveur pour les correctifs, j’ai envoyé un autre mail à Emillien pour le prévenir que les problèmes devraient être résolus.

Demain je terminerais mes documentations et je vérifierais que les correctifs que j’ai apportés fonctionnent correctement (côté utilisateur) et j’effectuerais une dernière relecture de mes fichiers pour les mettre au propre s’il le faut.


Vendredi 20 février 2015

Aujourd’hui j’ai donc (enfin) terminé ma documentation utilisateur, je pense avoir pensé à peut près à tout, de toute façon la plupart des utilisateurs était présent à la réunion où j’ai présenté l’application donc je ne pense pas que les utilisateurs soient perdus.

Je l’ai ensuite exporter au format PDF pour que cela soit plus lisible, et j’ai créé un dossier « doc » sur le FTP de l’application où j’y ai déposé le pdf de la documentation utilisateurs ainsi que le document « source » .docx, afin de pouvoir modifier la documentation plus facilement, si besoin.

J’ai ensuite créé un lieu sur la page d’accueil vers ce document pour qu’il soit facilement accessible par les utilisateurs un peu perdus.

accueil

Les navigateurs modernes embarquent tous nativement une liseuse PDF donc lorsque l’utilisateur clique sur le lien, soit le navigateur affiche le document dans la liseuse soit le document est téléchargé pour être consulté.

J’ai arrangé le lien pour qu’il ouvre le document PDF vers un nouvel onglet, puisque le document n’a pas de lien de fonctionnalité avec l’application, il n’est pas nécessaire de la  « fermer » pour consulter le document. Il suffit d’ajouter l’attribut « taget=_blank » dans la balise ancre faisant le lien.

<p>Si vous êtes un peu perdu, vous pouvez lire ce document :</p>
<ul>
	<li>
		<a href="doc/doc_utilisateur.pdf" alt="Documentation d'utilisation" target="_blank">Documentation d'utilisation</a>
	</li>
</ul>

Ma documentation développeur n’est pas terminé mais avance bien, je ne pense pas que j’aurais le temps de détaillé les scripts complexe mais j’ai pu dresser une liste des fichiers ainsi que leurs rôles respectifs.

J’ai effectué une dernière relecture des fichiers, supprimer le code en commentaire inutile ou obsolète et j’ai corrigé quelque faute de français même si je pense en avoir oublié.

M. Dousset m’a envoyer un mail pour me confirmer que tout semblait en ordre par rapport au correctif d’hier, il a également ajouté que dans le futur, il pourrait être pratique de pouvoir ajouter une photo au ticket. J’ai noté cela dans un coin de ma documentation développeur dans la section « améliorations futures ».

Mon stage touche maintenant à sa fin et l’application et fonctionnelle et en utilisation et je l’espère, apportera satisfaction aux utilisateurs.


 Petite conclusion personnelle

Ce stage a été très enrichissant d’un point de vue professionnel bien que ce soit un stage effectué dans un lycée, qui est mon centre de formation. Les acteurs étaient réels, les besoins étaient concrets et existant. Globalement, les enjeux étaient réels.

Bien que je n’ai pas pu profiter d’un réel milieu professionnel, avec tous ses avantages liés, j’ai pu jouer un rôle concret afin d’effectuer un travail concret qui a su être mis en place à temps et apporter satisfaction.

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

Laisser un commentaire

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