STIC:STIC I - Atelier technique 2

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

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 installation sur serveur distant

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.

Installation serveur web en local avec Ampps

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.)

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.

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.

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.

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.

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

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)

Demo installation serveur distant

Bien que certains hébergeurs web mettent à disposition des solutions similaires à Ampps pour installer des applications (ce qu'on appelle souvent des solutions One-Click Install), le processus est plus compliqué lorsqu'il faut le faire manuellement. La démarche exacte peut varier selon l'application choisie, et souvent il existe des tutoriels spécifiques pour suivre des étapes, mais de manière générale on peut identifier les passages suivants :

  1. Télécharger (download) les fichiers qui composent l'application. Il s'agit souvent de fichier .zip ou .rar qui contiennent tous les fichiers nécessaires à l'application de manière comprimée.
    • Une erreur assez commune concerne le fait qu'ils s'attendent à télécharger un logiciel/executable, mais ce n'est pas le cas
  2. Uploader ces fichiers sur le serveur distant sur lequel l'application va tourner
    • Pour ce faire il faut disposer d'un account (S)FTP ou SSH avec les droits d'écriture/modification sur le fichier
  3. Préparer une base de données pour contenir les données de configuration et les contenus de l'application
    • Pour ce faire il faut disposer d'un account pour la base des données (e.g. MySQL) et souvent d'une interface pour éviter d'avoir à exécuter ces opérations en ligne de commande (e.g. phpMyAdmin)
  4. Lancer un script d'installation/configuration avec une interface web (ou modifier manuellement des fichiers de configuration qui ont été uploadés au point 2) pour insérez les informations sur la base de données créée. Parmi ces informations on retrouve souvent :
    • Le host de l'application : souvent c'est localhost mais cela peut être également un url du type mysql.mydomain.com
    • Le username de l'account qui a accès à la base de données
    • La password de l'account qui a accès à la base de données
    • Le nom de la base des données qui va contenir les données
    • Eventuellement un préfix du nom des tables pour les distinguer d'autres déjà présent dans la même base des données

Ce qui peut souvent créer de la confusion est le fait qu'on à souvent à faire avec trois accounts (et mots de pass) différents :

  1. L'account de type (S)FTP pour uploader/modifier les fichiers physiques de l'application
  2. L'account de la base de données (très souvent MySQL) qui permet d'intéragir avec les tables (ajouter, créer, effaces des tables ou des données dans les tables)
  3. Un account d'administrateur qui est créé par l'application elle-même (e.g. administrateur Moodle)

Anatomie d'une application web

Une application web dynamique se compose 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

Il en résulte que si vous voulez obtenir exactement la même interface que vous avez en local sur votre serveur distant, il faudra répliquer exactement la même configuration, c'est-à-dire :

  • Exactement la même structure des fichiers
  • Exactement la même structure de la base de données

Attention #1 : cela n'est cependant pas suffisant. Il faudra également adapter votre configuration au serveur distant, car il se peut que vous n'avez pas exactement les mêmes accounts en local que sur le serveur distant. Exemple :

  • En local (ou sur un autre site) l'account pour accéder à la base de donnée s'appelle user_local123
  • Sur le serveur distant l'account s'appelle plutôt fh437g344r538

Il faudra donc modifier cette références dans tous les endroits où le nom de l'account pour accéder à la base de données est mentionné.

Attention #2 : selon le type d'application, il se peut que certaines références à l'intérieur des fichiers ou de la base des données fassent référence à des paramètres spécifiques de votre application en local, par exemple :

  • Wordpress utilise une référence dans la base de données pour déterminer l'URL du site. Donc cet URL dans votre site local ampps est très probablement http://localhost/votre-nom-de-dossier-wp, mais sur le serveur distant vous aurez plutôt http://tecfaetu.unige.ch/projets/votre-volée/nom-projet/etc
  • Certaines applications mémorisent le chemin absolu dans lequel elles ont été installées, donc en local vous pouvez avoir quelque chose du style "C://...", mais sur le serveur sera plutôt "/web/projets/..."

Liens