Berufsschule/Webshop
Berufsschule/Webshop
Template
5
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

- WIP: reworked the order function and added error handling for it

Browse Source 
- added a function to save the user_id in the sessionStorage of the browser
This commit is contained in:
Fabian 2025-04-26 19:23:04 +02:00
parent c5ef5d49c0
commit 40e5db6551
5 changed files with 100 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
public/bestellformular/bestellformular.html
View File

@ -1,89 +1,86 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestellformular</title>
<link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
<link rel="stylesheet" href="./Styles/styles-main.css">
<script src="/header_footer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestellformular</title>
<link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
<link rel="stylesheet" href="./Styles/styles-main.css">
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div>
<!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div>
<main>
<div class="form-container">
<form action="/submit-bestellung" method="post" id="bestellform">
<h2>Bestellformular</h2>
<main>
<div class="form-container">
<form action="/submit-bestellung" method="post" id="bestellform">
<h2>Bestellformular</h2>
<label for="vorname">Vorname:</label>
<input type="text" id="Vorname" name="Vorname" required placeholder="Vorname">
<label for="vorname">Vorname:</label>
<input type="text" id="Vorname" name="Vorname" required placeholder="Vorname">
<label for="nachname">Nachname:</label>
<input type="text" id="Nachname" name="Nachname" required placeholder="Nachname">
<label for="nachname">Nachname:</label>
<input type="text" id="Nachname" name="Nachname" required placeholder="Nachname">
<label for="kundenNr">Kunden Nr.:</label>
<input type="text" id="KundenNr" name="KundenNr" required placeholder="Kunden Nr.">
<label for="kundenNr">Kunden Nr.:</label>
<input type="text" id="KundenNr" name="KundenNr" required placeholder="Kunden Nr.">
<label for="strasse">Straße:</label>
<input type="text" id="strasse" name="strasse" required placeholder="Strasse">
<label for="strasse">Straße:</label>
<input type="text" id="strasse" name="strasse" required placeholder="Strasse">
<label for="hausnummer">Hausnummer:</label>
<input type="text" id="hausnummer" name="hausnummer" required placeholder="Hausnummer">
<label for="hausnummer">Hausnummer:</label>
<input type="text" id="hausnummer" name="hausnummer" required placeholder="Hausnummer">
<label for="ort">Ort:</label>
<input type="text" id="ort" name="ort" required placeholder="Ort">
<label for="ort">Ort:</label>
<input type="text" id="ort" name="ort" required placeholder="Ort">
<label for="telefon Nr">Telefon Nr (optional):</label>
<input type="tel" id="telefon Nr" name="telefon" placeholder="Telefon Nr">
<label for="ArtikelNr">Artikel Nr.:</label>
<textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea>
<label for="ArtikelNr">Artikel Nr.:</label>
<textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea>
<a href="/bestellung" class="button-submit" id="sendOrder">Bestellung absenden</a>
</form>
</div>
</main>
<a href="/bestellung" class="button-submit" id="bestellformular">Bestellung absenden</a>
</form>
</div>
</main>
<script>
document.getElementById('bestellform').addEventListener('sendOrder', async (event) => {
event.preventDefault(); // Verhindert das Standardformularverhalten
<script>
document.getElementById('bestellform').addEventListener('bestellformular', async (event) => {
event.preventDefault(); // Verhindert das Standardformularverhalten
const userId = document.getElementById('KundenNr').value;
const productId = document.getElementById('ArtikelNr').value;
const userId = document.getElementById('KundenNr').value;
const productId = document.getElementById('ArtikelNr').value;
try {
const response = await fetch('/api/bestellung', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userId,
productId,
try {
const response = await fetch('/api/bestellung', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userId,
productId,
})
});
})
const result = await response.json();
if (response.ok) {
alert('Bestellung erfolgreich!');
window.location.href = '/bestellung.html'; // Weiterleitung zur Bestellübersicht
} else {
alert('Fehler bei der Bestellung: ' + result.message);
}
} catch (error) {
console.error('Fehler:', error);
alert('Fehler beim Bestellen.');
}
});
</script>
const result = await response.json();
if (response.ok) {
alert('Bestellung erfolgreich!');
window.location.href = '/bestellung.html'; // Weiterleitung zur Bestellübersicht
} else {
alert('Fehler bei der Bestellung: ' + result.message);
}
} catch (error) {
console.error('Fehler:', error);
alert('Fehler beim Bestellen.');
}
});
</script>
<!-- Footer wird dynamisch geladen -->
<div id="footer"></div>
<!-- Footer wird dynamisch geladen -->
<div id="footer"></div>
</div>
</body>
</html>

