menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

ExpressJS:Template engines

template engines ce sont des modules qui permettent qui permet d'écrire des codes dynamiques (variables, fonctions) dans une page statique (HTML) ,il existe plusieurs template engines comme
  1. Pug
  2. Mustache
  3. EJS
  4. Jade:le générateur par défaut de ExpressJS

Exemple1 :Pug les variables

npm install pug --save

views/index.pug

html
  head
    title= variable1
  body
    h1= variable2

Serveur.js

//importer expressjs
var express = require('express');
 var app = express();

app.set('views', './views');
app.set('view engine', 'pug');

app.get('/index', (req, res) => {
  res.render('index', { variable1: 'le titre de la page', variable2: 'Bonjour tout le monde' })
})


//démarer le serveur sur le port 8081
app.listen(8081, function () {
console.log('Écoute du port 8081');
});

Exemple2 :Pug les boucles,tableaux,objets

views/index.pug

html
  head
    title= variable1
  body
    h1= variable2

ul
  each val, index in tableau
    li= index + ': ' + val

table(style='width:100%', border='1')
  thead(style='width:100%', border='1')
    th nom
    th prenom
  each val, key in clients
   tr
    td=val.nom
    td=val.prenom

Serveur.js

//importer expressjs
var express = require('express');
 var app = express();

app.set('views', './views');
app.set('view engine', 'pug');

app.get('/index', (req, res) => {
  res.render('index',
  {
  variable1: 'le titre de la page',
  variable2: 'Bonjour tout le monde',
 tableau:['a','b','c'],
 clients:[{'nom':'client1','prenom':'prenom1'},
          {'nom':'client2','prenom':'prenom3'}
          ]
 
 })
})



//les routes
const test = require('./routage')
app.use('/tests',test)

//démarer le serveur sur le port 8081
app.listen(8081, function () {
console.log('Écoute du port 8081');
});

Exemple 3
app.js

const express = require('express');
const app = express();
const port = 3000;

// Configuration de Pug comme moteur de template
app.set('view engine', 'pug');
app.set('views', __dirname + '/views');

// Données à afficher dynamiquement
const products = [
  { id: 1, name: 'Produit 1', price: 19.99 },
  { id: 2, name: 'Produit 2', price: 29.99 },
  { id: 3, name: 'Produit 3', price: 39.99 }
];

// Middleware pour rendre les fichiers statiques dans le dossier "public"
app.use(express.static('public'));

// Route principale pour afficher la page d'accueil
app.get('/', (req, res) => {
  // Rend la vue "index" avec les données passées en contexte
  res.render('index', { title: 'Accueil', products });
});

// Démarrage du serveur
app.listen(port, () => {
  console.log(`Serveur en cours d'exécution sur le port ${port}`);
});
La struture du projet est la suivante: 
project-root
|-- views
|   |-- index.pug
|-- public
|   |-- styles.css
|-- app.js
views/index.pug

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")
    title= title
    link(rel="stylesheet", href="/styles.css")
  body
    header
      h1 Bienvenue sur #{title}!
    main
      each product in products
        .product
          h2= product.name
          p Prix: #{product.price} $
    footer
      p © 2023 Mon Site Web
public/styles.css

  body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: white;
  padding: 1em;
  text-align: center;
}

main {
  margin: 2em;
}

.product {
  border: 1px solid #ddd;
  padding: 1em;
  margin-bottom: 1em;
  background-color: white;
}

footer {
  background-color: #333;
  color: white;
  padding: 1em;
  text-align: center;
}
Exemple 4
Créer un blog avec des articles et des commentaires. 
 project-root
|-- views
|   |-- articles.pug
|   |-- article.pug
|-- public
|   |-- styles.css
|-- app.js
app.js

  const express = require('express');
const app = express();
const port = 3000;

// Configuration de Pug comme moteur de template
app.set('view engine', 'pug');
app.set('views', __dirname + '/views');

// Données simulées
const articles = [
  { id: 1, title: 'Premier article', content: 'Contenu de l\'article 1' },
  { id: 2, title: 'Deuxième article', content: 'Contenu de l\'article 2' },
  { id: 3, title: 'Troisième article', content: 'Contenu de l\'article 3' }
];

