Gitlab@Informatics

Skip to content
Snippets Groups Projects
Commit fc16e08f authored by 65160381's avatar 65160381
Browse files

9.1

parent dff3d156
No related branches found
No related tags found
No related merge requests found
Pipeline #613 passed with warnings
...@@ -71,6 +71,7 @@ app.get('/register', (req, res) => { ...@@ -71,6 +71,7 @@ app.get('/register', (req, res) => {
app.get('/post-product', (req, res) => { app.get('/post-product', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'post-product.html')); res.sendFile(path.join(__dirname, 'public', 'post-product.html'));
}); });
// Route สำหรับการ logout // Route สำหรับการ logout
app.get('/logout', (req, res) => { app.get('/logout', (req, res) => {
// ลบข้อมูลใน session // ลบข้อมูลใน session
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post a New Product</title>
<link rel="stylesheet" href="styles/login&register.css">
</head>
<body>
<h1>Post a New Product</h1>
<!-- ฟอร์มสำหรับโพสต์สินค้า -->
<form id="postProductForm" action="/api/products" method="POST" enctype="multipart/form-data">
<label for="productName">Product Name:</label>
<input type="text" id="productName" name="productName" required>
<label for="productPrice">Price:</label>
<input type="number" id="productPrice" name="productPrice" required>
<label for="productImg">Product Image:</label>
<input type="file" id="productImg" name="productImg" required>
<button type="submit">Post Product</button>
</form>
<script>
// การส่งข้อมูลฟอร์มโดยใช้ JavaScript (ใช้ fetch API)
const form = document.getElementById('postProductForm');
form.addEventListener('submit', async function(event) {
event.preventDefault(); // ป้องกันการ submit ฟอร์มแบบปกติ
const formData = new FormData(form); // สร้าง FormData จากฟอร์ม
try {
const response = await fetch('/api/products', {
method: 'POST',
body: formData
});
const data = await response.json();
if (response.ok) {
alert('Product posted successfully!');
console.log(data);
} else {
alert('Failed to post product!');
console.error(data);
}
} catch (error) {
console.error('Error:', error);
alert('An error occurred while posting the product.');
}
});
</script>
</body>
</html>
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
</div> </div>
</header> </header>
<div class="Post"> <div class="post-product">
<button onclick="window.location.href='Post.html'">Post New Product</button> <button onclick="window.location.href='post-product.html'">Post New Product</button>
</div> </div>
<div class="products" id="product-list"> <div class="products" id="product-list">
......
/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
color: #333;
}
header {
background-color: #007bff;
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
margin: 0;
}
header .cart-info {
font-size: 18px;
}
footer {
background-color: #007bff;
color: white;
padding: 10px;
text-align: center;
}
footer .checkout {
background-color: #28a745;
color: white;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
}
footer .checkout:hover {
background-color: #218838;
}
/* Cart Styles */
.cart-items {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
.cart-item {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
padding: 20px;
margin: 10px 0;
width: 80%;
max-width: 800px;
transition: transform 0.3s ease;
}
.cart-item:hover {
transform: translateY(-5px);
}
.cart-item img {
max-width: 100px;
border-radius: 8px;
}
.cart-item div {
flex-grow: 1;
margin-left: 20px;
}
.cart-item h3 {
font-size: 18px;
color: #007bff;
margin-bottom: 10px;
}
.cart-item p {
font-size: 14px;
color: #555;
margin-bottom: 5px;
}
.cart-item input[type="number"] {
width: 50px;
padding: 5px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.cart-item button {
background-color: #dc3545;
color: white;
padding: 8px 12px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.cart-item button:hover {
background-color: #c82333;
}
/* Empty Cart Message */
.cart-items p {
font-size: 18px;
color: #777;
text-align: center;
}
/* Responsive Design */
@media (max-width: 768px) {
.cart-item {
flex-direction: column;
align-items: center;
text-align: center;
}
.cart-item img {
max-width: 80px;
}
.cart-item div {
margin-left: 0;
}
header {
flex-direction: column;
text-align: center;
}
header .cart-info {
margin-top: 10px;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment