init

2025-02-21 13:29:52 +01:00 · 2025-02-21 13:29:52 +01:00 · 6c7206639f
commit 6c7206639f
9 changed files with 386 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,132 @@
+    /* RESET / PODSTAWOWE STYLOWANIE */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f2f2f2;
+      color: #333;
+    }
+
+    /* LAYOUT GŁÓWNY */
+    header, nav, main, footer {
+      padding: 10px 20px;
+      margin: 10px auto;
+      max-width: 1200px;
+      background-color: #fff;
+    }
+
+    /* NAGŁÓWEK */
+    header {
+      border: 1px solid #ccc;
+      text-align: center;
+    }
+    header h1 {
+      margin: 10px 0;
+      font-size: 2em;
+      color: #444;
+    }
+
+    /* 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;
+    }
+
+    /* GŁÓWNA SEKCJA */
+    main {
+      border: 1px solid #ccc;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      gap: 20px;
+      padding: 20px;
+    }
+
+    /* 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;
+    }
+
+    /* 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;
+    }
+
+    /* 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;
+    }
+
+    /* STOPKA */
+    footer {
+      border: 1px solid #ccc;
+      text-align: center;
+      margin-top: 0;
+      font-size: 0.9em;
+      background: #f9f9f9;
+    }
+
--- a/doc/main.pdf
+++ b/doc/main.pdf
--- a/doc/main.tex
+++ b/doc/main.tex
@ -0,0 +1,101 @@
+\documentclass[12pt,a4paper]{article}
+
+\usepackage[polish]{babel}
+\usepackage[utf8]{inputenc}
+\usepackage[T1]{fontenc}
+\usepackage{lmodern}
+\usepackage{geometry}
+\geometry{
+    left=2.5cm,
+    right=2.5cm,
+    top=2.5cm,
+    bottom=3cm
+}
+
+\begin{document}
+
+\begin{center}
+    {\Large \textbf{ARKiSuz INF.03 – Wytyczne do zadania}}\\[1em]
+\end{center}
+
+%----------------------------------------------------------------------------------------
+%	TEMAT
+%----------------------------------------------------------------------------------------
+\section{Temat zadania}
+Stwórz prostą aplikację internetową \textbf{„Zarządzanie zamówieniami klientów”}, która pozwoli na dodawanie nowych zamówień oraz wyświetlanie listy klientów wraz z ich zamówieniami (z użyciem klauzuli \texttt{JOIN} w bazie danych).
+
+%----------------------------------------------------------------------------------------
+%	OPIS ZADANIA
+%----------------------------------------------------------------------------------------
+\section{Opis zadania}
+\begin{enumerate}
+    \item \textbf{Struktura bazy danych (MySQL):}
+    \begin{itemize}
+        \item Utwórz co najmniej dwie tabele: \texttt{klienci} i \texttt{zamowienia}.
+        \item Zaprojektuj odpowiednie klucze główne i obce (\texttt{klienci.id} oraz \texttt{zamowienia.id\_klienta}).
+        \item Dodaj przykładowe dane (kilku klientów, kilka zamówień).
+    \end{itemize}
+
+    \item \textbf{Layout strony (HTML + CSS):}
+    \begin{itemize}
+        \item Utwórz \texttt{header} (z tytułem/nazwą aplikacji), \texttt{main} (główna treść) oraz \texttt{footer}.
+        \item Dodatkowo możesz wykorzystać proste menu nawigacyjne.
+        \item Zastosuj podstawowe reguły CSS, by wyróżnić np. nagłówki, tabele.
+    \end{itemize}
+
+    \item \textbf{Obsługa żądań (JavaScript – Fetch API):}
+    \begin{itemize}
+        \item \textbf{Dodawanie zamówienia}:  
+        Przygotuj formularz z polami:
+        \begin{itemize}
+            \item Wybór klienta (np. \texttt{<select>}),
+            \item Data zamówienia (\texttt{<input type="date">}),
+            \item Kwota (\texttt{<input type="number">} lub \texttt{<input type="text">}).
+        \end{itemize}
+        Po przesłaniu formularza dane powinny zostać wysłane metodą \textbf{POST} do skryptu \texttt{PHP}.
+        \item \textbf{Wyświetlanie zamówień}:  
+        Użyj \textbf{GET} (Fetch API), aby pobrać dane (np. w formacie JSON) z \texttt{PHP}, wykonującego zapytanie \texttt{JOIN} w bazie danych.  
+        Wyświetl dane w tabeli HTML (np. kolumny: \textit{Imię, Nazwisko, Data zamówienia, Kwota}).
+    \end{itemize}
+
+    \item \textbf{Skrypty PHP (obsługa bazy danych):}
+    \begin{enumerate}
+        \item \texttt{get\_zamowienia.php}:  
+        Zapytanie \texttt{SELECT} z \texttt{JOIN} (tabele \texttt{klienci} i \texttt{zamowienia}), zwróć dane w formacie JSON.
+        \item \texttt{insert\_zamowienie.php}:  
+        Wstaw dane (ID klienta, data, kwota) do tabeli \texttt{zamowienia} w bazie danych i zwróć komunikat o powodzeniu/niepowodzeniu.
+    \end{enumerate}
+
+    \item \textbf{Integracja i testy:}
+    \begin{itemize}
+        \item W pliku HTML umieść odwołanie do skryptu \texttt{.js} z funkcjami \texttt{fetch} (GET i POST).
+        \item Po wczytaniu strony pobierz i wyświetl aktualne zamówienia (\texttt{get\_zamowienia.php}).
+        \item Po dodaniu zamówienia (\texttt{insert\_zamowienie.php}) należy odświeżyć listę zamówień.
+    \end{itemize}
+
+    \item \textbf{Rozszerzenia (opcjonalne):}
+    \begin{itemize}
+        \item Walidacja danych w formularzu (po stronie klienta i/lub serwera).
+        \item Komunikaty o błędach lub powodzeniu operacji.
+        \item Możliwość edycji bądź usuwania zamówień (dodatkowe metody \texttt{PUT}, \texttt{DELETE}).
+    \end{itemize}
+\end{enumerate}
+
+%----------------------------------------------------------------------------------------
+%	KRYTERIA OCENY
+%----------------------------------------------------------------------------------------
+\section{Kryteria oceny}
+\begin{itemize}
+    \item \textbf{Poprawność funkcjonalna} – formularz, tabela i obsługa danych w bazie.
+    \item \textbf{Wykorzystanie Fetch API} – metody \texttt{GET} i \texttt{POST}, odpowiednia obsługa JSON.
+    \item \textbf{Poprawność skryptów PHP} – pobieranie danych z \texttt{\$\_GET}/\texttt{\$\_POST}, zapytania SQL, zwracane komunikaty.
+    \item \textbf{Zastosowanie JOIN} – poprawne łączenie danych z tabel \texttt{klienci} i \texttt{zamowienia}.
+    \item \textbf{Estetyka i czytelność kodu} – komentarze, przejrzysta struktura plików, nazwy zmiennych.
+    \item \textbf{Layout} – prosty, czytelny układ (nagłówek, tabela, stopka), podział na sekcje.
+\end{itemize}
+
+\vspace{1cm}
+\noindent \textbf{Powodzenia!}
+
+\end{document}
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+  <meta charset="UTF-8">
+  <title>Panel zamówień</title>
+  <script src="js/post.js" defer></script>
+
+  <link rel="stylesheet" href="css/style.css">
+
+</head>
+<body>
+  <!-- NAGŁÓWEK -->
+  <header>
+    <h1>Aplikacja Zamówień</h1>
+  </header>
+
+  <!-- NAWIGACJA -->
+  <nav>
+    <a href="#home">Strona główna</a>
+    <a href="#dodaj">Dodaj zamówienie</a>
+    <a href="#lista">Lista zamówień</a>
+  </nav>
+
+  <!-- GŁÓWNA SEKCJA -->
+  <main>
+
+<!-- Sekcja formularza -->
+<section class="form-section">
+  <h2>Dodaj zamówienie</h2>
+  <form id="orderForm">
+    <label>
+      Klient:
+      <select name="name" required>
+        <option value="">Wybierz...</option>
+        <option value="1" selected>Jan Kowalski</option> <!-- Domyślnie wybrany -->
+        <option value="2">Anna Nowak</option>
+      </select>
+    </label>
+    <label>
+      Data zamówienia:
+      <input type="date" name="data_zamowienia" value="2023-10-01" required> <!-- Domyślna data -->
+    </label>
+    <label>
+      Kwota:
+      <input type="number" name="cena" step="0.01" value="100.00" placeholder="0.00" required> <!-- Domyślna kwota -->
+    </label>
+    <button type="submit">Dodaj</button>
+  </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>
+  </main>
+
+  <!-- STOPKA -->
+  <footer>
+    <p>&copy; 2025 Twoje Imię i Nazwisko</p>
+  </footer>
+
+  <!-- Tu dołączysz skrypt JS (np. fetch.js) -->
+</body>
+</html>
+
--- a/js/post.js
+++ b/js/post.js
@ -0,0 +1,26 @@
+document.getElementById('orderForm').addEventListener('submit', async (event) => {
+  
+    event.preventDefault(); 
+
+  const form = document.getElementById('orderForm');
+  const formData = new FormData(form);
+
+  const data = {};
+  formData.forEach((value, key) => {
+    data[key] = value;
+  });
+
+    console.log ("ok");
+
+        const response = await fetch('./php/post.php', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+            
+        });
+
+        console.log("ok");
+
+})
--- a/json/test.json
+++ b/json/test.json
@ -0,0 +1 @@
+{"nazwa":"pepsi","cena":10}
--- a/php/post.php
+++ b/php/post.php
@ -0,0 +1,28 @@
+<?php
+
+$dbhost="192.168.82.71";
+//$dbhost="172.18.0.2";
+$dbuser="root";
+$dbpass="secret";
+$dbname="db";
+
+$con = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
+
+if (!$con) {
+    die(json_encode([
+        'error' => 'Nie można połączyć się z bazą danych',
+        'details' => mysqli_connect_error()
+    ]));
+}
+
+$rawData = file_get_contents('php://input');
+
+$data = json_decode($rawData, true);
+
+$kw = "INSERT INTO zamowienia1(nazwa, cena) VALUES ('{$data ['nazwa']}',{$data['cena']});";
+
+echo json_encode($kw);
+
+$ans = mysqli_query($con, $kw);
+
+?>
--- a/script/__
+++ b/script/__
@ -0,0 +1,16 @@
+#!/bin/bash
+
+# Sprawdź, czy został przekazany argument
+if [ -z "$1" ]; then
+  echo "Użycie: . ./file '<json_payload>'"
+  exit 1
+fi
+
+# Przypisz argument do zmiennej
+JSON_PAYLOAD=$1
+
+# Wykonaj polecenie curl z przekazanym JSON payloadem
+curl -X POST http://192.168.82.71:8080/inf3/php/post.php \
+-H "Content-Type: application/json" \
+-H "Authorization: Bearer YOUR_TOKEN_HERE" \
+-d "$JSON_PAYLOAD"
--- a/script/__curl
+++ b/script/__curl
@ -0,0 +1,4 @@
+curl -X POST http://192.168.82.71:8080/inf3/php/post.php \
+-H "Content-Type: application/json" \
+-H "Authorization: Bearer YOUR_TOKEN_HERE" \
+-d '{"nazwa":"pepsi","cena":10}'