From 81473bd9fe4a6b1f0b2a84800fd9a9507d87e9b3 Mon Sep 17 00:00:00 2001
From: Nanda_Arsya_Salsabillah <nandaarsya123@gmail.com>
Date: Wed, 17 Jul 2024 12:05:02 +0700
Subject: [PATCH] first commit

---
 .htaccess              |   4 +
 esp-database.php       | 237 +++++++++++++++++++++++++++++++++++++++
 esp-outputs-action.php |  80 ++++++++++++++
 esp-outputs.php        | 129 ++++++++++++++++++++++
 esp-style.css          | 138 +++++++++++++++++++++++
 index.html             | 244 +++++++++++++++++++++++++++++++++++++++++
 koneksi.php            |  32 ++++++
 login.php              |  54 +++++++++
 logo.png               | Bin 0 -> 11841 bytes
 logout.php             |   6 +
 regis.php              |  59 ++++++++++
 style.css              |  67 +++++++++++
 12 files changed, 1050 insertions(+)
 create mode 100644 .htaccess
 create mode 100644 esp-database.php
 create mode 100644 esp-outputs-action.php
 create mode 100644 esp-outputs.php
 create mode 100644 esp-style.css
 create mode 100644 index.html
 create mode 100644 koneksi.php
 create mode 100644 login.php
 create mode 100644 logo.png
 create mode 100644 logout.php
 create mode 100644 regis.php
 create mode 100644 style.css

