diff --git a/server.js b/server.js
index efe0057f66bde523f2e73e7d9fa597a94407aa19..97a4f86265dd29b20e13df98f48316de834b9b22 100644
--- a/server.js
+++ b/server.js
@@ -38,13 +38,13 @@ connection.connect(err => {
console.log('Connected to MySQL Successfully');
});
-// มิดเดิลแวร์เช็คว่าผู้ใช้ล็อกอินหรือยัง
+// Middleware ที่ใช้เช็คว่าผู้ใช้ล็อกอินหรือยัง
function isAuthenticated(req, res, next) {
if (req.session.userId) return next();
res.redirect('/login');
}
-// หน้าแรก: พาไป dashboard ทันที (guest ก็เข้าได้)
+// หน้าแรก: พาไป dashboard ทันที ( User แบบ Guest สามารถเข้าได้)
app.get('/', (req, res) => {
res.redirect('/dashboard');
});
diff --git a/views/dashboard.ejs b/views/dashboard.ejs
index abafe865759bc4c6f39e5e0d097b74753135ddcd..f3c0659110a4ff20efc1d53b3394c0cac1b00406 100644
--- a/views/dashboard.ejs
+++ b/views/dashboard.ejs
@@ -1,56 +1,49 @@
-<%- include('partials/header', { username: username }) %>
-
-<!-- Background color -->
-<div class="container my-5" style="background-color: #a86dcff5; color: #333; border-radius: 0px; padding: 30px;">
- <!-- Header with Title -->
- <div class="d-flex justify-content-between align-items-center mb-4">
- <h2 class="mb-0" style="color: #000000; font-size: 30px; font-weight: 600;">THREAD TOPIC</h2>
- <a href="/thread/create" class="btn" style="background-color: #000000; color: #fff; font-weight: 600; border-radius: 20px; padding: 10px 20px;">
- Create New Thread Topic
- </a>
- </div>
-
- <!-- List Group of Topics -->
- <div class="list-group">
- <% threads.forEach(thread => { %>
- <!-- Topic Item -->
- <div class="list-group-item mb-4" style="background-color: #FFF; color: #333; border: none; border-radius: 0px; padding: 20px;">
- <div class="d-flex justify-content-between">
- <!-- Thread Title -->
- <h5 class="mb-1" style="font-size: 20px; font-weight: 700;">
- <a href="/thread/<%= thread.id %>" style="color: #000000; text-decoration: none;">
- <%= thread.thread_name %>
- </a>
- </h5>
- <!-- Thread Owner -->
- <small style="color: #999; font-size: 16px;">
- <span style="color: black; font-weight: bold;">Owner: <%= thread.ownerName %> </span>
- </small>
- </div>
-
- <!-- Short Description -->
- <p class="mb-3" style="font-size: 15px; line-height: 1.5;">
- <%= thread.description.length > 100
- ? thread.description.substring(0, 100) + '...'
- : thread.description
- %>
- </p>
-
- <!-- Action Buttons (View/Edit/Delete) -->
- <div class="mt-3">
- <a href="/thread/<%= thread.id %>" class="btn btn-sm btn-outline-info" style="border-radius: 20px;">View</a>
- <% if (thread.user_id === userId) { %>
- <a href="/thread/edit/<%= thread.id %>" class="btn btn-sm btn-outline-warning" style="border-radius: 20px;">Edit</a>
- <a href="/thread/delete/<%= thread.id %>"
- class="btn btn-sm btn-outline-danger" style="border-radius: 20px;"
- onclick="return confirm('Are you sure you want to delete this thread?');">
- Delete
- </a>
- <% } %>
- </div>
- </div>
- <% }) %>
- </div>
+<!-- แสดง Header จาก partial/header.ejs -->
+<%- include('partials/header') %>
+
+<!-- Container หลักของหน้าสมัครสมาชิก -->
+<div class="container my-5" style="max-width: 450px;">
+ <h2 class="text-center mb-4" style="color: #000000; font-weight: bold;">Register</h2>
+
+ <!-- ถ้ามี error (จาก server) ให้แสดงข้อความแจ้งเตือนในกล่องสีแดง -->
+ <% if (error) { %>
+ <div class="alert alert-danger text-center" role="alert" style="font-size: 16px;">
+ <%= error %>
+ </div>
+ <% } %>
+
+ <!-- ฟอร์มสมัครสมาชิก ส่งข้อมูลผ่าน POST ไปยัง /register -->
+ <form action="/register" method="POST" class="shadow p-4 rounded-lg" style="background-color: #F4F7FA;">
+
+ <!-- ช่องกรอก Username -->
+ <div class="form-group">
+ <label for="username" style="font-weight: bold;">Username:</label>
+ <input type="text" class="form-control" name="username" id="username" placeholder="Enter Username" required>
+ </div>
+
+ <!-- ช่องกรอก Email -->
+ <div class="form-group">
+ <label for="email" style="font-weight: bold;">Email:</label>
+ <input type="email" class="form-control" name="email" id="email" placeholder="Enter Email" required>
+ </div>
+
+ <!-- ช่องกรอก Password -->
+ <div class="form-group">
+ <label for="password" style="font-weight: bold;">Password:</label>
+ <input type="password" class="form-control" name="password" id="password" placeholder="Enter Password" required>
+ </div>
+
+ <!-- ปุ่มกดสมัครสมาชิก -->
+ <button type="submit" class="btn btn-primary btn-block" style="border-radius: 30px; padding: 12px; background-color: #000000; border-color: #000000;">
+ Register
+ </button>
+ </form>
+
+ <!-- ลิงก์ไปหน้า Login หากผู้ใช้มีบัญชีอยู่แล้ว -->
+ <p class="text-center mt-3">
+ Already have an account? <a href="/login" style="color: #000000; font-weight: bold;">Login here</a>
+ </p>
</div>
+<!-- แสดง Footer จาก partial/footer.ejs -->
<%- include('partials/footer') %>
diff --git a/views/login.ejs b/views/login.ejs
index 6ec6d7ab9fd1709abe97b3d19e1275d97babdb0c..dc098e43df5fd098653ed10b98bea797dbda2167 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -1,31 +1,43 @@
+<!-- แสดง Header จาก partial/header.ejs -->
<%- include('partials/header') %>
+<!-- Container หลักของหน้า Login -->
<div class="container my-5" style="max-width: 450px;">
<h2 class="text-center mb-4" style="color: #000000; font-weight: bold;">Login</h2>
- <!-- แสดง error ถ้ามี -->
+ <!-- แสดงข้อความ error ถ้ามี error ถูกส่งมาจาก backend -->
<% if (error) { %>
<div class="alert alert-danger text-center" role="alert" style="font-size: 16px;">
<%= error %>
</div>
<% } %>
+ <!-- ฟอร์ม Login ส่งข้อมูลผ่าน POST ไปยัง /login -->
<form action="/login" method="POST" class="shadow p-4 rounded-lg" style="background-color: #F4F7FA;">
+
+ <!-- ช่องกรอก Username หรือ Email -->
<div class="form-group">
<label for="userInput" style="font-weight: bold;">Username or Email:</label>
<input type="text" class="form-control" name="userInput" id="userInput" placeholder="Enter Username or Email" required>
</div>
+
+ <!-- ช่องกรอก Password -->
<div class="form-group">
<label for="password" style="font-weight: bold;">Password:</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter Password" required>
</div>
- <button type="submit" class="btn btn-primary btn-block" style="border-radius: 30px; padding: 12px; background-color: #000000; border-color: #000000;">Login</button>
+
+ <!-- ปุ่มกดเข้าสู่ระบบ -->
+ <button type="submit" class="btn btn-primary btn-block" style="border-radius: 30px; padding: 12px; background-color: #000000; border-color: #000000;">
+ Login
+ </button>
</form>
+ <!-- ลิงก์ไปหน้า Register สำหรับผู้ที่ยังไม่มีบัญชี -->
<p class="text-center mt-3">
Don't have an account yet? <a href="/register" style="color: #000000; font-weight: bold;">Register Your New Account here</a>
</p>
-
</div>
+<!-- แสดง Footer จาก partial/footer.ejs -->
<%- include('partials/footer') %>
diff --git a/views/register.ejs b/views/register.ejs
index e2c4628055d78a2beb325eaf42db3167f9cdeb05..f3c0659110a4ff20efc1d53b3394c0cac1b00406 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -1,34 +1,49 @@
+<!-- แสดง Header จาก partial/header.ejs -->
<%- include('partials/header') %>
+<!-- Container หลักของหน้าสมัครสมาชิก -->
<div class="container my-5" style="max-width: 450px;">
<h2 class="text-center mb-4" style="color: #000000; font-weight: bold;">Register</h2>
- <!-- แสดง error ถ้ามี -->
+ <!-- ถ้ามี error (จาก server) ให้แสดงข้อความแจ้งเตือนในกล่องสีแดง -->
<% if (error) { %>
<div class="alert alert-danger text-center" role="alert" style="font-size: 16px;">
<%= error %>
</div>
<% } %>
+ <!-- ฟอร์มสมัครสมาชิก ส่งข้อมูลผ่าน POST ไปยัง /register -->
<form action="/register" method="POST" class="shadow p-4 rounded-lg" style="background-color: #F4F7FA;">
+
+ <!-- ช่องกรอก Username -->
<div class="form-group">
<label for="username" style="font-weight: bold;">Username:</label>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter Username" required>
</div>
+
+ <!-- ช่องกรอก Email -->
<div class="form-group">
<label for="email" style="font-weight: bold;">Email:</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Enter Email" required>
</div>
+
+ <!-- ช่องกรอก Password -->
<div class="form-group">
<label for="password" style="font-weight: bold;">Password:</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter Password" required>
</div>
- <button type="submit" class="btn btn-primary btn-block" style="border-radius: 30px; padding: 12px; background-color: #000000; border-color: #000000;">Register</button>
+
+ <!-- ปุ่มกดสมัครสมาชิก -->
+ <button type="submit" class="btn btn-primary btn-block" style="border-radius: 30px; padding: 12px; background-color: #000000; border-color: #000000;">
+ Register
+ </button>
</form>
+ <!-- ลิงก์ไปหน้า Login หากผู้ใช้มีบัญชีอยู่แล้ว -->
<p class="text-center mt-3">
Already have an account? <a href="/login" style="color: #000000; font-weight: bold;">Login here</a>
</p>
</div>
+<!-- แสดง Footer จาก partial/footer.ejs -->
<%- include('partials/footer') %>
diff --git a/views/thread-create.ejs b/views/thread-create.ejs
index 254acbb6ad3f41af315b0da370ba1c4b0b611205..9d385c0905a40814452c4c87116d75760383e85b 100644
--- a/views/thread-create.ejs
+++ b/views/thread-create.ejs
@@ -1,18 +1,28 @@
+<!-- แสดง Header พร้อมส่งค่า username ไปด้วย -->
<%- include('partials/header', { username: username }) %>
+<!-- ส่วนฟอร์มสำหรับสร้างกระทู้ -->
<div class="container my-5" style="max-width: 600px;">
<h2 class="text-center mb-4" style="color: #000000;">Create Thread</h2>
+
+ <!-- Card ที่ห่อหุ้มฟอร์ม -->
<div class="card shadow-sm">
<div class="card-body">
+ <!-- ฟอร์มสร้างกระทู้ใหม่ -->
<form action="/thread/create" method="POST">
+ <!-- ชื่อกระทู้ -->
<div class="form-group">
<label for="thread_name" style="color: #333;">Thread Name:</label>
<input type="text" class="form-control" name="thread_name" id="thread_name" required>
</div>
+
+ <!-- รายละเอียดกระทู้ -->
<div class="form-group">
<label for="description" style="color: #333;">Description:</label>
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
</div>
+
+ <!-- ปุ่มสร้างกระทู้ -->
<button type="submit" class="btn btn-block" style="background-color: #000000; color: #fff; border: none;">
Create
</button>
@@ -21,4 +31,5 @@
</div>
</div>
-<%- include('partials/footer') %>
\ No newline at end of file
+<!-- แสดง Footer -->
+<%- include('partials/footer') %>
diff --git a/views/thread-edit.ejs b/views/thread-edit.ejs
index 694fd0f0a5df4ae55faf643ec535c963b30debd7..02cd0548a1338d79d0a8b67905e147ab82819bbe 100644
--- a/views/thread-edit.ejs
+++ b/views/thread-edit.ejs
@@ -1,24 +1,40 @@
+<!-- แสดง Header และส่งตัวแปร username ไปยัง partial -->
<%- include('partials/header', { username: username }) %>
+<!-- Container หลักที่จำกัดความกว้างไว้ไม่เกิน 600px และมีระยะห่างด้านบน/ล่าง -->
<div class="container my-5" style="max-width: 600px;">
+
+ <!-- หัวข้อหน้าแก้ไขกระทู้ -->
<h2 class="text-center mb-4" style="color: #000000;">Edit Thread</h2>
+
+ <!-- การ์ดสไตล์ Bootstrap พร้อมเงาเล็กน้อย -->
<div class="card shadow-sm">
<div class="card-body">
+
+ <!-- ฟอร์มสำหรับแก้ไขกระทู้ ใช้ method POST และส่งไปยัง path ที่มี id ของกระทู้ -->
<form action="/thread/edit/<%= thread.id %>" method="POST">
+
+ <!-- ช่องกรอกชื่อกระทู้ พร้อมเติมค่าปัจจุบันจากตัวแปร thread -->
<div class="form-group">
<label for="thread_name" style="color: #333;">Thread Name:</label>
<input type="text" class="form-control" name="thread_name" id="thread_name" value="<%= thread.thread_name %>" required>
</div>
+
+ <!-- ช่องกรอกรายละเอียดกระทู้ พร้อมเติมค่าปัจจุบัน -->
<div class="form-group">
<label for="description" style="color: #333;">Description:</label>
<textarea class="form-control" name="description" id="description" rows="5"><%= thread.description %></textarea>
</div>
+
+ <!-- ปุ่มกดยืนยันการอัปเดตกระทู้ -->
<button type="submit" class="btn btn-block" style="background-color: #000000; color: #fff; border: none;">
Update
</button>
</form>
+
</div>
</div>
</div>
+<!-- แสดง Footer จาก partial -->
<%- include('partials/footer') %>
diff --git a/views/thread-view.ejs b/views/thread-view.ejs
index f9c49e4a5428f9bd22ccae1c4b358c1077479a3a..fafee31882c9607af63f86a54bebbc974f2b39a5 100644
--- a/views/thread-view.ejs
+++ b/views/thread-view.ejs
@@ -1,19 +1,32 @@
+<!-- แสดง Header และส่งตัวแปร username ไปยัง partial -->
<%- include('partials/header', { username: username }) %>
+<!-- Container หลักที่จำกัดความกว้างไว้ไม่เกิน 600px พร้อมระยะห่างด้านบน/ล่าง -->
<div class="container my-5" style="max-width: 600px;">
+
+ <!-- หัวข้อชื่อกระทู้ (แสดงชื่อกระทู้เป็นหัวข้อใหญ่) -->
<h2 class="text-center mb-4" style="color: #000000;"> <%= thread.thread_name %> </h2>
+
+ <!-- การ์ดหลักที่แสดงรายละเอียดกระทู้ -->
<div class="card shadow-sm">
<div class="card-body">
+
+ <!-- หัวข้อย่อยของการ์ด -->
<h5 class="card-title" style="color: #000000; font-size: 1.8rem;">
Topic: <%= thread.thread_name %>
</h5>
+
+ <!-- คำอธิบายของกระทู้ -->
<p class="card-text">
<strong>Description:</strong> <%= thread.description %>
</p>
+
+ <!-- เจ้าของกระทู้ -->
<p class="card-text">
<strong>Owner:</strong> <%= thread.ownerName %>
</p>
+ <!-- ปุ่มแก้ไขและลบกระทู้ (แสดงเฉพาะเมื่อ user เป็นเจ้าของกระทู้) -->
<% if (thread.user_id === userId) { %>
<a href="/thread/edit/<%= thread.id %>" class="btn btn-sm btn-outline-warning">Edit</a>
<a href="/thread/delete/<%= thread.id %>" class="btn btn-sm btn-outline-danger"
@@ -22,23 +35,31 @@
</a>
<% } %>
+ <!-- ปุ่มย้อนกลับไปหน้า Dashboard -->
<div class="d-flex justify-content-end mt-2">
<a href="/dashboard" class="btn btn-sm btn-outline-info">Back to Dashboard</a>
</div>
</div>
</div>
- <!-- Comments -->
+ <!-- ส่วนแสดงคอมเมนต์ทั้งหมด -->
<div class="mt-4">
<h4 style="color: #000000;">Comments</h4>
+
+ <!-- ถ้ามีคอมเมนต์ -->
<% if (comments && comments.length > 0) { %>
<ul class="list-group">
<% comments.forEach(c => { %>
<li class="list-group-item mb-2" style="border-radius: 5px;">
+ <!-- แสดงชื่อผู้คอมเมนต์และข้อความ -->
<strong><%= c.commentUser %>:</strong> <%= c.comment %>
+
+ <!-- แสดง Comment ID เล็ก ๆ -->
<span class="text-muted" style="font-size: 0.8em;">
(Comment ID: <%= c.id %>)
</span>
+
+ <!-- ปุ่มลบคอมเมนต์ (เฉพาะเจ้าของคอมเมนต์) -->
<% if (c.user_id === userId) { %>
<a href="/comment/delete/<%= c.id %>"
class="btn btn-sm btn-outline-danger float-right"
@@ -50,11 +71,12 @@
<% }) %>
</ul>
<% } else { %>
+ <!-- ถ้ายังไม่มีคอมเมนต์ -->
<p>No comments yet.</p>
<% } %>
</div>
- <!-- Add Comment Form -->
+ <!-- แบบฟอร์มเพิ่มคอมเมนต์ใหม่ -->
<div class="card mt-3">
<div class="card-body">
<form action="/thread/<%= thread.id %>/comment" method="POST">
@@ -68,4 +90,5 @@
</div>
</div>
+<!-- แสดง Footer -->
<%- include('partials/footer') %>