nara
This commit is contained in:
rzodkiev
parent
6c7206639f
commit
a2f66a381c
34
1
Normal file
34
1
Normal file
@ -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>';
|
||||
});
|
||||
}
|
||||
372
css/style.css
372
css/style.css
@ -1,132 +1,258 @@
|
||||
/* RESET / PODSTAWOWE STYLOWANIE */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f2f2f2;
|
||||
color: #333;
|
||||
}
|
||||
/* RESET / PODSTAWOWE STYLOWANIE */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* LAYOUT GŁÓWNY */
|
||||
header, nav, main, footer {
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
max-width: 1200px;
|
||||
background-color: #fff;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f2f2f2;
|
||||
color: #333;
|
||||
line-height: 1.6; /* Lepsza czytelność tekstu */
|
||||
}
|
||||
|
||||
/* NAGŁÓWEK */
|
||||
header {
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
header h1 {
|
||||
margin: 10px 0;
|
||||
font-size: 2em;
|
||||
color: #444;
|
||||
}
|
||||
/* LAYOUT GŁÓWNY */
|
||||
header, nav, main, footer {
|
||||
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 */
|
||||
}
|
||||
|
||||
/* NAWIGACJA */
|
||||
nav {
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 0;
|
||||
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;
|
||||
}
|
||||
/* NAGŁÓWEK */
|
||||
header {
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* GŁÓWNA SEKCJA */
|
||||
main {
|
||||
border: 1px solid #ccc;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
header h1 {
|
||||
margin: 15px 0;
|
||||
font-size: 2.5em; /* Nieco większy tytuł dla lepszej widoczności */
|
||||
color: #444;
|
||||
font-weight: 700; /* Pogrubienie tytułu */
|
||||
}
|
||||
|
||||
/* KONTENERY W MAIN */
|
||||
.form-section,
|
||||
.table-section {
|
||||
flex: 1 1 450px; /* minimalna szerokość 450px, a reszta elastycznie */
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
background: #fafafa;
|
||||
}
|
||||
.form-section h2,
|
||||
.table-section h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
/* NAWIGACJA */
|
||||
nav {
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
/* FORMULARZ */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
form label {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
margin: 0 15px; /* Większy odstęp między linkami */
|
||||
font-weight: bold;
|
||||
padding: 10px 12px; /* Większy padding dla lepszej interakcji */
|
||||
transition: background 0.3s, color 0.3s; /* Dodano przejście dla koloru tekstu */
|
||||
border-radius: 4px; /* Zaokrąglone rogi dla spójności */
|
||||
}
|
||||
|
||||
/* TABELA */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
}
|
||||
table th, table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
table th {
|
||||
background-color: #eee;
|
||||
}
|
||||
nav a:hover {
|
||||
background: #e0e0e0;
|
||||
color: #000; /* Ciemniejszy kolor tekstu przy najechaniu */
|
||||
}
|
||||
|
||||
/* STOPKA */
|
||||
footer {
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
font-size: 0.9em;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
/* GŁÓWNA SEKCJA */
|
||||
main {
|
||||
border: 1px solid #ccc;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
41
index.html
41
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 -->
|
||||
<section class="table-section">
|
||||
<h2>Lista zamówień</h2>
|
||||
<table id="ordersTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Imię</th>
|
||||
<th>Nazwisko</th>
|
||||
<th>Data zamówienia</th>
|
||||
<th>Kwota</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Dane będą uzupełniane dynamicznie (Fetch + JS) -->
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<!-- 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>
|
||||
<th>Imię</th>
|
||||
<th>Nazwisko</th>
|
||||
<th>Data zamówienia</th>
|
||||
<th>Kwota</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Dane będą uzupełniane dynamicznie (Fetch + JS) -->
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- STOPKA -->
|
||||
|
||||
BIN
js/.get.js.swp
Normal file
BIN
js/.get.js.swp
Normal file
Binary file not shown.
36
js/get.js
Normal file
36
js/get.js
Normal file
@ -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>';
|
||||
});
|
||||
}
|
||||
16
php/get.php
Normal file
16
php/get.php
Normal file
@ -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 );
|
||||
?>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<?php
|
||||
|
||||
$dbhost="192.168.82.71";
|
||||
$dbhost="192.168.238.71";
|
||||
//$dbhost="172.18.0.2";
|
||||
$dbuser="root";
|
||||
$dbpass="secret";
|
||||
|
||||
7
sql/init.sql
Normal file
7
sql/init.sql
Normal file
@ -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
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user