Gitlab@Informatics

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

9.1

parent dff3d156
Branches
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