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

- WIP: order system to save orders and display them to the buyer

Browse Source 
- fixed an error so the summary of an order can now be shown but is still empty
This commit is contained in:
Fabian 2025-04-27 19:28:26 +02:00
parent 60f056b8ec
commit c9c0608898
3 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/bestellformular/bestellformular.html
View File

@ -45,6 +45,10 @@
</main> </main>
<script> <script>
if(sessionStorage.getItem('user_id')){
document.getElementById('KundenNr').value = sessionStorage.getItem('user_id')
}
document.getElementById('sendOrder').addEventListener('click', async (event) => { document.getElementById('sendOrder').addEventListener('click', async (event) => {
event.preventDefault(); // Verhindert das Standardformularverhalten event.preventDefault(); // Verhindert das Standardformularverhalten
@ -66,7 +70,7 @@
if (response.ok) { if (response.ok) {
alert('Bestellung erfolgreich!'); alert('Bestellung erfolgreich!');
//window.location.href = '/bestellung.html'; // Weiterleitung zur Bestellübersicht window.location.href = '/bestellung'; // Weiterleitung zur Bestellübersicht
} else { } else {
alert('Fehler bei der Bestellung: ' + result.message); alert('Fehler bei der Bestellung: ' + result.message);
} }

88
public/bestellung/bestellung.html
View File

@ -1,65 +1,63 @@
<!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>Ihre Bestellung</title> <title>Ihre Bestellung</title>
<link rel="stylesheet" href="/Styles/bestellung/bestellung.css"> <link rel="stylesheet" href="/Styles/bestellung/bestellung.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>
<!-- Header wird hier dynamisch geladen --> <!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<main> <main>
<h2>Ihre Bestellung:</h2> <h2>Ihre Bestellung:</h2>
<div id="bestellung"> <div id="bestellung">
<!-- Platzhalter für die Bestellinformationen --> <!-- Platzhalter für die Bestellinformationen -->
<div class="bestell-info-card"> <div class="bestell-info-card">
<p><strong>Kundennummer:</strong> <span id="kundenNr"></span></p> <p><strong>Kundennummer:</strong> <span id="kundenNr"></span></p>
<p><strong>Produkt-ID:</strong> <span id="produktId"></span></p> <p><strong>Produkt-ID:</strong> <span id="produktId"></span></p>
<p><strong>Produktname:</strong> <span id="produktName"></span></p> <p><strong>Produktname:</strong> <span id="produktName"></span></p>
<p><strong>Preis:</strong> <span id="preis"></span></p> <p><strong>Preis:</strong> <span id="preis"></span></p>
</div> </div>
</div> </div>
</main> </main>
<script> <script>
async function ladeBestellung() { async function ladeBestellung() {
const user_id = sessionStorage.getItem('user_id') const user_id = sessionStorage.getItem('user_id')
console.log('User ID: ', user_id) if (!user_id) {
if (!user_id){ alert('Sie sind nicht eingeloggt! Bitte loggen sie sich ein damit diese Seite angezeigt werden kann.')
console.log("is null") window.location.href = '/login'
alert('Sie sind nicht eingeloggt! Bitte loggen sie sich ein damit diese Seite angezeigt werden kann.') } else if (user_id >= 1) {
window.location.href = '/login' try {
} else if (user_id <= 1) { const response = await fetch('/api/bestellung/daten', {
try { method: 'POST',
const response = await fetch('/api/bestellung/daten', { headers: {
method: 'POST', 'Content-Type': 'application/json'
headers: { },
'Content-Type': 'application/json' body: JSON.stringify({user_id: user_id})
}, })
body: JSON.stringify(user_id)
})
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
console.log(data) console.log(data)
document.getElementById('kundenNr').textContent = user_id document.getElementById('kundenNr').textContent = user_id
document.getElementById('produktId').textContent = data.product_id //document.getElementById('produktId').textContent = data.product_id
//document.getElementById('produktName').textContent = data. //document.getElementById('produktName').textContent = data.
document.getElementById('preis').textContent = data.total + ' €' document.getElementById('preis').textContent = data.total + ' €'
} else { } else {
console.error('Fehler beim Laden der Bestelldaten.'); 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 -->

10
server.js
View File

@ -130,7 +130,7 @@ app.get('/api/products/sportwagen', async (req, res) => {
app.post('/api/user/registration', (req, res) => { app.post('/api/user/registration', (req, res) => {
// SQL-Query für Nutzerregistration // SQL-Query für Nutzerregistration
const {name, lower_name, email, passwd} = req.body; const {name, lower_name, email, passwd} = req.body;
const sql = "INSERT INTO user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')" const sql = "INSERT INTO webshop.user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')"
// Query abschicken // Query abschicken
db.query(sql, [name, lower_name, email, passwd], (err, results) => { db.query(sql, [name, lower_name, email, passwd], (err, results) => {
@ -172,8 +172,8 @@ app.post('/api/bestellung', (req, res) => {
const {user_id, product_id} = req.body; const {user_id, product_id} = req.body;
const sql1 = 'INSERT INTO order_details (, user_id, payment_id, total) VALUES (?, null, null)' const sql1 = 'INSERT INTO webshop.order_details (user_id, payment_id, total) VALUES (?, 1, 0)'
const sql2 = 'INSERT INTO order_items (user_id, product_id, quantity, order_id) VALUES (?, ?, 1, ?)'; const sql2 = 'INSERT INTO webshop.order_items (user_id, product_id, quantity, order_id) VALUES (?, ?, 1, ?)';
db.query(sql1, [user_id, 1, 100.00], (err1, result1) => { db.query(sql1, [user_id, 1, 100.00], (err1, result1) => {
if (err1) { if (err1) {
@ -190,11 +190,11 @@ app.post('/api/bestellung', (req, res) => {
}); });
}); });
app.get('/api/bestellung/daten', (req, res) => { app.post('/api/bestellung/daten', (req, res) => {
const user_id = req.body; const user_id = req.body;
const sql = 'SELECT oi.user_id, oi.product_id, p.product_name, p.price FROM order_items oi INNER JOIN product p ON oi.product_id = p.id WHERE user_id = ? ' const sql = 'SELECT oi.user_id, oi.product_id, p.name AS product_name, p.price FROM order_items oi INNER JOIN product p ON oi.product_id = p.id WHERE oi.user_id = ? '
db.query(sql, [user_id], (err, results) => { 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);