chore: Create search.ejs routed to /search and search bar in header

-
Kaillr · Oct 18, 2024 · d202467 · d202467
1 parent 349c162
commit d202467
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/backend/routes/search.js b/backend/routes/search.js
@@ -0,0 +1,13 @@
+const express = require("express");
+const router = express.Router();
+
+// Route for the search page
+router.get("/", (req, res) => {
+    res.render("search", {
+        title: "Search - Minishop",
+    });
+});
+
+// Export the router
+module.exports = router;
+
diff --git a/backend/server.js b/backend/server.js
@@ -9,6 +9,7 @@ const db = require('./db/db');
 const indexRoutes = require('./routes/index');
 const registerRoutes = require('./routes/register');
 const loginRoutes = require('./routes/login');
+const searchRoutes = require('./routes/search');
 
 const app = express();
 const port = process.env.PORT || 3000;
@@ -24,10 +25,17 @@ app.use(express.urlencoded({ extended: true }));
 // Serve static files from the frontend directory
 app.use(express.static(path.join(__dirname, '../frontend')));
 
+// Middleware to set query variable globally
+app.use((req, res, next) => {
+    res.locals.query = req.query.query || "";  // Set query globally for all views
+    next();
+});
+
 // Define routes
 app.use("/", indexRoutes);
 app.use("/register", registerRoutes);
-app.use("/login", loginRoutes)
+app.use("/login", loginRoutes);
+app.use("/search", searchRoutes);
 
 // Catch-all 404 handler for unavailable routes
 app.use((req, res, next) => {

diff --git a/frontend/views/pages/search.ejs b/frontend/views/pages/search.ejs
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <%- include("../partials/head") %>
+</head>
+<body>
+    <%- include("../partials/header") %>
+
+    <%- include("../partials/footer") %>
+</body>
+</html>
diff --git a/frontend/views/partials/header.ejs b/frontend/views/partials/header.ejs
@@ -1,8 +1,11 @@
 <header>
     <h1><a href="/">Minishop</a></h1>
+    <form action="/search" method="get" class="search">
+        <input type="text" name="query" placeholder="Search..." value="<%= query %>">
+        <button type="submit">Search</button>
+    </form>
     <nav>
         <ul>
-            <li><a href="/">Home</a></li>
             <li><a href="/login">Login</a></li>
             <li><a href="/register">Register</a></li>
         </ul>