1. Introduction

Je suis quelqu'un de tout à fait désorganisé, je l'admets. Je n'ai jamais le temps de faire tout ce que j'ai à faire, ou du moins je pense n'en avoir jamais le temps. Avec le temps que me prend le gymnase, mes cours de musique extrascolaires ainsi que mes autres activités, je ne sais plus où donner de la tête, je panique parce que j'ai trop à faire et finis par ne rien accomplir. Il est clair qu'il me serait grandement utile de pouvoir organiser mes tâches facilement afin d'être certain de les effectuer à temps et de ne pas me retrouver avec trop de travail à faire d'un coup, et mal le faire.

Pour répondre à mon problème, je me suis demandé si je pouvais me forcer à suivre un planning. Pas un simple agenda, mais plutôt une liste de tâches à effectuer tel jour à telle heure et si cette tâche n'est pas effectuée j'en serais alors informé. C'est là qu'est née mon idée de créer une liste de tâches qui permettrait une optimisation de mon temps libre. Agencée comme un agenda, cette liste de tâches permettrait à l'utilisateur d'entrer des tâches à effectuer un certain jour à une certaine heure. Lorsqu'il les effectue, l'utilisateur fait un « check-in » en cliquant sur un bouton indiquant qu'il a commencé à effectuer la tâche. Pour indiquer le moment où celle-ci devrait être terminée, l'application émettra alors un son et l'utilisateur utilisera une forme de « check-out » - toujours par l'utilisation d'un bouton – indiquant cette fois-ci que la tâche a été terminée. S'il s'avère que la tâche n'a pas été effectuée dans le temps imparti (pas de « check-in »), la tâche sera considérée comme invalide et devra être effectuée à un autre moment, choisi par l'utilisateur.

Ce programme a donc pour but une régulation plus aisée des tâches, tout en laissant le contrôle de la liste à l'utilisateur. Il se veut donc agréable et facile d'utilisation, tout en étant tout aussi efficace.

2. Matériel et méthodes

Pas de matériel particulier nécessaires si c'est un ordinateur avec accès possible au serveur dev.gyre.ch, à PHP et MySQL.

1. Mise en place

Dès le début du projet, il m'a semblé intéressant de diviser mon travail en plusieurs parties :

  • Tout d'abord, je réaliserai l'HTML de mon site, simplement pour bien me représenter comment chaque fonction est effectuée.
  • Deuxièmement, j'"automatiserai" certaines commandes HTML à l'aide de PHP et MySQL(ces deux premières parties de travail finiront certainement par être effectuées en même temps au fur et à mesure du projet).
  • Enfin, j'ajouterai un fichier CSS qui apportera l'esthétique à mon application web.

Au départ, je pensais créer mon projet à l'aide d'un calendrier cliquable qui afficherait alors quelles tâches sont à effectuer pour chaque jour. Après un peu de recherche, j'ai découvert que la réalisation d'un calendrier en PHP était simplement trop complexe, et j'ai donc décider de me rabattre sur la solution de faire le projet tout simplement sous forme de liste, à l'aide d'un tableau HTML.

J'ai d'abord décidé de créer sur jEdit un "outline" de mon projet, ce à quoi j'aimerais qu'il ressemble et l'interface que j'aimerais qu'il renvoie à l'utilisateur. La page principale de l'application est donc un tableau qui montrerait à l'utilisateur les tâches qu'il a à effectuer - s'il n'a encore enregistré aucune tâche, le tableau est bien évidemment vide.

J'ai donc d'abord créé un simple tableau HTML avec différents champs:

  • Checkin/Out : Un champ qui permettra à l'utilisateur d'indiquer au serveur quand il commence et termine une tâche.
  • Tache : Nom de la tâche
  • Commencement : Date et heure auxquelles la tâche devrait être commencée
  • Fin : Date et heure auxquelles la tâche devrait être terminée
  • Etat : Indique dans quel état est la tâche (si elle a déjà été commencée ou pas, si elle est en retard, etc...)

2. Exécution

