Jour 1:

Pour débuter, j’ai dû prendre connaissance du travail que j’allais réaliser. (A1.1.1)

Mon travail consiste à développer une interface web en PHP pour la configuration d’un automate BACnet.

De ce fait je suis allé sur Internet pour tenter de définir qu’est-ce qu’un BACnet, j’ai également visualiser différents open source en C++ afin de me faire une idée en tête du travail que je devrais fournir par la suite .

De manière concrète, je vais gérer les données et les messages échangés entre des éléments clients et des éléments serveurs.

A savoir que durant la totalité de mon stage, j’ai travaillé en local à l’aide de WampServer, la totalité de mes fichiers ont été stockés et sauvegardés sur le lecteur C: puis dans le fichier wamp64 et dans www. (A3.2.1) (A3.3.2)

C’est pour cela que vous verrez a de nombreuses reprises l’adresse 127.0.0.1 qui désigne en fait le réseau localhost.

Pour commencer il m’a été demandé de réaliser une interface web en HTML, CSS.

Mais également en JavaScript afin d’implémenter une fonction.

Cette interface web va me permettre d’afficher toutes les données et caractéristiques d’un automate lorsque je sélectionnerai l’automate correspondant dans le ComboBox.

<!DOCTYPE html>
<html>
<head>
    
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Interface BACnet</title>
    <link rel="stylesheet" href="Interface bacnet.css" />

    <script>
        function val(s) {
            if ((s.value) == 1) {
                document.getElementById("NomAuto").value = "Automate BACnet";
                document.getElementById("NumAuto").value = "n°1";
                document.getElementById("PrixAuto").value = "100 €";
                document.getElementById("CaracAuto").value = "fragile";
            }

            else if ((s.value) == 2) {
                document.getElementById("NomAuto").value = "Automate BACnet";
                document.getElementById("NumAuto").value = "n°2";
                document.getElementById("PrixAuto").value = "200 €";
                document.getElementById("CaracAuto").value = "Emcombrant";
            }
            else if ((s.value) == 3) {
                document.getElementById("NomAuto").value = "Automate BACnet";
                document.getElementById("NumAuto").value = "n°3";
                document.getElementById("PrixAuto").value = "300 €";
                document.getElementById("CaracAuto").value = "Lourd";
            }

            else {
                document.getElementById("NomAuto").value = "";
                document.getElementById("NumAuto").value = "";
                document.getElementById("PrixAuto").value = "";
                document.getElementById("CaracAuto").value = "";
            }
        }
    </script>

</head>

<body>

    <img id="logo" src="bacnet-international-logo-vector.png" alt="Logo Bacnet" />
    <div id="formatdiv">
        <h1 id="Titre">Interface BACnet</h1>
    </div>

    <select name="Liste" onchange="val(this);">
        <option select>Sélectionner un automate</option>
        <option value="1"  >Automate BACnet 1</option>
        <option value="2"  >Automate BACnet 2</option>
        <option value="3"  >Automate BACnet 3</option>
    </select>

    <table>
        <tr>
            <td>Nom automate</td>
            <td><input type="text" name="nom" value="" id="NomAuto"></td>
        </tr>
        <tr>
            <td>Num automate</td>
            <td><input type="text" name="num" value="" id="NumAuto"></td>
        </tr>
        <tr>
            <td>Prix automate</td>
            <td><input type="text" name="prix" value="" id="PrixAuto"></td>
        </tr>
        <tr>
            <td>Caractéristiques automate</td>
            <td><input type="text" name="caracteristiques" value="" id="CaracAuto"></td>
        </tr>
    </table>

</body>
</html>


#logo{
	float:left;
	width:100px;
	height:100px;
	margin-left:55px;
        margin-top:5px;
}

#Titre{
	text-align : center;
	 font-size: 30px; 
	 color : black;
}


#formatdiv{
        background-color: #58ACFA;
	padding-top:20px;
	margin-top:5px;
        padding-bottom:20px;
	margin-bottom:5px;
	margin-left:300px;

	width: 700px;
	height: 70px;
}

body {
       background-color: #C2DCF5;
}

Jour 2:

Lorsque cela à été fait, j’ai utilisé JQuery le célèbre Framework JavaScript permettant en quelques lignes de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Pour cela j’ai dû télécharger le code source sur le site officiel : https://jquery.com/download/