diff --git a/.htaccess b/.htaccess
new file mode 100644
index 0000000..e1d2079
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1,4 @@
+
+# HTID:23459598: DO NOT REMOVE OR MODIFY THIS LINE AND THE LINES BELOW
+php_value display_errors 1
+# DO NOT REMOVE OR MODIFY THIS LINE AND THE LINES ABOVE HTID:23459598:
diff --git a/esp-database.php b/esp-database.php
new file mode 100644
index 0000000..6b5a025
--- /dev/null
+++ b/esp-database.php
@@ -0,0 +1,237 @@
+<?php
+    $servername = "localhost";
+    // Your Database name
+    $dbname = "id22388794_esp_data";
+    // Your Database user
+    $username = "id22388794_touchlight";
+    // Your Database user password
+    $password = "N4nd4155#";
+
+    function createOutput($name, $board, $gpio, $state) {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "INSERT INTO Outputs (name, board, gpio, state)
+        VALUES ('" . $name . "', '" . $board . "', '" . $gpio . "', '" . $state . "')";
+
+       if ($conn->query($sql) === TRUE) {
+            return "New output created successfully";
+        }
+        else {
+            return "Error: " . $sql . "<br>" . $conn->error;
+        }
+        $conn->close();
+    }
+
+    function deleteOutput($id) {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "DELETE FROM Outputs WHERE id='". $id .  "'";
+
+       if ($conn->query($sql) === TRUE) {
+            return "Output deleted successfully";
+        }
+        else {
+            return "Error: " . $sql . "<br>" . $conn->error;
+        }
+        $conn->close();
+    }
+
+    function updateOutput($id, $state) {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "UPDATE Outputs SET state='" . $state . "' WHERE id='". $id .  "'";
+
+       if ($conn->query($sql) === TRUE) {
+            return "Output state updated successfully";
+        }
+        else {
+            return "Error: " . $sql . "<br>" . $conn->error;
+        }
+        $conn->close();
+    }
+
+    function getAllOutputs() {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "SELECT id, name, board, gpio, state FROM Outputs ORDER BY board";
+        if ($result = $conn->query($sql)) {
+            return $result;
+        }
+        else {
+            return false;
+        }
+        $conn->close();
+    }
+
+    function getAllOutputStates($board) {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "SELECT gpio, state FROM Outputs WHERE board='" . $board . "'";
+        if ($result = $conn->query($sql)) {
+            return $result;
+        }
+        else {
+            return false;
+        }
+        $conn->close();
+    }
+
+    function getOutputBoardById($id) {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "SELECT board FROM Outputs WHERE id='" . $id . "'";
+        if ($result = $conn->query($sql)) {
+            return $result;
+        }
+        else {
+            return false;
+        }
+        $conn->close();
+    }
+
+    function updateLastBoardTime($board) {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "UPDATE Boards SET last_request=now() WHERE board='". $board .  "'";
+
+       if ($conn->query($sql) === TRUE) {
+            return "Output state updated successfully";
+        }
+        else {
+            return "Error: " . $sql . "<br>" . $conn->error;
+        }
+        $conn->close();
+    }
+
+    function getAllBoards() {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "SELECT board, last_request FROM Boards ORDER BY board";
+        if ($result = $conn->query($sql)) {
+            return $result;
+        }
+        else {
+            return false;
+        }
+        $conn->close();
+    }
+
+    function getBoard($board) {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "SELECT board, last_request FROM Boards WHERE board='" . $board . "'";
+        if ($result = $conn->query($sql)) {
+            return $result;
+        }
+        else {
+            return false;
+        }
+        $conn->close();
+    }
+
+    function createBoard($board) {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "INSERT INTO Boards (board) VALUES ('" . $board . "')";
+
+       if ($conn->query($sql) === TRUE) {
+            return "New board created successfully";
+        }
+        else {
+            return "Error: " . $sql . "<br>" . $conn->error;
+        }
+        $conn->close();
+    }
+
+    function deleteBoard($board) {
+        global $servername, $username, $password, $dbname;
+
+        // Create connection
+        $conn = new mysqli($servername, $username, $password, $dbname);
+        // Check connection
+        if ($conn->connect_error) {
+            die("Connection failed: " . $conn->connect_error);
+        }
+
+        $sql = "DELETE FROM Boards WHERE board='". $board .  "'";
+
+       if ($conn->query($sql) === TRUE) {
+            return "Board deleted successfully";
+        }
+        else {
+            return "Error: " . $sql . "<br>" . $conn->error;
+        }
+        $conn->close();
+    }
+
+?>
diff --git a/esp-outputs-action.php b/esp-outputs-action.php
new file mode 100644
index 0000000..8dd59fb
--- /dev/null
+++ b/esp-outputs-action.php
@@ -0,0 +1,80 @@
+<?php
+    include_once('esp-database.php');
+
+    $action = $id = $name = $gpio = $state = "";
+
+    if ($_SERVER["REQUEST_METHOD"] == "POST") {
+        $action = test_input($_POST["action"]);
+        if ($action == "output_create") {
+            $name = test_input($_POST["name"]);
+            $board = test_input($_POST["board"]);
+            $gpio = test_input($_POST["gpio"]);
+            $state = test_input($_POST["state"]);
+            $result = createOutput($name, $board, $gpio, $state);
+
+            $result2 = getBoard($board);
+            if(!$result2->fetch_assoc()) {
+                createBoard($board);
+            }
+            echo $result;
+        }
+        else {
+            echo "No data posted with HTTP POST.";
+        }
+    }
+
+    if ($_SERVER["REQUEST_METHOD"] == "GET") {
+        $action = test_input($_GET["action"]);
+        if ($action == "outputs_state") {
+            $board = test_input($_GET["board"]);
+            $result = getAllOutputStates($board);
+            if ($result) {
+                while ($row = $result->fetch_assoc()) {
+                    $rows[$row["gpio"]] = $row["state"];
+                }
+            }
+            echo json_encode($rows);
+            $result = getBoard($board);
+            if($result->fetch_assoc()) {
+                updateLastBoardTime($board);
+            }
+        }
+        else if ($_GET["action"] == "output_update") {
+            $id = test_input($_GET["id"]);
+            $state = test_input($_GET["state"]); // Check if state is correctly received
+
+            if ($state == 0) {
+            $newState = 1; // Update state based on your logic (if needed)
+            } else {
+            $newState = 0;
+            }
+
+            $result = updateOutput($id, $newState);
+            echo $result;
+        }
+
+        else if ($action == "output_delete") {
+            $id = test_input($_GET["id"]);
+            $board = getOutputBoardById($id);
+            if ($row = $board->fetch_assoc()) {
+                $board_id = $row["board"];
+            }
+            $result = deleteOutput($id);
+            $result2 = getAllOutputStates($board_id);
+            if(!$result2->fetch_assoc()) {
+                deleteBoard($board_id);
+            }
+            echo $result;
+        }
+        else {
+            echo "Invalid HTTP request.";
+        }
+    }
+
+    function test_input($data) {
+        $data = trim($data);
+        $data = stripslashes($data);
+        $data = htmlspecialchars($data);
+        return $data;
+    }
+?>
diff --git a/esp-outputs.php b/esp-outputs.php
new file mode 100644
index 0000000..b8f7087
--- /dev/null
+++ b/esp-outputs.php
@@ -0,0 +1,129 @@
+<?php
+session_start();
+if (!isset($_SESSION['user'])) {
+    // Jika sesi tidak ada, arahkan pengguna ke halaman login
+    header("Location: login.php");
+    exit();
+}
+
+// Parameter koneksi database
+$servername = "localhost";
+$username = "id22388794_touchlight";  // ganti dengan username MySQL Anda
+$password = "N4nd4155#";  // ganti dengan password MySQL Anda
+$database = "id22388794_esp_data";  // ganti dengan nama database Anda
+
+// Membuat koneksi
+$koneksi = new mysqli($servername, $username, $password, $database);
+
+// Memeriksa koneksi
+if ($koneksi->connect_error) {
+    die("Koneksi gagal: " . $koneksi->connect_error);
+}
+?>
+
+<?php
+    include_once('esp-database.php');
+
+    $result = getAllOutputs();
+    $html_buttons = null;
+    if ($result) {
+        while ($row = $result->fetch_assoc()) {
+            if ($row["state"] == "1"){
+                $button_checked = "checked";
+            }
+            else {
+                $button_checked = "";
+            }
+            $html_buttons .= '<h3>' . $row["name"] . ' - Board '. $row["board"] . ' - GPIO ' . $row["gpio"] . ' (<i><a onclick="deleteOutput(this)" href="javascript:void(0);" id="' . $row["id"] . '">Delete</a></i>)</h3><label class="switch"><input type="checkbox" onchange="updateOutput(this)" id="' . $row["id"] . '" ' . $button_checked . '><span class="slider"></span></label>';
+        }
+    }
+
+    $result2 = getAllBoards();
+    $html_boards = null;
+    if ($result2) {
+        $html_boards .= '<h3>Boards</h3>';
+        while ($row = $result2->fetch_assoc()) {
+            $row_reading_time = $row["last_request"];
+            // Uncomment to set timezone to - 1 hour (you can change 1 to any number)
+            //$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time - 1 hours"));
+
+            // Uncomment to set timezone to + 4 hours (you can change 4 to any number)
+            //$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time + 7 hours"));
+            $html_boards .= '<p><strong>Board ' . $row["board"] . '</strong> - Last Request Time: '. $row_reading_time . '</p>';
+        }
+    }
+?>
+
+<!DOCTYPE HTML>
+<html>
+    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" type="text/css" href="esp-style.css">
+        <title>TouchLight Dashboard</title>
+    </head>
+<body>
+    <h2>TouchLight</h2>
+    <a href="logout.php">Logout</a> <!-- Tombol Logout -->
+    <?php echo $html_buttons; ?>
+    <br><br>
+    <?php echo $html_boards; ?>
+    <br><br>
+    <div><form onsubmit="return createOutput();">
+        <h3>Create New Output</h3>
+        <label for="outputName">Name</label>
+        <input type="text" name="name" id="outputName"><br>
+        <label for="outputBoard">Board ID</label>
+        <input type="number" name="board" min="0" id="outputBoard">
+        <label for="outputGpio">GPIO Number</label>
+        <input type="number" name="gpio" min="0" id="outputGpio">
+        <label for="outputState">Initial GPIO State</label>
+        <select id="outputState" name="state">
+          <option value="0">0 = OFF</option>
+          <option value="1">1 = ON</option>
+        </select>
+        <input type="submit" value="Create Output">
+        <p><strong> <img class="warning-icon" src="logo.png" alt="Warning icon" style="vertical-align: middle;"> Note:</strong> </p> In some devices, you might need to refresh the page to see your newly created buttons or to remove deleted buttons. 
+    </form></div>
+
+    <script>
+        function updateOutput(element) {
+            var xhr = new XMLHttpRequest();
+            var newState = element.checked ? 1 : 0; // Set state based on checkbox checked state
+            xhr.open("GET", "esp-outputs-action.php?action=output_update&id="+element.id+"&state="+newState, true);
+            xhr.send();
+            }
+
+
+        function deleteOutput(element) {
+            var result = confirm("Want to delete this output?");
+            if (result) {
+                var xhr = new XMLHttpRequest();
+                xhr.open("GET", "esp-outputs-action.php?action=output_delete&id="+element.id, true);
+                xhr.send();
+                alert("Output deleted");
+                setTimeout(function(){ window.location.reload(); });
+            }
+        }
+
+        function createOutput(element) {
+            var xhr = new XMLHttpRequest();
+            xhr.open("POST", "esp-outputs-action.php", true);
+
+            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+            xhr.onreadystatechange = function() {
+                if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+                    alert("Output created");
+                    setTimeout(function(){ window.location.reload(); });
+                }
+            }
+            var outputName = document.getElementById("outputName").value;
+            var outputBoard = document.getElementById("outputBoard").value;
+            var outputGpio = document.getElementById("outputGpio").value;
+            var outputState = document.getElementById("outputState").value;
+            var httpRequestData = "action=output_create&name="+outputName+"&board="+outputBoard+"&gpio="+outputGpio+"&state="+outputState;
+            xhr.send(httpRequestData);
+        }
+    </script>
+</body>
+</html>
diff --git a/esp-style.css b/esp-style.css
new file mode 100644
index 0000000..c93fec5
--- /dev/null
+++ b/esp-style.css
@@ -0,0 +1,138 @@
+
+html {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: inline-block;
+    text-align: center;
+    background-color: #f7f9fc;
+    color: #333;
+}
+
+h2 {
+    font-size: 2.5rem;
+    color: #556b2f;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+}
+
+body {
+    max-width: 600px;
+    margin: 30px auto;
+    padding: 0 20px;
+    background-color: #ffffff;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    padding-bottom: 25px;
+    transition: all 0.3s ease-in-out;
+}
+
+body:hover {
+    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 120px;
+    height: 68px;
+    margin: 20px 0;
+}
+
+.switch input {
+    display: none;
+}
+
+.slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #dcdcdc;
+    border-radius: 34px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.4s, box-shadow 0.4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 52px;
+    width: 52px;
+    left: 8px;
+    bottom: 8px;
+    background-color: #ffffff;
+    transition: transform 0.4s, box-shadow 0.4s;
+    border-radius: 50%;
+    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+input:checked + .slider {
+    background-color: #7cb342;
+    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+input:checked + .slider:before {
+    transform: translateX(52px);
+    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
+}
+
+input[type=text], input[type=number], select {
+    width: 100%;
+    padding: 14px 20px;
+    margin: 10px 0;
+    display: inline-block;
+    border: 2px solid #dcdcdc;
+    border-radius: 8px;
+    box-sizing: border-box;
+    background-color: #fafafa;
+    transition: border-color 0.3s, background-color 0.3s;
+}
+
+input[type=text]:focus, input[type=number]:focus, select:focus {
+    border-color: #7cb342;
+    background-color: #ffffff;
+    outline: none;
+}
+
+input[type=submit] {
+    width: 100%;
+    background-color: #7cb342;
+    color: white;
+    padding: 14px 20px;
+    margin: 10px 0;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+}
+
+input[type=submit]:hover {
+    background-color: #558b2f;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+.warning-icon {
+    width: 20px; /* Ukuran ikon */
+    height: 20px;
+    margin-right: 5px; /* Jarak antara ikon dengan teks di sebelah kanan */
+    vertical-align: middle; /* Memastikan ikon berada di tengah vertikal dengan teks */
+}
+
+div {
+    text-align: left;
+    border-radius: 10px;
+    background-color: #f0f0f0;
+    padding: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+div:hover {
+    background-color: #ffffff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..437bc5e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,244 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="esp-style.css">
+    <title>LighTouch Dashboard</title>
+    <style>
+        /* Gaya untuk sidebar */
+        .sidebar {
+            height: 100%;
+            width: 300px; /* Lebar sidebar */
+            position: fixed;
+            top: 0;
+            left: -300px; /* Mulai tersembunyi di luar layar */
+            background-color: #1e2a38; /* Warna latar belakang sidebar */
+            color: #fff;
+            padding-top: 30px;
+            transition: left 0.3s ease; /* Transisi animasi */
+            box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Bayangan untuk sidebar */
+            z-index: 1000; /* Agar sidebar berada di atas konten */
+        }
+
+        .sidebar h2 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #f1f1f1; /* Warna teks */
+        }
+
+        .sidebar a {
+            padding: 15px 20px;
+            text-decoration: none;
+            font-size: 18px;
+            color: #b0bec5; /* Warna tautan */
+            display: block;
+            border-bottom: 1px solid #334755; /* Garis bawah tautan */
+        }
+
+        .sidebar a:hover {
+            background-color: #334755; /* Warna latar belakang tautan saat hover */
+            color: #fff; /* Warna teks tautan saat hover */
+        }
+
+        .sidebar .exit-button {
+            padding: 15px 20px;
+            text-align: center;
+            background-color: #ff4d4d; /* Warna tombol Exit */
+            color: #fff;
+            border: none;
+            cursor: pointer;
+            border-radius: 5px; /* Sudut membulat tombol */
+            box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Bayangan tombol */
+            margin-top: 20px; /* Jarak dari menu sebelumnya */
+            margin-bottom: 30px; /* Jarak dari bawah sidebar */
+        }
+
+        .sidebar .exit-button:hover {
+            background-color: #e60000; /* Warna tombol Exit saat hover */
+        }
+
+        .open-btn {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            font-size: 24px;
+            background: #1e2a38;
+            color: white;
+            border: none;
+            padding: 15px;
+            cursor: pointer;
+            border-radius: 5px; /* Sudut membulat tombol */
+            box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Bayangan tombol */
+            z-index: 1001; /* Agar tombol berada di atas konten */
+        }
+
+        .open-btn:hover {
+            background: #334755; /* Warna latar belakang tombol saat hover */
+        }
+
+        .close-btn {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            font-size: 30px;
+            cursor: pointer;
+            color: #b0bec5; /* Warna ikon close */
+        }
+
+        .close-btn:hover {
+            color: #fff; /* Warna ikon close saat hover */
+        }
+
+        .content {
+            padding: 20px;
+        }
+
+        .main-content {
+            transition: margin-left 0.3s ease;
+        }
+
+        /* Responsif untuk tampilan smartphone */
+        @media screen and (max-width: 600px) {
+            .sidebar {
+                width: 100%; /* Lebar penuh pada smartphone */
+                left: -100%; /* Mulai tersembunyi di luar layar */
+            }
+
+            .open-btn {
+                font-size: 18px;
+                padding: 10px;
+            }
+
+            .main-content {
+                transition: none; /* Menghilangkan transisi untuk tampilan mobile */
+            }
+
+            .sidebar .exit-button {
+                position: relative;
+                margin-top: 20px; /* Jarak dari menu sebelumnya */
+                margin-bottom: 20px; /* Jarak dari bawah sidebar */
+                width: calc(100% - 40px); /* Lebar tombol Exit disesuaikan dengan padding */
+                left: 20px;
+                background-color: #ff4d4d; /* Warna tombol Exit */
+            }
+        }
+    </style>
+</head>
+<body>
+    <button class="open-btn" onclick="toggleSidebar()">&#9776;</button>
+
+    <div id="mySidebar" class="sidebar">
+        <span class="close-btn" onclick="toggleSidebar()">&times;</span>
+        <h2>Account</h2>
+        <a href="#">Profile</a>
+        <a href="#">Settings</a>
+        <a href="#">Support</a>
+        <button class="exit-button" onclick="window.location.href='logout.php'">Exit</button>
+    </div>
+
+    <div id="main" class="main-content">
+        <h2>LighTouch</h2>
+        <?php echo $html_buttons; ?>
+        <br><br>
+        <?php echo $html_boards; ?>
+        <br><br>
+        <div>
+            <form onsubmit="return createOutput();">
+                <h3>Create New Output</h3>
+                <label for="outputName">Name</label>
+                <input type="text" name="name" id="outputName"><br>
+                <label for="outputBoard">Board ID</label>
+                <input type="number" name="board" min="0" id="outputBoard">
+                <label for="outputGpio">GPIO Number</label>
+                <input type="number" name="gpio" min="0" id="outputGpio">
+                <label for="outputState">Initial GPIO State</label>
+                <select id="outputState" name="state">
+                    <option value="0">0 = OFF</option>
+                    <option value="1">1 = ON</option>
+                </select>
+                <input type="submit" value="Create Output">
+                <p><strong> <img class="warning-icon" src="logo.png" alt="Warning icon" style="vertical-align: middle;"> Note:</strong> </p>
+                In some devices, you might need to refresh the page to see your newly created buttons or to remove deleted buttons. 
+            </form>
+        </div>
+    </div>
+
+    <script>
+        var isHalfOpen = false;
+
+        function toggleSidebar() {
+            var sidebar = document.getElementById("mySidebar");
+            var mainContent = document.getElementById("main");
+            var screenWidth = window.innerWidth;
+
+            if (screenWidth <= 600) {
+                // Jika tampilan pada smartphone
+                if (sidebar.style.left === "0px") {
+                    sidebar.style.left = isHalfOpen ? "0" : "-100%"; /* Tutup seluruhnya */
+                    isHalfOpen = !isHalfOpen; /* Toggle status separuh terbuka */
+                } else {
+                    sidebar.style.left = "0";
+                    isHalfOpen = false; /* Set status separuh terbuka ke false saat sidebar dibuka */
+                }
+            } else {
+                // Jika tampilan pada desktop
+                if (sidebar.style.left === "0px") {
+                    sidebar.style.left = isHalfOpen ? "0" : "-300px"; /* Tutup seluruhnya */
+                    isHalfOpen = !isHalfOpen; /* Toggle status separuh terbuka */
+                } else {
+                    sidebar.style.left = "0";
+                    isHalfOpen = false; /* Set status separuh terbuka ke false saat sidebar dibuka */
+                }
+                mainContent.style.marginLeft = sidebar.style.left === "0px" ? "300px" : "0";
+            }
+        }
+
+        function updateOutput(element) {
+            var xhr = new XMLHttpRequest();
+            var state = element.checked ? 1 : 0;
+            xhr.open("GET", `esp-outputs-action.php?action=output_update&id=${element.id}&state=${state}`, true);
+            xhr.send();
+        }
+
+        function deleteOutput(element) {
+            var result = confirm("Want to delete this output?");
+            if (result) {
+                var xhr = new XMLHttpRequest();
+                xhr.open("GET", `esp-outputs-action.php?action=output_delete&id=${element.id}`, true);
+                xhr.send();
+                xhr.onload = function() {
+                    if (xhr.status === 200) {
+                        alert("Output deleted");
+                        setTimeout(function() { window.location.reload(); }, 1000); // Menunggu 1 detik sebelum me-refresh
+                    } else {
+                        alert("Failed to delete output");
+                    }
+                };
+            }
+        }
+
+        function createOutput() {
+            var xhr = new XMLHttpRequest();
+            xhr.open("POST", "esp-outputs-action.php", true);
+            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+            xhr.onreadystatechange = function() {
+                if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+                    alert("Output created");
+                    setTimeout(function() { window.location.reload(); }, 1000); // Menunggu 1 detik sebelum me-refresh
+                }
+            };
+
+            var outputName = document.getElementById("outputName").value;
+            var outputBoard = document.getElementById("outputBoard").value;
+            var outputGpio = document.getElementById("outputGpio").value;
+            var outputState = document.getElementById("outputState").value;
+            var httpRequestData = `action=output_create&name=${encodeURIComponent(outputName)}&board=${outputBoard}&gpio=${outputGpio}&state=${outputState}`;
+            xhr.send(httpRequestData);
+
+            return false; // Mencegah pengiriman formulir secara default
+        }
+    </script>
+</body>
+</html>
diff --git a/koneksi.php b/koneksi.php
new file mode 100644
index 0000000..5a54a6d
--- /dev/null
+++ b/koneksi.php
@@ -0,0 +1,32 @@
+<?php
+// Periksa apakah sesi sudah dimulai
+if (session_status() == PHP_SESSION_NONE) {
+    session_start();
+}
+
+// Mengatur waktu kedaluwarsa sesi ke 30 menit (1800 detik)
+$inactive = 1800;
+if (isset($_SESSION['timeout'])) {
+    $session_life = time() - $_SESSION['timeout'];
+    if ($session_life > $inactive) {
+        session_destroy();
+        header("Location: login.php");
+        exit();
+    }
+}
+$_SESSION['timeout'] = time();
+
+// Parameter koneksi database
+$servername = "localhost";
+$username = "id22388794_touchlight";  // ganti dengan username MySQL Anda
+$password = "N4nd4155#";  // ganti dengan password MySQL Anda
+$database = "id22388794_esp_data";  // ganti dengan nama database Anda
+
+// Membuat koneksi
+$koneksi = new mysqli($servername, $username, $password, $database);
+
+// Memeriksa koneksi
+if ($koneksi->connect_error) {
+    die("Koneksi gagal: " . $koneksi->connect_error);
+}
+?>
diff --git a/login.php b/login.php
new file mode 100644
index 0000000..2e3e404
--- /dev/null
+++ b/login.php
@@ -0,0 +1,54 @@
+<?php
+session_start();
+include "koneksi.php";
+
+if(isset($_POST['username'])) {
+    $username = $_POST['username'];
+    $password = md5($_POST['password']);
+
+    $query = mysqli_query($koneksi, "SELECT * FROM user WHERE username='$username' AND password='$password'");
+
+    if(mysqli_num_rows($query) > 0){
+        $data = mysqli_fetch_array($query);
+        $_SESSION['user'] = $data;
+        echo '<script>alert("Welcome, '.$data['nama'].'");
+            location.href="esp-outputs.php";</script>';
+    } else {
+        echo '<script>alert("Username/password does not match.");</script>';
+    }
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Login to the website</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <form method="post">
+        <table align="center">
+            <tr>
+                <td colspan="2" align="center">
+                    <h3>Login User</h3>
+                </td>
+            </tr>
+            <tr>
+                <td>Username </td>
+                <td><input type="text" name="username" required></td>
+            </tr>
+            <tr>
+                <td>Password </td>
+                <td><input type="password" name="password" required></td>
+            </tr>
+            <tr>
+                <td></td>
+                <td>
+                    <button type="submit">Login</button>
+                    <p>No Account? <a href="regis.php">Register Here</a></p>
+                </td>
+            </tr>
+        </table>
+    </form>
+</body>
+</html>
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c977c073c7be8e0a00e80b2ce6f02ed27ba27fb
GIT binary patch
literal 11841
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
H#_9h9F!Dw#

literal 0
HcmV?d00001

diff --git a/logout.php b/logout.php
new file mode 100644
index 0000000..2048c58
--- /dev/null
+++ b/logout.php
@@ -0,0 +1,6 @@
+<?php
+session_start();
+session_destroy();
+header("Location: login.php");
+exit();
+?>
diff --git a/regis.php b/regis.php
new file mode 100644
index 0000000..9d28942
--- /dev/null
+++ b/regis.php
@@ -0,0 +1,59 @@
+<?php
+session_start();
+include 'koneksi.php';
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $username = $_POST['username'];
+    $password = md5($_POST['password']);
+    $nama = $_POST['nama'];
+
+    // Query untuk memasukkan data ke dalam tabel user
+    $sql = "INSERT INTO user (username, password, nama) VALUES ('$username', '$password', '$nama')";
+
+    if (mysqli_query($koneksi, $sql)) {
+        echo '<script>alert("registration successful!"); location.href="login.php";</script>';
+    } else {
+        echo "Error: " . $sql . "<br>" . mysqli_error($koneksi);
+    }
+
+    mysqli_close($koneksi);
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>User Registration</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <form method="post">
+        <table align="center">
+            <tr>
+                <td colspan="2" align="center">
+                    <h3>User Registration</h3>
+                </td>
+            </tr>
+            <tr>
+                <td>Name</td>
+                <td><input type="text" name="nama" required></td>
+            </tr>
+            <tr>
+                <td>Username</td>
+                <td><input type="text" name="username" required></td>
+            </tr>
+            <tr>
+                <td>Password</td>
+                <td><input type="password" name="password" required></td>
+            </tr>
+            <tr>
+                <td></td>
+                <td>
+                    <button type="submit">registration</button>
+                    <p>already have an account?? <a href="login.php">Login Here</a></p>
+                </td>
+            </tr>
+        </table>
+    </form>
+</body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..90c0f1f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,67 @@
+/* style.css */
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container {
+    width: 400px;
+    background: #fff;
+    padding: 40px;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+h3 {
+    margin-bottom: 30px;
+    font-size: 28px;
+    color: #333;
+}
+
+input[type="text"], input[type="password"] {
+    width: 100%;
+    padding: 12px;
+    margin: 10px 0;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    background-color: #f8f8f8;
+    font-size: 16px;
+}
+
+button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 14px 20px;
+    margin: 10px 0;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    width: 100%;
+    font-size: 18px;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+a {
+    text-decoration: none;
+    color: #4CAF50;
+    font-size: 14px;
+    margin-left: 10px;
+}
+
+a:hover {
+    text-decoration: underline;
+    color: #45a049;
+}