From bf33eb69d0d1be4a8a85d70f12663ae83c632026 Mon Sep 17 00:00:00 2001
From: Atiwit Pattanapukdee <65160394@go.buu.ac.th>
Date: Tue, 18 Mar 2025 23:04:39 +0700
Subject: [PATCH] Project Round 6
---
models/tourModel.js | 7 ++-
public/css/create.css | 108 ++++++++++++++++++++++++++++++++++++++++
public/css/edittour.css | 93 ++++++++++++++++++++++++++++++++++
public/css/search.css | 74 +++++++++++++++++++++++++++
public/css/styles.css | 14 ++++++
views/createtour.ejs | 2 +-
views/index.ejs | 2 +-
views/search.ejs | 1 +
8 files changed, 298 insertions(+), 3 deletions(-)
create mode 100644 public/css/create.css
create mode 100644 public/css/edittour.css
create mode 100644 public/css/search.css
diff --git a/models/tourModel.js b/models/tourModel.js
index 562888b..ff73644 100644
--- a/models/tourModel.js
+++ b/models/tourModel.js
@@ -17,14 +17,19 @@ class Tour {
// ค้นหาทัวร์โดยใช้ชื่อ
static async searchTours(query) {
try {
- console.log('Searching for tours with query:', query);
+
const [rows] = await pool.query('SELECT * FROM tours WHERE name LIKE ?', [`%${query}%`]);
+ // หากไม่มีทัวร์ที่ตรงกับคำค้นหา
+ if (rows.length === 0) {
+ return 'ไม่พบทัวร์ที่ตรงกับคำค้นหาของคุณ';
+ }
return rows;
} catch (error) {
console.error('Error searching tours:', error.message);
throw new Error('เกิดข้อผิดพลาดในการค้นหาทัวร์');
}
}
+
// สร้างทัวร์
static async createTour(name, description, price, duration) {
// ตรวจสอบข้อมูล
diff --git a/public/css/create.css b/public/css/create.css
new file mode 100644
index 0000000..ca0f2a1
--- /dev/null
+++ b/public/css/create.css
@@ -0,0 +1,108 @@
+/* Global Styles */
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f8f8f8;
+ margin: 0;
+ padding: 0;
+ color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ }
+
+ header {
+ text-align: center;
+ margin-bottom: 30px;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ color: #4CAF50;
+ margin: 0;
+ }
+
+ main {
+ background-color: #fff;
+ width: 100%;
+ max-width: 600px;
+ padding: 30px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ form {
+ display: flex;
+ flex-direction: column;
+ }
+
+ div {
+ margin-bottom: 20px;
+ }
+
+ label {
+ font-size: 1.1rem;
+ color: #555;
+ display: block;
+ margin-bottom: 5px;
+ }
+
+ input, textarea {
+ width: 100%;
+ padding: 12px;
+ border: 2px solid #ccc;
+ border-radius: 5px;
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+ }
+
+ input:focus, textarea:focus {
+ border-color: #4CAF50;
+ outline: none;
+ }
+
+ textarea {
+ resize: vertical;
+ min-height: 100px;
+ }
+
+ /* Submit Button */
+ button {
+ width: 100%;
+ padding: 14px;
+ background-color: #4CAF50;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ button:hover {
+ background-color: #45a049;
+ }
+
+ button:active {
+ background-color: #388e3c;
+ }
+
+ /* Footer */
+ footer {
+ text-align: center;
+ margin-top: 30px;
+ font-size: 1rem;
+ color: #777;
+ }
+
+ /* Responsive */
+ @media (max-width: 600px) {
+ main {
+ padding: 20px;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+ }
+
\ No newline at end of file
diff --git a/public/css/edittour.css b/public/css/edittour.css
new file mode 100644
index 0000000..128b304
--- /dev/null
+++ b/public/css/edittour.css
@@ -0,0 +1,93 @@
+/* Global Styles */
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f4f4f9;
+ margin: 0;
+ padding: 0;
+ color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ }
+
+ h1 {
+ text-align: center;
+ font-size: 2.5rem;
+ color: #4CAF50;
+ margin-bottom: 20px;
+ }
+
+ form {
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 500px;
+ padding: 30px;
+ margin-top: 20px;
+ }
+
+ /* Form Inputs and Labels */
+ div {
+ margin-bottom: 20px;
+ }
+
+ label {
+ font-size: 1.1rem;
+ color: #555;
+ display: block;
+ margin-bottom: 5px;
+ }
+
+ input, textarea {
+ width: 100%;
+ padding: 10px;
+ border: 2px solid #ccc;
+ border-radius: 5px;
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+ }
+
+ input:focus, textarea:focus {
+ border-color: #4CAF50;
+ outline: none;
+ }
+
+ textarea {
+ resize: vertical;
+ min-height: 100px;
+ }
+
+ /* Submit Button */
+ button {
+ width: 100%;
+ padding: 12px;
+ background-color: #4CAF50;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ button:hover {
+ background-color: #45a049;
+ }
+
+ button:active {
+ background-color: #388e3c;
+ }
+
+ /* Responsive */
+ @media (max-width: 600px) {
+ form {
+ padding: 20px;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+ }
+
\ No newline at end of file
diff --git a/public/css/search.css b/public/css/search.css
new file mode 100644
index 0000000..3be59fa
--- /dev/null
+++ b/public/css/search.css
@@ -0,0 +1,74 @@
+/* Global Styles */
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f8f9fa;
+ margin: 0;
+ padding: 0;
+ color: #333;
+ }
+
+ h2 {
+ text-align: center;
+ font-size: 2rem;
+ color: #4CAF50;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ li {
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ margin: 10px;
+ padding: 15px;
+ width: 300px;
+ text-align: center;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ li:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ }
+
+ a {
+ text-decoration: none;
+ color: #4CAF50;
+ font-size: 1.2rem;
+ font-weight: bold;
+ }
+
+ a:hover {
+ color: #388E3C;
+ }
+
+ p {
+ text-align: center;
+ color: #888;
+ font-size: 1.1rem;
+ }
+
+ a.back-home {
+ display: block;
+ text-align: center;
+ margin-top: 30px;
+ font-size: 1.1rem;
+ color: #007BFF;
+ text-decoration: none;
+ font-weight: bold;
+ transition: color 0.3s ease;
+ }
+
+ a.back-home:hover {
+ color: #0056b3;
+ }
+
\ No newline at end of file
diff --git a/public/css/styles.css b/public/css/styles.css
index ce8a0b5..dcedfa9 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -41,6 +41,20 @@ nav a:hover {
background: rgba(255, 255, 255, 0.5);
}
+.btn-login {
+ margin-left: auto; /* ปุ่ม Login จะไปอยู่ที่ขวาสุด */
+ background-color: #4CAF50;
+ color: white;
+ padding: 10px 20px;
+ border-radius: 5px;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+.btn-login:hover {
+ background-color: #45a049;
+}
+
/* SEARCH BAR */
form {
display: inline-flex;
diff --git a/views/createtour.ejs b/views/createtour.ejs
index ead2765..601e065 100644
--- a/views/createtour.ejs
+++ b/views/createtour.ejs
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Tour</title>
- <link rel="stylesheet" href="/styles.css">
+ <link rel="stylesheet" href="/css/create.css">
</head>
<body>
<header>
diff --git a/views/index.ejs b/views/index.ejs
index aef53ec..0dae3a6 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -19,7 +19,7 @@
<a href="/profile"><%= session.userName %></a> <!-- แสดงชื่อผู้ใช้ -->
<a href="/logout">Logout</a>
<% } else { %>
- <a href="/login">Login</a> <!-- ถ้ายังไม่ได้ login -->
+ <a href="/login" class="btn-login">Login</a> <!-- ถ้ายังไม่ได้ login -->
<% } %>
<form action="/search" method="GET">
<input type="text" name="query" placeholder="Search for tours..." required>
diff --git a/views/search.ejs b/views/search.ejs
index 31ebd89..b4eb489 100644
--- a/views/search.ejs
+++ b/views/search.ejs
@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="/css/search.css">
<h2>Search Results</h2>
<ul>
--
GitLab