Après avoir fait cela, il me fallait alors ajouter un moyen de créer une nouvelle tâche. Pour cela j'ai tout d'abord créé un bouton "Nouvelle tâche", qui redirige l'utilisateur vers une page "nouvelletache.php" où il est invité à préciser le nom, la date de commencement, et la date de fin de sa tâche et où les informations sont envoyées à l'aide d'un bouton "Submit". A ce moment-là, pour recevoir et stocker les informations, il m'a alors fallu créer une table MySQL.

J'ai alors créé une table MySQL nommée "tasktable" qui recevrait toute donnée envoyée depuis "nouvelletache.php" et les enverrait ensuite vers le fichier principal "listetaches.php". Pour ce faire, il m'a simplement fallu faire un connect dans le fichier, puis, et surtout, pour inclure les résultats dans mon tableau, j'ai indiqué une variable $results visant à récupérer les données de la table et à les organiser chronologiquement dans mon tableau :




Puis, pour mettre en place les fonctions que je désirais avoir dans ma liste de tâches, il m'a fallu définir un while, définissant que tant qu'une ligne du tableau afficherait des résultats, les dates (contenues dans les champs Commencement et Fin) auraient des variables leur correspondant en strtotime.








Ici la fonction strtotime n'est pas nécessaire mais simplifie beaucoup les choses étant donné qu'elle transforme une date et heure en un simple nombre - un timestamp Unix. Pour les comparaisons entre différentes dates et heures que j'ai du utiliser par la suite, cela m'a été très utile, puisque j'aurais du autrement comparer chaque élément à un autre (année, puis mois, puis jour, etc...).




Maintenant que mes données étaient rentrées dans mon tableau et organisées chronologiquement, mon but était alors de leur définir un état en fonction de si elles étaient effectuées ou pas. J'ai donc choisi cinq états pour les tâches (pas commencée, en cours, terminée, en retard et pas effectuée) et leur ai attribué à chacun des conditions particulières.




Je me suis d'abord occupé du plus simple. La fonction pas commencée étant la fonction par défaut, j'ai d'abord fait la condition d'une tâche en retard dont la ligne s'afficherait en rouge si la date de commencement de la tâche est déjà passée, mais la date de fin n'est pas encore passée.








En plus de cela, il m'a fallu faire un lien entre ce fichier et un fichier CSS pour colorer la ligne en rouge, d'où l'utilité du <tr class="late">.




Capture_d_ecran_2017-05-11_a_01.21.14.png




Sur le serveur:








J'ai ensuite reproduit un travail similaire pour quand la tâche est définitivement échue, où la ligne se colorerait en gris, sous des conditions légèrement différentes.








Dans le fichier CSS:








Sur le serveur:








C'est pour les deux autres conditions que je me suis malheureusement trouvé un peu plus en difficulté. En effet, pour les conditions de tâche en cours ou terminée, il me fallait introduire le principe de "check-in/check-out". Pour cela, je pensais introduire dans la première colonne deux boutons "Commencer" et "Terminer" sur lesquels l'utilisateur cliquerait lorsqu'il veut en effet commencer ou terminer sa tâche. Pour cela j'ai dû créer une "form" pour chacun des boutons, et liées à celle-ci, plusieurs conditions et plusieurs instructions. C'est là que j'ai eu un problème ; en effet la ligne du tableau semble changer de couleur et afficher l'état correspondant, cependant la cellule du "check-in/check-out", elle garde sa couleur précédente et le reste de la ligne est remis à la ligne, tout comme le bouton "Terminer".




Code utilisé pour le bouton "Commencer":








Code utilisé pour le bouton "Terminer":








Résultats sur le serveur:












J'ai essayé d'y remédier en déplaçant mon code d'endroit plusieurs fois, en l'écrivant légèrement différemment et en cherchant des informations sur internet mais malheureusement je n'ai pas pu trouver de solution. Selon moi, le problème doit cependant être dû au fait que les états que je venais d'écrire partageaient une condition avec certains autres états que j'avais précédemment écrits, je n'ai cependant toujours pas la solution à ce problème.




Pour compléter ce que j'ai fait, j'ai également lié un fichier CSS à mon fichier PHP. Ce fichier CSS a principalement servi à colorer les lignes de mon tableau en fonction des différents états des tâches. J'ai également fait quelques changements sur le tableau et sur l'ensemble de la page pour qu'elle soit plus présentable.




