1. Introduction

Quel est le but et le problème à résoudre de ce projet ?
L'objectif de ce projet est de regrouper la conversion de toutes sortes d’unités, et notamment de devises sur un site internet. Le but principal est donc de simplifier la vie des gens (et surtout entre autres la mienne) qui souhaiteraient convertir facilement certaines unités ou connaitre le cours de change d’une monnaie.

Quelles étaient, au commencement de la création du projet, les limitations possibles et envisageables ?
Les limitations étaient assez restreintes dans le cadre de ce projet. Une d’entre elles qu'il me paraît importante de souligner aurait été l'oubli ou l'incapacité de lister toutes les unités existantes, du moins les plus importantes. Mon but était vraiment de pouvoir mettre à disposition le maximum d’unités possibles afin de permettre de subvenir à un maximum de requêtes des utilisateurs. Donc omettre certaines unités et devises aurait été très problématique pour mon projet.

Quels sont les enjeux du projet ?
Ce projet m’a amené à avoir des connaissances avancées dans le développement d’un site web, donc en PHP et en HTML. Par la même occasion, cela m'a permis de découvrir certaines relations entre unités physiques, chimiques et autres. J’en ai appris également pas mal sur le cours des devises actuelles. L'ajout de graphiques et de tableaux de chaque devise par rapport aux autres en plus du convertisseur m'ont permis d'avoir une plus large idée de la différence entre les monnaies. L’idée de ce projet a été de me familiariser un maximum avec l’environnement du web, des bases de données MySQL, et plus généralement dans le domaine du software.

2. Matériel et méthodes

2.1) Matériel

Le projet étant uniquement constitué d'un site web, aucun matériel physique ou hardware n'est utilisé: il est uniquement software. Afin de rédiger et créer le site, l'utilisation de trois langages différents a été nécessaire: l'HTML pour la représentation brute du contenu des pages du site, le PHP pour le côté programmation de certaines parties du contenu et finalement le MySQL pour le stockage des données utiles au site, comme les différentes opérations pour le convertisseur d'unités et de devises.

2.2) Méthode

2.2.2) HTML / PHP

Page d'accueil du convertisseur
La page d'accueil du convertisseur a pour titre Convertisseur et pour nom de fichier "convertisseur.php". Cette page permet d'informer le visiteur à quoi il va faire face en arrivant sur le convertisseur à l'aide d'un petit texte introductif. Trois liens menant aux convertisseurs les plus importants sont incrusté dans celui-ci grâce à la balise <a>. Cette page contient également une liste ordonnée <ol> contenant l'entièreté des convertisseurs accessibles sur le site. Les différents éléments de la liste forment eux aussi des liens vers chaque convertisseur respectif grâce à la balise <a>:

    <ol id="liste">
         <li><a href="distance.php">Distance</a></li>
         <li><a href="temperature.php">Température</a></li>
         <li><a href="vitesse.php">Vitesse</a></li>
         <li><a href="monnaie.php">Monnaie</a></li>
         <li><a href="poids.php">Poids</a></li>
         <li><a href="capacite.php">Capacité</a></li>
         <li><a href="superficie.php">Superficie</a></li>
         <li><a href="information.php">Information</a></li>
         <li><a href="tableau.php">Vue d'ensemble</a></li>
    </ol>

Voici le résultat: 1.PNG Bien entendu, chaque convertisseur est également accessible à tout moment par le menu principal du site situé à gauche de chaque page.

Les convertisseurs (sauf Température)
Il faut savoir que tous les convertisseurs (sauf temperature.php), c'est-à-dire distance.php, vitesse.php, monnaie.php, poids.php, capacite.php, superficie.php et information.php, ont tous la même structure au niveau du code HTML et PHP. Je ne vais donc expliquer qu'un seul d'entre eux et par la suite expliquer les petites différences entre chacun d'eux. Prenons pour exemple distance.php. Premièrement, on crée un formulaire avec la balise <form>. Je lui indique quelques paramètres, notamment un id, la méthode et l'autocomplete. La méthode choisie est le POST et l'autocomplete est mis sur off pour éviter les propositions appelées semi-automatiques dans le formulaire:

<form method="POST" autocomplete="off" id="formulaire">


Dans ce formulaire, j'ai inséré un tableau <table> d'une seule ligne <tr>, afin d'aligner tous les éléments du formulaire.
Dans la première case de ce tableau, on veut insérer un champ de texte permettant d'entrer la valeur que l'on veut convertir. Pour cela on utilise la balise <input> avec pour paramètre le type, qui est ici text permettant d'inscrire du texte, un nom name afin de permettre à l'HTML de le différencier du reste et un id pour le CSS:

