nara

1

@@ -0,0 +1,34 @@
+const listOfUsers = [];
+
+function getData() {
+
+    fetch('./php/get.php')
+        .then(response => {
+               return response.json();
+        })
+        .then(data => {
+            // Dodaj pobrane dane do tablicy
+
+            listOfUsers.push(...data);
+            
+            // Wyświetl dane w konsoli
+            console.log("Lista użytkowników:", listOfUsers);
+
+            // Wyświetl imiona na stronie
+            const resultDiv = document.getElementById('orderTables');
+
+
+            let html = '<h3>Znalezieni użytkownicy:</h3><ul>';
+
+            data.forEach(user => {
+                html += `<li>${user.cena}</li>`;
+            });
+            html += '</ul>';
+            resultDiv.innerHTML = html;
+        })
+        .catch(error => {
+            console.error("Wystąpił błąd podczas pobierania danych:", error);
+            const resultDiv = document.getElementById('result');
+            resultDiv.innerHTML = '<p>Błąd podczas pobierania danych. Sprawdź konsolę.</p>';
+        });
+}

css/style.css

@@ -1,132 +1,258 @@
-    /* RESET / PODSTAWOWE STYLOWANIE */
+/* RESET / PODSTAWOWE STYLOWANIE */
-    * {
+* {
-      margin: 0;
+  margin: 0;
-      padding: 0;
+  padding: 0;
-      box-sizing: border-box;
+  box-sizing: border-box;
-    }
+}
-    body {
-      font-family: Arial, sans-serif;
-      background-color: #f2f2f2;
-      color: #333;
-    }
 
-    /* LAYOUT GŁÓWNY */
+body {
-    header, nav, main, footer {
+  font-family: Arial, sans-serif;
-      padding: 10px 20px;
+  background-color: #f2f2f2;
-      margin: 10px auto;
+  color: #333;
-      max-width: 1200px;
+  line-height: 1.6; /* Lepsza czytelność tekstu */
-      background-color: #fff;
+}
-    }
 
-    /* NAGŁÓWEK */
+/* LAYOUT GŁÓWNY */
-    header {
+header, nav, main, footer {
-      border: 1px solid #ccc;
+  padding: 15px 20px; /* Nieco większy padding dla lepszego wyglądu */
-      text-align: center;
+  margin: 10px auto;
-    }
+  max-width: 1200px;
-    header h1 {
+  background-color: #fff;
-      margin: 10px 0;
+  border-radius: 4px; /* Zaokrąglone rogi dla spójności */
-      font-size: 2em;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lekki cień dla głębi */
-      color: #444;
+}
-    }
 
-    /* NAWIGACJA */
+/* NAGŁÓWEK */
-    nav {
+header {
-      border: 1px solid #ccc;
+  border: 1px solid #ccc;
-      margin-top: 0;
+  text-align: center;
-      display: flex;
+}
-      justify-content: center;
-      background: #f9f9f9;
-    }
-    nav a {
-      text-decoration: none;
-      color: #333;
-      margin: 0 10px;
-      font-weight: bold;
-      padding: 8px;
-      transition: background 0.3s;
-    }
-    nav a:hover {
-      background: #e0e0e0;
-    }
 
-    /* GŁÓWNA SEKCJA */
+header h1 {
-    main {
+  margin: 15px 0;
-      border: 1px solid #ccc;
+  font-size: 2.5em; /* Nieco większy tytuł dla lepszej widoczności */
-      display: flex;
+  color: #444;
-      flex-wrap: wrap;
+  font-weight: 700; /* Pogrubienie tytułu */
-      justify-content: space-between;
+}
-      gap: 20px;
-      padding: 20px;
-    }
 
-    /* KONTENERY W MAIN */
+/* NAWIGACJA */
-    .form-section,
+nav {
-    .table-section {
+  border: 1px solid #ccc;
-      flex: 1 1 450px; /* minimalna szerokość 450px, a reszta elastycznie */
+  margin-top: 0;
-      border: 1px solid #ddd;
+  display: flex;
-      padding: 15px;
+  justify-content: center;
-      background: #fafafa;
+  background: #f9f9f9;
-    }
+}
-    .form-section h2,
-    .table-section h2 {
-      margin-bottom: 10px;
-      font-size: 1.2em;
-      border-bottom: 1px solid #ccc;
-    }
 
