[php] a

Viewer

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Kendali LED Meja Warung Makan</title>
  7. <style>
  8.     body {
  9.         font-family: Arial, sans-serif;
  10.         text-align: center;
  11.     }
  12.     .button-container {
  13.         margin-top: 20px;
  14.     }
  15.     button {
  16.         padding: 10px 20px;
  17.         font-size: 18px;
  18.         margin: 10px;
  19.         cursor: pointer;
  20.     }
  21.     .led-on {
  22.         background-color: green; /* Warna untuk meja dengan LED menyala */
  23.         color: white;
  24.     }
  25.     #status {
  26.         margin-top: 20px;
  27.     }
  28. </style>
  29. </head>
  30. <body>
  31. <h1>Kendali LED Meja Warung Makan</h1>
  32. <div class="button-container">
  33.     <button id="meja1" onclick="sendCommand(1)">Meja 1</button>
  34.     <button id="meja2" onclick="sendCommand(2)">Meja 2</button>
  35.     <button id="meja3" onclick="sendCommand(3)">Meja 3</button>
  36. </div>
  37. <div id="status"></div>
  38.  
  39. <script>
  40.     // Fungsi untuk mengirimkan perintah ke server (PHP) saat tombol ditekan
  41.     function sendCommand(meja) {
  42.         var xhr = new XMLHttpRequest();
  43.         var url = "control.php?meja=" + meja;
  44.         xhr.open("GET", url, true);
  45.         xhr.onreadystatechange = function() {
  46.             if (xhr.readyState == 4 && xhr.status == 200) {
  47.                 document.getElementById("status").innerHTML = xhr.responseText;
  48.                 // Menandai tombol meja yang LED-nya telah dinyalakan
  49.                 var button = document.getElementById("meja" + meja);
  50.                 if (xhr.responseText.includes("dihidupkan")) {
  51.                     button.classList.add("led-on");
  52.                 } else if (xhr.responseText.includes("dimatikan")) {
  53.                     button.classList.remove("led-on");
  54.                 }
  55.             }
  56.         };
  57.         xhr.send();
  58.     }
  59. </script>
  60. </body>
  61. </html>

Editor

You can edit this paste and save as new:


File Description
  • a
  • Paste Code
  • 29 Apr-2024
  • 1.84 Kb
You can Share it: