Le but du cours

Ce cours a pour but de proposer une introduction au développement d'applications web et pour smartphones. Notamment, il présente des techniques et langages de développement actuels, que ce soit en backend ou en frontend. L'accent sera mis en particulier sur les points suivants :

L'objectif des séances de TPs :

L'objectif des TPs est de développer un forum permettant aux étudiants et aux enseignants d'échanger sur des sujets relatifs aux cours proposés dans le département informatique. Ce forum reproduira l'aspect de la capture d'écran ci-dessous pour la partie « application web » :


À titre d'entraînement, vous pouvez y accéder avec les logins/passwords disponible sur AMeTICE via l'URL : https://christophe-gonzales.pedaweb.univ-amu.fr/extranet/forum/fr-FR. Vous développerez votre forum de la manière suivante :

La capture d'écran ci-dessous montre le forum pour la partie « application mobile » :


Ce forum est accessible en démonstration sur l'URL : https://christophe-gonzales.pedaweb.univ-amu.fr/extranet/forum-ionic/fr-FR.

Le forum sera réalisé en 3 étapes :

Pour pouvoir remplir ces objectifs, il sera nécessaire d'avoir à disposition une base de données MySQL. Pour la demander à la DOSI, suivez les instructions suivantes :

  1. Sur le site de Luminy, connectez-vous à votre compte.
  2. Dans votre navigateur, allez sur le site https://dud.univ-amu.fr
  3. Cliquez sur le bouton "se connecter"
  4. Faites une recherche sur "page personnelle".
  5. Suivez les instructions pour demander votre base de données.

Cours et énoncés de TP :

Installations sur vos machines :

Afin de travailler les TPs sur votre ordinateur, vous avez besoin d'installer quelques logiciels et packages :

  1. Apache/MySQL/PHP (AMP)
  2. Node
  3. les packages npm : @angular/cli et @ionic/cli
  4. un IDE, par exemple PhpStorm, WebStorm ou Visual Studio code

Concrètement, cela amène aux procédures d'installation suivantes :


Sous Windows :

  1. Téléchargez WAMP ICI
    Installez WAMP. Lors de l'installation, cliquez sur une version supérieure ou égale à 7 de "PHP" et une version 8 de "Mysql" pour installer les versions de PHP et de MySQL compatibles avec ce que vous ferez en TP.
  2. Exécutez WAMP.
  3. À ce stade, si vous avez installé WAMP avec le chemin par défaut proposé par l'installeur de WAMP (c:\wamp64), la racine des fichiers de votre serveur web se trouve dans c:\wamp64\www, comme le montre la figure ci-dessous. Sur cette image, le répertoire contient un fichier mobile.php (que j'ai rajouté : il n'existe pas quand vous installez wamp). Celui-ci sera accessible dans votre browser à l'URL http://localhost/mobile.php.
  4. Si vous souhaitez placer votre public_html ailleurs que dans le répertoire c:\wamp64\www, le plus simple est de créer un nouveau « virtual host » sur un port différent du port 80. Pour cela, dans les icônes sur la droite de votre barre des tâche, cliquez droit sur l'icône verte du WAMP manager, puis cliquez sur « outils » et, enfin, sur « ajouter un Listen port à Apache » et choisissez le port 8000.
  5. Pour créer votre nouveau « virtual host », ouvrez un browser et accédez à l'URL http://localhost et cliquez en bas à gauche sur « Ajouter un Virtual Host », comme indiqué sur la figure ci-dessous : Vous obtiendrez une page similaire à celle-ci-dessous : Précisez bien que vous souhaitez utiliser le port 8000 que vous avez créé plus haut. Quand vous aurez cliqué sur le bouton « Démarrer la création du VirtualHost », vous obtiendrez une page similaire à : Maintenant, la racine des fichiers de votre virtual host se trouve dans le répertoire que vous avez indiqué lors de sa création. Ainsi, dans la figure ci-dessous, j'ai créé un répertoire public_html à la racine et j'ai placé dedans le fichier mobile.php. Cela nous donne : Le fichier mobile.php est alors accessible de votre browser (et donc d'Angular) à partir de l'URL http://localhost:8000/public_html/mobile.php comme le montre l'image ci-dessous :
  6. Pour installer Node, cliquez ICI et choisissez l'installeur windows. Puis exécutez l'installeur. Ce dernier peut vous demander si vous souhaitez installer des outils pour compiler des packages (python2, etc.). Personnellement, je n'ai pas installé ces outils, qui ne servent à rien pour les TPs.
    Une fois Node installé, vous devez pouvoir utiliser la commande npm : dans un powershell, tapez la commande npm list ou npm.cmd list. Cela devrait fonctionner.
  7. Dans powershell, tapez les commandes :
    npm.cmd install -g @angular/cli
    npm.cmd install -g @ionic/cli
    Vous avez maintenant le même environnement que celui que les machines de TP avaient au début du semestre. Fermez votre fenêtre powershell. Ouvrez-en une autre. Maintenant, vous devriez avoir accès à la commande ng.
  8. Si vous souhaitez utiliser WebStorm, cliquez ICI. Le terminal de WebStorm peut utiliser la commande ng.


