Cours 6 | Mise en ligne¶

Introduction¶

Remise du PS1 (critique) le 5 octobre à 23 h 59
Examen le 6 octobre
Retour sur les exercices

Hygiène de programmation¶

Prettier¶

Activez la mise en forme du code avec l’extension Prettier

Pour formatter manuellement votre code, effectuez un clic-droit sur le code et sélectionner "Mettre en forme le document" (ou Format Document).

Prettier par défaut¶

Si prettier n'est pas le formatteur par défaut, vous pouvez corriger cela.

Ouvrez les paramètres de VSCode : Ctrl+, (virgule)
Recherchez « Default Formatter »
Sélectionnez « Prettier - Code formatter »

Print Width¶

Par défaut, prettier est assez strict sur les longeurs de ligne de code. Il les limite à 80 caractères par ligne. Vous pouvez changer cela à 120 ou même 160.

Ouvrez les paramètres de VSCode : Ctrl+, (virgule)
Recherchez « Print Width »
Modifiez la valeur à 160

Mise en forme automatique¶

Ouvrez les paramètres de VSCode : Ctrl+, (virgule)
Recherchez « Format On Save »
Cochez la case « Editor: Format On Save »
Testez en enregistrant un fichier pour voir le formatage automatique.

Si votre code n'est pas valide, la mise en forme ne s'effectuera pas. C'est un signe qu'il faut évaluer sa programmation.

HTMLHint¶

Activez la validation HTML avec l’extension VSCode HTMLHint

ESLint¶

Activez la validation avec l’extension VSCode ESLint

Rappel de raccourcis¶

Sélectionner tout le texte : Ctrl+A
Sauvegarder : Ctrl+S
Annuler (Undo) : Ctrl+Z
Refaire (Redo) : Ctrl+Shift+Z ou Ctrl+Y
Copier : Ctrl+C
Couper : Ctrl+X
Coller : Ctrl+V
Coller sans mise en forme : Ctrl+Shift+V
Ouvrir un onglet fermé : Ctrl+Shift+T
Changer d’application ouverte (task switcher) : Alt+Tab
Chercher : Ctrl+F

Mac

La plupart du temps, les variations pour mac remplacent Ctrl par Cmd.

VSCode¶

Commenter/décommenter : Ctrl+/

Touche "Insert"¶

La tant détestée touche Insert (Ins) sert à ajouter et supprimer en même temps. Ça fait l'effet d'écrire et d'effacer en même temps. Il faut juste savoir qu'elle existe 🙃

Serveur, domaine et hébergement¶

Le concept de serveur, de domaine et d'hébergement se traduit bien par l'analogie du lopin de terre.

cPanel¶

Abréviation de “control panel”, cPanel est un panneau de gestion d’hébergement Web qui permet de gérer un ou plusieurs serveurs et leurs sites Web via une interface graphique.

Il existe plusieurs autres outils de gestion de serveur comme Plesk, DirectAdmin ou Webmin, mais dans le cadre du cours, nous utiliserons cPanel.

Connexion¶

Adresse¶

La connexion se fait à l'adresse suivante : https://SOUSDOMAINE.tim-momo.com:2083

Remplacez SOUSDOMAINE par les 9 caractères de votre numéro de DA.

Exemple

https://202912345.tim-momo.com:2083

Nom d'utilisateur¶

Vous trouverez votre nom d'utilisateur dans une des listes ci-dessous.

AM
ounissiassil
keosombathtommy
siroistanguaycdr
chahedchaima
fosubradley¹
benfradjadam
raymondjanviervi
canomendozacrist
gagnsabrina
jeanjacqueskathl
rousselthomas
cortesluca
richardnurlika
vicsaimark
onkoyasmine
ferdinandjayden
mullerfranoissar
briandwilliam
guilbaultalexis
driesenseanlarry
benmaizrada
richardtyler
veilleuxamlie
elfantroussiyass
bonneaulucas

PM
cheourwalid
pereiracalderonp
lalibertolivier
canizalezefram
simonnathan
rodriguezfontain
tighzanourelisle
crevierjonathan
gevorgyanmariam
chheralexia
cruznicolas
lvesqueflix
plantesalmeronal
thortjessica
sadkimohamedali
sousaluizfelippe
ataimeena
frchettemathieu
lysenkoiryna
guerrierjonesthe
warrenzackary
vaillancourtrosa
labbharleymarlon
thriaultjrmy
vitalstanleyoliv
barydiouma

Mot de passe¶

Votre mot de passe est votre numéro de téléphone sur Colnet : sans tiret ni espace.

Exemple

5145551234

Tableau de bord¶

Informations générales et statistiques¶

Changer son mot de passe¶

Il est fortement recommandé de changer son mot de passe pour quelque chose de plus sécuritaire.

Dans le tableau de bord, cliquer sur « Mot de passe et sécurité »
Changer le mot de passe

Gestionnaire de fichiers¶

Dans le tableau de bord, cliquer sur « Gestionnaire de fichiers »

📁 public_html : C’est la racine Web : tout ce que vous y ajouterez sera visible sur internet

Exemples : - public_html/index.html : visible par https://201234567.tim-momo.com/ - public_html/tp2/index.html : visible par https://201234567.tim-momo.com/tp2/

Je recommande de faire un répertoire par projet pour le moment. Rien à la racine directement. Pour le moment ;)

Petit truc. Téléverser un .zip pour l'extraire ensuite permet de faciliter le processus.

📁 public_ftp : Sert pour partager des fichiers via FTP anonyme.

