task 7

PHOTO EMBED

Wed Apr 23 2025 01:42:45 GMT+0000 (Coordinated Universal Time)

Saved by @cciot 

Here’s how you can complete TASK 7: Working with Express step by step:

---

🔧 Step 1: Set Up the Project

mkdir user-api-ejs
cd user-api-ejs
npm init -y
npm install express ejs body-parser

---

📁 Project Structure

user-api-ejs/
├── views/
│   └── users.ejs
├── routes/
│   └── users.js
├── app.js

📦 Step 2: Create the Express Server (app.js)
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const usersRouter = require('./routes/users');

app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use('/api/users', usersRouter); // REST API
app.use('/users', usersRouter);     // For EJS view

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

---

📄 Step 3: Users API Routes (routes/users.js)

const express = require('express');
const router = express.Router();

let users = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' }
];

// READ all users (API)
router.get('/', (req, res) => {
  if (req.originalUrl.startsWith('/api')) {
    res.json(users);
  } else {
    res.render('users', { users });
  }
});

// CREATE a new user
router.post('/', (req, res) => {
  const { name, email } = req.body;
  const newUser = { id: users.length + 1, name, email };
  users.push(newUser);
  res.json(newUser);
});

// UPDATE a user
router.put('/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const { name, email } = req.body;
  const user = users.find(u => u.id === id);
  if (user) {
    user.name = name;
    user.email = email;
    res.json(user);
  } else {
    res.status(404).json({ message: 'User not found' });
  }
});

// DELETE a user
router.delete('/:id', (req, res) => {
  const id = parseInt(req.params.id);
  users = users.filter(u => u.id !== id);
  res.json({ message: 'User deleted' });
});

module.exports = router;

🖼️ Step 4: Create EJS Template (views/users.ejs)

<!DOCTYPE html>
<html>
<head>
  <title>Users Table</title>
  <style>
    table {
      width: 60%;
      border-collapse: collapse;
      margin: 20px auto;
    }
    th, td {
      padding: 10px;
      border: 1px solid #ddd;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h2 style="text-align: center;">Users List</h2>
  <table>
    <thead>
      <tr><th>ID</th><th>Name</th><th>Email</th></tr>
    </thead>
    <tbody>
      <% users.forEach(user => { %>
        <tr>
          <td><%= user.id %></td>
          <td><%= user.name %></td>
          <td><%= user.email %></td>
        </tr>
      <% }) %>
    </tbody>
  </table>
</body>
</html>
🧪 Step 5: Test in Postman

Test these endpoints:

GET http://localhost:3000/api/users → Get all users (JSON)

POST http://localhost:3000/api/users → Add user (Body: name, email)

PUT http://localhost:3000/api/users/:id → Update user by ID

DELETE http://localhost:3000/api/users/:id → Delete user by ID

Visit http://localhost:3000/users to see the data in table form via EJS.
content_copyCOPY