Sous Linux :

  1. Pour installer LAMP, téléchargez le packages apache2, mysql-server, mysql-client, php et phpY.x-cli, où Y.x est la version de php sur votre distribution (par exemple, sur Kubuntu 21.10, il s'agit de la version 8.0, donc du package php8.0-cli).
    Sous Debian ou Ubuntu, vous pouvez installer ces packages via la commande :
    sudo apt install nom_package
  2. Par défaut, la racine des fichiers du serveur Apache se trouve dans le répertoire /var/www/html. Si vous souhaitez modifier cela, éditez en tant que root le fichier /etc/apache2/apache2.conf et modifiez la ligne :
    <Directory /var/www/html/>
    afin de spécifier le répertoire que vous souhaitez pour votre racine (de mémoire, le / à la fin du chemin est important). Personnellement, j'utilise un répertoire /home/apache. Pourquoi faire cela ? Parce que /var se trouve en principe sur la même partition que /, votre système d'exploitation. Si vous avez besoin, à un moment donné, de réinstaller ce système d'exploitation et que vous avez laissé vos fichier web sur la même partition, vous les perdrez. En revanche, /home est, en principe, une partition différente de la partition système. Donc vos fichiers web de /home/apache ne sont pas impactés par une réinstallation du système d'exploitation (notez que ce que je dis pour Linux est valable également pour Windows et MacOS : il n'est pas judicieux de sauvegarder ses fichiers web (ou n'importe quel fichier de données) sur la partition système).
    Le deuxième fichier à modifier est /etc/apache2/sites-available/000-default.conf : ici, c'est le DocumentRoot qu'il faut modifier en lui indiquant votre nouveau répertoire racine.
    Redémarrez votre serveur web. La commande devrait être quelque chose comme :
    sudo systemctl restart apache2
    Si vous placez un document html dans votre nouveau répertoire racine, appelons-le mobile.html, vous devez pouvoir le visualiser dans votre browser dans l'URL http://localhost/mobile.html
  3. Afin que les scripts PHP fonctionnent, il se peut que vous ayiez besoin d'activer le module PHP. Pour cela, tapez la commande :
    sudo a2enmod phpY.x
    où Y.x est, comme plus haut, la version de PHP installée sur votre OS. En principe, vous devriez pouvoir visualiser vos fichiers PHP dans votre browser.
  4. Pour interagir avec votre serveur MySQL, je vous suggère d'installer phpmyadmin. Dans MySQL, vous aurez également besoin de vous créer un utilisateur et une base de données. Vous ne pourrez pas le faire directement sous phpmyadmin car, pour effectuer cette opération, il faut se connecter au serveur mysql en tant qu'utilisateur root et c'est interdit sous phpmyadmin. En fait, plus généralement, pour des raisons de sécurité, il est compliqué de se connecter en tant que root sous MySQL. Donc, pour créer votre utilisateur et sa base, cherchez sur google « mysql initial root » et vous obtiendrez la manière de faire une première connection en root pour créer vos utilisateurs. Sous debian/ubuntu, l'url stackoverflow vous montre comment faire facilement.
  5. Pour installer Node, cliquez ICI. Vous trouverez sur cette page toutes les instructions d'installation.
  6. Dans une console, tapez les commandes :
    sudo npm install -g @angular/cli
    sudo npm install -g @ionic/cli
    Vous avez maintenant le même environnement que celui que les machines de TP avaient au début du semestre. Maintenant, vous devriez avoir accès à la commande ng.
  7. Si vous souhaitez utiliser WebStorm, cliquez ICI. Le terminal de WebStorm peut utiliser la commande ng.

Foire aux questions

 
© C.G. 2007 - 2024