5139 sujets

Le Bar du forum

Pages :
(reprise du message précédent)

@Sepecat : Merci pour ton intervention Sepecat.

QuentinC a écrit :
On devrait peut-être songer à mettre du code sur github pour partager nos trouvailles.

@QuentinC : C'est une très bonne idée, voici pour moi : ScripturaJS
a écrit :
Sinon mon problème ça va être l'organisation de mon code : j'ai placé mes vues dans un fichier du même nom, mais où placer mes routes (qui sont pour l'instant
dans app.js, mon point d'entrée) ? Dans un dossier `config` ?


Étant désormais un peu habitué à Spring et Symfony, de mon côté j'ai choisi de mettre les routes dans le dossier controllers, ça me paraît beaucoup plus logique.
Dans le même fichier et dans un ordre linéaire on voit l'URL appelée et les actions correspondantes: appels aux modèles pour récupérer les données, les traitements effectués, puis transfert à la vue grâce à res.render. Pour moi c'est bien le rôle des contrôleurs.
J'ai fait en sorte de pouvoir grouper ou pas plusieurs routes dans un même fichier, selon la fonction et les affinités. Typiquement pour une application orientée REST ou un schéma CRUD classique, on peut mettre tout ce qui concerne une même ressource ou un même ensemble de ressources dans le même fichier, et bien séparer des autres types de ressources.

Je ne vois pas trop l'utilité de mettre les routes ailleurs qu'avec les contrôleurs. C'est peu probable et de toute façon c'est une mauvaise pratique d'avoir plusieurs URL qui font appel strictement au même contrôleur.

Par ailleurs pour la config, j'ai choisi le format YAML. Aussi expressif que JSON mais plus simple et plus tolérant aux erreurs stupides.
Ca sera notamment un format plus simple quand il faudra faire du site multilingue...

Tiens d'ailleurs, je vois que tu as prévu un dossier locales, tu utilises quoi pour la traduction ?
La plupart de ce que je trouve sur npm c'est pour le faire du côté client à la angular, c'est pas ce que je recherche.
Même si angular se prêterait bien à un mariage complémentaire pour un back en node.js, c'est un peu une usine à gaz pour des expérimentations perso, et j'ai pas trop envie.
Modifié par QuentinC (12 Feb 2017 - 22:45)
QuentinC a écrit :
Étant désormais un peu habitué à Spring et Symfony, de mon côté j'ai choisi de mettre les routes dans le dossier controllers, ça me paraît beaucoup plus logique. [...] Je ne vois pas trop l'utilité de mettre les routes ailleurs qu'avec les contrôleurs. C'est peu probable et de toute façon c'est une mauvaise pratique d'avoir plusieurs URL qui font appel strictement au même contrôleur.

Merci pour ton retour sur le placement des routes, je pense que je vais me plier à cette logique qui convient tout a fait à mon esprit qui aime bien ranger dans de petites cases (MVC) sans être... dérouté.

QuentinC a écrit :
Par ailleurs pour la config, j'ai choisi le format YAML. Aussi expressif que JSON mais plus simple et plus tolérant aux erreurs stupides.
Ca sera notamment un format plus simple quand il faudra faire du site multilingue...

Là on sent le gars qui a fait du Symfony Smiley cligne

QuentinC a écrit :
Tiens d'ailleurs, je vois que tu as prévu un dossier locales, tu utilises quoi pour la traduction ?

Houlà c'est juste en prévision pour l'instant, je n'en suis pas là. Pour l'instant, avant même de me démêler avec les modules npm je m'initie à MySQL : j'avais lu un bouquin entier dessus en 2013, presque 4 ans plus tard il est venu pour moi le temps de la pratique : création et organisation d'un DB MySQL. Je trouve ça assez tripant, mais j'ai du boulot de ce côté là (peut-être le sujet d'un prochain topic).

QuentinC a écrit :
La plupart de ce que je trouve sur npm c'est pour le faire du côté client à la angular, c'est pas ce que je recherche.
Même si angular se prêterait bien à un mariage complémentaire pour un back en Node.js, c'est un peu une usine à gaz pour des expérimentations perso, et j'ai pas trop envie.

Tout a fait d'accord avec toi, c'est exactement la réflexion que je m'étais faite quand j'ai voulu m'attaquer à Node.js. Je ne dis pas que je ne m'attaquerais jamais à un truc de ce genre côté front, mais ce n'est pas à l'ordre du jour et ce ne sera certainement pas avec Angular.js (que ce soit en v1 ou en v2, éventuellement avec Vue.js). Bref, j'ai le temps de voir venir de ce côté là.

PS : pense à faire un petit Github (les copains t'en seront éternellement reconnaissants) Smiley cligne . Rappel du mien (ScripturaJS).
Bonsoir,

Quelqu'un sait-il comment s'y prendre pour ajouter des données à une DB MySQL à partir d'express.js ? Pour l'instant je ne sais que récupérer mes données :
app.get('/article/:id([0-9]{1,7})', (req, res) => { // @example '/article/1'
  let sql = 'SELECT * FROM `_post` WHERE `id` = ?'
    , inserts = req.params.id
  connection.query(sql, inserts, (error, results, fields) => {
    let db = results
      , url = req.url
    if (error) throw error
    if (db[0]) {
      res.render('article',
        {
          db: db
          , dev: config.dev
          , url: url
          , demo: config.demo
          , siteUri: config.uri
          , metaTitle: db[0].name
          , metaDescription: db[0].description
          , content: marked(db[0].content)
        }
      )
    } else {
      error404(req, res)
    }
  })
})
J'ai un peu avancé, je sais envoyer une valeur en dur :
app.get('/admin/edit/:id([0-9]{1,7})', (req, res) => { // @example '/admin/edit/1'
  // du code...
  // la nouvelle requette :
  let sql2 = 'UPDATE `_post` SET `description` = ? WHERE `_post`.`id` = 2'
    , inserts2 = 'test'
  connection.query(sql2, inserts2, (error, results, fields) => {
    //if (error) throw error
    console.log('MySQL: data base updated')
  })
})

Mais de là à prendre en considération les données envoyées via un formulaire je suis encore loin du compte...
Modifié par Olivier C (15 Feb 2017 - 17:56)
a écrit :
Mais de là à prendre en considération les données envoyées via un formulaire je suis encore loin du compte...


Il faut ajouter le middleware bodyParser, le plus simple c'est de le faire avec app.use avant toutes tes routes pour qu'il s'applique de manière générale.
Quand tu envoies des données en POST, ça te remplit un objet req.body, que tu peux utiliser aussi facilement que $_POST en PHP; avec évidemment les mêmes risques de failles si tu le fais aussi basiquement (never trust user input !)

Par exemple:


<form action="/tralala" method="post">
<p><label for="name">Entrez votre nom: </label>
<input type="text" id="name" name="name" />
<button type="submit">OK</button>
</p></form>



app.post('/tralala', function(req,res){
if (req.body.name) res.send("Bonjour, " + req.body + " !");
else res.send("Problème, les données n'ont pas été postées");
});


Après pour faire un truc mieux fichu, il y a sûrement des modules de validation. Je n'ai pas encore creusé la question, mais c'est sûr qu'on est encore très loin du générateur+validateur de formulaire de Symfony.
De retour chez moi après une journée au boulot. Le temps est revenu de faire mumuse avec node.js...

Donc, hier avec la méthode get j'avais obtenu ceci :
  if (req.query.description) {
    let sql2 = 'UPDATE `_post` SET `description` = ? WHERE `_post`.`id` = 2'
      , inserts2 = req.query.description
    connection.query(sql2, inserts2, (error, results, fields) => {
      //if (error) throw error
      console.log('\x1b[91m' + 'Data base updated: ' + inserts2 + '\x1b[0m')
    })
  }

Pour une url finissant en :
?description=test

avec `req.query` et un paramètre suplémentaire, ici `description`, on obtient notre paramètre en get.

Sous express.js :
req.query.description // -> 'test'

Sinon :
req.query['description'] // -> 'test'

Je teste maintenant avec des paramètres en post et la récupération via `req.body`...
Modifié par Olivier C (16 Feb 2017 - 17:12)
Voilà, j'ai commencé à coder mon propre générateur+validateur de formulaire.
Je suis à des années-lumière de ce que peut faire Symfony, mais c'est un début qui ne demande qu'à être étoffé.

Bref, voici un peu de code:

Pour que ce soit plus lisible, j'ai omis la gestion des erreurs (try...catch). En pratique on est obligé, sinon ça peut générer des erreurs unhanddled promise rejection et à l'avenir ça fera direct crasher le serveur.

La génération sur la page affichant le formulaire :

routes.get('my-form', '/form', async function(req,res){
let form = ...
let data = ...
form.bind(data);
let gf = await form.generate();
res.render('member', { form: gf });
});


Avec form un objet Form (j'y viens), et data un objet provenant par exemple de la DB, pour préremplir les champs du formulaire avec les valeurs actuelles.
LE code HTML généré est hyper basique, mais le but final de ce côté-là est d'appeler le moteur de template via app.render.

Pour récupérer et valider loe formulaire en POST ça donne ça:


app.routes.post('/form', async function(req,res){
let form = ...
let data = ...
form.bind(data);
form.load(req.body);
if (await form.validate()) {
// Les données sont correctes, on peut update la base ou faire autre chose
// Ici pour l'exemple on retourne juste sur le formulaire
res.redirectTo('my-form');
}
else {
// Les données ne sont pas correctes, on réaffiche le formulaire avec les erreurs
let gf = await form.generate();
res.render('member', { form: gf });
}
});


La création du formulaire ressemble à ça:

let form = new Form();
form.add(new TextField({ name: 'name', label: 'Votre nom', validators: [notEmpty]  }));
form.add(new Choice({ name: 'preferences', label: 'Vos choix', multiple: true, extended: true, validator: notEmpty, choices: [
{ value: 'IE', label: 'Internet Explorer' },
{ value: 'FFX', label: 'Firefox' },
{ value: 'GCHR', label: 'Google chrome' },
{ value: 'EDGE', label: 'Microsoft Edge' },
{ value: 'SAF', label: 'Safari' },
]}));
form.add(new TextArea({ name: 'comment', label: 'Votre commentaire', validator: notEmpty   }));
form.add(new SubmitButton({ label: 'Valider' }));


ET l'objet data devrait ressembler à :


{ name: 'Jean-Pierre',
comment: 'Votre site est pourri !',
preferences: ['IE', 'GCHR', 'FFX']
}


Je me demande si je ne vais pas aussi m'essayer à faire mon propre moteur de template, juste pour m'amuser. Avec nunjucks je suis un peu coincé, je ne peux par exemple pas passer l'objet form directement et appeler form.generate() dans le code du template; et je trouve que c'est un peu dommage.

Ah oui, et comme tu peux le voir, je me plais beaucoup à essayer les dernières nouveautés comme async/await. C'est vraiment pratique une fois qu'on a compris le concept.
A priori toi tu utilises le module npm forms ?

Ben moi je n'ai rien compris du tout et je rame sur les formulaires avec des valeurs en post que je n'arrive pas à récupérer malgré les recommandations des divers sites/forums/tutoriels consultés. Et puis comme je n'ai pas le temps de m'en occuper en ce moment ça traîne en longueur...
Modifié par Olivier C (20 Feb 2017 - 10:01)
a écrit :
A priori toi tu utilises le module npm forms ?


Même pas, j'ai codé mon propre truc.
Mais c'est quand même rigolo, celui qui a fait ce module a fait quelque chose dans le même genre et je ne l'ai pas vu...

a écrit :
Ben moi je n'ai rien compris du tout et je rame sur les formulaires avec des valeurs en post que je n'arrive pas à récupérer malgré les recommandations
des divers sites/forums/tutoriels consultés.


Qu'est-ce qui se passe ? Qu'est-ce que tu na'rrives pas à faire exactement ?
QuentinC a écrit :
Qu'est-ce qui se passe ? Qu'est-ce que tu n'arrives pas à faire exactement ?

@QuentinC : Pardons de ne pas avoir répondu, je n'ai pas le temps de m'en occuper ces jours ci et ça va durer pendant encore une semaine... Je relancerais le sujet prochainement.
Pages :