const comments = [
  { articleId: 1, author: 'John Doe', content: 'Commentaire sur l\'article 1' },
  { articleId: 2, author: 'Jane Doe', content: 'Commentaire sur l\'article 2' },
  { articleId: 1, author: 'Alice', content: 'Un autre commentaire sur l\'article 1' }
];

// Middleware pour rendre les fichiers statiques dans le dossier "public"
app.use(express.static('public'));

// Route principale pour afficher la liste des articles
app.get('/', (req, res) => {
  // Rend la vue "articles" avec les données passées en contexte
  res.render('articles', { title: 'Blog', articles });
});

// Route pour afficher un article et ses commentaires
app.get('/article/:id', (req, res) => {
  const articleId = parseInt(req.params.id);
  const article = articles.find(article => article.id === articleId);
  const articleComments = comments.filter(comment => comment.articleId === articleId);

  if (article) {
    // Rend la vue "article" avec les données passées en contexte
    res.render('article', { title: article.title, article, comments: articleComments });
  } else {
    res.status(404).send('Article non trouvé.');
  }
});

// Démarrage du serveur
app.listen(port, () => {
  console.log(`Serveur en cours d'exécution sur le port ${port}`);
});
views/articles.pug

  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")
    title= title
    link(rel="stylesheet", href="/styles.css")
  body
    header
      h1 Bienvenue sur #{title}!
    main
      each article in articles
        .article
          h2
            a(href="/article/#{article.id}")= article.title
          p= article.content
    footer
      p © 2023 Mon Site Web
views/article.pug

   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")
    title= title
    link(rel="stylesheet", href="/styles.css")
  body
    header
      h1 #{article.title}
    main
      article
        h2= article.title
        p= article.content
      if comments.length > 0
        h3 Commentaires
        each comment in comments
          .comment
            p= comment.content
            span.auteur= comment.author
      else
        p Aucun commentaire pour le moment.
    footer
      p © 2023 Mon Site Web
public/styles.css

  body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: white;
  padding: 1em;
  text-align: center;
}

main {
  margin: 2em;
}

.article {
  border: 1px solid #ddd;
  padding: 1em;
  margin-bottom: 1em;
  background-color: white;
}

footer {
  background-color: #333;
  color: white;
  padding: 1em;
  text-align: center;
}

.comment {
  border: 1px solid #ddd;
  padding: 1em;
  margin-top: 1em;
}

.comment .auteur {
  color: #666;
  font-style: italic;
}
Les instructions if, elseif , else et switch
app.js

  // app.js
const express = require('express');
const app = express();
const port = 3000;

app.set('view engine', 'pug');
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('index', { timeOfDay: 'matin' });
});

app.listen(port, () => {
  console.log(`Serveur en cours d'exécution sur http://localhost:${port}`);
});
views/index.pug

  // views/index.pug
html
  head
    title Exemple Pug avec Express.js

  body
    h1 Bienvenue sur notre application Express.js avec Pug!

    - var timeOfDay = 'matin';

    // Utilisation de l'instruction if
    if timeOfDay === 'matin'
      p Bonjour! Il fait beau ce matin.
    else if timeOfDay === 'après-midi'
      p Bon après-midi! Comment ça va?
    else
      p Bonsoir! Profitez de votre soirée.

    // Utilisation de l'instruction switch
    switch timeOfDay
      case 'matin':
        p Il est temps de commencer la journée avec énergie!
        break
      case 'après-midi':
        p Profitez de l'après-midi ensoleillé.
        break
      default:
        p Bonsoir! La nuit approche.

    // Vous pouvez également utiliser des blocs de code conditionnels en ligne
    p(style=`color: ${timeOfDay === 'soir' ? 'darkblue' : 'black'}`)
      | C'est l'heure de ralentir.

    // Utilisation de l'instruction each pour itérer sur une liste
    ul
      each item in ['élément 1', 'élément 2', 'élément 3']
        li= item
Exemple2
app.js

  // app.js
const express = require('express');
const app = express();
const port = 3000;

app.set('view engine', 'pug');
app.set('views', './views');

const users = [
  { name: 'Alice', age: 25, status: 'actif' },
  { name: 'Bob', age: 30, status: 'inactif' },
  { name: 'Charlie', age: 22, status: 'actif' }
];

