« STIC:STIC I - Atelier technique 3 » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
(53 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 4 : Ligne 4 :
== Programme ==
== Programme ==


;Partie commune :
* 09:00 - 10:30 -> Présentation et démo applications web dynamiques
* -- Pause --
* 11:00 - 12:00 -> Installation et configuration sur le serveur tecfaetu.unige.ch


* 09:00 - 09:30 -> Présentation du [[STIC:STIC II - projet webmaster | Projet Webmaster]]
== Fonctionnement d'une page web dynamic (server-side) ==


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


* 09:30 - 10:30 -> Configuration et installation d'un portail sur l'espace projets TECFA
# 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.)
* 11:00 - 12:30 -> Démo installation de plugin Wordpress + travail individuel sur son propre projet supervisé par Stéphane
# Côté-client : la page présente certaines fonctionnalités interactives une fois qu'elle est à disposition de l'utilisateur dans le navigateur web (e.g. drag&drop, slideshow, ...)


;Projet 2 (si assez d'étudiants) :
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 :


* 09:30 - 10:30 -> Introduction à [[Node.js]]
* statiques au niveau serveur et client (e.g. vos rapports STIC)
* 11:00 - 12:30 -> Introduction à [[Express.js]]
* 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 :


=== Activités ===
[[Fichier:Webmaster statique vs dynamique.png|800px|vignette|néant|Comparaison pages statiques vs. dynamiques]]


* Définir une application (hypothétique) qui nécessite une base de données relationnelle à 2-4 tables (donc 2 entités au moins).
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.  
* Définir ces tables avec SQL dans un seul fichier *.sql
* Créer les tables dans une base de données MySQL


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


; Outils
[[Fichier:Express.js-normal-web-server.png|800px|vignette|néant|Fonctionnement d'une page web dynamic au niveau serveur]]
: Un simple éditeur pour définir le fichier SQL
: phpMyAdmin: http://tecfaetu.unige.ch/phpmyadmin/


; Deployment:
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.
* Sur un serveur MySQL de TECFA


== Activités en classe ==
=== Anatomie d'une application web ===


Modifier le code suivant et importer dans un serveur MySQL avec un outil comme PhPMyAdmin.
Une application web dynamique se compose généralement de trois éléments qui sont en lien l'un avec l'autre :


Note: Faites attention lorsque vous copier/collez du SQL à partir de fichiers PDF. Les quotes SQL sont droits: <nowiki>"</nowiki> et <nowiki>'</nowiki>, et '''pas''' du genre: <nowiki>´</nowiki>
# L'interface (l'application telle qu'elle est disponible aux utilisateur à travers le navigateur)
# Les fichiers
# La base de données


Exemple table pour données de sondage:
Voici la structure en image :
<source lang="sql">
CREATE TABLE demo1 (
  id int(10) NOT NULL auto_increment,
  login varchar(10) NOT NULL default '',
  password varchar(100) default NULL,
  fullname varchar(40) NOT NULL default '',
  url varchar(60) NOT NULL default '',
  food int(11) NOT NULL default '0',
  work int(11) NOT NULL default '0',
  love int(11) NOT NULL default '0',
  leisure int(11) NOT NULL default '0',
  sports int(11) NOT NULL default '0',
  PRIMARY KEY  (id),
  KEY login (login)
);


INSERT INTO demo1 VALUES (NULL,'colin', 'b9hhhfa9347all893u483', 'Patrick Hero','http://tecfa.unige.ch/',1,2,1,3,4);
[[Fichier:AtelierWebmaster web application components.png|800px|vignette|néant|Les trois composantes d'une application web dynamique]]
INSERT INTO demo1 VALUES (NULL,'colin2', 'b9hhhfa9347all893u483', 'Patrick AntiHero','http://tecfa.unige.ch/',5,2,1,3,4);
INSERT INTO demo1 VALUES (NULL,'user12','098f6bcd4621d373cade4e832627b4f6','Testuser','www.mysql.com',1,4,5,2,1);
</source>


Simple relation avec 2 tables (étudiants et exercices). Contient une foreign key et qqs. données
== Demo installation serveur distant ==
<source lang="sql">
-- MySQL example with foreign keys.
-- Needs the InnoDB engine (see the table definitions)
--
-- Table 'student'
--
DROP TABLE IF EXISTS student;
CREATE TABLE IF NOT EXISTS student (
  id int(10) NOT NULL AUTO_INCREMENT,
  name varchar(40) NOT NULL DEFAULT '',
  first_name varchar(40) NOT NULL DEFAULT '',
  PRIMARY KEY (id)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;
--
-- Data for table 'student'
--
INSERT INTO student (id, name, first_name) VALUES
(1, 'Testeur', 'Bill'),
(2, 'Testeur', 'Joe'),
(3, 'Testeuse', 'Sophie'),
(4, 'Player', 'Jim');
--
-- Table 'exercise'
--
DROP TABLE IF EXISTS exercise;
CREATE TABLE IF NOT EXISTS exercise (
  id int(10) NOT NULL AUTO_INCREMENT,
  title varchar(40) NOT NULL DEFAULT '',
  student_id int(10) NOT NULL,
  comments varchar(128) DEFAULT NULL,
  url varchar(60) NOT NULL DEFAULT '',
  PRIMARY KEY (id),
  KEY student_id (student_id),
  FOREIGN KEY (student_id) REFERENCES student(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Table 'exercise'
--
INSERT INTO exercise (id, title, student_id, comments, url) VALUES
(1, 'Exercise 1', 1, 'small comment', 'http://tecfa.unige.ch/'),
(2, 'Exercise 2', 1, 'no comment', 'http://tecfa.unige.ch/'),
(3, 'exe four', 2, 'No comment', 'http://localhost/'),
(4, 'exe four', 2, 'No comment', 'http://localhost/');


</source>
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 il existe des tutoriels spécifiques pour suivre des étapes, mais de manière générale on peut identifier les passages suivants :


# Télécharger (download) les fichiers qui composent l'application. Il s'agit normalement d'archives .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'on s'attend à télécharger un logiciel/exécutable, mais ce n'est pas le cas
# 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 les dossiers/fichiers
# 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)
# 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érer les informations sur la base de données créée. Parmi ces informations on retrouve souvent :
#* Le host de l'application : souvent c'est <code>localhost</code> mais cela peut être également un url du type <code>mysql.mydomain.com</code>
#* 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


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


Exemple table pour fiches d'étudiants:[[Fichier:1ex. tableétudiant.JPG|200px|thumb|right|Voir la table (moitié)]]<br />
# L'account de type (S)FTP pour uploader/modifier les fichiers physiques de l'application
# 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)
# Un account d'administrateur qui est créé par l'application elle-même (e.g. administrateur Moodle)
}}


[[Fichier:2ex. tableétudiant.JPG|200px|thumb|right|Voir la table (l'autre moitié)]]<br />
[[Fichier:AtelierWebmaster accounts pour application web.png|700px|vignette|néant|Les accounts normalement nécessaires pour installer/configurer une application web.]]
<br />


<source lang="html">
=== Repliquer une application local sur serveur distant ===


    <form method="get" action="adduser.php">
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 :
<h2>AUTEUR</h2>
<p>
<strong>PRENOM</strong><br/>
<input type="text" name="PRENOM" size="25" />
</p>
<p>
<strong>NOM</strong><br/>
<input type="text" name="NOM" size="25"/>
</p>
<p>
<strong>Date de naissance et lieu</strong><br/>
<input type="text" name="date" size="25"/>
( ex: 30/12/1860)
<strong></strong><br/>
<input type="text" name="date" size="25"/>
</p>
<p>
<strong>Genre</strong>
<input type="radio" name="genre" value="1"/>Hommme
<input type="radio" name="genre" value="2"/>Femme
</p>
<p>
<strong>Continent de l'auteur</strong>
<select name="country" size=1>
  <option>Afrique</option>
  <option>Amérique</option>
  <option>Asie</option>
  <option>Europe</option>
<option>Océanie</option>
</select>
<p>
<strong>Son pays</strong><br/>
<input type="text" name="name" size="30" />
</p>
</p>


* Exactement la même structure des fichiers
<h2>Domaine de l'auteur</h2>
* Exactement la même structure de la base de données
<p>
<strong>Domaine</strong>
<input type="radio" name="Orientation" value="y"/>Sciences humaines et sociales
<input type="radio" name="Orientation" value="b"/>Science de la nature


</p>
'''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 :
<p>
<strong>Orientation</strong><br/>
<input type="text" name="name" size="30" />
</p>
<h2>Matériaux</h2>
Faire un choix:
<p>
<input type="checkbox" name="domain1" />Article
<input type="checkbox" name="domain2" />Ouvrage
<input type="checkbox" name="domain3" />
Mémoire
<input type="checkbox" name="domain4" />Source primaire ( historique)
<p>
<strong>Autre</strong><br/>
<input type="text" name="name" size="30" />
</p>
<p>
<strong>Ecrire la source( normes APA)</strong><br/>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<h2>Résumé</h2>
<p>Faire un résumé</p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<h2>Points importants</h2>
<p>Les grandes idées </p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<p> Annoter l'idée et la  page </p>
Idée1<textarea name="comments" rows=1.5 cols=20></textarea>
Idée2<textarea name="comments" rows=1.5 cols=20></textarea>
Idée3<textarea name="comments" rows=1.5 cols=20></textarea>
Idée4<textarea name="comments" rows=1.5 cols=20></textarea>
Idée5<textarea name="comments" rows=1.5 cols=20></textarea>
Idée6<textarea name="comments" rows=1.5 cols=20></textarea>
Idée7<textarea name="comments" rows=1.5 cols=20></textarea>
Idée8<textarea name="comments" rows=1.5 cols=20></textarea>
</p>


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


<p>Théorie</p>
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é.
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<p>Questions</p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<p>Hypothèse</p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<p>Ce que l'auteur n'a pas mentionné </p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>


'''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 :
<p> Cinq mots clés</p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>


<p> Annoter d'autres références </p>
* 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
<textarea name="comments" rows=1.5 cols=20></textarea>
* 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/..."
<textarea name="comments" rows=1.5 cols=20></textarea>
<textarea name="comments" rows=1.5 cols=20></textarea>
<textarea name="comments" rows=1.5 cols=20></textarea>
<p>
<input type="reset" value="Annuler"/>


</p>
== Démo installation ==
</form>
</source>


== Liens ==
Démo de l'installation de différentes portails :
; Texte
: [[:en:SQL_and_MySQL_tutorial|SQL and MySQL tutorial]] (Edutechwiki anglais)


; Transparents
* [[WordPress]]
: http://tecfa.unige.ch/guides/tie/html/mysql-intro/mysql-intro.html (français, qq. détails sont à améliorer, il faudrait notamment utiliser "varchar" au lieu de "char"...)
* [[Mediawiki]]
: http://tecfa.unige.ch/guides/te/files/mysql-intro.pdf (Anglais)
* [[Moodle]]


; PhpMyAdmin
== Configuration et installation d'un portail sur l'espace projets TECFA ==
: http://tecfa.unige.ch/admin/phpMyAdmin/


; Liens techniques
Choisissez une application et configurez vous-mêmes un portail sur le server.
:[[:en:SQL]] (liens)
 
:[[:en:MySQL]] (liens)
Étapes nécessaires :
 
# Uploader les fichiers de l'application
# Configurer/créer une base de données avec phpMyAdmin
# Démarrer l'installation de l'application (via interface web ou modification des fichiers)
 
Outils nécessaires :
 
# Cyberduck pour accès SFTP au serveur tecfaetu.unige.ch
# Account + informations de connexion personnelles pour phpMyAdmin/MySQL (Stéphane va vous les donner)
 
=== Positionnement du portail ===
 
{{ bloc important | Accessible uniquement depuis le réseau UNIGE ou par VPN }}
 
'''Le portail doit être installé à un endroit particulier'''
  /web/projets/baldur/dupond/stic-2/votre-application/
 
Ce qui donne l'URL http://tecfaetu.unige.ch/projets/baldur/dupond/stic-2/votre-application/
 
Pour des raisons de sécurité, il sera uniquement accessible depuis l'université ou par VPN.
 
=== Accès à phpMyAdmin ===
 
{{ bloc important | Accessible uniquement depuis le réseau UNIGE ou par VPN }}
 
Pour accéder à phpMyAdmin (gestion de la base de données), pointer vers :
 
http://tecfaetu.unige.ch/phpmyadmin/
 
Le nom d'utilisateur et le mot de passe seront fourni pendant l'atelier.
 
== Démo installation de plugin Wordpress ==
 
Il y a deux manières d'installer/mettre à jour des plugins Wordpress :
 
# De manière manuelle: télécharger et uploader les fichiers dans le répositoire <code>wp-content/plugin</code>
# À travers l'interface d'administration de Wordpress
 
=== Installation manuelle ===
 
Pour installer manuellement un plugin :
 
# Pointer sur la page https://wordpress.org/plugins/
# Choisir le plugin qui vous intéresse, par exemple https://wordpress.org/plugins/tinymce-advanced/
# Cliquez sur le bouton Download version X.X.X pour télécharger le .zip du plugin
# Extraire le contenu sur votre ordinateur (la position n'est pas très importante si vous ne comptez pas l'installer également en local)
# Utilisez Cyberduck (ou équivalent) pour uploader le fichier entier dans le répositoire <code>wp-content/plugins</code> qui se trouve à l'intérieur du dossier qui contient votre installation de Wordpress
#* <code>e.g. /web/projects/xerneas/votre-login/stic-2/wordpress/wp-content/plugins</code>
# 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)
# 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 ===
 
Le serveur tecfaetu.unige.ch bloque la connexion FTP simple qui est normalement utilisée par l'interface administrateur de Wordpress. Il existe un plugin - [https://wordpress.org/plugins/ssh-sftp-updater-support/ SSH SFTP Updater Support] - qui permet d'ajouter la connexion SSH/SFTP directement à l'intérieur de l'interface admin ainsi qu'on puisse par la suite installer/mettre à jour les plugins/thèmes sans téléverser manuellement les fichiers.
 
Pour utiliser le plugin, il faut néanmoins l'installer manuellement (voir plus haut) :
 
# Pointer sur la page du plugin https://wordpress.org/plugins/ssh-sftp-updater-support/
# Suivre les instructions pour installer manuellement le plugin
# L'activer dans l'interface administrateur
 
À partir de l'activation, vous avez la possibilité d'effectuer les opérations d'installation et mise à jour à travers la connexion SSH/SFTP.
 
=== Installation d'un thème Wordpress ===
 
Le même principe des plugins s'applique également aux thèmes, il faudra tout simplement :
 
# Pointer sur la page https://wordpress.org/themes/ pour choisir le thème qui vous intéresse
# Uploader le dossier dans le répositoire <code>wp-content/themes</code> au lieu de plugins.
# Activer le thème dans l'interface d'administration

Dernière version du 7 février 2024 à 16:59

Cette page fait partie des cours STIC I et STIC II

STIC

Programme

  • 09:00 - 10:30 -> Présentation et démo applications web dynamiques
  • -- Pause --
  • 11:00 - 12:00 -> Installation et configuration sur le serveur tecfaetu.unige.ch

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

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

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 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 normalement d'archives .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'on s'attend à télécharger un logiciel/exécutable, 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 les dossiers/fichiers
  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érer 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 créer de la confusion est le fait qu'on à normalement à 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)
Les accounts normalement nécessaires pour installer/configurer une application web.

Repliquer une application local sur serveur distant

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/..."

Démo installation

Démo de l'installation de différentes portails :

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

Choisissez une application et configurez vous-mêmes un portail sur le server.

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

Outils nécessaires :

  1. Cyberduck pour accès SFTP au serveur tecfaetu.unige.ch
  2. Account + informations de connexion personnelles pour phpMyAdmin/MySQL (Stéphane va vous les donner)

Positionnement du portail

Accessible uniquement depuis le réseau UNIGE ou par VPN

Le portail doit être installé à un endroit particulier 

 /web/projets/baldur/dupond/stic-2/votre-application/

Ce qui donne l'URL http://tecfaetu.unige.ch/projets/baldur/dupond/stic-2/votre-application/

Pour des raisons de sécurité, il sera uniquement accessible depuis l'université ou par VPN.

Accès à phpMyAdmin

Accessible uniquement depuis le réseau UNIGE ou par VPN

Pour accéder à phpMyAdmin (gestion de la base de données), pointer vers : 

http://tecfaetu.unige.ch/phpmyadmin/

Le nom d'utilisateur et le mot de passe seront fourni pendant l'atelier.

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/xerneas/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

Le serveur tecfaetu.unige.ch bloque la connexion FTP simple qui est normalement utilisée par l'interface administrateur de Wordpress. Il existe un plugin - SSH SFTP Updater Support - qui permet d'ajouter la connexion SSH/SFTP directement à l'intérieur de l'interface admin ainsi qu'on puisse par la suite installer/mettre à jour les plugins/thèmes sans téléverser manuellement les fichiers.

Pour utiliser le plugin, il faut néanmoins l'installer manuellement (voir plus haut) :

  1. Pointer sur la page du plugin https://wordpress.org/plugins/ssh-sftp-updater-support/
  2. Suivre les instructions pour installer manuellement le plugin
  3. L'activer dans l'interface administrateur

À partir de l'activation, vous avez la possibilité d'effectuer les opérations d'installation et mise à jour à travers la connexion SSH/SFTP.

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
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_Atelier_technique_3&oldid=177227 »