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

Unterkategorien erstellt. CSS noch WIP. Neue Api + neue Routen erstellte

Browse Source
This commit is contained in:
gitfreeking 2025-04-14 20:41:42 +02:00
parent 15ab8a999d
commit 263afe76b3
14 changed files with 254 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/header_footer/footer.html Normal file
View File

@ -0,0 +1,8 @@
<!-- Fußzeiele -->
<footer class="footer">
<p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
<p>
<a href="/impressum">Impressum</a> |
<a href="/datenschutz">Datenschutz</a>
</p>
</footer>

0
public/header_footer/header_footer.html → public/header_footer/header.html
View File

16
public/login/login.html
View File

@ -5,7 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Styles/login/login.css"> <link rel="stylesheet" href="./Styles/login/login.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./Styles/header/header.css"> <link rel="stylesheet" href="./Styles/header_footer/header.css">
<link rel="stylesheet" href="./Styles/header_footer/footer.css">
<title>Login</title> <title>Login</title>
</head> </head>
<body> <body>
@ -40,6 +41,17 @@
</div> </div>
</form> </form>
</div> </div>
<script src="./script.js"></script>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

14
public/registrieren/registrieren.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Styles/registrieren/registrieren.css"> <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./Styles/header_footer/header.css">
<link rel="stylesheet" href="./Styles/header_footer/footer.css">
<title>Registrieren</title> <title>Registrieren</title>
</head> </head>
<body> <body>
@ -58,6 +60,16 @@
</form> </form>
</div> </div>
</div> </div>
<script src="./passwordValidation.js"></script>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

78
public/shop/shop.html
View File

@ -6,7 +6,8 @@
<title>Shop</title> <title>Shop</title>
<link rel="stylesheet" href="./Styles/shop/shop.css"> <link rel="stylesheet" href="./Styles/shop/shop.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./Styles/header/header.css"> <link rel="stylesheet" href="./Styles/header_footer/header.css">
<link rel="stylesheet" href="./Styles/header_footer/footer.css">
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
@ -20,65 +21,50 @@
.catch(error => console.error('Fehler beim Laden des Headers:', error)); .catch(error => console.error('Fehler beim Laden des Headers:', error));
</script> </script>
<!-- Hauptinhalt -->
<section style="padding: 20px 30px; text-align: left; background: #fff;"> <section style="padding: 20px 30px; text-align: left; background: #fff;">
<h1>Willkommen im Webshop</h1> <h1>Willkommen im Webshop</h1>
</section> </section>
<main> <main>
<div id="product-list" class="card-grid"> <section class="card-grid" id="latest-products">
<!-- Hier werden die Produkte dynamisch eingefügt --> <!-- Dynamische Produkte (5 aktuelle Produkte) -->
</div> </section>
</main> </main>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { fetch('/api/products')
const apiUrl = 'http://localhost:3000/api/products'; .then(res => res.json())
.then(products => {
const container = document.getElementById('latest-products');
container.innerHTML = ''; // sicherheitshalber leeren
// Hole die Produktdaten von der API products.forEach(product => {
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const productList = document.getElementById('product-list');
// Iteriere durch die Produkte und erstelle HTML für jedes Produkt
data.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
card.innerHTML = `
const img = document.createElement('img'); <img src="${product.image_url}" alt="${product.name}">
img.src = product.imageUrl || 'https://shop.porsche.com/_next/image?url=https%3A%2F%2Fassets-prod.porsche.com%2Fassets%2Fce81555c-4f59-485e-9f9b-7a448a4d91b3.webp&w=2560&q=75'; <h3>${product.name}</h3>
// Bild aus DB <p>Preis: ${product.price}€</p>
img.alt = product.name; <p>${product.description}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
const name = document.createElement('h3'); `;
name.textContent = product.name; container.appendChild(card);
const price = document.createElement('p');
price.textContent = `Preis: ${product.price}€`;
const description = document.createElement('p');
description.textContent = product.description || '';
const button = document.createElement('button');
button.classList.add('add-to-cart');
button.textContent = 'Zum Warenkorb hinzufügen';
button.addEventListener('click', () => {
console.log(`${product.name} wurde zum Warenkorb hinzugefügt`);
});
// Alles zur Karte hinzufügen
card.appendChild(img);
card.appendChild(name);
card.appendChild(price);
card.appendChild(description);
card.appendChild(button);
productList.appendChild(card);
}); });
}) })
.catch(error => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', error); console.error('Fehler beim Laden der neuesten Produkte:', err);
}); });
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
}); });
</script> </script>

