Web Application

Front-end¶

My website page allows the user to view all the generated dice results, the date and what type of dice it was.

This is how my front-end looks like ⬇️ Alternative text

Code HTML¶

<!DOCTYPE html>
<html lang="en">
  <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>
    <script src="static/js/api.js"></script>
    <title>My 7 segment digital dice</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Tomorrow:wght@700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body class="m-auto">
    <h1 class="h1">Dice roll results</h1>
    <div id="roll-container" class="flex flex-col space-y-4"></div>

    <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>
  </body>
</html>

Code CSS¶

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient( #19335A,#8FC8EB) 0 100% no-repeat;
  max-width: 600px;
  margin: 0px auto;
}



.Result {
  font-size: 24px;
  font-weight: bold;
}

.rollBox {
  border-bottom: 10px solid green;
}

h1 {
  font-size: 64px !important;
  color: white;
  padding-top: 100px;
  padding-bottom: 50px;
}

Back-end¶

I use the variable “$conn” to avoid duplication of code to connect to the database.

Code in PHP¶

<?php

// @author Lucie Banszelova
// @information Backend PHP
// @license MIT License
// @goal Create Rest API. And to store and display dice rolls in the database.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");

// set up database connection
$servername = "Your_Server_Name";
$username = "Your_User_Name";
$password = "Your_Password";
$dbname = "Your_DB_Name";

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

// set headers
header("Content-Type: application/json");

// check request method
$method = $_SERVER["REQUEST_METHOD"];

// get data from request body
$data = json_decode(file_get_contents("php://input"), true);
// handle GET request
if ($method === "GET") {
    // get all data from table
    $sql = "SELECT RollID, result, date, dice_type FROM DigitalDiceRoll";
    $result = $conn->query($sql);

    // check if any data is returned
    if ($result->num_rows > 0) {
        // create an array to store data
        $data = array();
        while ($row = mysqli_fetch_assoc($result)) {
            $data[] = $row;
        }

        // return data as JSON
        echo json_encode($data);
    } else {
        // return error message
        // echo json_encode(array("message" => "No data found."));
    }
}
// handle POST request
if ($method === "POST") {

    // set date to current datetime
    $data["date"] = date("Y-m-d H:i:s");

    // prepare and execute SQL statement
    $sql = "INSERT INTO DigitalDiceRoll (result, date, dice_type) VALUES (?, ?, ?)";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("iss", $data["result"], $data["date"], $data["dice_type"]);
    if ($stmt->execute()) {
        // return success message
        echo json_encode(array("message" => "Data inserted successfully."));
    } else {
        // return error message
        echo json_encode(array("message" => "Failed to insert data."));
    }
}

// close database connection
$conn->close();
?>

Database¶

The database is used to store all the necessary data about my digital dice. I have created a database in which I can see all the data such as the results of the dice and the date they were used. My database system is able to provide services such as: efficient database manipulation, database structure definition, concurrent data access and data protection. 🔍