commit 6c7206639f48ee6f617043d12b1222ba7c99d51f Author: Fabian Kowalski Date: Fri Feb 21 13:29:52 2025 +0100 init diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..585e1b6 --- /dev/null +++ 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; + } + diff --git a/doc/main.pdf b/doc/main.pdf new file mode 100644 index 0000000..3e01838 Binary files /dev/null and b/doc/main.pdf differ diff --git a/doc/main.tex b/doc/main.tex new file mode 100644 index 0000000..9197c9f --- /dev/null +++ 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{}), + \item Kwota (\texttt{} lub \texttt{}). + \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} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..2a6d0fd --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + + Panel zamówień + + + + + + + +
+

Aplikacja Zamówień

+
+ + + + + +
+ + +
+

Dodaj zamówienie

+
+ + + + +
+
+ + +
+

Lista zamówień

+ + + + + + + + + + + + +
ImięNazwiskoData zamówieniaKwota
+
+
+ + + + + + + + diff --git a/js/post.js b/js/post.js new file mode 100644 index 0000000..60f481b --- /dev/null +++ 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"); + +}) diff --git a/json/test.json b/json/test.json new file mode 100644 index 0000000..2dfcb0e --- /dev/null +++ b/json/test.json @@ -0,0 +1 @@ +{"nazwa":"pepsi","cena":10} diff --git a/php/post.php b/php/post.php new file mode 100644 index 0000000..9a1dc66 --- /dev/null +++ b/php/post.php @@ -0,0 +1,28 @@ + '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); + +?> diff --git a/script/__ b/script/__ new file mode 100644 index 0000000..e0c4676 --- /dev/null +++ b/script/__ @@ -0,0 +1,16 @@ +#!/bin/bash + +# Sprawdź, czy został przekazany argument +if [ -z "$1" ]; then + echo "Użycie: . ./file ''" + 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" diff --git a/script/__curl b/script/__curl new file mode 100644 index 0000000..b0f4932 --- /dev/null +++ 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}'