18
public/shop/shop_lkw.html
View File

@ -3,10 +3,11 @@
<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>Shop</title> <title>Shop - LKW's</title>
<link rel="stylesheet" href="./Styles/shop/shop.css"> <link rel="stylesheet" href="./Styles/shop/shop.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./Styles/header/header.css"> <link rel="stylesheet" href="./Styles/header_footer/header.css">
<link rel="stylesheet" href="./Styles/header_footer/footer.css">
</head> </head>
<body> <body>
@ -15,5 +16,18 @@
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

56
public/shop/shop_motorrad.html
View File

@ -3,15 +3,67 @@
<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>Shop</title> <title>Shop - Motorräder</title>
<link rel="stylesheet" href="./Styles/shop/shop.css"> <link rel="stylesheet" href="./Styles/shop/shop.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./Styles/header/header.css"> <link rel="stylesheet" href="./Styles/header_footer/header.css">
<link rel="stylesheet" href="./Styles/header_footer/footer.css">
</head> </head>
<body> <body>
<!-- Header -->
<div id="header-placeholder"></div>
<script>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<!-- Hauptinhalt -->
</br>
<h1>Unsere Motorrad Produkte</h1>
<section class="card-grid" id="products_motorrad">
<!-- Dynamische Produkte (5 aktuelle Produkte) -->
</section>
<script>
fetch('/api/products/motorrad')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_motorrad');
container.innerHTML = ''; // sicherheitshalber leeren
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>${product.description}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err);
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

18
public/shop/shop_oldtimer.html
View File

@ -3,15 +3,29 @@
<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>Shop</title> <title>Shop - Oldtimer</title>
<link rel="stylesheet" href="./Styles/shop/shop.css"> <link rel="stylesheet" href="./Styles/shop/shop.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./Styles/header/header.css"> <link rel="stylesheet" href="./Styles/header_footer/header.css">
<link rel="stylesheet" href="./Styles/header_footer/footer.css">
</head> </head>
<body> <body>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

20
public/shop/shop_sportwagen.html
View File

@ -3,14 +3,30 @@
<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>Shop</title> <title>Shop - Sportwagen</title>
<link rel="stylesheet" href="./Styles/shop/shop.css"> <link rel="stylesheet" href="./Styles/shop/shop.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./Styles/header/header.css"> <link rel="stylesheet" href="./Styles/header_footer/header.css">
<link rel="stylesheet" href="./Styles/header_footer/footer.css">
</head> </head>
<body> <body>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

22
public/startseite/startseite.html
View File

@ -3,13 +3,13 @@
<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>Modellauto</title> <title>Modellauto - Startseite</title>
<link rel="stylesheet" href="./Styles/startseite/startseite.css"> <link rel="stylesheet" href="./Styles/startseite/startseite.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./Styles/header_footer/header_footer.css"> <link rel="stylesheet" href="./Styles/header_footer/header.css">
<link rel="stylesheet" href="./Styles/header_footer/footer.css">
</head> </head>
<body> <body>
<!-- Wrapper für die gesamte Seite -->
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
@ -38,7 +38,7 @@
</section> </section>
<script> <script>
fetch('/api/products/latest') fetch('/api/products/new')
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('latest-products'); const container = document.getElementById('latest-products');
@ -88,11 +88,15 @@
</section> </section>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<footer style="background: #222; color: #fff; padding: 30px 20px; text-align: center; margin-top: 40px;"> <div id="footer"></div>
<p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
<p><a href="/impressum" style="color: #ff6600; text-decoration: none;">Impressum</a> | <script>
<a href="/datenschutz" style="color: #ff6600; text-decoration: none;">Datenschutz</a></p> fetch('/footer')
</footer> .then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</div> </div>

