STIC:STIC I - Atelier technique 2

De EduTech Wiki
Aller à : navigation, rechercher

Cette page fait partie des cours STIC I et STIC II

STIC


1 Programme

Au programme (peut changer) :

  • Fonctionnement d'une page web dynamique côté serveur
  • Installation serveur web en local avec Ampps
  • Installation d'un ou plusieurs portails en local (e.g. Wordpress, MediaWiki, Moodle, ...)
  • Démo Node.js (niveau intermédiaire/avancé)

2 Fonctionnement d'une page web dynamic (server-side)

Lorsqu'on parle d'une page web dynamique on peut se référer à deux types de dynamisme :

  1. Côté-serveur : la page est générée de manière dynamique, c'est-à-dire que son contenu peut varier de requête en requête selon certains conditions (e.g. des paramètres dans l'URL, le fait qu'un utilisateur ait le droit ou pas de voir la page, etc.)
  2. Côté-client : la page présente certains fonctionnalités interactives une fois qu'elle est à disposition de l'utilisateur dans le navigateur web (e.g. drag&drop, slideshow, ...)

Par conséquent, on peut déterminer une sorte de tableau à double entrée qui catégorise les pages selon qu'elles soient statique ou dynamique sur les deux niveaux. En d'autres termes, on peut avoir des pages qui sont :

  • statiques au niveau serveur et client (e.g. vos rapports STIC)
  • statiques au niveau serveur mais dynamique au niveau client (e.g. vos exercices STIC I)
  • dynamiques au niveau serveur mais (plutôt) statiques au niveau client (e.g. les pages de ce Wiki)
  • dynamiques au niveau serveur et client (e.g. Google docs, jeux online, etc.)

Voici un tableau récapitulatif :

Comparaison pages statiques vs. dynamiques

Pour éviter de faire confusion entre le type de dynamisme, au niveau client on parle souvent plutôt de pages web interactives. L'interactivité est déterminé par des scripts JavaScript qui sont téléchargés avec la page web et qui sont exécuté à l'intérieur du navigateur de l'utilisateur. Le dynamisme côté serveur, par contre, se produit avant que la page soit téléchargée par l'utilisateur et concerne donc comment la page est générée.

Voici un schéma qui montre le fonctionnement d'un serveur web avec une ressource (page) web statique ou dynamique :

Fonctionnement d'une page web dynamic au niveau serveur

La différence concerne le fait qu'une page web dynamique nécessite d'un langage de programmation qui est interprété par le serveur et qui sert pour générer du contenu de manière dynamique, par exemple à travers une base de données.

2.1 Anatomie d'une application web

Une application web dynamique se compose généralement de trois éléments qui sont en lien l'un avec l'autre :

  1. L'interface (l'application telle qu'elle est disponible aux utilisateur à travers le navigateur)
  2. Les fichiers
  3. La base de données

Voici la structure en image :

Les trois composantes d'une application web dynamique

3 Installation serveur web en local avec Ampps

Lorsqu'on accède à une application web, elle est normalement hébergée sur un serveur que l'on qualifie de serveur distant. Par contre, en phase de développement, on utilise souvent un serveur local qui permet de simuler, à l'intérieur de la même machine (e.g. l'ordinateur du développeur), le fonctionnement de l'application. Une fois l'application développée, elle sera téléversée enfin sur un serveur distant pour qu'elle puisse être utilisée. Le schéma suivant illustre ce principe :

Serveur distant vs. serveur local

Un serveur web se compose de plusieurs éléments et les installer, que ce soit en local ou sur un serveur distant, peut prendre beaucoup de temps. Pour cette raison on fait souvent appelle à :

  • Un hébergeur externe pour une application sur un serveur distant.
  • Un logiciel qui regroupe tous les éléments nécessaires dans le cas d'un serveur local.

3.1 Présentation de ampps

Pour créer/tester des applications web côté-serveur, nous allons d'abord installer ampps, qui est un logiciel libre qui facilite l'installation de plus de 400 applications web parmi lesquelles :

  • Wordpress
  • Moodle
  • MediaWiki
  • Chamilo
  • Etc.

De plus, ampps installe et configure sur votre ordinateur :

  • Un serveur web de type Apache
  • Le langage de programmation côté-serveur PHP
  • Une base de données de type MySQL

Le logiciel installe également d'autres éléments (Perl, MongoDB, etc.), mais ces trois sont les éléments le plus fréquemment utilisés, à présent (2016), dans des applications qui proposent les deux avantages suivants :

  1. Elles sont considérées stables, car elles existent depuis plusieurs années et ont été mis à jour regulièrement
  2. Elles disposent de zone d'administration et même parfois des scripts d'installation qui permettent de gérer une application avec des connaissances techniques limitées

Avant que ce type de logiciel étaient mis à disposition, pour obtenir un serveur web en local il fallait installer Apache, MySQL et PHP séparément, ainsi que les configurer selon le système d'exploitation. Ce passage était déjà très compliqué en soi, et en plus le résultat était souvent très différent par rapport à la configuration du serveur distant, sur lequel l'application était destinée en production.

Grâce à des logiciels comme ampps, l'installation en local se fait de manière très simple et, en plus, la configuration de base est déjà prise en charge par le logiciel. De plus, il existe la possibilité de modifier facilement des paramètres par la suite (e.g. version de PHP, etc.)

3.2 Installation du logiciel

Pour installer ampps il faut tout simplement :

  1. Télécharger le fichier d'installation depuis la section download du site officiel
  2. Choisir la version adaptée à son propre système d'exploitation (Win, Mac ou Linux). Choisir la version avec installer facilite le processus.
  3. Lancer le fichier d'installation et suivre les instructions