<p><input type="text" name="start" id="start"/></p>

Voici le résultat: 2.PNG

Pour la seconde case du tableau, on veut pouvoir sélectionner une unité. On introduit donc un menu déroulant <select>. Ici encore, on lui assigne un nom "name" et un id:

<select name="selection1" id="selection1">

En ce qui concerne le contenu du select, j'utilise du php pour créer une boucle qui va aller chercher les informations dans une base de donnée MySQL. On commence par assigner la requête du champ unité de la table distance à la variable $unitResult1:

$unitResult1 = mysql_query("select unite from distance order by id asc", $database);

Je crée ensuite ma boucle qui prend pour index $unitIndex1 et qui va boucler tant que l'index est inférieur à la grandeur du champ récupéré précédemment: $unitIndex1 < mysql_num_rows($unitResult1). J'utilise ensuite la balise <option> qui va contenir les différentes unités présentes dans la base de données. Pour chaque option, j'assigne une valeur value qui permet de les différencier les uns les autres, MAIS ATTENTION cette valeur doit impérativement être égale à l'index + 1, car l'index commence à 0 et on veut que les valeurs débutent à 1 pour des questions de pratiques (cf. partie sur la fonction de conversion). La fonction mysql_fetch_array permet de convertir la requête mysql_query en un tableau affichable. Finalement on affiche cette requête à l'aide d'un print:

<option value="<?php echo ($unitIndex1 + 1); ?>" ><?php $result1 = mysql_fetch_array($unitResult1);  print $result1[0]; ?></option>

Voici le résultat: 3.png
Dans la case suivante du tableau, on veut afficher la valeur finale et convertie. Pour cela on va appeler la fonction de conversion, nommée convertirDistance(), quand le bouton Convertir est cliqué. Pour cela j'utilise un if(isset) en PHP qui va détecter le clic sur le bouton:

if(isset($_POST['convertir'])) //ici convertir est le nom du bouton submit

Donc si un clic sur le bouton est détecté, on exécute une commande qui va afficher ce que retourne la fonction à l'aide d'un echo. Pour ce qui est des paramètres que l'on envoie à la fonction, on lui soumet la valeur insérée dans le input vu plus haut avec un $_POST suivi du nom de l'input, et la valeur value du premier et du second sélecteur d'unités avec un $_REQUEST suivi du nom du select:

echo "".convertirDistance($_POST['start'], $_REQUEST['selection1'], $_REQUEST['selection2']);

Voici comment la valeur convertie s'affiche: 4.PNG
En ce qui concerne la prochaine case du tableau, il s'agit exactement du même procédé que pour le premier sélecteur d'unité. Les seules différences que l'on peut noter sont les noms des sélecteurs, et les noms des variables utilisées, notamment pour l'index de la boucle for.

Voici donc le résultat, identique à celui du premier sélecteur: 3.png
Et finalement pour la dernière case du tableau, on insère un bouton de type submit qui permet d'appeler la fonction comme vu précédemment. Ce bouton prend pour paramètres un nom name, un type (ici submit) et un id:

<input type="submit" value="Convertir" name="convertir"/>

Voici comment le bouton est affiché sur la page: 5.PNG

Concernant le tableau, il se termine ici. Il ne reste plus qu'à parler de la fonction convertirDistance(). Elle permet de convertir une valeur en fonction des deux unités sélectionnées. Comme dit précédemment, elle prend trois valeurs pour paramètres: l'input text et les deux sélecteurs d'unités qu'elle va utiliser en tant que $valeur, $unite_depart et $unite_arrive:

function convertirDistance($valeur, $unite_depart, $unite_arrive)

Au début de la fonction, je déclare la variable global $database qui correspond à la base de donnée MySQL afin qu'elle soit reconnue par la fonction. J'assigne ensuite les requêtes du champ facteur de la table distance où l'id est égal à la value des différents sélecteurs d'unités aux variables $unit_convert1 et $unit_convert2. (REMARQUE: les id en MySQL commençant toujours par 1 et non pas par 0 sont la raison pour laquelle on voulait que les values des sélecteurs commencent à 1).

$unit_convert1 = mysql_query("select `distance`.`facteur` from `distance` where `distance`.`id` =" .$unite_depart,$database);
$unit_convert2 = mysql_query("select `distance`.`facteur` from `distance` where `distance`.`id` =" .$unite_arrive,$database);

Je transcris ensuite les requêtes sous formes de tableaux array avec mysql_fetch_array:

$unit1 = mysql_fetch_array($unit_convert1);
$unit2 = mysql_fetch_array($unit_convert2);

