Bloc 1Web1

Javascript

Let

Javascript
if (true) {  
let blockScope = "Hello"; console.log(blockScope); // Hello
}  
console.log(blockScope); // Uncaught ReferenceError: blockScope is not
// defined

Const

Javascript
if (true) {  
	const constVar = "Hello";  
	console.log(constVar); // Hello  
	const SITE_URL = "http://MyCMS.org";  
	console.log(SITE_URL); // http://MyCMS.org  
	constVar = "Hi";  
	console.log(constVar); // Uncaught TypeError: Assignment to constant
}

typeof

Javascript
console.log(typeof 12); // number

opĂ©rateur d’égalitĂ©

Javascript
1 === 1; // true 
"1" === 1; // false
"1" == 1; // true
0 == false; // true  
0 == null; // false

opérateur logique

  • ‱ && : ET logique ‱ || : OU logique ‱ ! : NOT logique

condition

Javascript
let isAuthenticated = false; 
if (isAuthenticated) {
	console.log("Render the HomePage.");
	console.log("You are authenticated."); 
} else {
	console.log("Render the Login Page."); // Render the Login Page.
	console.log("You are not authenticated."); // You are not authenticated. 
}

object

Javascript
let vegetable = { name : "carrot", color: "orange" }; // show/access field name  
const nameofvegetable = vegetable.name;
// Show object with all fields in litteral notation
console.log(JSON.stringify(vegetable));

tables

Javascript
let vegetables = ["onion","garlic"];  
vegetables.push("carrot"); // array vegetables now : ["onion", "garlic", "carrot"]
vegetables.pop("onion"); // array vegetables now : ["garlic", "carrot"]

routeur express