app.get('/', (req, res) => {
  res.render('index', { users });
});

app.listen(port, () => {
  console.log(`Serveur en cours d'exécution sur http://localhost:${port}`);
});
views/index.pug

 // views/index.pug

html
  head
    title Exemple Pug avec Express.js

  body
    h1 Bienvenue sur notre application Express.js avec Pug!

    // Utilisation de l'instruction each pour itérer sur le tableau d'objets
    each user in users
      .user
        h2= user.name
        p Age: #{user.age}

        // Instructions conditionnelles à l'intérieur de la boucle each
        if user.status === 'actif'
          p(style='color: green;') Statut: Actif
        else if user.status === 'inactif'
          p(style='color: red;') Statut: Inactif
        else
          p Statut: Inconnu

Exercice1

Créer un formulaire d'inscription client(id,ville,nom,email,sexe)

views/inscriptionClient.pug

html
    head
        title Ajouter un client
body
    form(action="add" method="post")
        fieldset
            legend Ajouter un nouveau client
            table
                tr
                    td
                        span Nom
                    td
                        input(type="text" name="nom")
                tr
                    td
                        span Email
                    td
                        input(type="email" name="email")
                tr
                    td
                        span Genre
                    td
                        span F
                        input(type="radio" name="genre" value="F")
                        span M
                        input(type="radio" name="genre" value="M")
                tr
                    td
                        span Ville
                    td
                        select(name="ville")
                            option ville1
                            option ville2
                            option ville2
                    td
                        input(type="submit" value="Add")
    h2=message

Serveur.js

  //importer expressjs
  var express = require('express');
  var app = express();
 const bodyParser = require('body-parser');
 app.use(bodyParser.urlencoded({ extended: true }))
 app.use(bodyParser.json())
 
 app.set('views', './views');
 app.set('view engine', 'pug');
 
 var message="";
 //afficher le formulaire
 app.get("/client/add",(req,res)=>{
     res.render("inscriptionClient")
 });
 
 //recuppérer les données from le form
 app.post("/client/add",(req,res)=>{
     if(req.body.nom=='' || req.body.email=='')
     {
         message="tout les champs sont obligatoires";
     }
     else
     {
         message="Welcome ";
         message+=" Nom:"+req.body.nom;
         message+=" Email:"+req.body.email;
         message+=" Ville:"+req.body.ville;
         message+=" Genre:"+req.body.genre;
         
     }
     res.render("inscriptionClient",{message,})
 });
 
 //démarer le serveur sur le port 8081
 app.listen(8081, function () {
 console.log('Écoute du port 8081');
 });

Exercice2

Créer un menu de navigation mutli-langue en utlisant, bootstrap et les cookies

views/navbar.pug

link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css")
script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js")
script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js")
body
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">MonSite.com</a>
            </div>
            <ul class="nav navbar-nav">
                each val, index in liens
                    li
                        a=val
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/Fr">FR</a></li>
                <li><a href="/En">EN</a></li>
            </ul>
        </div>
    </nav>

Serveur.js

npm install cookie-parser--save
 //importer expressjs
 var express = require('express');
 var app = express();
var cookieParser = require('cookie-parser');
app.use(cookieParser());  
app.set('views', './views');
app.set('view engine', 'pug');

var textLinks=["Ajouter","Afficher","Supprimer","Modifier"] ;

app.get('/index', (req, res) => {
    switch(req.cookies.lang){
        case 'Fr': textLinks=["Ajouter","Afficher","Supprimer","Modifier"] ;break;
        case 'En': textLinks=["Add","View","Remmove","Update"]  ; ;break;
    }
  res.render('index',
  {
  liens:textLinks
 })
})


app.get("/En",(req,res)=>{
res.cookie('lang', 'En');  
textLinks=["Add","View","Remmove","Update"] ;
res.redirect("/index");
})

app.get("/Fr",(req,res)=>{
res.cookie('lang', 'Fr');  
textLinks=["Ajouter","Afficher","Supprimer","Modifier"];
res.redirect("/index");
})



//démarer le serveur sur le port 8081
app.listen(8081, function () {
console.log('Écoute du port 8081');
});










Cours et TPs

Laravel
Spring MVC
Spring Boot+Angular
Spring Security
NodeJS+ExpressJS