From 1c039fffffacf5ebab6108a39ce7a648e27607f6 Mon Sep 17 00:00:00 2001
From: Atiwit Pattanapukdee <65160394@go.buu.ac.th>
Date: Thu, 20 Mar 2025 21:29:48 +0700
Subject: [PATCH] Project Round 9

---
 controllers/tourController.js |  12 +++-
 public/css/booking.css        | 104 ++++++++++++++++++++++++++--------
 views/booking.ejs             |   2 +-
 3 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/controllers/tourController.js b/controllers/tourController.js
index ab5979e..37c73d3 100644
--- a/controllers/tourController.js
+++ b/controllers/tourController.js
@@ -294,7 +294,7 @@ exports.getUserBookings = (req, res) => {
 // ฟังก์ชันสร้างการจอง
 exports.createBooking = async (req, res) => {
   const userId = req.session.userId;  // สมมติว่าใช้ session ในการจัดการการล็อกอิน
-  const tourId = req.body['tour_id'];  // รับ tour_id จากฟอร์ม
+  const tourId = req.body['tour-id'];  // รับ tour_id จากฟอร์ม
 
   // ตรวจสอบว่ามีข้อมูล tour-id หรือไม่
   if (!tourId) {
@@ -302,9 +302,17 @@ exports.createBooking = async (req, res) => {
   }
 
   try {
+    // ตรวจสอบว่า tour_id ที่ส่งมาถูกต้องหรือไม่ (สามารถเพิ่มการตรวจสอบว่า tour_id นี้มีอยู่ในฐานข้อมูล)
+    const tourQuery = 'SELECT * FROM tours WHERE id = ?';
+    const [tour] = await pool.query(tourQuery, [tourId]);
+
+    if (tour.length === 0) {
+      return res.status(404).send('Tour not found.');
+    }
+
     // ทำการจองทัวร์
     await Booking.createBooking(userId, tourId);
-    res.redirect('/my-bookings');  
+    res.redirect('/my-bookings');  // หลังจากจองเสร็จ เปลี่ยนเส้นทางไปยังหน้าการจองของผู้ใช้
   } catch (error) {
     console.error('Error creating booking:', error.message);
     res.status(500).send('Internal Server Error');
diff --git a/public/css/booking.css b/public/css/booking.css
index 6c515f8..dd6f6a2 100644
--- a/public/css/booking.css
+++ b/public/css/booking.css
@@ -1,27 +1,33 @@
-/* styles.css */
+/* ตัวหลักของหน้า */
 body {
     font-family: Arial, sans-serif;
-    background-color: #f4f4f4;
+    background-color: #f4f4f9;
     margin: 0;
     padding: 0;
 }
 
 .container {
-    width: 80%;
+    max-width: 1000px;
     margin: 0 auto;
-    padding-top: 30px;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
+/* หัวข้อหลัก */
 h1 {
     text-align: center;
+    font-size: 36px;
+    color: #333;
+    margin-bottom: 30px;
 }
 
-.tour-list {
-    background-color: #fff;
-    padding: 20px;
-    margin-bottom: 20px;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+/* แสดงรายการทัวร์ */
+.tour-list h2 {
+    font-size: 28px;
+    color: #333;
+    margin-bottom: 10px;
 }
 
 .tour-list ul {
@@ -30,45 +36,93 @@ h1 {
 }
 
 .tour-list li {
-    margin: 10px 0;
-    padding: 10px;
     background-color: #f9f9f9;
-    border-radius: 5px;
+    padding: 15px;
     border: 1px solid #ddd;
+    margin-bottom: 10px;
+    border-radius: 8px;
+}
+
+.tour-list li strong {
+    font-size: 20px;
+    color: #444;
+}
+
+.tour-list li br {
+    margin-bottom: 5px;
+}
+
+.tour-list li a {
+    text-decoration: none;
+    color: #007bff;
+    font-weight: bold;
 }
 
+.tour-list li a:hover {
+    text-decoration: underline;
+}
+
+/* ฟอร์มการจอง */
 .booking-form {
-    background-color: #fff;
+    background-color: #f9f9f9;
     padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    margin-top: 30px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.booking-form h2 {
+    font-size: 28px;
+    color: #333;
+    margin-bottom: 20px;
 }
 
 .booking-form form {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
 }
 
 .booking-form label {
-    margin-bottom: 5px;
+    font-size: 18px;
+    color: #333;
+    margin-bottom: 8px;
 }
 
-.booking-form input {
-    padding: 8px;
-    margin-bottom: 15px;
+.booking-form select {
+    padding: 10px;
+    font-size: 16px;
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 20px;
     border: 1px solid #ccc;
-    border-radius: 5px;
+    border-radius: 4px;
 }
 
 .booking-form button {
-    background-color: #4CAF50;
+    background-color: #007bff;
     color: white;
+    padding: 10px 20px;
+    font-size: 18px;
     border: none;
-    padding: 10px;
+    border-radius: 4px;
     cursor: pointer;
-    border-radius: 5px;
+    transition: background-color 0.3s ease;
 }
 
 .booking-form button:hover {
-    background-color: #45a049;
+    background-color: #0056b3;
+}
+
+.booking-form button:active {
+    background-color: #003f7f;
+}
+
+/* สำหรับการจัดการช่องกรอกข้อมูล */
+select:invalid {
+    color: #888;
+}
+
+option {
+    font-size: 16px;
 }
diff --git a/views/booking.ejs b/views/booking.ejs
index 39b43bb..3383159 100644
--- a/views/booking.ejs
+++ b/views/booking.ejs
@@ -30,7 +30,7 @@
             <h2>Book a Tour</h2>
             <form action="/create-booking" method="POST">
                 <label for="tour_id">Select Tour</label>
-                <select id="tour_id" name="tour-id" required>
+                <select id="tour_id" name="tour_id" required>
                     <option value="" disabled selected>Select a Tour</option>
                     <% tours.forEach(function(tour) { %>
                         <option value="<%= tour.id %>"><%= tour.name %></option>
-- 
GitLab