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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestellformular</title> <title>Bestellformular</title>
<link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css"> <link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<script src="/header_footer"></script> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header wird hier dynamisch geladen --> <!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<main> <main>
<div class="form-container"> <div class="form-container">
<form action="/submit-bestellung" method="post" id="bestellform"> <form action="/submit-bestellung" method="post" id="bestellform">
<h2>Bestellformular</h2> <h2>Bestellformular</h2>
<label for="vorname">Vorname:</label> <label for="vorname">Vorname:</label>
<input type="text" id="Vorname" name="Vorname" required placeholder="Vorname"> <input type="text" id="Vorname" name="Vorname" required placeholder="Vorname">
<label for="nachname">Nachname:</label> <label for="nachname">Nachname:</label>
<input type="text" id="Nachname" name="Nachname" required placeholder="Nachname"> <input type="text" id="Nachname" name="Nachname" required placeholder="Nachname">
<label for="kundenNr">Kunden Nr.:</label> <label for="kundenNr">Kunden Nr.:</label>
<input type="text" id="KundenNr" name="KundenNr" required placeholder="Kunden Nr."> <input type="text" id="KundenNr" name="KundenNr" required placeholder="Kunden Nr.">
<label for="strasse">Straße:</label> <label for="strasse">Straße:</label>
<input type="text" id="strasse" name="strasse" required placeholder="Strasse"> <input type="text" id="strasse" name="strasse" required placeholder="Strasse">
<label for="hausnummer">Hausnummer:</label> <label for="hausnummer">Hausnummer:</label>
<input type="text" id="hausnummer" name="hausnummer" required placeholder="Hausnummer"> <input type="text" id="hausnummer" name="hausnummer" required placeholder="Hausnummer">
<label for="ort">Ort:</label> <label for="ort">Ort:</label>
<input type="text" id="ort" name="ort" required placeholder="Ort"> <input type="text" id="ort" name="ort" required placeholder="Ort">
<label for="telefon Nr">Telefon Nr (optional):</label> <label for="ArtikelNr">Artikel Nr.:</label>
<input type="tel" id="telefon Nr" name="telefon" placeholder="Telefon Nr"> <textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea>
<label for="ArtikelNr">Artikel Nr.:</label> <a href="/bestellung" class="button-submit" id="sendOrder">Bestellung absenden</a>
<textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea> </form>
</div>
</main>
<a href="/bestellung" class="button-submit" id="bestellformular">Bestellung absenden</a> <script>
</form> document.getElementById('bestellform').addEventListener('sendOrder', async (event) => {
</div> event.preventDefault(); // Verhindert das Standardformularverhalten
</main>
<script> const userId = document.getElementById('KundenNr').value;
document.getElementById('bestellform').addEventListener('bestellformular', async (event) => { const productId = document.getElementById('ArtikelNr').value;
event.preventDefault(); // Verhindert das Standardformularverhalten
const userId = document.getElementById('KundenNr').value; try {
const productId = document.getElementById('ArtikelNr').value; 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(); <!-- Footer wird dynamisch geladen -->
<div id="footer"></div>
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>
</div> </div>
</body> </body>
</html> </html>

41
public/bestellung/bestellung.html
View File

@ -27,26 +27,37 @@
<script> <script>
async function ladeBestellung() { async function ladeBestellung() {
try { const user_id = sessionStorage.getItem('user_id')
const response = await fetch('/api/bestellung/daten'); 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) {
if (response.ok) { const data = await response.json();
const data = await response.json(); document.getElementById('kundenNr').textContent = user_id
document.getElementById('produktId').textContent = data.product_id
document.getElementById('kundenNr').textContent = data.kundenNr; //document.getElementById('produktName').textContent = data.
document.getElementById('produktId').textContent = data.artikelNr; document.getElementById('preis').textContent = data.total + ' €'
document.getElementById('produktName').textContent = data.produktName; } else {
document.getElementById('preis').textContent = data.preis + ' €'; console.error('Fehler beim Laden der Bestelldaten.');
} 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> </script>
<!-- Footer wird dynamisch geladen --> <!-- Footer wird dynamisch geladen -->

5
public/login/login.html
View File

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

1
public/registrieren/registrieren.html
View File

@ -75,6 +75,7 @@
}) })
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
sessionStorage.setItem("user_id", data.id)
alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id) alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
} else { } else {
alert('Fehler bei der Registrierung.') 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) => { app.post('/api/bestellung', (req, res) => {
const { userId, productId} = req.body;
// 1. Produktpreis holen const { user_id, product_id} = req.body;
const productSql = 'SELECT price FROM product WHERE productId = ?'; const sql = 'INSERT INTO order_items (user_id, product_id, quantity) VALUES (?, ?, 1)'
const producNameSql = 'SELECT name FROM product WHERE productId = ?';
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); console.error('Fehler beim Abrufen des Produkts: ', err);
return res.status(500).json({ message: 'Produkt nicht gefunden oder Serverfehler' }); return res.status(500).json({ message: 'Produkt nicht gefunden oder Serverfehler' });
} }
res.status(201).json({message: 'Produkt bestellt', id: results.insertId})
const productPrice = productResults[0].price;
}); });
}); });
app.get('/api/bestellung/daten', (req, res) => { 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) { if (err) {
console.error('Fehler beim Abrufen der Bestellung: ', err); console.error('Fehler beim Abrufen der Bestellung: ', err);
return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellung' }); return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellung' });