34
scripts/routes/other/route-index.js
View File

@ -1,6 +1,7 @@
const path = require('path'); const path = require('path');
const router = require('express').Router(); const router = require('express').Router();
// Route - Startseite
router.get('/', (req, res) => { router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/startseite/startseite.html')); res.sendFile(path.join(__dirname, '../../../public/startseite/startseite.html'));
}) })
@ -9,20 +10,51 @@ router.get('/example', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/example/index.html')); res.sendFile(path.join(__dirname, '../../../public/example/index.html'));
}) })
// Route - Login
router.get('/login', (req, res) => { router.get('/login', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/login/login.html')); res.sendFile(path.join(__dirname, '../../../public/login/login.html'));
}) })
// Route - Registrieren
router.get('/registrieren', (req, res) => { router.get('/registrieren', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/registrieren/registrieren.html')); res.sendFile(path.join(__dirname, '../../../public/registrieren/registrieren.html'));
}) })
// Route - Kopfzeile
router.get('/header', (req, res) => { router.get('/header', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/header_footer/header_footer.html')); res.sendFile(path.join(__dirname, '../../../public/header_footer/header.html'));
}) })
// Route - Fußzeile
router.get('/footer', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/header_footer/footer.html'));
})
// Route - Shop (Alle Produkte)
router.get('/shop', (req, res) => { router.get('/shop', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop.html')); res.sendFile(path.join(__dirname, '../../../public/shop/shop.html'));
}) })
// Route - Shop_Motorrad (Filtern nach Motorrad Produkten)
router.get('/shop/motorrad', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop_motorrad.html'));
})
// Route - Shop_Oldtimer (Filtern nach Oldtimer Produkten)
router.get('/shop/oldtimer', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop_oldtimer.html'));
})
// Route - Shop_Sportwagen (Filtern nach Sportwagen Produkten)
router.get('/shop/sportwagen', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop_sportwagen.html'));
})
// Route - Shop_LKW (Filtern nach LKW Produkten)
router.get('/shop/lkw', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html'));
})
module.exports = router; module.exports = router;

17
server.js
View File

@ -52,7 +52,7 @@ app.get('/api/products', (req, res) => {
}); });
}); });
app.get('/api/products/latest', async (req, res) => { app.get('/api/products/new', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product ORDER BY created_at DESC LIMIT 5'; const sql = 'SELECT * FROM webshop.product ORDER BY created_at DESC LIMIT 5';
@ -67,6 +67,21 @@ app.get('/api/products/latest', async (req, res) => {
}); });
}); });
app.get('/api/products/motorrad', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product_category WHERE id = 4';
// Abfrage ausführen
db.query(sql, (err, results) => {
if (err) {
console.error('Fehler beim Abrufen der Produkte:', err);
res.status(500).send('Fehler beim Abrufen der Produkte');
return;
}
res.json(results); // Rückgabe der Produktdaten als JSON
});
});
const getIndexRoute = require('./scripts/routes/other/route-index'); const getIndexRoute = require('./scripts/routes/other/route-index');
app.use('/', getIndexRoute); app.use('/', getIndexRoute);

16
static/Styles/header_footer/footer.css Normal file
View File

@ -0,0 +1,16 @@
.footer {
background: #222;
color: #fff;
padding: 30px 20px;
text-align: center;
margin-top: 40px;
}
.footer a {
color: #ff6600;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}

0
static/Styles/header_footer/header_footer.css → static/Styles/header_footer/header.css
View File