IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

NodeJS Discussion :

Afficher la météo avec node et openweathermap


Sujet :

NodeJS

  1. #21
    Membre actif
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Points : 233
    Points
    233
    Par défaut
    Alors, le moteur de blog, c'est parti, et en couleur!

    Donc, on part de ça:

    app.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
    var express = require('express');
    var http = require('http');
    var path = require('path');
    
    var app = express();
    
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'ejs');
    
    app.get('/', function (req, res) {
        res.render({title: 'je suis la page index'});
    });
    
    http.createServer(app).listen(3000, function () {
        console.log('Le serveur ecoute sur le port 3000');
    });


    views/index.jade
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html>
    <head lang="fr">
        <meta charset="UTF-8">
        <title>{{title}}</title>
    </head>
    <body>
        <h1>{{title}}</h1>
    </body>
    </html>
    Et on va faire le minimum syndical, à savoir:
    • un fil avec tous les articles tronqués sur la page principale
    • une page pour chaque article
    • une page édition


    Pour la persistance, on va faire ça avec mongoose, un odm pour mongo. On aurait pu utiliser node-mongodb-native, plus bas niveau, mais euh... pas envie... et honnêtement, mongoose rend bien des services et permet une structuration des données.

    Comme je ne suis pas fan de ejs, on va continuer avec jade

    // app.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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    var express = require('express');
    var http = require('http');
    var path = require('path');
    var mongoose = require('mongoose');
    var emphasis = require('emphasis');
    
    mongoose.connect('mongodb://localhost/tuto'); // Je me connecte à la bdd
    
    // Mon Objet Article
    var ArticleSchema = mongoose.model('Article', {
        title: String,
        desc: String,
        content: String,
        url: String,
        createAt: { type: Date, default: Date.now }
    });
    
    var app = express();
    
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');
    
    app.get('/', function (req, res) {
        res.render('index', {title: 'je suis la page index'});
    });
    
    app.get('/create', function(req, res) { // j'affiche mon formulaire
        res.render('create');
    });
    
    app.post('/create', function(req, res) { // je traite mon formulaire
    
            var article = new ArticleSchema({
                  title: req.body.title,
                  desc: req.body.desc,
                  content: req.body.content,
                  url: emphasis(req.body.title)
            });
    
            article.save(function(err) {
                  if (err) throw err;
                  res.redirect('/' + article.url);
            });
    
    });
    
    http.createServer(app).listen(3000, function () {
        console.log('Le serveur ecoute sur le port 3000');
    });
    J'ai donc ma persistance, j'ai ajouté deux "controlleurs" pour ajouter des d'articles à mon blog, et modifié le moteur de template, en créant un layout

    // layout.jade
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    doctype html
    html
        head(lang="fr")
            meta(charset="UTF-8")
            block title
    title Le tuto qui déchire
    // valeur par defaut
    
    body
            block body
    // index.jade
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    extends ./layout
    
    block body
         h1 #{title}
    // create.jade ultra-minimale!
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    extends ./layout
    
    block title
    title Créer un nouvel article
    
    block body
    form(method="post", action="/create")
            div
                input(type="text", name="title", placeholder="Le titre de l'article")
            div
                textarea(name="desc", placeholder="meta description")
            div
                textarea(name="content", placeholder="Le contenu de l'article au format markdown", rows="30")
            input(type="submit", value="Valider")
    Tu peux donc lancer ton server et aller à l'url http://localhost:3000/create pour y voir ton formulaire. Tu le rempli, puis tu valide pour sauvegarder et ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    TypeError: Cannot read property 'title' of undefined
    Ca ne marche pas... car req.body n'existe pas... bha oui, il faut ajouter le module bodyparser pour parser le resultat de mon post et creer l'objet body.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    app.set('view engine', 'jade');
    
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    
    app.get('/', function (req, res) {
    et voila, ton article est en base, et tu es rediriger vers une page qui n'existe pas encore. avant cela, deux trois choses:

    pour info emphasis, c'est un petit module avec deux fonctions dedans... fait par moi-même pour gérer l'accentuation et les caractères spéciaux. Il casse pas trois pates à un canard, mais cela m'evite d'avoir à les refaires dans tous mes projets. Remarque il existe peut-être mieux ailleurs.

    ensuite, j'ai tout dans mon app.js, là ca va encore mais cela va devenir l'enfer dans pas longtemps, on va donc réorganiser un peu.

    On exporte le schema de Article dans un dossier "models":

    // models/article.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var mongoose = require('mongoose');
    
    var Schema = mongoose.Schema({
        title: String,
        desc: String,
        content: String,
        url: String,
        createAt: { type: Date, default: Date.now }
    });
    
    Schema.set('collection', 'articles');
    
    module.exports = mongoose.model('Article', Schema);
    Schema.set(collection, 'foo') permet de spécifier le nom de la collection en bdd, ici "articles" au lieu de "Article".

    Pour y acceder, dans notre app.js, un simple require:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var Article = require('./models/article');
    (...)
    var article = new Article({
        title: req.body.title, 
    (...)
    ensuite on va sortir les controlleurs dans un dossier "routes" (ou ce que tu veux en fait)

    // routes/index.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    var express = require('express');
    var router = express.Router();
    
    router.get('/', function (req, res) {
        res.render('index', {title: 'je suis la page index'});
    });
    
    module.exports = router;
    // routes/create.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
    var express = require('express');
    var router = express.Router();
    
    var emphasis = require('emphasis').normalize;
    
    var Article = require('../models/article');
    
    router.get('/', function(req, res) { // j'affiche mon formulaire
        res.render('create');
    });
    
    router.post('/', function(req, res) { // je traite mon formulaire
    
        var url = emphasis(req.body.title);
    
        var article = new Article({
            title: req.body.title,
            desc: req.body.desc,
            content: req.body.content,
            url: url
        });
    
        article.save(function(err) {
            if (err) throw err;
           res.redirect('/' + url);
        });
    
    });
    
    module.exports = router;
    // app.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    (...)
    app.use('/', require('./routes/index'));
    app.use('/create', require('./routes/create'));
    (...)
    On crée une instance de Router(), qui devient notre racine, comme tu peux le voir dans create.js, on je ne mentionne pas le 'create',
    et on le monte dans notre app.js, où l'on spécifie l'url de "montage". y'a plein de truc rigolo à faire avec le router de express (en particulier avec la v4), mais c'est un article à lui tout seul...

    voici donc notre arborescence:

    +models
    - article.js
    +node_modules
    +routes
    - create.js
    - index.js
    +views
    - create.jade
    - index.jade
    - layout.jade
    - app.js

    et notre app.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
    // app.js
    var express = require('express');
    var http = require('http');
    var path = require('path');
    var mongoose = require('mongoose');
    var bodyParser = require('body-parser');
    
    mongoose.connect('mongodb://localhost/tuto'); // Je me connecte à la bdd
    
    var app = express();
    
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');
    
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    
    app.use('/', require('./routes/index'));
    app.use('/create', require('./routes/create'));
    
    http.createServer(app).listen(3000, function () {
        console.log('Le serveur ecoute sur le port 3000');
    });
    
    reste plus qu'a ajouter la page des articles, puis la page index avec tous les articles tronqués, pour avoir notre base, mais là je fais une pose

  2. #22
    Membre actif
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Points : 233
    Points
    233
    Par défaut
    la suite, notre page article.

    je rajoute un controlleur "/:url" pour lire les articles:

    // routes/index.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
    var express = require('express');
    var router = express.Router();
    var marked = require('marked');
    
    var Article = require('../models/article');
    
    router.get('/', function (req, res) {
        res.render('index', { title: 'je suis la page index' });
    });
    
    router.get('/:url', function (req, res) {
        Article
            .findOne({ url: req.params.url })
            .exec(function(err, article) {
                if (err) throw err;
    
                if (!article) return res.sendStatus(404);
    
                article.content = marked(article.content); // je transforme mon markdown en html
    
                res.render('article', {
                    article: article
                });
          });
    });
    
    module.exports = router;
    • je fais une requete en bdd sur mon id naturel "url" passer en parametre dans l'url
    • avec mon objet article, je transforme à l'aide du module marked mon contenu du markdown en html
    • et je rend à la vue article.jade


    Si la bdd ne me trouve pas d'article correspondant, je renvoi une erreur 404. à noter l'utilisation du "return" qui force le renvoi de mon res.sendStatus et interromps l’exécution de mon contrôleur. Le code qui suit n'est pas exécute si mon objet article est vide!

    views/article.jade
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    extends ./layout
    
    block title
    title #{article.title} - le tuto qui déchire
    
    block meta
    meta(name="description", content="#{article.desc}")
    
    block body
    h1 #{article.title}
    div !{article.content}
    à noté, le !{article.content} qui permet d’échapper l'interpolation. en claire, jade ne touche pas à mon contenu html et l'affiche tel quel.

    Si tu a enregistré en base un article avec pour titre "Le gras c'est la vie", ne reste plus qu'a aller à l'url http://localhost:3000/le-gras-c-est-la-vie

    Apparté:
    Maintenant essaye de créer un nouvel article, valide et tu obtiens une erreur 404!?!
    tout simplement car notre route "/:url" avec une variable est déclarée avant "/create" dans app.js, ce n'est donc pas le bon contrôleur qui sera executé, pour rappel:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    app.use('/', require('./routes/index'));
    app.use('/create', require('./routes/create'));
    Pour résoudre le soucis, on inverse:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    app.use('/create', require('./routes/create'));
    app.use('/', require('./routes/index'));
    Attention donc à la façon de créer ces urls, et l'ordre dans lequel elles sont traitées

  3. #23
    Membre actif
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Points : 233
    Points
    233
    Par défaut
    Enfin, notre page index, trivial:

    // router/index.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
    (...)
    router.get('/', function (req, res) {
    
        Article
            .find()
            .sort({ createAt: -1 })
            .limit(5)
            .exec(function(err, articles) {
    
                if (err) throw err;
    
                 res.render('index', {
                    title: 'je suis la page index',
                    articles: articles
                });
          });
    
    });
    (...)
    Une requête sur Article pour prendre les cinq derniers articles, que l'on passe à la vue

    // views/index.jade
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    extends ./layout
    
    block body
           h1 #{title}
    
           section
                 for article in articles
                      article
                            h2 #{article.title}
                            p #{article.desc}
                            a(href="#{article.url}") Lire la suite
    On boucle sur notre liste de cinq articles, et on affiche avec un lien sur la page de chaque articles

    La semaine prochaine on ajoute les sessions et l'authentification et pourquoi pas les acl

    je n'ai pas fais l'édition d'un article déjà en ligne, car je me dis que ce serais un bon exercice (que de l'application des concepts vues), et que y'a pas de raison que ce soit toujours les mêmes qui bossent

  4. #24
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    Bon, je commence à regarder tout ça, y a de quoi faire ;-)
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  5. #25
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    J'abuse peut-être, mais serait-il possible d'afficher tous les fichiers en entier à la fin. Parce que, y a des endroits où je me perds pour les modifs et ajouts...
    Merci !
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  6. #26
    Membre actif
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Points : 233
    Points
    233
    Par défaut
    serait-il possible d'afficher tous les fichiers en entier à la fin
    Voici où nous en sommes actuellement. tuto.zip

  7. #27
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    Merci beaucoup !
    C'est plus clair comme ça pour mon ptit cerveau ;-)
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  8. #28
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    J'ai commencé à regarder le code. Ca me semble plustôt clair ;-)

    J'ai ajouté quelques liens et une page, histoire de commencer à mettre les mains dans le cambouis, de façon très simple pour le moment.

    Par contre, si j'utilise : extends ./layout dans ma nouvelle page, rien ne s'affiche...

    J'ai intégré Bootstrap pour l'affichage de la page que j'ai créé.
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  9. #29
    Membre actif
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Points : 233
    Points
    233
    Par défaut
    Par contre, si j'utilise : extends ./layout dans ma nouvelle page, rien ne s'affiche...
    N'aurais-tu pas oublié le "block body" par hasard?

  10. #30
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    Non, même pas.
    Mais je ne connais pas Jade, va falloir que j'aille voir ça.
    Et que je vois aussi pour la syntaxe de Bootstrap avec Jade.

    Voila ma page :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    extends ./layout
     
    block body
        h1 Bienvenue !
     
    div
      Coucou
     
    div
      a(href="/create") Rédiger
    Je n'ai que le titre qui s'affiche.
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  11. #31
    Membre actif
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Points : 233
    Points
    233
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    extends ./layout
     
    block body
        h1 Bienvenue !
     
        div
            Coucou
     
        div
            a(href="/create") Rédiger
    Ce n'étais que l'indentation!

  12. #32
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    Je faisais des espaces et tout n'était pas bien aligné effectivement.

    Mais Coucou ne s'affiche tjs pas.
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  13. #33
    Membre actif
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Points : 233
    Points
    233
    Par défaut
    Citation Envoyé par lostsoul Voir le message
    Je faisais des espaces et tout n'était pas bien aligné effectivement.

    Mais Coucou ne s'affiche tjs pas.
    Argll, j'ai répondu trop vite.

    je t'invite à jeter un coup d’œil ici, d'autant que dés que tu as les quelques bases, jade ce n'est que du bonheur (avis très personnel).

  14. #34
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    J'étais sur cette page tout à l'heure, mais pas trop compris comment m'en servir.
    En tous cas, il me dit que je n'ai pas Jade semble-t-il.

    Est-ce à cause de la syntaxe dans layout.jade ?
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  15. #35
    Membre actif
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Points : 233
    Points
    233
    Par défaut
    J'étais sur cette page tout à l'heure, mais pas trop compris comment m'en servir.
    Tu as le tuto de jade ici

    En tous cas, il me dit que je n'ai pas Jade semble-t-il.

    Est-ce à cause de la syntaxe dans layout.jade ?
    là il me faudrait le message d'erreur

  16. #36
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    J'ai juste copié le code Jade et il m'affiche Get on it.

    Je vais regarder le tuto.

    Avec p. ça affiche Coucou
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  17. #37
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    Comme ça ça fonctionne :

    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
     
    extends ./layout
     
    block body
        h1 Bienvenue !
     
        p.
            Coucou
            C'est un test !
     
        div
            a(href="/create") Rédiger
     
        div
            a(href="/") Accueil
    Mais va falloir que je vois pour la mise en page...

    Il faut que je vois Bootstrap (et les grid). Mais en Jade, ça risque d'être compliqué.
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  18. #38
    Membre actif
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Points : 233
    Points
    233
    Par défaut
    Il faut que je vois Bootstrap (et les grid). Mais en Jade, ça risque d'être compliqué.
    C'est plus simple et plus expressif, un exemple bidon:

    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
    extends ./layout
     
    block body
        .container
            h1 Bienvenue !
     
            p.
                Coucou
                C'est un test !
     
            .row
                .col-sm-6
                    a.btn.btn-default(href="/create") Rédiger
                .col-sm-6
                    a.btn.btn-default(href="/") Accueil

  19. #39
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    Je vais essayer d'inclure l'affichage de la météo, et des rss sûrement, avec le code de ton tuto, pour faire quelque chose de plus propre que ce que j'avais et pour partir sur de meilleurs bases.

    Donc, ensuite, l'affichage avec Bootstrap sera mieux.

    Y a du boulot en perspective ;-)
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

  20. #40
    Membre habitué Avatar de lostsoul
    Homme Profil pro
    Rédacteur web, blogueur, développeur web junior
    Inscrit en
    Novembre 2003
    Messages
    759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : Rédacteur web, blogueur, développeur web junior
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2003
    Messages : 759
    Points : 184
    Points
    184
    Par défaut
    Bon, j'ai réussi à inclure, dans une nouvelle page, l'affichage de la météo.
    J'ai donc ajouté la route dans app.js.

    Fichiers créés :
    /views/meteo.jade
    /routes/meteo.js

    Rien créé dans /models
    Est-ce la bonne solution ? Si j'ai plusieurs fonctionnalités sur une seule page (météo, date...), dois-je faire un seul fichier .js dans /routes ou un par fonctionnalité ? Et pour /models, quand dois-je m'en servir ?
    Pour savoir comment faire les choses bien dès le départ, et bien organiser le code, ça peut servir ;-)

    La, je bataille avec Jade et Bootstrap pour arriver à afficher une iframe, et des colonnes, mais rien n'y fait...
    ANDRE Ani
    GNU/Linux et Informatique Libre
    https://andre-ani.fr

Discussions similaires

  1. Comment afficher deux images avec Node js ?
    Par keokaz dans le forum NodeJS
    Réponses: 5
    Dernier message: 03/10/2014, 07h11
  2. Ouvrir/afficher un fichier avec son logiciel par défaut
    Par Alain P. dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 20/06/2009, 19h47
  3. Comment afficher du texte avec swing ?
    Par meda dans le forum AWT/Swing
    Réponses: 8
    Dernier message: 27/10/2004, 15h35
  4. Afficher une image avec swing
    Par arnonote dans le forum AWT/Swing
    Réponses: 11
    Dernier message: 07/08/2004, 13h10
  5. PL/SQL - Comment afficher une image avec HTP ?
    Par patmaba dans le forum PL/SQL
    Réponses: 2
    Dernier message: 08/07/2004, 10h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo