From 864158e4b4275ede33f0aca49dfe087f0a2cc084 Mon Sep 17 00:00:00 2001 From: Rhaven Date: Mon, 23 Sep 2024 15:23:14 +0200 Subject: [PATCH] first commit --- .idea/.gitignore | 3 + .idea/Tourist Bike GmbH - eBike Buchung.iml | 9 ++ .idea/misc.xml | 6 + .idea/modules.xml | 8 ++ .idea/vcs.xml | 6 + README.md | 81 +++++++++++++ booking.xml | 15 +++ index.html | 47 ++++++++ process_booking.php | 45 +++++++ style.css | 124 ++++++++++++++++++++ 10 files changed, 344 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/Tourist Bike GmbH - eBike Buchung.iml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 README.md create mode 100644 booking.xml create mode 100644 index.html create mode 100644 process_booking.php create mode 100644 style.css diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..26d3352 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ +# Default ignored files +/shelf/ +/workspace.xml diff --git a/.idea/Tourist Bike GmbH - eBike Buchung.iml b/.idea/Tourist Bike GmbH - eBike Buchung.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/Tourist Bike GmbH - eBike Buchung.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..6f29fee --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..b51cad8 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..a44ebb6 --- /dev/null +++ b/README.md @@ -0,0 +1,81 @@ +# Statische vs. Dynamische Funktionen + +## 1. Statische Funktionen: + +Statische Inhalte sind fest und ändern sich nicht dynamisch basierend auf Benutzereingaben. Sie können direkt in HTML oder mit serverseitigem Rendering generiert werden, aber sie sind weitgehend unabhängig von benutzerseitigen Aktionen. + +**Beispiele für statische Funktionen:** + +- Über uns / Kontakt / Impressum-Seiten: Diese Seiten enthalten Informationen, die sich selten ändern. Diese Seiten können in reinem HTML erstellt werden und erfordern keine dynamische Server-Interaktion. +- AGB und Datenschutzseiten: Dies sind ebenfalls Inhalte, die regelmäßig aktualisiert werden, aber nur durch die Firma selbst. Auch diese können statisch bleiben. +- Navigationselemente und das Layout der Webseite: Das Grundgerüst der Webseite, wie Header, Footer, Navigation, etc., kann als statischer Inhalt beibehalten werden. + +**Technologien:** + +- HTML/CSS: Für die statische Struktur und das Layout. +- Minimaler Einsatz von JavaScript: Für interaktive, aber statische Elemente (z.B. Dropdown-Menüs ohne serverseitige Abfragen). + +--- + +## 2. Dynamische Funktionen: + +Dynamische Funktionen ändern sich basierend auf Benutzereingaben oder anderen externen Faktoren (wie z.B. einer Datenbank). Diese erfordern entweder clientseitige oder serverseitige Verarbeitung. + +**Beispiele für dynamische Funktionen:** + +- Benutzerverwaltung (Login/Logout): Die Hotels müssen sich einloggen, um ihre Buchungen zu verwalten. Das Login-System sollte auf einer Datenbank basieren, die die Benutzer authentifiziert. +- Buchungssystem: Das zentrale Feature der Seite ist dynamisch. Es muss in der Lage sein, Daten von den Benutzern (Hotels) zu erfassen, diese zu verarbeiten und entweder in einer Datenbank zu speichern oder für die weitere Verarbeitung verfügbar zu machen. +- Verfügbarkeitsprüfung: Es wäre sinnvoll, die Verfügbarkeit von eBikes in Echtzeit zu prüfen. Dies könnte durch dynamische Abfragen in einer Datenbank erfolgen, um sicherzustellen, dass eBikes nicht überbucht werden. + +**Technologien:** + +- Serverseitige Skriptsprachen (PHP, Python, Node.js): Um Daten zu verarbeiten, z.B. bei der Registrierung, dem Login oder der Buchung von eBikes. +- Datenbanken (MySQL, PostgreSQL): Zum Speichern von Hotelinformationen, Buchungen und eBike-Verfügbarkeiten. +- Clientseitige Technologien (JavaScript, AJAX): Für Echtzeit-Interaktionen wie die Überprüfung der Verfügbarkeit von eBikes, ohne die Seite neu zu laden. AJAX kann verwendet werden, um Daten von der Datenbank zu holen, ohne die Seite komplett zu aktualisieren. +- RESTful API: Falls du eine Schnittstelle erstellen möchtest, die auch andere Anwendungen nutzen können (z.B. für mobile Apps), könnte eine API sinnvoll sein. + +--- + +### Empfehlungen für dynamische vs. statische Bereiche: + +| **Funktion** | **Statisch** | **Dynamisch** | **Technologien** | +|-----------------------------------|--------------|---------------|---------------------------------------| +| **Login/Logout** | | ✓ | PHP (Server-seitig) + MySQL | +| **Buchungsformular** | | ✓ | PHP, MySQL, JavaScript, AJAX | +| **Benutzerprofilseite** | | ✓ | PHP, MySQL | +| **Buchungsbestätigung** | | ✓ | PHP | +| **Seiten wie Impressum/AGB** | ✓ | | HTML/CSS | +| **Navigation (Header/Footer)** | ✓ | | HTML/CSS | +| **Verfügbarkeitsprüfung** | | ✓ | PHP, JavaScript, AJAX, MySQL | +| **Kontaktdaten / Über uns** | ✓ | | HTML/CSS | + +--- + +## Empfehlung zu den verwendeten Technologien: + +1. **HTML/CSS:** + - Zur Darstellung und Strukturierung der statischen Inhalte und des grundlegenden Layouts der Seite. + +2. **PHP (Server-seitig):** + - Für alle dynamischen Funktionen wie die Verarbeitung von Formularen, Benutzeranmeldung und Buchungslogik. PHP ist weit verbreitet und besonders nützlich in Kombination mit MySQL für Webanwendungen. + +3. **JavaScript (Client-seitig):** + - Um eine reaktive, benutzerfreundliche Oberfläche zu schaffen. JavaScript kann dafür sorgen, dass Teile der Seite dynamisch aktualisiert werden, ohne die gesamte Seite neu zu laden (z.B. mit AJAX für Verfügbarkeitsprüfungen). + +4. **MySQL (Datenbank):** + - Um Informationen über Hotels, Buchungen und eBike-Verfügbarkeiten zu speichern. MySQL lässt sich gut mit PHP kombinieren und ist leicht skalierbar. + +5. **AJAX:** + - Zur Echtzeit-Überprüfung von Buchungsinformationen (z.B. Verfügbarkeit von eBikes), ohne dass die Seite komplett neu geladen wird. Dies sorgt für eine bessere Nutzererfahrung. + +6. **RESTful API (optional):** + - Wenn die Buchungsplattform in Zukunft auch über mobile Apps oder andere Drittanbieter-Systeme zugänglich sein soll, könnte eine API sinnvoll sein. + +--- + +## Zusammenfassung: + +- Statische Inhalte können direkt mit **HTML und CSS** erstellt werden, da sie sich selten ändern und keine dynamischen Daten benötigen. +- Dynamische Funktionen wie die Buchung, Benutzeranmeldung und Verfügbarkeitsprüfungen sollten **serverseitig mit PHP** und **clientseitig mit JavaScript** (insbesondere AJAX) umgesetzt werden, um eine reibungslose Interaktion zu gewährleisten. +- **MySQL** sollte als Datenbank dienen, um Benutzer- und Buchungsdaten zu speichern. +- Eine **RESTful API** kann für zukünftige Erweiterungen (z.B. mobile Apps) hilfreich sein. \ No newline at end of file diff --git a/booking.xml b/booking.xml new file mode 100644 index 0000000..c8f863d --- /dev/null +++ b/booking.xml @@ -0,0 +1,15 @@ + + + + + Hotel Sunshine + Gold + + + 5 + 2024-09-30 + 123456 + 2024-09-23T14:30:00 + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..d9e0e10 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + eBike Buchung - Tourist Bike GmbH + + + +
+

