Générer une nouvelle page lorsque l'on clique sur un lien

**DienF** · 13/11/2021, 04h53

Bonjour,
J'essaie actuellement de développer un site simple où je peux ajouter des utilisateurs (avec id, nom, prénom) avec un form à une base de données. Mon template ressemble à ça :

Code jsp :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
  <%- include('inc/head') -%>
  <body>
    <%- include('inc/header') -%>
    <main>
      <h2>Users</h2>
      <ul>
        <% for (const user of users) { %>
        <li>
          <a href="/users/<%= user.user_id %>"><%= user.firstname %> <%= user.lastname.toUpperCase() %></a> (<code
            ><%= user.user_id.toLowerCase() %></code
          >)
        </li>
        <% }; %>
      </ul>
      <h2>Add a new user</h2>
      <form method="post" enctype="application/x-www-form-urlencoded">
        <label for="user-id">User's ID</label>
        <input name="$user_id" id="user-id" type="text" />
        <label for="user-firstname">First name</label>
        <input name="$firstname" id="user-firstname" type="text" />
        <label for="user-lastname">Last name</label>
        <input name="$lastname" id="user-lastname" type="text" />
        <button type="submit" id="submit">Submit</button>
        <button type="reset">Reset</button>
      </form>
    </main>
    <%- include('inc/footer') -%>
  </body>
</html>

Lorsque je submit un utilisateur, la page se met à jour pour l'ajouter à une liste ul des utilisateurs, qui sont aussi des liens qui permettent d'accéder à leur propre page /users/:user où leur id, nom, prénom seront affichés. Les utilisateurs sont obtenus en faisant une requête à la BDD :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function getUsers(callback) {
  const query = `SELECT user.rowid, user.* FROM user;`;
  connection.all(query, (error, rows) => {
    if (error) return callback(error);
    debug(`getUsers() completed`);
    return callback(undefined, rows);
  });
}

Mes routes sont situées dans le fichier users.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const express = require("express");
const debug = require("debug")("cm5-demo:users");
const database = require("../db/database");
 
const router = express.Router();
 
router.get("/", (_request, response, next) => {
  database.getUsers((error, users) => {
    if (error) return next(error);
    return response.render("users", { page: "users", users });
  });
});
 
router.get("/", (_request, response, next) => {
  debug(`getUser() start`, response)
  database.getUser((error, user) => {
    if (error) return next(error);
    return response.render("user", { page: "user", user });
  });
});
 
router.post("/", (request, response, next) => {
  debug(`router.post:`, request.body);
  database.postUser(request.body, (error, id) => {
    if (error) return next(error);
    debug(`user added with id ${id}`);
    response.status(201);
    return response.redirect("/users");
  });
});
module.exports = router;

Mon but maintenant c'est que lorsque je clique sur un des liens, il m'emmène à la page /users/:user, dont le template (user.ejs) ressemble à ça :

Code jsp :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<%- include('inc/head') -%>
    <body>
        <%- include('inc/header') -%>
            <main>
                <h2>User</h2>
                <p>
                    <%= user.firstname %>
                    <%= user.lastname.toUpperCase() %>
                    (<code><%= user.user_id.toLowerCase() %></code>)
                </p>
            </main>
            <%- include('inc/footer') -%>
    </body>
</html>

Ma fonction getUsers() qui consiste à obtenir tous les utilisateurs marche très bien, mais c'est getUser() qui sert à obtenir spécifiquement un utilisateur qui me bloque :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function getUser(user, callback) {
  const query = `SELECT user.* FROM user;`;
  connection.run(query, user, (error, id) => {
    if (error) return callback(error);
    debug(`getUser() completed`, id);
    return callback(undefined, id);
  });
}

Si quelqu'un saurait où je devrais faire des modifications pour y parvenir.
Merci d'avance

**Lekno** · 13/12/2021, 15h12

Bonjour,

Il vous manque la partie pour générer le lien par user ou juste la partie affichage user ?

Code jsp :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="/users/:user" target="_BLANK"><%= user.firstname %>  <%= user.lastname.toUpperCase() %></a>

Générer une nouvelle page lorsque l'on clique sur un lien

NodeJS

Discussions similaires

Partager

Partager