3. Idées non abouties




C'est plus ou moins là que s'est arrêté mon projet, malgré plusieurs tentatives ratées d'ajouter quelques fonctions en plus à ma liste de tâches.



    

  • J'ai en effet essayé premièrement de faire en sorte que mes boutons "Commencer" et "Terminer" s'appliquent uniquement à la ligne correspondante, mais je n'ai pas réussi à trouver l'information que je recherchais.
    • 




    

  • J'aurais également voulu faire en sorte qu'un bouton de ces deux précédemment cités se désactive lorsque l'autre est activé (par souci d'ergonomie), mais je n'eus pas le temps de faire cela non plus.
    • 




    

  • Un gros problème maintenant et grand manque à ce projet est un bouton "Supprimer", destiné à simplement effacer une tâche dans le tableau, et par conséquent dans la table MySQL. Malgré le fait que j'aie passé un bon moment à chercher un moyen de faire cela, tout mes tentatives ont échoué et je n'ai malheureusement pas pu placer ce bouton, qui aurait pourtant été très utile.
    • 




    

  • Enfin, si bouton "Supprimer" il y avait eu, je pensais faire apparaître une fenêtre pop-up lorsque le bouton "Terminer" était appuyé qui demanderait à l'utilisateur s'il veut supprimer la tâche maintenant qu'elle est terminée. Cependant, voyant que je n'arrivait pas à créer un bouton supprimant une ligne et que cela requérait certaines connaissances en JavaScript, j'ai assez vite abandonné cette idée.
    • 






3. Résultats




Le code est disponible sur le git et la liste de tâche est sur le serveur dev.gyre.ch. Le résultat final est une liste des tâches très basique, techniquement fonctionnelle, mais avec certaines particularités à revoir et à retravailler. Il est possible d'introduire une tâche et de la voir s'afficher, tout autant qu'il est possible de commencer et terminer la tâche, malgré certains problèmes visuels. Le problème principal résidant dans l'ergonomie du tout, puisqu'il n'est pas possible, à ce stade, de supprimer la tâche, ce qui peut rapidement devenir très encombrant pour l'utilisateur. Des fonctions utiles auraient pu être également être ajoutées, comme l'utilisation d'un nom d'utilisateur et d'un mot de passe, rendant l'application multi-utilisateur. Malgré cela, la liste reste tout de même utilisable, même si c'est dans sa forme la plus basique qui soit.




4. Discussion




Ce projet était, je pense, à ma portée. A travers des recherches d'information relativement intenses, et pas toujours fructueuses, je finissais par me retrouver parmi des éléments de moins en moins inconnus et que je pouvais comprendre. Par rapport à mes connaissances de base en HTML, PHP et MySQL, il est clair que j'ai beaucoup appris en faisant ce projet. Certaines choses n'ont pas pu être faites, mais en prenant en considérant le travail qu'il m'était possible de fournir, vis à vis de la situation relativement demandante en travail pendant laquelle se déroulait ce projet, je pense me retrouver avec des connaissances d'un niveau correct. J'apprends de mes erreurs et ai bien compris ce qu'il ne m'a pas été possible d'apporter à ce projet, comme expliqué au-dessus. Avec un peu plus de temps et d'information, j'aurais sûrement pu obtenir de meilleurs résultats, plus proches de ce que j'espérais, mais je suis déjà assez content de ce que j'ai pu produire.




5. Conclusion




Malgré une déception évidente quant à certaines fonctions que je n'ai pas réussi à inclure dans mon projet, je suis tout de même plus satisfait de mon travail, ou plutôt de ma méthode de travail cette fois-ci que pendant le projet H. Les langages HTML, PHP et MySQL ont éveillé un certain intérêt chez moi à travers ce projet, et malgré la masse d'information qui me manquait, et qui parfois me submergeait, lors du projet, je pense en avoir retenu une bonne partie et pouvoir continuer à utiliser ces langages dans le futur pour peut-être produire quelque chose de meilleur.




6. Sources




https://www.w3schools.com/




http://stackoverflow.com/




https://www.tutorialspoint.com/index.htm




http://php.net/




http://www.vulgarisation-informatique.com/




https://openclassrooms.com/