CRUD nodejs + ejs + Mysql

**Alexdu13** · 10/11/2021, 10h02

Bonjour à tous,

J'ai un projet à réaliser et je bloque lors de la création de mon CRUD. Après avoir suivi différents tutos, je n'arrive pas à adapter les situations à mon cas.
J'ai une BDD Mysql avec déjà des tables "user", "articles", "category". J'arrive à afficher mes tables sur mon blog en .ejs, et maintenant je dois créer un espace "Admin" avec connexion, et un CRUD qui permet de gérer mes articles (create read update delete) une fois connecté en Admin.

Je ne sais pas du tout comment m'y prendre...

Dois-je procéder comme suit avec 3 fichiers .ejs ? Y a-t'il d'autres façons ?

Mon arborescence :
Nom : arbo.PNG
Affichages : 687
Taille : 12,8 Ko

Nom : arbo.PNG
Affichages : 687
Taille : 12,8 Ko

INDEX.JS :

Code javascript :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 :  
'use strict'
/* eslint-env node,  es6 */
 
 
//Importer le paquet Express
const express = require('express')
 
const bodyParser = require('body-parser')
//Importer la bdd
const mysql = require('mysql')
 
 
//connecter à la bdd
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'user',
  password: 'user',
  database: 'blog_js'
});
 
connection.connect();
 
 
//choix du port
const PORT = 6300
 
// Créer une application express
const app = express()
 
app.set('view engine', 'ejs')
 
 
//démarrer serveur
app.listen(PORT, () => {
  console.log(`Serveur démarré : http://localhost:${PORT}`)
 
})
 
app.use(express.static(__dirname + '/public'));
 
 
 
var ArticlesRouter = require('./views/crud');
 
app.use('./views', ArticlesRouter);
 
app.get('/', function (req, res) {
 
  let sql = "SELECT * FROM articles INNER JOIN category ON articles.id_category = category.id_category INNER JOIN user ON articles.user_id = user.user_id;";
 
  connection.query(sql, function (err, result) {
 
    if (err) {
 
      throw err;
 
    } else {
      console.log(result[0].titre),
        res.render('index.ejs', { result });
 
    }
 
  });
 
 })

INDEX.EJS

Code html :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
 
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> -->
    <title>Blog très sérieux sur les éléphants</title>
</head>
 
<body>
    <header>
        <h1>Mon blog sur les éléphants</h1>
        <button name="button">Accueil</button>
        <button name="button">Admin</button>
    </header>
 
    <br>
 
    <fieldset>
 
        <p>Titre : <%= result[0].titre %> </p>
        <p>Contenu : <%= result[0].contenu %>  </p>
        <p>Image : <%= result[0].image %> </p>
        <p>Catégorie : <%= result[0].id_category %> - <%= result[1].name %>  </p>
        <p>Auteur : <%= result[0].username %> - <%=result[0].email %>  </p>
    </fieldset>
 
    <br>
 
    <fieldset>
        <p>Titre : <%= result[1].titre %>  </p>
        <p>Contenu : <%= result[1].contenu %>   </p>
        <p>Image : <%= result[1].image %>  </p>
        <p>Catégorie : <%= result[1].id_category %> - <%= result[0].name %> </p>
        <p>Auteur : <%= result[1].username %> - <%=result[1].email %> </p>
    </fieldset>
 
    <br>
 
    <fieldset>
        <p>Titre : <%= result[2].titre %>  </p>
        <p>Contenu : <%= result[2].contenu %>  </p>
        <p>Image : <%= result[2].image %>  </p>
        <p>Catégorie : <%= result[2].id_category %> - <%= result[2].name %>  </p>
        <p>Auteur : <%= result[2].username %> - <%=result[2].email %> </p>
    </fieldset>
    <br>
    <footer class="bottom">
        <a href="https://fr-fr.facebook.com/"><img src="logo-facebook.png" alt="image" class="logo"></a>
        <a href="#">Instagram</a>
        <a href="#">Twitter</a>
    </footer>
 
</body>
 
</html>

Merci d'avance, je suis dispo pour des infos complémentaires.

Alexdu13

**djedjethai** · 12/11/2021, 13h46

Bonjour, tu peux faire un truc comme ca,

=======
ADMIN AUTH
=======
Tu as une admin section donc il te faut une page authentification (get Method)
route: /admin ceci t'envoies sur une saisie de pseudo et password(par ex) -> page: auth.ejs

l'administateur remplie les input et valid, retour au server via une nouvelle route (post Method)
route: /admin si credential ok, set la session de l'admin et envoie sur page d'acceuil de l'administeur -> page: adminIndex.ejs

=========
ADMIN INDEX PAGE
=========
Sur la page adminIndex.ejs un tableau(par example) avec chaque article et au choix update ou delete

Si clic sur delete(delete Method)
route: admin/article/delete-middlewareVerifAuth le server delete l'article(en db) et te renvoie sur la page d'acceuil de l'admin -> page: adminIndex.ejs

========
Si clic sur update(get Method)
route: admin/article/update-middlewareVerifAuth le server te renvoie sur une page avec l'article a modifier(recuperer depuis la db) se trouvant dans un formulaire -> page: adminModifArticle.ejs

Tu valides la modification du formulaire(post Method)
route admin/article/update-middlewareVerifAuth le server save la modif en db et te renvoie sur la page d acceuil de l'admin -> page: adminIndex.ejs

=========

Pour finir sur cette page d'acceuil admin un bouton Deconnexion (get Method)
route: admin/deconnection le server detruit la session de l'admin et te renvoie sur la page acceuil de l'app

ps: -middlewareVerifAuth Verifie que le client est bien authentifie, si pas, retour a la page d'acceuil

CRUD nodejs + ejs + Mysql

NodeJS

Discussions similaires

Partager

Partager