Discussion :

[FloCAD]

Bonjour à tous,

J'ai développé une interface en HTML, CSS et Javascript (en utilisant Bootstrap) et je souhaiterai maintenant pouvoir créer, sur cette interface vers un "espace personnel", un système de connexion avec Login/mot de passe.
Les données de connexion (login/mdp) sont présent sur une base de données PostgreSQL dans une table utilisateurs et je souhaitais savoir s'il était possible de créer se système de connexion avec Node.js ?
J'imagine que cela est possible mais ne connaissant pas Node.js et trouvant très peu de ressource sur le sujet (il s'agit souvent de docs en lien avec MongoDB ou alors de système d'Update de données) je voulais avoir des retours utilisateurs, savoir s'il s'agissait d'une solution safe, si c'était facile à mettre en place, et si vous aviez éventuellement des liens vers lesquels me rediriger !

Merci d'avance pour vos réponses.

[xulien]

Salut,

je ne suis pas sur de bien comprendre ce que tu souhaite, ni même ce que tu as fait jusque là et pourquoi

En gros, tu as une page HTML, ok; et du javascript, mais qui fait quoi? quelles sont les données que tu affiches? d'où viennent-telles? une partie serveur?

[FloCAD]

ahah ok ok

Bah comme j'ai dis plus haut, j'ai une page d'accueil en html (avec du CSS et du JS qui servent juste pour faire de la déco, rien de bien fou !) et j'aimerai qu'un visiteur qui a un compte sur ma base de données postgres puisse rentrer ses identifiants et mot de passe (aussi présent dans la base PGSQL) depuis l'interface d’accueil et qu'à ce moment là il soit redirigé vers une autre page HTML qui affiche ses données personnelles (données personnelles aussi présentent dans la base de données) !

Je sais que c'est possible de faire un système d'authentification avec du PHP mais moi je veux le faire en JS du coup je voulais savoir si en utilisant Node.JS (+npm+passport+pg+sequelize) c'était possible et comment ? Et où trouver de la doc ou des tutos sachant que sur Google j'ai pas trouvé grand chose correspondant à mon besoin !

Merci d'avance =)

[xulien]

Alors part sur Express.js, le framework web minimal et historique. des tutos sur le sujet tu en as des kilos... avec une recherche sur "tuto express.js passport.js", je prend les deux premiers:

http://mherman.org/blog/2015/01/31/l.../#.VbkHSfYvBhE
http://code.tutsplus.com/tutorials/a...ort--cms-21619

Ils utilisent mongodb pour la persistance, mais tu peux très facilement transposer avec séqualize, les principes étant les mêmes, puisqu'il s'agit d'object mapping pour les deux.
Tu peux même faire les tutos en utilisant un fake pour la persistance (un bête tableau de données ou un objet quelconque), et t'y attaquer à la fin. Cela me semble d'ailleurs être la meilleur façon de faire pour d'abord ce familiariser avec les concetps du js comme l'asynchrone.

[FloCAD]

Okay nickel merci !
C'est ce que j'avais déjà commencé à faire mais jade me faisait pêter un plomb du coup je voulais avoir confirmation que je ne faisais pas tout ça pour rien ! =)
Merci pour tes lumières !

[xulien]

jade n'est pas obligatoire et tu peux le remplacer par ce que tu veux dans cette liste.
mais jade, dés que c'est assimilé, avis perso, ce n'est que du bon!

[FloCAD]

Arf ! Jade, je trouve ça un peu souillon par rapport à du HTML classique vu que ça a l'air de se baser sur les tabulation au lieu de se baser sur du balisage...(enfin d'après ce que j'ai vu en suivant un tuto sur l'internet, c'est ce que j'avais remarqué mais si ça se trouve je me suis planté ^^')
Après je souhaiterai optimiser au maximum le temps d'apprentissage et donc me focaliser sur le stricte nécessaire ! Il est possible de se passer de tout langage tierce avec Node.js + Express + PG + Passport + Sequalize et rester simplement sur du HTML, CSS et JS ?

[xulien]

Arf ! Jade, je trouve ça un peu souillon par rapport à du HTML classique

Aaarrgggllll !!!!!!

Un exemple de formulaire avec html et bootstrap :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<form class="form-horizontal">
<fieldset>
 
<legend>Form Name</legend>
 
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Text Input</label>  
  <div class="col-md-4">
  <input id="textinput" name="textinput" placeholder="placeholder" class="form-control input-md" type="text">
  <span class="help-block">help</span>  
  </div>
</div>
 
<div class="form-group">
  <label class="col-md-4 control-label" for="passwordinput">Password Input</label>
  <div class="col-md-4">
    <input id="passwordinput" name="passwordinput" placeholder="placeholder" class="form-control input-md" type="password">
    <span class="help-block">help</span>
  </div>
</div>
 
<div class="form-group">
  <label class="col-md-4 control-label" for="appendedcheckbox">Appended Checkbox</label>
  <div class="col-md-4">
    <div class="input-group">
      <input id="appendedcheckbox" name="appendedcheckbox" class="form-control" placeholder="placeholder" type="text">
      <span class="input-group-addon">     
          <input type="checkbox">     
      </span>
    </div>
    <p class="help-block">help</p>
  </div>
</div>
 
<div class="form-group">
  <label class="col-md-4 control-label" for="radios">Multiple Radios</label>
  <div class="col-md-4">
  <div class="radio">
    <label for="radios-0">
      <input name="radios" id="radios-0" value="1" checked="checked" type="radio">
      Option one
    </label>
    </div>
  <div class="radio">
    <label for="radios-1">
      <input name="radios" id="radios-1" value="2" type="radio">
      Option two
    </label>
    </div>
  </div>
</div>
 
<div class="form-group">
  <label class="col-md-4 control-label" for="selectmultiple">Select Multiple</label>
  <div class="col-md-4">
    <select id="selectmultiple" name="selectmultiple" class="form-control" multiple="multiple">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
    </select>
  </div>
</div>
 
<div class="form-group">
  <label class="col-md-4 control-label" for="textarea">Text Area</label>
  <div class="col-md-4">                     
    <textarea class="form-control" id="textarea" name="textarea">default text</textarea>
  </div>
</div>
 
<div class="form-group">
  <label class="col-md-4 control-label" for="button1id">Double Button</label>
  <div class="col-md-8">
    <button id="button1id" name="button1id" class="btn btn-success">Good Button</button>
    <button id="button2id" name="button2id" class="btn btn-danger">Scary Button</button>
  </div>
</div>
 
</fieldset>
</form>

Le même en jade et bootstrap :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
form.form-horizontal
    fieldset
        legend Form Name
 
        .form-group
            label.col-md-4.control-label(for="textinput") Text Input
            .col-md-4
                input#textinput.form-control.input-md(name="textinput", placeholder="placeholder", type="text")
                span.help-block help
 
        .form-group
            label.col-md-4.control-label(for="passwordinput") Password Input
            .col-md-4
                input#passwordinput.form-control.input-md(name="passwordinput", placeholder="placeholder", type="password")
                span.help-block help
 
        .form-group
            label.col-md-4.control-label(for="appendedcheckbox") Appended Checkbox
            .col-md-4
                .input-group
                    input#appendedcheckbox.form-control(name="appendedcheckbox", placeholder="placeholder", type="text")
                    span.input-group-addon
                       input(type="checkbox")
                p.help-block help
 
        .form-group
            label.col-md-4.control-label(for="radios") Multiple Radios
            .col-md-4
                .radio
                    label(for="radios-0")
                        input#radios-0(name="radios", value="1", checked="checked", type="radio")
                        Option one
                .radio
                    label(for="radios-1")
                        input#radios-1(name="radios", value="2", type="radio")
                        Option two
 
        .form-group
            label.col-md-4.control-label(for="selectmultiple") Select Multiple
            .col-md-4
                select#selectmultiple.form-control(name="selectmultiple", multiple="multiple")
                    option(value="1") Option one
                    option(value="2") Option two
 
        .form-group
            label.col-md-4.control-label(for="textarea") Text Area
            .col-md-4
                textarea#textarea.form-control(name="textarea") default text
 
        .form-group
            label.col-md-4.control-label(for="button1id") Double Button
            .col-md-8
                button#button1id.btn.btn-success(name="button1id") Good Button
                button#button2id.btn.btn-danger(name="button2id") Scary Button