Pour terminer, je retourne le résultat de la formule suivante:

round(($valeur * $unit1[0])/$unit2[0], 4); //arrondir à quatre chiffres après la virgule le résultat de la division de la multiplication de la valeur entrée par le facteur correspondant à la l'unité de départ par le facteur de l'unité d'arrivée.

En ce qui concerne les différences avec les autres convertisseurs, elles sont minimes: en effet, il s'agit simplement de modifier le nom des tables où l'on fait les requêtes et également de changer le nom de la fonction de conversion.

Le convertisseur Température
Au sujet du convertisseur température, l'ensemble du code est exactement le même. La seule différence se situe au niveau de la fonction de conversion. En effet, pour les conversions de température, il est impossible d'utiliser de simples facteurs étant donné que ce sont des formules bien précises qui permettent de convertir ce type d'unités. Je passe donc par la détection des unités sélectionnées (grâce aux facteurs qui y sont associés), et par une série de if qui permettent d'utiliser les bonnes formules, auxquelles j'applique simplement la valeur entrée, en fonctions des unités sélectionnées.

if ($unit1[0] == 0) {
        if ($unit2[0] == 1) {
                $resultat = $valeur - 273.15;
        }
        elseif ($unit2[0] == 2) {
                $resultat = ($valeur - 273.15)* 1.8 + 32;
        }
        elseif ($unit2[0] == 0) {
                $resultat = $valeur;
        }
}
elseif ($unit1[0] == 1) {
        if ($unit2[0] == 0) {
                $resultat = $valeur + 273.15;
        }
        elseif ($unit2[0] == 2) {
                $resultat = ($valeur * 1.8) + 32;
        }
        elseif ($unit2[0] == 1) {
                $resultat = $valeur;
        }
}
elseif ($unit1[0] == 2) {
        if ($unit2[0] == 0) {
                $resultat = ($valeur - 32)/1.8;
        }
        elseif ($unit2[0] == 1) {
                $resultat = (($valeur - 32)/1.8) + 273.15;
        }
        elseif ($unit2[0] == 2) {
                $resultat = $valeur;
        }
}


Le tableau récapitulatif

Le tableau récapitulatif permet de créer une vue d'ensemble résumée des différentes unités convertibles sur le site. Encore une fois, le code est exactement le même pour chaque unité. Je ne vais donc le détailler uniquement pour une seule d'entre elles. A chaque unité correspond un tableau <table> à trois entrées, respectivement la valeur de référence, la valeur convertie et l'unité d'arrivée. Ces différents tableau ont tous le même id table_tableau:

<table id="table_tableau">

Je commence par assigner les requêtes des champs unité et facteur de la table distance (par exemple) aux variables $result1 et $result2:

$result1 = mysql_query("select facteur from vitesse order by id asc", $database);
$result2 = mysql_query("select unite from vitesse order by id asc", $database);

J'initie ensuite une boucle for afin de créer l'entièreté du tableau en seulement quelques lignes. La boucle prend pour paramètre un index, initié à 0. Les fonctions de la boucle s'effectueront tant que l'index n'est pas égal à la longueur de la requête MySQL faite précédemment:

for ($index1 = 0; $index1 < mysql_num_rows($result1); $index1++)

Dans la boucle, j'ouvre une ligne du tableau <tr> dans laquelle se trouvent des cases <td>. La première d'entre elles contient la référence de l'unité en question. Pour l'exemple des distances, il s'agit d'un mètre:

<td>1 mètre =</td>

En ce qui concerne les deux et troisième cases, je convertit chaque requête en un tableau array à l'aide de mysql_fetch_array(). Puis j'affiche respectivement dans la deuxième et troisième case le facteur de conversion et l'unité correspondante. (REMARQUE: en réalité c'est l'inverse du facteur qui est affichée, car dans la base de donnée MySQL, les facteurs sont inversés pour des raisons pratiques concernant la fonction de conversion des convertisseurs (cf. fonction de conversion plus haut))
Voici l'aspect final du tableau pour une unité: 6.PNG

Je répète ensuite ce même procédé pour tous les autres types d'unités en faisant bien attention de modifier la table dans laquelle sont faites les requêtes MySQL.

2.2.3) CSS

Page d'accueil
Les modifications de style en CSS concernant la page d'accueil des convertisseurs sont très simple. Je commence par personnaliser le texte en le jusifiant et en réglant les marges autour de celui-ci:

#convertisseur {
        text-align: justify;
        margin-left: 280px;
        margin-right: 30px;
        display: block;
        color: black;
}

Je personnalise également les liens <a> du texte, en leur enlevant leur décoration, afin qu'ils soient affichés comme du texte basique:

