first commit
This commit is contained in:
commit
864158e4b4
3
.idea/.gitignore
generated
vendored
Normal file
3
.idea/.gitignore
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
9
.idea/Tourist Bike GmbH - eBike Buchung.iml
generated
Normal file
9
.idea/Tourist Bike GmbH - eBike Buchung.iml
generated
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
.idea/misc.xml
generated
Normal file
6
.idea/misc.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="21" project-jdk-type="JavaSDK">
|
||||
<output url="file://$PROJECT_DIR$/out" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/Tourist Bike GmbH - eBike Buchung.iml" filepath="$PROJECT_DIR$/.idea/Tourist Bike GmbH - eBike Buchung.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
81
README.md
Normal file
81
README.md
Normal file
@ -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.
|
||||
15
booking.xml
Normal file
15
booking.xml
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bookings>
|
||||
<booking>
|
||||
<hotel>
|
||||
<name>Hotel Sunshine</name>
|
||||
<category>Gold</category>
|
||||
</hotel>
|
||||
<reservation>
|
||||
<bikes>5</bikes>
|
||||
<date>2024-09-30</date>
|
||||
<bookingID>123456</bookingID>
|
||||
<timestamp>2024-09-23T14:30:00</timestamp>
|
||||
</reservation>
|
||||
</booking>
|
||||
</bookings>
|
||||
47
index.html
Normal file
47
index.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>eBike Buchung - Tourist Bike GmbH</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tourist Bike GmbH</h1>
|
||||
<nav>
|
||||
<a href="#">Home</a>
|
||||
<a href="#">Buchung</a>
|
||||
<a href="#">Kontakt</a>
|
||||
<a href="#">Login/Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>Buchungsformular</h2>
|
||||
<form action="process_booking.php" method="POST">
|
||||
<label for="hotelname">Hotelname:</label>
|
||||
<input type="text" id="hotelname" name="hotelname" value="Hotel Sunshine" readonly><br><br>
|
||||
|
||||
<label for="category">Hotelkategorie:</label>
|
||||
<select id="category" name="category">
|
||||
<option value="gold">Gold</option>
|
||||
<option value="silver">Silber</option>
|
||||
<option value="bronze">Bronze</option>
|
||||
</select><br><br>
|
||||
|
||||
<label for="bikes">Anzahl der eBikes:</label>
|
||||
<input type="number" id="bikes" name="bikes" min="1" required><br><br>
|
||||
|
||||
<label for="date">Buchungsdatum:</label>
|
||||
<input type="date" id="date" name="date" required><br><br>
|
||||
|
||||
<button type="submit">Buchen</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Impressum | Datenschutz | Kontakt</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
45
process_booking.php
Normal file
45
process_booking.php
Normal file
@ -0,0 +1,45 @@
|
||||
<?php
|
||||
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||
$hotelname = htmlspecialchars($_POST['hotelname']);
|
||||
$category = htmlspecialchars($_POST['category']);
|
||||
$bikes = htmlspecialchars($_POST['bikes']);
|
||||
$date = htmlspecialchars($_POST['date']);
|
||||
}
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Buchungsbestätigung - Tourist Bike GmbH</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tourist Bike GmbH</h1>
|
||||
<nav>
|
||||
<a href="#">Home</a>
|
||||
<a href="#">Buchung</a>
|
||||
<a href="#">Kontakt</a>
|
||||
<a href="#">Login/Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>Buchungsbestätigung</h2>
|
||||
<p>Vielen Dank, Ihre Buchung war erfolgreich! Hier sind die Details Ihrer Buchung:</p>
|
||||
<p>
|
||||
<strong>Hotelname:</strong> <?php echo $hotelname; ?><br>
|
||||
<strong>Hotelkategorie:</strong> <?php echo $category; ?><br>
|
||||
<strong>Anzahl der eBikes:</strong> <?php echo $bikes; ?><br>
|
||||
<strong>Buchungsdatum:</strong> <?php echo $date; ?><br>
|
||||
</p>
|
||||
<a href="index.html">Zurück zur Buchungsseite</a>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Impressum | Datenschutz | Kontakt</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
124
style.css
Normal file
124
style.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user