Générer une nouvelle page lorsque l'on clique sur un lien
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:
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:
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:
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:
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:
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