Gitlab@Informatics

Skip to content
Snippets Groups Projects
Commit 26757e41 authored by First's avatar First
Browse files

Add Comment to Code for Explain

parent f7b41b8d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
server.js
+ 2
− 2
View file @ 26757e41
......@@ -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');
});
......
views/dashboard.ejs
+ 46
− 53
View file @ 26757e41
<%- 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') %>
views/login.ejs
+ 15
− 3
View file @ 26757e41
<!-- แสดง 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') %>
views/register.ejs
+ 17
− 2
View file @ 26757e41
<!-- แสดง 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') %>
views/thread-create.ejs
+ 12
− 1
View file @ 26757e41
<!-- แสดง 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') %>
views/thread-edit.ejs
+ 16
− 0
View file @ 26757e41
<!-- แสดง 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') %>
views/thread-view.ejs
+ 25
− 2
View file @ 26757e41
<!-- แสดง 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') %>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment