Documentation

Front end¶

Introduction The front end of the website functions as a vessel for the employer to see who checked in and out.

HTML

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAqGMUAE2vuAAVll4AvXgqADWPDgA2jpYAJIyeAEansAAnipwANbBJAIxLAAAnlagARrCCAAAAAAAAAAAAAAALu6rQAAAAC7u9o90wAAC7uxzaOqoAC7sREczaG7ALsREauxERsLsREcG7FBG7uxHay7sRQRu7FisbuxERG7sYKxu7EUEbu8yaGrsRQRu7wsLcqxERuwvIhyyqFBGwC6Xc3VVRG7AAul3boRG9AAAF1bu7G9AAAAANXbuwAAD4HwAA4AcAAMADAACAAQAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAwAMAAOAHAAD4HwAA" rel="icon" type="image/x-icon" />
    <link rel="stylesheet" href="static/css/app.css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/static/js/tunnel-script.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>IoT: Individual Project Website</title>
</head>

<body>
    <div class="flex items-stretch bg-grey-lighter min-h-screen flex-col">
        <div class="grow flex justify-center items-stretch">
            <div class="self-center">
                <h1 id="page-title" class="text-indigo-900 font-bold uppercase">Internet of Things</h1>
                <h2 id="page-sub-title" class="text-red-600 font-bold uppercase mb-20">Individual Project</h2>
            </div>
        </div>

    <section id="dashboard-button">
        <button type="button">
            <a href="dashboard.html">Dashboard</a>
        </button>
    </section>


        <footer class="flex flex-row-reverse p-5">
            <ul id="footer-nav" class="flex flex-wrap items-center mt-3 text-sm text-gray-500">
                <li>
                    <a href="/phpmyadmin" class="mr-4 hover:underline md:mr-6 ">PhpMyAdmin</a>
                </li>
            </ul>
        </footer>
    </div>
</body>

</html>

dashboard.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Blueprint dashboard</title>
    <script src="/static/js/app.js" defer></script>
</head>

<body class="dash">

    <header>
        <section>
            <h1>Dashboard Time Registration</h1>
        </section>
    </header>


    <section id="table">
        <table>
            <thead>
                <tr>
                    <td>Naam</td>
                    <td>Card id</td>
                    <td>Tijd</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </section>
</body>

</html>

CSS

/* All */
*,
*::after,
*::before {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100vh;
}

body {
    font-family: 'Open sans', sans-serif;
    height: 100vh;
}


/* Index*/
body section#dashboard-button {
    position: fixed; /* to make sure it stays there*/
    top: 60%;
    left: 40%;
}

body section#dashboard-button button {
    background-color: #6970db; /* purple */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 10px;
}



/* Dashboard */
body.dash header{
    position: sticky; /* zo blijft hij op zn plek tijdens het scrollen*/
    width: 100%; /* lekker de volle breedte*/
    top: 0; 
    background-color: white;
    height: 100px;
}


body.dash header section {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dash header section h1 {
    color: #6970db;
    padding: 10px 5px;
}

body.dash section#table{
    display: flex;
    justify-content: center;
}

.dash td {
    border: 1px solid #ddd;
    padding: 8px;
}

.dash thead{
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04AA6D;
    color: white;
}

front end website

I am by no means a Css wizard, but I managed to create a simple and clean looking table.

Back end¶

The back-end of the website is where the magic happens. There are three pages that make up the back-end of the website.

Insert.php

<?php
// Inez, Open source, goal is to get data to and from phpmyadmin.
$servername = "mariadb";
$username = "root";
$password = "7YKyE8R2AhKzswfN";
$dbname = "iot";

$cardUID = $_GET["cardUID"];

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO Registratie(card_id,datum) VALUES ('" . $cardUID . "', NOW())";

if ($conn->query($sql) === TRUE) {
  echo "New record created successfully";
} else {
  echo "Error: " . $sql . "<br>" . $conn->error;
}

echo "Hello! $cardUID is here";


//getting data from php and putting it in html
$db= $conn;
$tableName="Registratie";
$columns= ['datum', 'card_id'];
$fetchData = fetch_data($db, $tableName, $columns);

function fetch_data($db, $tableName, $columns){
  if(empty($db)){
   $msg= "Database connection error";
  }elseif (empty($columns) || !is_array($columns)) {
   $msg="columns Name must be defined in an indexed array";
  }elseif(empty($tableName)){
    $msg= "Table Name is empty";}
  };

$conn->close();
?>

getdb.php

<?php
// Inez, Open source, goal is to put all data from phpmyadmin in to an array and print it in the console.
$servername = "mariadb";
$username = "root";
$password = "7YKyE8R2AhKzswfN";
$dbname = "iot";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}


$sql = "SELECT * FROM `Registratie` INNER JOIN `Gebruiker`ON Registratie.card_id = Gebruiker.card_id ";

$result = $conn->query($sql);

$data[] = array();
//$datum[] = array();
//$card_id[] = array();z
$counter = 0;

if ($result->num_rows > 0) {

    // output data of each row
    while($row = $result->fetch_assoc()) {

        //echo $row["datum"] . " " . $row["card_id"];
        //  $data[] = $row;
        // $card_id[] = $row["card_id"];
        // $datum[] = $row["datum"];
        $data[$counter]["datum"] = $row["datum"];
        $data[$counter]["card_id"] = $row["card_id"];
        $data[$counter]["naam"] = $row["naam"];
        $counter++;
    }

} else {
    echo "0 results";
}

$conn->close();


print_r(json_encode($data));

?>

app.js

// Inez, Open source, goal is to fetch the data, respond in json, made a table and display the table in html code.

const table = document.querySelector('table')



function fetchData(){
    return fetch('http://localhost/getdb.php')
    .then((response) => response.json())
}

async function tableCreate(){
    let html = '';
    const data = await fetchData();
    console.log(data);
    data.forEach(registratie => {
        html += `
        <tr>
            <td>${registratie.naam}</td>
            <td>${registratie.card_id}</td>
            <td>${registratie.datum}</td>
        </tr>
        `;
    });
    table.innerHTML = html;
}

// window.addEventListener()
tableCreate();