STIC:STIC I - Atelier technique 3

Cette page fait partie des cours STIC I et STIC II

STIC

Programme

Partie commune

• 09:00 - 09:30 -> Présentation du Projet Webmaster

Projet 1

• 09:30 - 10:30 -> Configuration et installation d'un portail sur l'espace projets TECFA
• 11:00 - 12:30 -> Démo installation de plugin Wordpress + travail individuel sur son propre projet supervisé par Stéphane

Projet 2 (si assez d'étudiants)

• 09:30 - 10:30 -> Introduction à Node.js
• 11:00 - 12:30 -> Introduction à Express.js

Activités P1

Configuration et installation d'un portail sur l'espace projets TECFA

Étapes nécessaires :

1. Uploader les fichiers de l'application
2. Configurer/créer une base de données avec phpMyAdmin
3. Démarrer l'installation de l'application (via interface web ou modification des fichiers)

Démo installation de plugin Wordpress

Il y a deux manières d'installer/mettre à jour des plugins Wordpress :

1. De manière manuelle: télécharger et uploader les fichiers dans le répositoire wp-content/plugin
2. À travers l'interface d'administration de Wordpress

Installation manuelle

Pour installer manuellement un plugin :

1. Pointer sur la page https://wordpress.org/plugins/
2. Choisir le plugin qui vous intéresse, par exemple https://wordpress.org/plugins/tinymce-advanced/
3. Cliquez sur le bouton Download version X.X.X pour télécharger le .zip du plugin
4. Extraire le contenu sur votre ordinateur (la position n'est pas très importante si vous ne comptez pas l'installer également en local)
5. Utilisez Cyberduck (ou équivalent) pour uploader le fichier entier dans le répositoire wp-content/plugins qui se trouve à l'intérieur du dossier qui contient votre installation de Wordpress
   • e.g. /web/projects/wall-e/votre-login/stic-2/wordpress/wp-content/plugins
6. Pointer dans la zone d'administration de votre Wordpress et choisissez le menu "Plugin", vous verrez la liste des plugins installés, parmi lesquelles vous devez voir celui que vous venez d'installer (dans l'example tinymce-advanced)
7. Ce plugin est désactivé à la base, donc il faudra l'activer pour l'utiliser. Cliquez tout simplement sur le lien Activate (ou équivalent selon la langue de votre interface)

Installation via interface

À controller si cela marche!

Installation d'un thème Wordpress

Le même principe des plugins s'applique également aux thèmes, il faudra tout simplement :

1. Pointer sur la page https://wordpress.org/themes/ pour choisir le thème qui vous intéresse
2. Uploader le dossier dans le répositoire wp-content/themes au lieu de plugins.
3. Activer le thème dans l'interface d'administration

Activités P2

Installation des outils nécessaires

1. Installation de Node.js depuis le site officiel version 6.9.x. Suivre les instructions sur la page Node.js
2. Installation extension Brackets Node.js bindings par Acconut (voir page Brackets)
3. Installation Postman (extension Chrome)

Nous allons par la suite installer des modules Node.js à travers la ligne de commande.

Installation d'outils facultatifs

1. Installation de Visual studio code via le site officiel. Cet éditeur présente des caractéristiques avancés par rapport à Brackets. Compatible avec tous les OS.

Introduction à Node.js

1. Présentation de Node.js (similarité/différence avec JavaScript)
2. Rappel avertissement de sécurité : ce n'est plus dans le "sandbox" du browser mais au niveau du système!
3. Hands-on avec exemples et exercices https://github.com/mafritz/stic-1-node-essentials
   • Node scripts
   • Synch/Asynch programming
   • Built-in, third-party and personalized modules
   • npm

Introduction à Express.js

1. Présentation de Express.js
2. Requête/response
   • Middleware
   • HTTP verbs (GET, POST, PUT, DELETE) -> Utilisation de Postman
3. Installation et présentation express generator
4. Hands-on avec exemples https://github.com/mafritz/stic-1-express-essentials