Table des matières

Introduction javascript...........................................................................................................................2
Serveur Live............................................................................................................................................3
Tableaux javascript :...............................................................................................................................4
Les objets javascript :.............................................................................................................................5
Manipuler le DOM..................................................................................................................................6
Les objets natifs......................................................................................................................................7
La programmation orientée objet..........................................................................................................7
Json......................................................................................................................................................10
Expression régulière.............................................................................................................................10
Les formulaires.....................................................................................................................................10
GIT........................................................................................................................................................11
NodeJS..................................................................................................................................................13
Framework Express Js...........................................................................................................................14
1) Nodemon..................................................................................................................................14
2) Express Js..................................................................................................................................14
3) Middlewares.............................................................................................................................14
4) Ajouter dossier assets...............................................................................................................15
5) Moteur de Template TWIG.......................................................................................................16
6) Route Express...........................................................................................................................18
7) Paramètre sur les routes..........................................................................................................19
8) Gestion de formulaire...............................................................................................................19
9) Validation du formulaire...........................................................................................................20
10) Amelioration structure code.................................................................................................22
11) Générateur application express............................................................................................23
MongoDB.............................................................................................................................................23
1) installation................................................................................................................................23
2) Commande...............................................................................................................................23
Select data....................................................................................................................................23
Insert data....................................................................................................................................23
Update data..................................................................................................................................23
Delete data...................................................................................................................................24
3) Mongoose.................................................................................................................................24
Creation d’un model.....................................................................................................................24
Ajouter des données manuellement............................................................................................25
 Récupérer tous data.....................................................................................................................25
Récuperer single data...................................................................................................................26
Ajouter les donnée à partir du formulaire....................................................................................27
Gestion des controllers.................................................................................................................27

Introduction javascript
Serveur Live
Tableaux javascript :

 var fruits = [‘pomme’, ‘banane’, ‘raisin’] ;

 Var Fruits2 = fruits[…fruits, ‘’fraise’’, ‘’poivre’’] -> ajouter tableau fruits puis les chaines de
caractères après
 [Link]() -> réserve table
 [Link]() -> convertir un tableau à une chaine de caractère
 [Link](‘,’) -> convertir une chaine à un tableau en utilisent un séparateur ‘,’
Les objets javascript :
 Création d’un objet à partir d’un autre, si l’attribut existe il va être modifier exemple id et
model
 L’objet personne2 hérite tous les attributs de personne et modifie la value du id et nom et
prénom
 Création d’une référence de l’objet
 [Link] => supprime l’adresse de l’objet
Manipuler le DOM
Les objets natifs
 L'objet Date
 L'objet String
 L'objet Math
 Objet Window

Lien : [Link]

La programmation orientée objet

Lien documentation class Objet : ici
Json

Expression régulière

Les formulaires
GIT

Création depot local avec user & email :

 git config - - global [Link] “tarik baghati”

 git config - - global [Link] “tarikbaghati@[Link]”
 git init
 git status
 ls -al
 git add .
 git commit -m “initialization project”
 git remote add origin [Link]
 git branch -M main
 git push -u origin main
 git pull origin main

Liste des commandes : ici

git mv [Link] [Link] Renommer un fichier dans index et repertoire

git rm -f supprimer un fichier dans index et repertoire
git rm - -cached fichier cacher un fichier dans le repertoire seulement

git remote lister les repository lien au dépôt local

git remote add origin URL Se lier au dépôt distant

git branch lister les branchs

git branch ‘’branch’’ ou git checkout -b ‘’branch’’ Création d’une branch css
git branch -M main renommer la branch courante
git checkout js Switch d’une branch à autre
git fetch --all Rafraichir la liste des branch avec remote

git pull origin ‘’nom branch ‘’ Se positionner dans la branch principal, sélectionner
git merge ‘’branch’’ la branch à fusionner ensuite pusher le branch
git push -u origin ‘’branch’’

git add .
git commit -m ‘’ ajout fichier ‘’
git push -u origin ‘’nom branch ‘’ Transfert vers un dépôt distant
git pull origin ‘’nom branch ‘’ Récupérer le projet du dépôt
NodeJS

 NodeJS est un environnement d’exécution permettant d’utiliser le Javascript coté serveur

 Création des backend avec Javascript
 Moteur javascript V8
 Exécute plusieurs taches simultanées
 API de bas niveau (construire notre propre besoin)
 Application temps réel
 Géré la monte en charge

1) Les modules natifs : ce sont des modules déjà intégrer sur nodeJS -> exemple [Link]