Javascript
// index.js in routes directory 
const express = require('express'); 
const router = express.Router();
// when i receive a request GET on /  
// '/' is the root of the siteWeb -> lhttp://localhost:3000 
router.get('/', (req, res) => {  
	const tableOfVegetables = ["tomato", "banana"];  
	res.render('index.hbs', { simpleStringVar : "handlebars", vegetablesList : tableOfVegeta
});
// when i receive a request GET on /brol // http://localhost:3000/brol 
router.get('/brol', (req, res) => {
	// send a response with render -> response in HBS
	// res.render search a file named brol.hbs in views dir !
	res.render('brol.hbs'); 
});
module.exports = router;

hbs

hbs
{{#if isAuthenticated}}  
	<a class="nav-item nav-link" href="/">Home</a>  
	<a class="nav-item nav-link" href="/list">List users</a> <a class="nav-item nav-link" href="/logout">Logout</a> <a class="nav-item nav-link" href="/">{{user}}</a>
 
{{else}}  
	<a class="nav-item nav-link" href="/">Home</a>  
	<a class="nav-item nav-link" href="/register">Register</a> <a class="nav-item nav-link" href="/login">Login</a>
 
{{/if}}
<!-- if inversé : {{#unless isAuthenticated}} -->
<!-- if égualité {{#if (eq user.email "olivier.choquet@vinci.be") }} -->
<!-- {{#exists var}} ... {{else}} ... {{/exists}} -->
<section>  
	<p> Bonjour {{simpleStringVar}} </p> 
	<ul>  
		{{#each vegetablesList}} <!-- {{#each userList as |userItem|}} -->
		<li> {{this}} <!-- {{userItem}} --> </li> 
		{{/each}}  
	</ul>
</section>

boucles

Javascript
// for ... of pour les tableaux
let students = [{name:'Monica', age: 12}, {name:'Sandra', age: 13} ];
for (let stud of students) {
	for(let key in stud) {  
		console.log("Key : " + key + " Value : " + stud[key]);
	} 
}
// for ... in pour les objets JSON
const student = { name: 'Monica', age: 12 } 
for (let key in student ) {
	// display the properties
	console.log(key + " => " + student[key]);
}
// expected output:
// name => Monica
// age => 12
 
// for traditionnel si besoin d'un index
for (let index = 0; index < 5; index++) { 
	console.log(index); // 0 1 2 3 4
}
// while existe aussi
let vegetables = ["onion","garlic"]; let i = 0; 
while(i<vegetables.length)  {
	console.log(vegetables[i]);
	i++; 
}

fonction

Javascript
function welcomeMessage(message) { 
	return "Message : " + message;
}
const welcome = function (message) { 
	return "Message : " + message;
};
// Les fonctions fléchées sont souvent anonymes et ont une syntaxe plus courte.
const welcome2 = (message) => { 
	return "Message : " + message;
};
let x = welcomeMessage;  
let myMessage = x("Hi"); 
console.log(myMessage); // Message : Hi

routeur

  • res.render : renvoyer une page HTML rendue via un moteur de template (handlebars)
  • res.send : renvoyer une réponse (une string, un objet JSON, 
 )
  • res.sendFile : renvoyer un fichier
  • res.redirect : rediriger vers une autre route
Javascript
app.get('/', (req, res) => { 
	res.send("Bonjour");
});
 
app.get('/index.html', (req, res) => {  
	// __dirname return the root path of the project 
	res.sendFile(__dirname + "/index.html");
});
 
router.get('/', (req, res) => {  
	// send a response with render -> response in HBS  
	const table = ["january", "february", "march"]; 
	res.render('index.hbs', { param1: "bonjour", param2: table });
});
router.get('/', (req, res) => { 
// redirect to route /students 
	res.redirect('/students');
});
res.renderres.redirect
Renvoie une vueRedirige vers une route
chemin vers le fichier hbs Ă  partir du repertoir viewsroute Ă  partir de la racine (localhost:3000)
ne commence pas par un /commence par un /
on peut passer des parametres à la vue directementle passage de param doit se faire via la route et est limité
Ex : res.render("students/hbs",{studentList});Ex : res.redirect("/students?id=7");

MVC

  • ‘models’ == les données (persistance des données) : contiendront le code d’accès aux données (données statiques ou SELECT, INSERT dans la base de données). 1ere lettre maj
  • ‘views’ == affichage (HTML) : vues handlebars
  • Contrôleur as ‘routes’ == chef d’orchestre entre le modèle et la vue :- contiendront le code de traitement des requêtes. Ils utiliseront le modèle et renverront vers une vue.
User.js
const db = require('../models/db_conf.js');
 
module.exports.list = () => { 
	// use of prepared statement
	const stmt = db.prepare("SELECT * FROM USERS");  
	// all() -> return alls rows like [ {name:'user1', pseudo:'oli'}, {name:'user2', pseudo: 'stef'}]
	return stmt.all();
};
// function list  
// Pay attention to modules.export to give access  
// to list function outside (in controller for example) 
module.exports.save = (name, pseudo) => {  
	// use of prepared statement with parameters  
		const stmt = db.prepare('INSERT INTO USERS (name, pseudo) VALUES (?, ?)');
		const info = stmt.run(name, pseudo);  
	console.log("users model save" + info.changes);
};

sessions

  • secret : ce secret sera utilisé pour chiffrer le cookie de session stocké chez le client
  • resave : forcer la sauvegarde de la session pour chaque nouvelle requête
  • saveUninitialized : forcer la sauvegarde des nouvelles sessions qui n’ont pas encore été modifiées
Javascript
// creer/ recup la session
router.post('/login', (req, res, next) => { 
	console.log("LOGIN");
	req.session.connected = true; 
	req.session.login = "olivier";
});
// detruire la session
router.post('/logout', (req, res, next) => { 
	console.log("LOGOUT"); 
	req.session.destroy();
});
hbs
<section>  
<h2> Profil Utilisateur </h2>  
<!-- use of session variable : req.session.login --> Login de l'utilisateur connecté : {{session.login}}
 
</section>

chiffrement

Javascript
const bcrypt = require('bcrypt');
...
if (bcrypt.compareSync(dataInClear, hash)) {
	console.log("dataInClear == hash, OK c'est bon");
} else {  
	console.log ("dataInClear != hash, KO");
}

context

  • Pour accéder à une variable du contexte de base à l’intérieur d’un #each, utilisez @root ou ../ devant le nom de votre variable
hbs
<section>  
	<p> {{title}} </p> <ul>  
	{{#each tableOfMeals}}
		<li>
	      <!-- use of @root or ../ to access the root context -->
	      {{this}} {{#if @root.userVegan}} Une alternative à la viande est le seitan {{/if}} 
		</li>
	{{/each}}
  </ul>
</section>

validator

hbs
<form action="/adduser" method ="post"> 
	<input type="text" name="username"> 
	<input type="submit">
</form>
Javascript
const validator = require('validator');
 
router.get('/users', function (req, res) {  
	// retrieve errors message via req.query 
	res.render('users/index.hbs', { errors : req.query.errors});
});
 
router.post('/adduser', function (req, res) {  
	// validate name of user -> betweeen 5 and 10 character if 
	(!validator.isEmail(req.body.username) {  
	// errors sent via query string
		res.redirect('/users?errors=L\'email n\'est pas correct'); 
	}
 
	else {
	 ...
	} 
});