-    /* FORMULARZ */
+nav a {
-    form {
+  text-decoration: none;
-      display: flex;
+  color: #333;
-      flex-direction: column;
+  margin: 0 15px; /* Większy odstęp między linkami */
-      gap: 10px;
+  font-weight: bold;
-    }
+  padding: 10px 12px; /* Większy padding dla lepszej interakcji */
-    form label {
+  transition: background 0.3s, color 0.3s; /* Dodano przejście dla koloru tekstu */
-      display: flex;
+  border-radius: 4px; /* Zaokrąglone rogi dla spójności */
-      flex-direction: column;
+}
-      font-weight: bold;
-    }
-    form input[type="date"],
-    form input[type="number"],
-    form input[type="text"],
-    form select {
-      padding: 5px;
-      width: 100%;
-    }
-    form button {
-      align-self: flex-start;
-      padding: 8px 12px;
-      background-color: #4CAF50;
-      color: #fff;
-      border: none;
-      cursor: pointer;
-      transition: background 0.3s;
-      font-size: 1em;
-    }
-    form button:hover {
-      background-color: #45a049;
-    }
 
-    /* TABELA */
+nav a:hover {
-    table {
+  background: #e0e0e0;
-      width: 100%;
+  color: #000; /* Ciemniejszy kolor tekstu przy najechaniu */
-      border-collapse: collapse;
+}
-      margin-top: 10px;
-    }
-    table th, table td {
-      border: 1px solid #ccc;
-      padding: 8px;
-      text-align: left;
-    }
-    table th {
-      background-color: #eee;
-    }
 
-    /* STOPKA */
+/* GŁÓWNA SEKCJA */
-    footer {
+main {
-      border: 1px solid #ccc;
+  border: 1px solid #ccc;
-      text-align: center;
+  display: flex;
-      margin-top: 0;
+  flex-wrap: wrap;
-      font-size: 0.9em;
+  justify-content: space-between;
-      background: #f9f9f9;
+  gap: 25px; /* Większy odstęp między sekcjami */
-    }
+  padding: 25px;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
 
+/* KONTENERY W MAIN */
+.form-section,
+.table-section {
+  flex: 1 1 450px; /* Minimalna szerokość 450px, a reszta elastycznie */
+  border: 1px solid #ddd;
+  padding: 20px;
+  background: #fafafa;
+  border-radius: 4px; /* Zaokrąglone rogi */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Lekki cień */
+}
+
+.form-section h2,
+.table-section h2 {
+  margin-bottom: 15px;
+  font-size: 1.5em; /* Większy nagłówek dla lepszej czytelności */
+  border-bottom: 2px solid #ccc; /* Grubsza linia pod nagłówkiem */
+  padding-bottom: 5px;
+  color: #444;
+}
+
+/* FORMULARZ */
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+form label {
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+  color: #555; /* Ciemniejszy kolor etykiet */
+}
+
+form input[type="date"],
+form input[type="number"],
+form input[type="text"],
+form select {
+  padding: 8px; /* Większy padding dla lepszej użyteczności */
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 4px; /* Zaokrąglone rogi */
+  font-size: 1em;
+  transition: border-color 0.3s;
+}
+
+form input[type="date"]:focus,
+form input[type="number"]:focus,
+form input[type="text"]:focus,
+form select:focus {
+  border-color: #4CAF50; /* Zielona obwódka przy fokusie */
+  outline: none;
+}
+
+form button {
+  align-self: flex-start;
+  padding: 10px 20px; /* Większy padding dla lepszej widoczności */
+  background-color: #4CAF50;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1.1em; /* Nieco większy tekst przycisku */
+  transition: background 0.3s, transform 0.2s; /* Dodano transform dla animacji */
+}
+
+form button:hover {
+  background-color: #45a049;
+  transform: scale(1.05); /* Nieznaczne powiększenie przy najechaniu */
+}
+
+/* TABELA I PRZYCISK W SEKCJI TABELI */
+.table-section .table-controls button {
+  padding: 10px 20px; /* Większy padding dla spójności z formularzem */
+  background-color: #4CAF50;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1.1em;
+  transition: background 0.3s, transform 0.2s;
+}
+
+.table-section .table-controls button:hover {
+  background-color: #45a049;
+  transform: scale(1.05); /* Powiększenie przy najechaniu */
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+/* TABELA */
+#ordersTable {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+#ordersTable th, #ordersTable td {
+  border: 1px solid #ccc;
+  padding: 12px; /* Większy padding dla czytelności */
+  text-align: left;
+}
+
+#ordersTable th {
+  background-color: #eee;
+  font-weight: bold;
+  color: #444;
+}
+
+/* STOPKA */
+footer {
+  border: 1px solid #ccc;
+  text-align: center;
+  margin-top: 0;
+  font-size: 1em; /* Większy tekst stopki */
+  background: #f9f9f9;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* RESPONSYWNOŚĆ */
+@media (max-width: 768px) {
+  header, nav, main, footer {
+    margin: 5px auto;
+    padding: 10px;
+  }
+
+  header h1 {
+    font-size: 2em;
+  }
+
+  nav {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  nav a {
+    margin: 5px 0;
+    padding: 8px 10px;
+  }
+
+  main {
+    padding: 15px;
+    gap: 15px;
+  }
+
+  .form-section,
+  .table-section {
+    flex: 1 1 100%; /* Pełna szerokość na małych ekranach */
+    margin-bottom: 15px;
+  }
+
+  #ordersTable th, #ordersTable td {
+    padding: 8px;
+    font-size: 0.9em;
+  }
+
+  form button,
+  .table-section .table-controls button {
+    padding: 8px 16px;
+    font-size: 1em;
+  }
+}
+
+@media (max-width: 480px) {
+  #ordersTable th, #ordersTable td {
+    font-size: 0.8em;
+    padding: 6px;
+  }
+
+  .table-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .table-controls {
+    margin-top: 10px;
+    text-align: left;
+  }
+}