Outre la concision, la clarté de la version jade saute aux yeux. On identifie immédiatement les structures !
De plus, cela t'évite les problèmes de fermeture de balises, et tu obtiens un code HTML minifier en sortie... Alors franchement "souillon"...

Il est possible de se passer de tout langage tierce avec Node.js + Express + PG + Passport + Sequalize et rester simplement sur du HTML, CSS et JS ?

Tu dois de toute façon passer par un système de template pour construire de pages dynamiques... Tu peux utiliser ejs qui te permet de conserver ton HTML tel quel, mais comme dis précédemment, jade, c'est que du bon (oui oui c'est du prosélytisme ).

[FloCAD]

Mouais...je suis pas hyper convaincu par jade... le problème des balises fermantes sont en général géré par l'IDE utilisé alors que pour l'indentation, au moins espace en trop, tout fou l'camp ^^'
(bon je reconnais malgré tout avoir été un peu convaincu par ton argumentaire ...)
Bon par contre EJS j'en avait entendu parlé et il a une meilleure réputation que Jade à priori mais perso ça me semble pire ! (j'suis un sacré conservateur du développement web moi ! Le genre de type qui préfère réinventer la roue plutôt qu'utiliser un framework !)

Du coup, utiliser un système de template signifie utiliser soit jade, soit ejs, soit un des langages de la liste que tu m'as donnée ?
J'avais entendu parlé de coffeescript aussi ! ejs et coffeescript c'est pas uniquement accès JS alors que jade est plus HTML ? Je vois pas trop la cohérence là-dedans... :/

[xulien]

le problème des balises fermantes sont en général géré par l'IDE utilisé alors que pour l'indentation

C'est plus en terme de maintenance, car ton ide, il ne vas pas te prevenir d'un </div> que tu as oublié de virer.

au moins espace en trop, tout fou l'camp

non

Du coup, utiliser un système de template signifie utiliser soit jade, soit ejs, soit un des langages de la liste que tu m'as donnée ?

oui, ou pondre le tien si tu veux réinventer la roue

J'avais entendu parlé de coffeescript aussi ! ejs et coffeescript c'est pas uniquement accès JS alors que jade est plus HTML ? Je vois pas trop la cohérence là-dedans... :/

tu mélange en fait un peu tout, et le fait de faire du node participe à la confusion car tout est js.

il faut distinguer:

• le langage de balise pour la mise en forme -> html.

la syntaxe "pythonique" de jade, n'est rien d'autre qu'une autre façon de faire du HTML en plus concis. on change de paradigme pour indiquer le début et la fin d'un élément. En html on va mettre notre balise entre chevrons pour le début, et on indique la fin avec la même balise et nos chevrons et une barre oblique. En jade, la fin est représentée par un retour à la ligne, les chevrons du début ne sont donc plus nécessaire, la structure de ton HTML découle ce celle de ton code... ce n'est qu'une question de convention avec des implications différentes.

• le langage de template -> jade, ejs, twig, smarty, moustache, handlebars, etc...

Qui permet juste de créer des ... templates ou gabarit en bon français. ce sont des fichiers constitué de HTML avec des variables qui seront remplacées par des valeurs par le système de template à la demande de la page par le client.
le résultat d'une page web peut-être un assemblage de templates (ex: header, footer, corps de la page, et le menu peuvent être dans des templates séparés)
Donc le systeme de template assemble des templates, ajoute les données dynamique (comme une liste non prédéfini par ex), et rend le tout en une page HTML au serveur http qui renvoi au client.

• le langage de programmation -> js, php, java, etc...

C'est avec lui que tu vas créer les données que tu inséras dans ton template. JS à la particularité de s’exécuter coté client ET serveur avec node.js, mais pas la même utilisation car pas le même environnement des deux cotés, et pas la même cible.
coffeescript, tout comme typescript et certainement d'autres, ne sont, comme jade l'est à HTML, que des langages surcouche qui produiront "in fine" du javascript. Que l'on puisse les utiliser pour la partie serveur ou cliente n'as rien à voir avec la choucroute... c'est juste une autre façon de faire du javascript.

[FloCAD]