Tourist Bike GmbH

+ +
+ +
+

Buchungsformular

+
+ +

+ + +

+ + +

+ + +

+ + +
+
+ + + + \ No newline at end of file diff --git a/process_booking.php b/process_booking.php new file mode 100644 index 0000000..f55a01f --- /dev/null +++ b/process_booking.php @@ -0,0 +1,45 @@ + + + + + + + + Buchungsbestätigung - Tourist Bike GmbH + + + +
+

Tourist Bike GmbH

+ +
+ +
+

Buchungsbestätigung

+

Vielen Dank, Ihre Buchung war erfolgreich! Hier sind die Details Ihrer Buchung:

+

+ Hotelname:
+ Hotelkategorie:
+ Anzahl der eBikes:
+ Buchungsdatum:
+

+ Zurück zur Buchungsseite +
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..bc4d430 --- /dev/null +++ b/style.css @@ -0,0 +1,124 @@ + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f9fafc; + color: #333; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + background-color: #e0f0ff; + padding: 20px; + text-align: left; +} + +header h1 { + margin: 0; + font-size: 24px; + color: #333; + display: inline-block; +} + +nav { + float: right; +} + +nav a { + color: #333; + text-decoration: none; + margin-left: 20px; + font-size: 16px; +} + +nav a:hover { + text-decoration: underline; +} + +main { + flex: 1; + text-align: center; + margin-top: 50px; +} + +h2 { + font-size: 28px; + margin-bottom: 20px; + color: #333; +} + +form { + display: inline-block; + text-align: left; + background-color: #fff; + padding: 50px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 60%; + max-width: 600px; + min-width: 300px; +} + +label { + display: block; + font-size: 16px; + margin-bottom: 10px; + color: #333; +} + +input[type="text"], +input[type="number"], +input[type="date"], +select { + width: 100%; + padding: 12px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 16px; + background-color: #f9f9f9; + box-sizing: border-box; +} + +button { + width: 100%; + padding: 15px; + background-color: #a7d2f2; + border: none; + border-radius: 4px; + color: #fff; + font-size: 18px; + cursor: pointer; +} + +button:hover { + background-color: #88b8e6; +} + +footer { + background-color: #e0f0ff; + padding: 20px; + text-align: center; + margin-top: 50px; + position: relative; + width: 100%; + bottom: 0; +} + +footer p { + font-size: 14px; + color: #333; +} + +footer a { + color: #333; + text-decoration: none; + margin: 0 10px; +} + +footer a:hover { + text-decoration: underline; +} \ No newline at end of file