Création d'une page Web visant l'affichage des données

Avant de continuer

Enregistrements

Avant de continuer, vérifier que votre répertoire de groupe DOSSUP contient :

le diaporama : 1_Recherches_initiales_NOM1_NOM2_NOM3
les bons de commande 2_Bon_de_commande_Lextronic et 2_Bon_de_commande_Gotronic
le fichier 3_cotations_croquis.docx
les fichiers Solidworks des pièces sous le nom 4_piece_NOM_DE_LA_PIECE.sldprt
le dossier 5_Solidworks_Pyroshield contient :
- les pièces de votre objet connecté 4_piece_NOM_DE_LA_PIECE.sldprt.
- les pièces des cartes électroniques
- le assemblage 6_assemblage.SLDASM
la photo du cablâge sous le nom 7_Photo_Câblage.
le programme dans le répertoire 8_programmes_PICO dans le répertoire du groupe dans DOSSUP.

Conception d'une page Web visant à afficher les données

Objectif

L'objectif est de concevoir une page Web affichant les données issues de l'objet connecté PyroShield.

Enregistrements

Dans votre répertoire de groupe DOSSUP, enregistrer les fichiers de votre site Web dans le répertoire 9_Code_Web.

Site Web

Ecrire le code HTML / CSS d'une page Web, en utilisant vos connaissances de SNT, afin de proposer une page Web visuel attractif et épuré permettant d'afficher les données horodatées issues de votre objet connecté.

Ressources

Cours de SNT sur le langage HTML

Cours de SNT sur le langage CSS

Exemple d'affichage brut de données horodatées

Le code HTML de cette page est le suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>Sigfox</title>
        <meta charset="utf-8">
    </head>

    <body>
        <p>OK !!</p>
        <p>tempa,tempb,humidite,masse</p>
        <p>21-12-23 02:46:48,021,016,039,013</p>
        <p>21-12-23 03:19:22,020,016,039,013</p>
        <p>21-12-23 03:29:11,021,016,039,013</p>
        <p>21-12-23 04:58:51,022,016,039,013</p>
        <p>21-12-23 05:53:49,020,016,039,013</p>
        <p>21-12-23 05:54:49,015,013,031,027</p>
    </body>
</html>

Code côté serveur

Le code associé côté serveur est le suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>Sigfox</title>
        <meta charset="utf-8">
    </head>

    <body>
        <?php
            // Ouverture du fichier en lecture  
            $fichier = fopen('data.csv', 'r');

            echo '<p>OK !!</p>';

            // Tant que la fin du fichier n'est pas atteinte
            while(!feof($fichier))
            {
                // Lecture d'une ligne
                $ligne = fgets($fichier);

                // Affichage de la ligne dans un paragraphe HTML
                echo '<p>'.$ligne.'</p>';
            }
        ?>
    </body>
</html>