Si activé, n'importe qui pourrait télécharger son contenu via une adresse comme : ftp://201234567.tim-momo.com

📁 mail : Contient les boîtes de réception de vos courriels
📁 logs : contient les erreurs serveur au format compressé (ex. : 404, 500)
📁 ssl : stocke les certificats pour activer la notion HTTPS
📁 tmp : fichiers temporaires
📁 etc : contient des fichiers de configuration globales

403 Forbidden

S'il n'y a pas de fichier index.html à la racine du dossier public_html, vous devriez logiquement voir cette page :

Courriels¶

Votre cPanel vient avec une gestion de courriels, un peu comme si vous aviez votre propre Gmail.

Créer une boîte de courriel¶

Dans le tableau de bord, cliquer sur « Comptes de messagerie »
Cliquer sur « Créer »
Ajouter un nom d'utilisateur. Ce sera le nom de votre courriel. Par exemple : contact@201234567.tim-momo.com
Ajouter un mot de passe
Cliquer sur « Créer »

Boîte de courriel¶

Dans le tableau de bord, cliquer sur « Comptes de messagerie »
Cliquer sur « Check Email » de la boîte de courriel précédemment créée.

Webmail

Si le lien ne fonctionne pas, vous y avez accès par votre url en spécifiant webmail.

Ex: https://webmail.201234567.tim-momo.com/

Cliquer sur « Open »
Tester l'envoi et la réception d'un courriel.

Gestion du serveur à distance avec ftp-simple¶

ftp-simple est une extension qui permet de travailler sur le serveur directement dans VSCode !

Configuration¶

Dans VSCode, appuyer sur la touche F1 (ou Ctrl+Shift+P)
Chercher « ftp-simple »
Choisir l'option « ftp-simple: Config ... »

Cela ouvre le fichier de configuration ftp-simple-temp.json

Entrer les informations de connexion de votre cPanel :

Exemple

[
  {
    "name": "201234567.tim-momo.com",
    "host": "201234567.tim-momo.com",
    "port": 21,
    "type": "ftp",
    "username": "carmackjohn",
    "password": "5145551234",
    "path": "/public_html",
    "autosave": true,
    "confirm": true
  }
]

1. Sauvegarder et fermer le fichier de configuration.

Ouvrir une session¶

Dans VSCode, ouvrir une nouvelle fenêtre
Appuyer sur la touche F1
Chercher « ftp-simple »
Choisir l'option « ftp-simple: Remote directory ... »
Choisir le site sur lequel se connecter (normalement celui configuré plus tôt)
Choisir le dossier à ouvrir (. Current directory : /public_html)

EmailJS¶

Création de compte¶

Créer un compte avec les informations de connexion de votre choix à l'adresse suivante : https://dashboard.emailjs.com/sign-up

Clé publique¶

La clé publique de votre compte se trouve dans l'onglet Account

Configurer un Email service¶

Pour le name, ajouter « Courriel HostPapa »
Laisser intouché le « Service ID » généré automatiquement
Pour le host, ajouter « mail.tim-momo.com »
Pour le port, ajouter « 465 »
Cocher la case « My SMTP server supports SSL »
Pour le user, utiliser le courriel que vous avez créé sur cPanel
Pour le App Password, utiliser le courriel de votre courriel créé sur cPanel.
Cocher la case « Send test email to verify configuration »
Cliquer sur « Create Service »

Configurer un Email Template¶

Les modèles permettent d'ajouter des variables qui seront remplacées par du contenu spécifié en JavaScript.

Choisir le modèle de départ « One-Time Password »
Cliquer sur « Create Template »
Cliquer sur « Edit Content » et « Design Editor »
Retirer tout le contenu et ajouter la variable « {{mon_message}} » en texte.
Cliquer sur Apply Changes
Dans le champ Subject, on peut ajouter une variable « {{mon_sujet}} »
Cliquer sur « Save »

Usage¶

Pour utiliser EmailJS dans un site web, il faut d'abord le télécharger, le lier au html, l'initialiser et le déclencher.

Télécharger avec npm¶

npm install @emailjs/browser

Lier au HTML¶

Vous aurez également besoin d'un fichier js custom, alors pourquoi pas le mettre en même temps.

<head>
  ...
  <script src="./node_modules/@emailjs/browser/dist/email.min.js" defer></script>
  <script src="./assets/js/scripts.js" defer></script>
</head>

Initialisation et déclencheur¶

scripts.js

// Initialisation
emailjs.init({ publicKey: "VOTRE_PUBLIC_KEY" });

// Déclencheur
const service_id = "service_xxx";
const template_id = "service_xxx";
const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  // Évite de déclencher la soumission normale du formulaire
  event.preventDefault();

  const templateParams = {
    // [variable emailjs] : [champ du formulaire]
    mon_sujet: form.sujet.value,     // Ex: <input name="sujet">
    mon_message: form.message.value, // Ex: <textarea name="message">
    email: form.to_mail.value,       // Ex: <input name="to_mail">
  };

  emailjs.send(service_id, template_id, templateParams)
    .then((response) => {
      // ✅ Succès
    })
    .catch((err) => {
      // ❌ Erreur
    });
});

Exercices de révision¶

Exercice - JavaScript
Maria skłodowska

Exercice - JavaScript
Gros calculs scientifiques

Exercice - Chemins
Itchy & Scratchy

Exercice - Bootstrap + JavaScript
CaraMail

Votre mot de passe contient un "1" avant votre numéro de téléphone ↩