2) Les modules personnels : ce sont des modules qu’on va les crée nous-même et les utilises
ailleurs
NB : « use strict » javascript vous oblige à respecter la syntaxe des fonctions et return une erreur
si le cas

3) Les modules externes : utiliser des modules externes par exemple NPM sur votre projet
Framework Express Js

1) Nodemon : est une ligne de commande qui redémarre automatiquement une application [Link]
lorsque des modifications sont apportées au code source.

NB :
npm install -g nodemon

Pour afficher les modifications sur place, il

faut modifier le fichier [Link] et
lancer le serveur avec npm start

2) Express Js : [Link] est un Framework d'application Web pour [Link] qui facilite la création
d'applications Web et d'API.

3) Middlewares : le middleware est un logiciel intermédiaire qui facilite la communication et la

gestion de tâches transverses entre différents systèmes ou applications. Il permet de connecter
des systèmes hétérogènes, de gérer la sécurité, les erreurs et d'ajouter des fonctionnalités
supplémentaires.

[Link]() est une méthode dans [Link] qui permet d'ajouter des fonctions middleware à
l'application. Ces fonctions middleware sont exécutées dans l'ordre où elles sont ajoutées, et ont
accès aux objets requête et réponse. Ces fonctions peuvent être utilisées pour effectuer des
tâches telles que la validation des données de la requête, l'authentification de l'utilisateur, la
modification des en-têtes HTTP ou encore pour générer des logs.
4) Ajouter dossier assets

 [Link]
5) Moteur de Template TWIG
 [Link]

[Link]('view engine','twig');

[Link]('/',(req, res)=>{
[Link]('index');
});

 [Link]
 [Link]

NB : pour renommer le nom du dossier des Template on ajoute -> [Link](‘views’,’templates’) ;

6) Route Express
7) Paramètre sur les routes

8) Gestion de formulaire
 Installer -> npm i body-parser
 Dans [Link]

// implementation body parser * application/x-www-form-urlencoded * application/json

const bodyParser = require('body-parser');
[Link]([Link]({ extended: false }));
[Link]([Link]());

 [Link]
 Dans [Link] la méthode post récupérer les données du formulaire et envoyé les données
par email.

9) Validation du formulaire
 Installer -> npm i node-input-validator
 Dans [Link]
10) Amelioration structure code
11) Générateur application express
 npm i express-generator -g
 express -h
 express –view twig
 npm install
 npm init

MongoDB

1) installation
lien : [Link]

2) Commande
Mongo

Select data
show dbs

use ‘nom de la table’

show collections

[Link]() / [Link]().pretty()

[Link]({price:{$lt:2000}}).pretty() -> $lt : lower than | $gt : great than

[Link]({},{name:true, _id:false}).pretty()-> afficher seulement la liste des name

Insert data
[Link](
{name: "canvas 6", price:2499, qty: 99, size: { h: 28, w: 35.5, unit: "cm" }, status: "A" }
)
[Link]( [
{ name: "canvas",price: 2499, qty: 99, size: { h: 28, w: 35.5, unit: "cm" }, status: "A" },
{ name: "journal",price: 5999, qty: 25, size: { h: 14, w: 21, unit: "cm" }, status: "A" },
{ name: "mat",price: 9999, qty: 85, size: { h: 27.9, w: 35.5, unit: "cm" }, status: "A" },
{ name: "sketch pad",price: 9699, qty: 95, size: { h: 22.85, w: 30.5, unit: "cm" }, status: "A" }
] );

Update data
[Link](
{_id:ObjectId("63d3ef2161275269708875f1")} , {$set:{name:"tarik piston"}}
)

[Link](
{_id:ObjectId("63d3ef2161275269708875f1")},{$inc:{price: 1}}
)
 [Link](
{status:"A"},{$set:{price:1000}}
)

Delete data
[Link]({name:"mat"})

[Link]({price:{$gt:4000}})

[Link]()

3) Mongoose
Mongoose est une bibliothèque JavaScript populaire utilisée pour interagir avec les bases de
données MongoDB dans [Link]. Il offre une manière simple et élégante de modéliser les
données et de gérer les interactions avec la base de données

Installation : npm i mongoose

Docs : [Link]

Creation d’un model

Ajouter des données manuellement

Récupérer tous data

Récuperer single data
Ajouter les données à partir du formulaire

- Installer : npm install body-parser

Gestion des controllers

Charger fichier sur serveur

- Installer npm i multer

- Crée dossier middlewares / [Link]
Variable de session

- Installer: npm install express-session

Message flash
- Installer: npm install connect-flash

Validation data formulaire

- Installer: npm i node-input-validator