category update

app.js

@@ -52,21 +52,44 @@ app.get('/', (req, res) => {
 app.get('/index', async (req, res) => {
   if (!req.session.user) return res.redirect('/');
   try {
-    // ดึง posts จากฐานข้อมูล (หากต้องการ)
-    const [posts] = await db.query(
-      `SELECT p.*, u.username, c.name AS category_name 
+    const categoryId = req.query.category || ''; // รับค่า category จาก query parameter
+    const params = [];
+
+    let query = `
+      SELECT p.*, u.username, c.name AS category_name 
       FROM posts p 
       JOIN users u ON p.user_id = u.id 
       JOIN categories c ON p.category_id = c.id
-       ORDER BY p.created_at DESC`
-    );
-    res.render('pages/index', { posts, user: req.session.user });
+    `;
+
+    if (categoryId) {
+      query += ` WHERE p.category_id = ?`;
+      params.push(categoryId);
+    }
+
+    query += ` ORDER BY p.created_at DESC`;
+
+    const [posts] = await db.query(query, params);
+    const [categories] = await db.query(`SELECT * FROM categories`); // ดึงรายการ category ทั้งหมด
+
+    res.render('pages/index', {
+      posts,
+      categories,
+      selectedCategory: categoryId,
+      user: req.session.user
+    });
   } catch (error) {
     console.error('Error fetching posts:', error);
-    res.render('pages/index', { posts: [], user: req.session.user });
+    res.render('pages/index', {
+      posts: [],
+      categories: [],
+      selectedCategory: '',
+      user: req.session.user
+    });
   }
 });
 
+
 // ค้นหาบทความ (ค้นหาจาก title)
 app.get('/index/search', async (req, res) => {
   if (!req.session.user) return res.redirect('/');

views/pages/index.ejs

@@ -4,6 +4,18 @@
 <div class="main-content">
   <div class="d-flex justify-content-between align-items-center mb-5">
     <h1 class="h2 fw-bold text-primary">All Posts</h1>
+    <form action="/index" method="GET" class="mb-4">
+      <label for="category" class="form-label">Filter by Category:</label>
+      <select name="category" id="category" class="form-select w-auto d-inline-block" onchange="this.form.submit()">
+        <option value="">All Categories</option>
+        <% categories.forEach(category => { %>
+          <option value="<%= category.id %>" <%= selectedCategory == category.id ? 'selected' : '' %>>
+            <%= category.name %>
+          </option>
+        <% }) %>
+      </select>
+    </form>
+    
     <div class="badge bg-primary rounded-pill"><%= posts.length %> posts</div>
   </div>