#convertisseur a{
        text-decoration: none;
        color: black;
}

Le menu de choix d'unité est également personnalisé par ses marges et par son aspect sans décoration, afin qu'il soit aligné avec le texte et qu'il soit entièrement noir:

#liste {
        margin-left: 280px;
}

#liste li{
        font-family: sans-serif;
        font-size: 20px;
}

#liste li a{
        text-decoration: none;
        color: black;
}


Convertisseurs
Concernant les convertisseurs, les modifications de style sont minimes: il s'agit simplement de modifier la largeur des différents champs input et select avec la commande width en faisant bien attention de mentionner les id de ceux-ci à l'aide d'un #:

#start {
        width: 150px;
}

#selection1 {
        width: 130px;
}

#selection2 {
        width: 130px;
}


Tableau récapitulatif
Au sujet du récapitulatif, seules les marges à gauche des tableaux sont réglées afin qu'ils soient bien alignés sur la page:

#titres_tableau {
        margin-left: 300px;
}

#table_tableau {
        margin-left: 300px;
}


3. Résultats

Les résultats sont plutôt convaincants: en effet tous les convertisseurs marchent parfaitement et les différentes conversions sont appliquées correctement. Dans l'ensemble, la mise en page des convertisseurs est plutôt épurée et simple, ce qui permet une utilisation facile de ceux-ci. Si l'on rentre une valeur dans le champs d'entrée, que l'on sélectionne une unité de départ et d'arrivée et que l'on clique sur le bouton submit la valeur convertie s'affiche parfaitement à l'endroit voulu. J'ai également effectué beaucoup de tests afin de vérifier si la fonction de conversion ne retournaient pas de valeurs erronées et ce n'est pas le cas. Celle du convertisseur température fonctionne également correctement, malgré le changement opéré par rapport aux autres types d'unités.

4. Discussion

La réalisation de ce projet m'a apporté un certain nombre de connaissances assez approfondies sur plusieurs sujets utiles à sa conception:

  • A commencer par l'HTML et le PHP en général. La réalisation de ce projet m'a permis d'être à l'aise avec plusieurs concepts de ces différents langages de programmation et de description. Afin d'intégrer le convertisseur à mon site internet j'ai d'abord dû le refaçonner entièrement. Pour cela, j'ai eu l'occasion de créer un menu latéral fixe avec quelques animations, un titre personnalisé, et plusieurs autres fonctionnalités bien sympas. Le convertisseur en lui-même m'a surtout permis de bien comprendre le concept de formulaire avec les input et les select. Mais il m'a également bien instruit sur les fonctions en php, et notamment l'appel de celle-ci à travers une autre action comme l'appui sur un bouton.
  • Le projet m'a également apporté certaines connaissances concernant l'utilisation des bases de données MySQL. Notamment, le lien entre les boucles for et l'affichage d'un contenu d'une base de donnée.
  • J'ai également beaucoup appris sur le langage CSS et notamment sur les animations pour un menu déroulant ou encore pour la mise en page générale d'une page web.

Le projet final comporte très peu d'erreurs en soi mais il pourrait comporter de multiples améliorations pour le rendre encore meilleur. En effet, à chaque conversion d'une valeur entrée, la valeur finale s'affiche correctement mais la page est rafraîchie et les sélecteurs et le champs d'entrée sont remis par défaut. Une autre amélioration possible aurait été une conversion automatique des valeurs entrées sans bouton submit. Malheureusement pour ces deux améliorations, il faut avoir quelques connaissances en javascript afin de pouvoir gérer un site internet localement.

Un autre aspect qu'il aurait pu être intéressant d'ajouter est l'accès à une base de donnée publique qui référence en temps réel le cours des devises. De ce fait si l'on procède à une conversion d'unité monétaire, elle dépendrait du cours actuel. Cette méthode aurait également permis d'ajouter des graphiques qui montrent la variation du cours des devises.

5. Conclusion

En conclusion, malgré les quelques améliorations possibles, je peux affirmer que mon convertisseur est tout-à-fait opérationnel. Je peux donc à présent me poser la question: "et qu'en est il maintenant ?". Tout d'abord je pense que mon site nécessite d'être amélioré comme dit plus haut, afin de pouvoir rivaliser avec d'autres convertisseurs du net. Ceci montre que mon projet est toujours à l'état de concept. En effet il manque un certain nombre d'unités et de fonctionnalités afin que mon convertisseur puisse être considéré comme bon dans sa catégorie.

Ce projet m'a donc permis de me perfectionner dans le domaine du software et de me créer mon propre convertisseur personnel.