Pour ce qui est de la maintenance c'est vrai mais après je suis un gros maniaque en plus d'être un vieux conservateur du coup ça aide pas mal pour maintenir du code ! Mais je reconnais que ça simplifie les choses ! Après le problème de l'indentation reste le même pour ce qui est de la maintenance, non ? Il faut repérer jusqu'où le bloc allait et faire un shift+tab sur l'intégralité sur bloc à reprendre...ça doit même être plus lourd vu qu'il n'y a pas de balise pour se repérer non ? (désolé mais en plus d'être un maniaque conservateur je suis aussi un chieur têtu avec un sale caractère ! )

ahah ouais réinventer la roue me paraît être un bon plan ! Non plus sérieusement okay je comprends !

Du coup, si à l'origine, j'ai une page d'accueil et une page user déjà développées en HTML, CSS et JS, je suis obligé de tout refaire en Jade avec Express (+Passport+PG+SEQUELIZE) via Node.js, c'est bien ça ?

En tout cas merci de prendre le temps et d'avoir la patience de m'expliquer tout ça !

[xulien]

Il faut repérer jusqu'où le bloc allait et faire un shift+tab sur l'intégralité sur bloc à reprendre...ça doit même être plus lourd vu qu'il n'y a pas de balise pour se repérer non ?

Non, car dés que tu pratique un peu, les "blocs" te sautent aux yeux, alors que ton </div>, tu dois te taper tout le code pour le trouver et être sur que c'est bien celui-ci qui pose probléme

je suis obligé de tout refaire en Jade avec Express (+Passport+PG+SEQUELIZE) via Node.js

tu n'es pas obligé de faire avec jade, mais même avec ejs, twig, mustache.js, etc, tu vas devoir découper ta page initiale en morceau logiques et réutilisables. à priori, ton bas de page avec les mentions légales est le même sur toutes les pages, par exemple.
la nature de jade, fait que effectivement, tu vas traduire ton HTML en dialecte jade.

En tout cas merci de prendre le temps et d'avoir la patience de m'expliquer tout ça !

bha de rien

[FloCAD]

Non, car dés que tu pratique un peu, les "blocs" te sautent aux yeux, alors que ton </div>, tu dois te taper tout le code pour le trouver et être sur que c'est bien celui-ci qui pose probléme

Okay bah ça doit être mon manque d'habitude de ce type de langage qui doit me déstabiliser alors...

tu n'es pas obligé de faire avec jade, mais même avec ejs, twig, mustache.js, etc, tu vas devoir découper ta page initiale en morceau logiques et réutilisables. à priori, ton bas de page avec les mentions légales est le même sur toutes les pages, par exemple.
la nature de jade, fait que effectivement, tu vas traduire ton HTML en dialecte jade.

Ok ok ! Et pour ce qui est de la partie Express (+Passport+PG+SEQUELIZE) via Node.js, tout se fait en Jade aussi, ou c'est du JS normal ou encore un autre langage venu d'un monde parallèle ? (J'suis débutant en dev du coup tout ce qui sort un peu des sentiers battu est issu d'un monde parallèle...)

bha de rien

Non mais merci d'avoir la patience vraiment ! ^^
Tu me tires une énorme épine du pied mine de rien !

[xulien]

Et pour ce qui est de la partie Express (+Passport+PG+SEQUELIZE) via Node.js, (...) ou encore un autre langage venu d'un monde parallèle ?

Par défaut tout node, c'est du js. node.js est un interpréteur JavaScript, il ne comprendra que le JavaScript. par contre rien ne t’empêche de tout écrire en coffeescript par exemple, qui sera transformé en js, avant d'être interprété par node.

tout se fait en Jade aussi

euh, jade c'est juste un système de template, cf: poste précédent

[FloCAD]

Ah mais du coup ce que je comprends pas c'est si Jade (langage de template) est indépendant d'Express (Framework) ou de n'importe quel package (passport, etc.) et où et quand je dois utiliser Jade ou du JS ...

Une question en suscite une autre ! On ne va jamais s'en sortir !!!!

[xulien]

totalement indépendant.

le plus simple pour percevoir toutes ces différences est, je pense, de commencer à les manipuler. Démarre simplement ton projet autour des tutos que j'ai t'ai indiqué.

[FloCAD]

Ok ça marche ! En parallèle je viens de bouffer pas mal de théorie sur putaindecode.fr histoire d'être au fait des avis les plus récents et pertinents par rapport à l'univers qui gravite autour de node.js et ce soir je m'entrainerai avec des tutos !
Merci pour tout ! A+