41
public/bestellung/bestellung.html
View File

@ -27,26 +27,37 @@
<script>
async function ladeBestellung() {
try {
const response = await fetch('/api/bestellung/daten');
const user_id = sessionStorage.getItem('user_id')
console.log('User ID: ', user_id)
if (!user_id){
console.log("is null")
alert('Sie sind nicht eingeloggt! Bitte loggen sie sich ein damit diese Seite angezeigt werden kann.')
} else if (user_id <= 1) {
try {
const response = await fetch('/api/bestellung/daten', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user_id)
})
if (response.ok) {
const data = await response.json();
document.getElementById('kundenNr').textContent = data.kundenNr;
document.getElementById('produktId').textContent = data.artikelNr;
document.getElementById('produktName').textContent = data.produktName;
document.getElementById('preis').textContent = data.preis + ' €';
} else {
console.error('Fehler beim Laden der Bestelldaten.');
if (response.ok) {
const data = await response.json();
document.getElementById('kundenNr').textContent = user_id
document.getElementById('produktId').textContent = data.product_id
//document.getElementById('produktName').textContent = data.
document.getElementById('preis').textContent = data.total + ' €'
} else {
console.error('Fehler beim Laden der Bestelldaten.');
}
} catch (error) {
console.error('Fehler: ', error);
}
} catch (error) {
console.error('Fehler: ', error);
}
}
window.addEventListener('DOMContentLoaded', ladeBestellung);
window.addEventListener('DOMContentLoaded', ladeBestellung);
</script>
<!-- Footer wird dynamisch geladen -->

5
public/login/login.html
View File

@ -37,8 +37,8 @@
document.getElementById('submit').addEventListener('click', async (event) => {
event.preventDefault()
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const email = document.getElementById('email').value
const password = document.getElementById('password').value
try {
const response = await fetch('/api/user/login', {
@ -50,6 +50,7 @@
})
if (response.ok) {
const data = await response.json();
sessionStorage.setItem("user_id", data.id)
alert('Login erfolgreich!');
window.location.href = '/'; // Redirect to home page after login
} else {

1
public/registrieren/registrieren.html
View File

@ -75,6 +75,7 @@
})
if (response.ok) {
const data = await response.json();
sessionStorage.setItem("user_id", data.id)
alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
} else {
alert('Fehler bei der Registrierung.')

19
server.js
View File

@ -169,27 +169,26 @@ app.post('/api/user/login', (req, res) => {
})
app.post('/api/bestellung', (req, res) => {
const { userId, productId} = req.body;
// 1. Produktpreis holen
const productSql = 'SELECT price FROM product WHERE productId = ?';
const producNameSql = 'SELECT name FROM product WHERE productId = ?';
const { user_id, product_id} = req.body;
const sql = 'INSERT INTO order_items (user_id, product_id, quantity) VALUES (?, ?, 1)'
db.query(productSql, [productId], (err, productResults) => {
if (err || productResults.length === 0) {
db.query(sql, [user_id, product_id], (err, results) => {
if (err || results.length === 0) {
console.error('Fehler beim Abrufen des Produkts: ', err);
return res.status(500).json({ message: 'Produkt nicht gefunden oder Serverfehler' });
}
const productPrice = productResults[0].price;
res.status(201).json({message: 'Produkt bestellt', id: results.insertId})
});
});
app.get('/api/bestellung/daten', (req, res) => {
const user_id = req.body;
db.query(sql, [userId], (err, results) => {
const sql = 'SELECT * FROM order_items WHERE user_id = ? '
db.query(sql, [user_id], (err, results) => {
if (err) {
console.error('Fehler beim Abrufen der Bestellung: ', err);
return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellung' });