Dans le wiki du site officiel il existe un tutoriel sur les étapes d'installation, une vidéo est également disponible.

Une fois l'installation achevée, vous devez obtenir un panel de contrôle similaire à celui ci :

Panel de contrôle de Ampps

Si tout a marché correctement, vous devez obtenir les messages suivants en bas de la fenêtre du panel :

Apache Started
MySql Started

Si ce n'est pas le cas, essayez de cliquer sur les deux boutons Start sous Apache et MySQL.

3.2.1 Potentiels problèmes avec le logiciel

Si vous n'arrivez pas à faire démarrer Apache et/ou MySQL, il peut y avoir un problème avec les portes de votre ordinateur, notamment avec le serveur Apache.

En effet, le serveur Apache marche (ou écoute) la porte :80 de votre ordinateur qui peut être utilisée également par d'autres processus (e.g. Skype). Dans ce cas, il faudra résoudre le conflit : vous pouvez tout simplement fermer l'application. S'il s'agit de Skype, veuillez faire attention de bien fermer l'application (Sorti de Skype) et pas seulement la fenêtre.

3.3 Installation des applications web

Pour installer les applications web il faudra utiliser l'interface web. Pour y acceder, cliquer tout simplement sur l'icône "HOME" du panel de contrôle. Votre navigateur web s'ouvre et pointe sur la page :

La première fois que vous accédez à l'interface web, ampps vous demande si vous voulez sécurisez l'accès. Cette étape n'est pas fondamentale si vous ne partagez pas ampps dans un réseau local ou dans le web.

La page d'accueil de l'interface web se présente ainsi :

Homepage de l'interface web de ampps

L'interface présente :

  • Sur la gauche une liste de catégories parmi lesquelles vous pouvez trouver les applications à installer
  • Sur la droite des liens d'administration (configuration, bases de données, etc.)

Une fois choisi l'application qui nous intéresse parmi les choix disponibles, la page d'installation de l'application nous permet déjà de faire les configurations nécessaires pour installer l'application. Les paramètres de configuration dépendent de l'application choisie. Ici de suite vous avez un aperçu de la page d'installation de Moodle :

Page d'installation de l'application Moodle via Ampps

Les paramètres qui sont plus au moins commun à tout type d'application concerne :

  • La version de l'application (e.g. 3.1.2, 2.7.1, etc.)
  • Le dossier dans lequel installer l'application. Ce paramètre est important parce qu'il détermine également l'URL pour accéder à l'application. Il faut choisir un nom de dossier qui n'existe pas dans votre système, et le dossier choisi représentera le path à ajouter après http://localhost/.
    • E.g. si vous saisissez my-personal-moodle, votre application moodle sera accessible via http://localhost/my-personal-moodle
    • De cette manière vous pouvez installer plusieurs instances de la même application
  • Le préfixe des tables dans la base de données (et en option avancée le nom de la base des données)

Certaines application, comme par exemple Moodle, vous permettent déjà en phase d'installation de choisir des paramètres tels que :

  • Le titre de votre site
  • La description
  • Le username, password, email, etc. de l'account administrateur
  • ...

Une fois déterminé les paramètres souhaitez, cliquez tout simplement sur le bouton Install en bas de la page. Le processus d'installation démarre et il exécute automatiquement les étapes suivantes :

  • Télécharger les fichiers de la version de l'application choisie
  • Copier/dézipper les fichiers dans le dossier choisi
  • Configuration des fichiers de système avec les paramètres nécessaires (base de donné, etc.)

L'avantage d'utiliser un système de type Ampps concerne également le fait qu'il peut vous avertir s'il y a des problèmes en phase d'installation.

3.3.1 Problèmes avec l'installation d'une application

S'il y un ou plusieurs problèmes en phase d'installation, Ampps arrête l’exécution et affiche les problèmes à l'écran. Vous trouvez ici de suite, par exemple, une erreur dans l'installation de Moodle qui concerne la version de PHP disponible :

Erreur dans l'installation de Moodle

Il s'agit d'une erreur assez commune qui peut être corrigé à travers le panel de contrôle de Ampps :

  1. Menu PHP > Change PHP Version
  2. Sélectionnez la version souhaitée

Ampps fait un restart automatique pour prendre en compte les changements, mais parfois il est plus sûr de rédemarrer une deuxième fois Apche et MySQL à travers les boutons du Control Center.

À ce point vous pouvez reprendre l'installation, le message d'erreur ne s'affichera plus.

3.3.2 Liste d'erreurs communs

Parmi les erreurs les plus fréquents on trouve :

  • La version de PHP (voir plus haut)
  • L'activation d'extensions de PHP (qui peuvent être activés toujours à travers le panel de contrôle)
  • L'activation de modules Apache requis

3.4 Configuration des applications web installées

Une fois votre installation achevée, selon le type d'application que vous avez choisie, vous devez/pouvez configurer ultérieurement votre application. Cela peut se faire généralement de deux manières :

  1. À travers une zone d'administration qui est propre à l'application et qu'il ne faut pas confondre avec l'interface web de Ampps. Par exemple, Moodle dispose de sa propre zone d'administration, c'est pour cela que pendant le processus d'installation vous avez dû choisir un account admin.
  2. À travers la modification manuelle de fichiers qui sont disponibles dans le dossier où vous avez installé votre application. Ces fichiers sont souvent des fichiers .php que vous pouvez ouvrir avec un éditeur de texte (e.g. Brackets)
    • Ces fichiers se trouvent généralement dans le dossier www qui se trouve à l'intérieur du dossier où vous avez installé Ampps et que vous pouvez voir dans le panel de contrôle (voir image plus haut dans la page)

4 Demo Node.js

S'il reste du temps et s'il y a des intéressés (niveau intermédiaire/avancé) :

5 Liens