index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <title>Panel zamówień</title>
   <script src="js/post.js" defer></script>
+  <script src="js/get.js" defer></script>
 
   <link rel="stylesheet" href="css/style.css">
 
@@ -48,23 +49,29 @@
   </form>
 </section>
 
-    <!-- Sekcja tabeli z zamówieniami -->
+<!-- Sekcja tabeli z zamówieniami -->
-    <section class="table-section">
+<section class="table-section">
-      <h2>Lista zamówień</h2>
+  <div class="table-header">
-      <table id="ordersTable">
+    <h2>Lista zamówień</h2>
-        <thead>
+    <div class="table-controls">
-          <tr>
+      <button type="submit" onclick="getData()" >Dodaj</button>
-            <th>Imię</th>
+    </div>
-            <th>Nazwisko</th>
+  </div>
-            <th>Data zamówienia</th>
+  <table id="ordersTable">
-            <th>Kwota</th>
+    <thead>
-          </tr>
+      <tr>
-        </thead>
+        <th>Imię</th>
-        <tbody>
+        <th>Nazwisko</th>
-          <!-- Dane będą uzupełniane dynamicznie (Fetch + JS) -->
+        <th>Data zamówienia</th>
-        </tbody>
+        <th>Kwota</th>
-      </table>
+      </tr>
-    </section>
+    </thead>
+    <tbody>
+      <!-- Dane będą uzupełniane dynamicznie (Fetch + JS) -->
+    </tbody>
+  </table>
+</section>
+
   </main>
 
   <!-- STOPKA -->

js/get.js

@@ -0,0 +1,36 @@
+const listOfUsers = [];
+
+function getData() {
+
+    fetch('./php/get.php')
+        .then(response => {
+               return response.json();
+        })
+        .then(data => {
+            // Dodaj pobrane dane do tablicy
+
+            listOfUsers.push(...data);
+            
+            // Wyświetl dane w konsoli
+            console.log("Lista użytkowników:", listOfUsers);
+
+            // Wyświetl imiona na stronie
+            const resultDiv = document.getElementById('ordersTable');
+
+
+            let html = '<h3>Znalezieni użytkownicy:</h3><ul>';
+
+            data.forEach(user => {
+                html += `<li>Id: ${user.id}, nazwa: ${user.nazwa}, cena: ${user.cena}</li>`;
+            });
+
+            html += '</ul>';
+            resultDiv.innerHTML = html;
+
+        })
+        .catch(error => {
+            console.error("Wystąpił błąd podczas pobierania danych:", error);
+            const resultDiv = document.getElementById('result');
+            resultDiv.innerHTML = '<p>Błąd podczas pobierania danych. Sprawdź konsolę.</p>';
+        });
+}

php/get.php

@@ -0,0 +1,16 @@
+<?php
+$polaczenie = mysqli_connect("192.168.238.71", "root", "secret", "db");
+
+$kwerenda = mysqli_query($polaczenie, "SELECT * FROM zamowienia1 ORDER BY id ASC");
+
+$json = array();
+
+while ($row = mysqli_fetch_assoc($kwerenda)) {
+    $json[] = $row;
+}
+
+mysqli_close($polaczenie);
+
+echo json_encode($json );
+?>
+

php/post.php

@@ -1,6 +1,6 @@
 <?php
 
-$dbhost="192.168.82.71";
+$dbhost="192.168.238.71";
 //$dbhost="172.18.0.2";
 $dbuser="root";
 $dbpass="secret";

sql/init.sql

@@ -0,0 +1,7 @@
+CREATE TABLE zamowienia1 (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nazwa VARCHAR(255) NOT NULL,
+    cena DECIMAL(10,2) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+