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

@@ -4,18 +4,22 @@
   padding: 0;
   box-sizing: border-box;
 }
+
 body {
   font-family: Arial, sans-serif;
   background-color: #f2f2f2;
   color: #333;
+  line-height: 1.6; /* Lepsza czytelność tekstu */
 }
 
 /* LAYOUT GŁÓWNY */
 header, nav, main, footer {
-      padding: 10px 20px;
+  padding: 15px 20px; /* Nieco większy padding dla lepszego wyglądu */
   margin: 10px auto;
   max-width: 1200px;
   background-color: #fff;
+  border-radius: 4px; /* Zaokrąglone rogi dla spójności */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lekki cień dla głębi */
 }
 
 /* NAGŁÓWEK */
@@ -23,10 +27,12 @@
   border: 1px solid #ccc;
   text-align: center;
 }
+
 header h1 {
-      margin: 10px 0;
+  margin: 15px 0;
-      font-size: 2em;
+  font-size: 2.5em; /* Nieco większy tytuł dla lepszej widoczności */
   color: #444;
+  font-weight: 700; /* Pogrubienie tytułu */
 }
 
 /* NAWIGACJA */
@@ -37,16 +43,20 @@
   justify-content: center;
   background: #f9f9f9;
 }
+
 nav a {
   text-decoration: none;
   color: #333;
-      margin: 0 10px;
+  margin: 0 15px; /* Większy odstęp między linkami */
   font-weight: bold;
-      padding: 8px;
+  padding: 10px 12px; /* Większy padding dla lepszej interakcji */
-      transition: background 0.3s;
+  transition: background 0.3s, color 0.3s; /* Dodano przejście dla koloru tekstu */
+  border-radius: 4px; /* Zaokrąglone rogi dla spójności */
 }
+
 nav a:hover {
   background: #e0e0e0;
+  color: #000; /* Ciemniejszy kolor tekstu przy najechaniu */
 }
 
 /* GŁÓWNA SEKCJA */
@@ -55,70 +65,124 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-      gap: 20px;
+  gap: 25px; /* Większy odstęp między sekcjami */
-      padding: 20px;
+  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 */
+  flex: 1 1 450px; /* Minimalna szerokość 450px, a reszta elastycznie */
   border: 1px solid #ddd;
-      padding: 15px;
+  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: 10px;
+  margin-bottom: 15px;
-      font-size: 1.2em;
+  font-size: 1.5em; /* Większy nagłówek dla lepszej czytelności */
-      border-bottom: 1px solid #ccc;
+  border-bottom: 2px solid #ccc; /* Grubsza linia pod nagłówkiem */
+  padding-bottom: 5px;
+  color: #444;
 }
 
 /* FORMULARZ */
 form {
   display: flex;
   flex-direction: column;
-      gap: 10px;
+  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: 5px;
+  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: 8px 12px;
+  padding: 10px 20px; /* Większy padding dla lepszej widoczności */
   background-color: #4CAF50;
   color: #fff;
   border: none;
+  border-radius: 4px;
   cursor: pointer;
-      transition: background 0.3s;
+  font-size: 1.1em; /* Nieco większy tekst przycisku */
-      font-size: 1em;
+  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 */
-    table {
+#ordersTable {
   width: 100%;
   border-collapse: collapse;
   margin-top: 10px;
 }
-    table th, table td {
+
+#ordersTable th, #ordersTable td {
   border: 1px solid #ccc;
-      padding: 8px;
+  padding: 12px; /* Większy padding dla czytelności */
   text-align: left;
 }
-    table th {
+
+#ordersTable th {
   background-color: #eee;
+  font-weight: bold;
+  color: #444;
 }
 
 /* STOPKA */
@@ -126,7 +190,69 @@
   border: 1px solid #ccc;
   text-align: center;
   margin-top: 0;
-      font-size: 0.9em;
+  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">
 
@@ -50,7 +51,12 @@
 
 <!-- Sekcja tabeli z zamówieniami -->
 <section class="table-section">
+  <div class="table-header">
     <h2>Lista zamówień</h2>
+    <div class="table-controls">
+      <button type="submit" onclick="getData()" >Dodaj</button>
+    </div>
+  </div>
   <table id="ordersTable">
     <thead>
       <tr>
@@ -65,6 +71,7 @@
     </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
+);
+