Maintenant que cela est fait je peux dorénavant inclure le code source jQuery.js au sein d’une balise <script></script>

<script src="jquery.js"></script>

J’inclue alors une fonction utilisant les fonctionnalités du Framework jQuery

function fct() {
    $.get("http://127.0.0.1/bacnet/test.php",
         function succes(data) {
             alert(data)
         });
}

Par rapport à la fonction :


( data représente les données de ma page “test.php” présente ci-dessous)
<?php
    echo "Salut, je suis la page de test !"
?>

J’inclue également un bouton qui actionne la fonction lorsque l’on clique dessus

<input type="button" onclick="fct();" value="Click" />

Démonstration :

Jour3:

Ce jour-ci, mon travail à été d’utiliser une nouvelle fonctionnalité qui consiste à ce qu’une page HTML apparaisse au sein de mon interface lorsque je clique sur un élément de mon ComboBox.

Ayant trois éléments présents dans mon ComboBox, je dois alors créer trois pages statiques.

La page “Incendie” :

La page “Commande barrière” :

La page “Évacuation”

Afin de faire apparaitre ces pages web, dans la ligne de code de mon SelectBox j’ai écrit :

<select name="Liste" onchange="fctz(this);">

Ainsi, j’ai réalisé une fonction javascript:

function fctz(e) {
    var v = e.value;
    $.post("http://127.0.0.1/bacnet/select.php",
        {key : v},
         function succes(data) {
             $("#content").html(data);
         }); 
}

Cette fonction ci-dessus relie un code php “select.php ” qui est le suivant :

<?php

$choix = $_POST["key"];
if ($choix=="1"){
echo "<iframe width='700' height='800' src='http://127.0.0.1/bacnet/Incendie.html'></iframe>";
}
elseif ($choix=="2"){
echo "<iframe width='700' height='400' src='http://127.0.0.1/bacnet/Commande_barriere.html'></iframe>";
}
elseif ($choix=="3"){
echo "<iframe width='700' height='600' src='http://127.0.0.1/bacnet/Evacuation.html'></iframe>";
}
else{
echo "";
}

?>	

Nous pouvons alors remarquer le résultat !

Jour 4:

(Jour férié : Jeudi de l’ascension)

Jour 5:

Toujours dans la continuité de mon travail que j’ai réalisé précédemment, cette fois ci j’ai dû insérer des données dans une base de donnée à partir de ma page html incendie.

(Lorsque les données sont écrient dans la case ci-dessous et que j’appuie sur le bouton sauvegarder)

Premièrement il a fallut créer une base de donnée;

Ensuite il a fallut coder , premièrement en HTML , pour dire que lorsque nous cliquons sur le bouton sauvegarder une fonction en JavaScript s’active (onclick) :

<input type="submit" value="Click" onclick="fcty();" />

La fonction JavaScript qui va récupérer les données de mon code PHP est défini par :

<script src="jquery.js"></script>
<script>
    function fcty() {
        var donnee = document.getElementById("inc");
        if (donnee == undefined) {
            return;
        }
        var data = { inc: donnee.value };
        $.post("http://127.0.0.1/bacnet/incendie.php",
            data,
            function succes(data) {
                $("#content").html(data);
            });
    }
</script>

Et enfin, voici le code PHP: (A4.1.7)

<?php
 
//connexion à la base
try
		{
			$connexion = new PDO('mysql:host=localhost;dbname=axiome','axiome','concept');
		}
		catch (Exception $e)
		{ 
			die('Erreur : '.$e->getMessage());
		}
		

//insertion des données
$inc = $_POST['inc'];
$idproc = "1";
$connexion->exec("INSERT INTO `procedure`(idproc,comment) VALUES('".$idproc."','".$inc."')");
 
?>	

Démonstration :

(Important de noter que la totalité des codes PHP présents sur le compte rendu ont été détachés de mes pages de codes principales à travers des fonctions JavaScript afin que le code PHP ne sois pas visible dans le code source. Cela assure la sécurité des données car dans le PDO des fichiers PHP les données de connexion à la base sont présents. Cette pratique de codage fait parti des bonnes pratiques à intégrer) (A5.2.1)