Développement Web en Licence Pro
Menus pour les cours
Interface «classique» des années 90 avec exercices et examens corrigés ;
Interface «moderne» en XHTML Strict des années 2000 ;
Interface HTML5 (2020) en mode «Single Page Application».
Le «fil rouge» se nomme LTE ; consignes pour le CV ici.
Horaires selon CELCAT : g467965
Cours (confinement) novembre 2020
COURS/TD/TP 01 : formats XHTML Strict et HTML5
Parcourir les pages wiki HTML (français) et HTML (anglais). Laquelle est la plus utile pour vous ?
Lire ensuite attentivement les pages (en français) élément HTML et HTML5 afin de pouvoir répondre aux questions posées ci-dessous.
Trouver pour les trois interfaces en haut de la page comment on peut vérifier que la grammaire annoncée (XHTML, HTML5) est bien celle utilisée. Où peut-on trouver ces grammaires ? Les fichiers de ces trois interfaces sont-ils valides pour les grammaires annoncées ?
Quelles sont les éléments ajoutés en HTML5 par rapport à XHTML ? Et quels attributs ?
Essayer de reproduire les deux tableaux ci-dessous (images cliquables) :
--- Pause (10 minutes).
Essayer de reproduire les deux formulaires ci-dessous (images cliquables) :
Serait-ce difficile de reproduire la page de l'application UDG illustrée dessous ?
Essayer de comprendre pourquoi la page devweb.htm devient la page devweb.php après chargement de la page.
Modifier le fichier http://forge.info.univ-angers.fr/~gh/xmp.htm pour qu'il soit correct au sens de XHTML.
Peut-on utiliser l'élément <header> de HTML5 en bas d'une page Web ?
Quel est le meilleur navigateur ? Qu'est-ce que le test Acid3 ? Et les tests Sunspider et Peacekeeper ?
Quelle est la «part de marché» des divers navigateurs, os, serveurs web et moteurs de recherche ?
Quels sont les deux utilitaires sous Linux qui permettet de rapatrier rapidement des pages Web ?
Expliquer pourquoi l'URL http://forge.info.univ-angers.fr/~gh/internet/devweb.php#confinement force le navigateur à faire défiler la page jusqu'à l'élément dont l'id est confinement.
COURS/TD/TP 02 : styles CSS et feuilles de style
Les éléments et attributs HTML5 définissent en principe juste la structure d'une page, d'un site, mais pas sa mise en forme. C'est CSS qui définit cette mise en forme, dont le rendu est confié au navigateur. Le métalangage de HTML5 utilise les termes élément, attribut et entité alors que CSS parle de propriété et de valeur.
De nombreux éléments HTML5 correspondent à des rectangles (ou boites). Les propriétés associées sont les marges (internes et externes) ainsi que les bordures et la couleur de fond. Lorsque les éléments contiennent du texte, la mise en forme porte sur la police de caractères, la chasse, la taille, la couleur du texte. Des effets de style (avec des dégradés, de l'opacification, la superposition...) sont possibles, au prix d'une certaine complexification de l'écriture des styles.
Pour quelqu'un qui maitrise les styles, les raccourcis Emmet fournissent un moyen de coder plus rapidement les mises en forme. Si vous lisez toute la page syntaxe Emmet vous verrez une vidéo de démonstration de ce que cela permet en fin de page.
La complexité des mises en forme multi-supports et le fameux concept de responsive design obligent à mettre en place des solutions techniques comme bootstrap css, css grid, css flex et fontawesome qui dépassent largement le cadre de notre cours. C'est pourquoi on se contentera ici de quelques démonstrations et mises en forme simples.
Couplées à Javascript, ces solution techniques rendent les pages Web équivalentes à de "vraies" applications. Mais nous n'utiliserons pas Javascript dans cette séance.
On veut mettre en place une page Web pour gérer une to do list c'est-à-dire une liste des choses (ou tâches) à faire. La page de base comporte un titre, une zone de saisie (avec un bouton d'ajout) et une zone d'affichage des tâches (avec deux boutons par tâche). Dans un répertoire cssNovembre essayer d'écrire en HTML5 et sans CSS cette page. Voici un rendu possible pour une page valide au sens de la grammaire HTML5 :
Créer ensuite dans ce même répertoire cssNovembre deux fichiers vides nommés index.html et style.css. Regarder le début de la vidéo Beginner Vanilla Javascript Project Tutorial. Reproduire le code des fichiers index.html et style.css (mais sans le Javascript) à partir du timecode 3:30 jusqu'au timecode 15:10. Compléter et adapter ces fichiers jusqu'à obtenir une page qui ressemble à ce qui est ci-dessous (à gauche) :
Vous pouvez alors cesser de regarder la vidéo.
Malheureusement le code HTML5 produit dans la vidéo n'est pas valide (pourquoi ?). L'image de droite ci-dessus correspond à un code valide et à une mise en forme légèrement différente. Essayez de voir si vous arrivez à la reproduire.
Pour ceux qui veulent tout vérifier, le code de la vidéo est sur github, à l'adresse : vanilla-todo. Pour mon code, regardez sansCss.html et cssNovembre.
--- Pause (10 minutes).
Essayer de réaliser la première partie du fil rouge sans la partie PHP ni Javascript. Le lien est tdm1 ; il faut bien sûr lire le début de la page LTE.
Si vous ne connaissez pas bootstrap, vous pouvez regarder la vidéo de 12 minutes nommée débuter avec bootstrap ou la vidéo de 7 minutes boostrap 4 et font awesome 5.
Quelle est la version de font awesome utilisée dans la vidéo todo list ?
Quelle en est la dernière version à ce jour (novembre 2020) ?
Au passage, que signifie CDN ?
Quelle est la dernière version à ce jour (novembre 2020) de bootstrap ?
Plus généralement, comment peut-on «survivre» aux changements permanents de version de librairies et de frameworks ?
Au passage, faut-il apprendre SASS/SCSS/LESS ?
COURS/TD/TP 03 : Javascript, premières notions
Javascript s'exécute dans le navigateur. Chaque navigateur a sa propre implémentation d'ECMAScript. Nous allons commencer par voir comment on utilise classiquement Javascript dans une page avant de comprendre à quoi servent les librairies et frameworks associés (la semaine prochaine).
Commencez par lire les parties 1 à 5 de mon tuteur Javascript. Vérifiez ensuite que vous comprenez bien le code source HTML et Javascript des exemples des parties 3, 4 et 5.
Essayez ensuite de voir pourquoi on peut avoir jusqu'à quatre appels différents d'une fonction dans un onsubmit à l'aide la page envois.php.
Lisez ensuite les parties 6 et 7 du tuteur Javascript. Vérifiez ensuite que vous comprenez bien le code source HTML et Javascript des exemples de ces parties 6 et 7.
Entrainez-vous à utiliser la console Javascript dans les outils de développement de votre navigateur. En particulier, vérifiez que vous comprenez comment vous pouvez profiter de l'autocomplétion pour connaitre par exemple toutes les méthodes-objet d'une chaine de caractères. Vérifiez aussi que vous maitrisez console.log(), console.error(), console.table() etc.
Essayez alors de faire la partie Javascript du jeu du nombre mystérieux (tirage aléatoire, réponses différentes) à l'aide de la page le nombre inconnu. Pour cela, dans terminal, tapez :
wget http://forge.info.univ-angers.fr/~gh/tuteurs/std.css wget http://forge.info.univ-angers.fr/~gh/tuteurs/leNombreInconnu.htmlAnalysez alors le code HTML et écrivez le code Javascript manquant.
--- Pause (10 minutes).
Lisez attentivement le code tutjsajouts.js qui remplit des parties de la page tutjsajouts.htm pour être sûr que vous maitrisez les méthodes-objet createElement, getElementById, setAttribute et appendChild.
Regardez dans son intégralité (par sauts de 10 minutes) la vidéo Beginner Vanilla Javascript Project Tutorial. Vous deviez alors avoir compris comment fonctionne le Javascript standard, nommé aussi pure Javascript ou vanilla Javascript. Pour mémoire, le site github de la vidéo a été fourni dans le texte du cours de la semaine dernière.
Essayez enfin de réaliser la deuxième partie du fil rouge, sections 2.1 et 2.2, mais pas la partie 2.3 que l'on fera la semaine prochaine. Le lien est tdm2 ; il faut bien sûr lire le début de la page LTE.
COURS/TD/TP 04 : Javascript avancé, librairies et frameworks
Si on reprend l'exemple tutjsajouts.js de la semaine dernière, on remarque que la gestion des éléments HTML est très répétitive et longue à écrire : on crée des éléments, on leur fournit des attributs, on les ajoute avant ou après d'autres éléments... Comme Javascript est capable de chainer des méthodes, l'idée de la librairie jQuery est de fournir principalement une seule fonction nommé $ (dollar) pour effectuer de façon concise un maximum de tâches de gestion mais aussi d'animation et d'effets sur les éléments. Voici un exemple de chainage :
$('#monTitre').css('color', 'blue').slideUp(15000).slideDown(15000)Sans jQuery, il faudrait une ligne pour repérer l'élément dont l'id est monTitre, puis une autre ligne pour lui mettre la couleur blue puis sans doute plusieurs lignes pour effectuer les effets de montée et de descente. Pour apprendre jQuery, le plus simple est sans doute de passer par le tutorial de W3schools ou de regarder des vidéos courtes comme Initiation à jQuery ou Découverte de jQuery.
Une fois que vous avez appris les rudiments de jQuery, essayez de faire l'exercice de la section 2.3 du fil rouge qui requiert d'utiliser jQuery. Le lien est tdm2. Vous pouvez utiliser la page Lte/lsv22.html et ses fichiers comme solution de la section 2.2.
--- Pause (10 minutes).
Lisez maintenant la partie 8 de mon tuteur Javascript sans tester les exemples. Comme indiqué, depuis ES6 (2015) Javascript a beaucoup changé et on a un peu moins besoin de jQuery qui reste toutefois utile à connaitre.
Par contre on a besoin de pouvoir développer des applications complètes avec Javascript, d'où les frameworks de développement cités. Comme les frameworks utilisent de nombreuses librairies et afin de pouvoir utiliser Javascript du coté serveur, deux utilitaires nommés respectivement node (Node.js) et npm sont apparus. Le premier, node, est un serveur Web pour Javascript, simple mais efficace. Le tuteur w3schools pour node le présente très simplement. Le second est un gestionnaire de paquets js. Nous allons réaliser quelques manipulations afin de voir comment utiliser tout cela, du coté front end comme back end avec Vue, Express, React et Angular.
Il faut d'abord vérifier que vous avez tous les outils nécessaires. Pour cela, tapez les instructions suivantes :
# installation/version de Node.js sudo apt install nodejs node --version # installation/version de npm sudo apt install npm npm --version
VueJS : regardez le début de la vidéo siy9ETx68NU qui correspond à l'exemple 6 de la partie 8 du tuteur Javascript et récupérez l'archive du code via github vue-project. Après décompression de l'archive, ouvrez le fichier index.html du projet dans un navigateur et vérifiez que l'interface fonctionne comme indiqué dans la vidéo.
Lisez alors le fichier index.html qui définit l'application, parcourez la liste des répertoires et répondez aux questions suivantes :
Combien y a-t-il de fichiers en tout pour cette application, si on compte tous les sous-répertoires ?
Où sont mis les éléments <script> du projet : en début ou en fin de fichier, et pourquoi ?
Quelle est la version de font awesome utilisée pour cette application ?
Dans quel fichier se trouve la liste de description des montres et de leur prix ?
Réponses
A l'aide de la commande find . | wc -l on trouve qu'il y a 28 fichiers si on compte les répertoires comme fichiers. La commande tree (peut-être à installer) indique la structure des fichiers :
$gh> find . | wc -l 28 $gh> tree . . +-- assets | +-- img | | +-- brand-designer.JPG | | +-- curren-business.JPG | | +-- curren-sport.JPG | | +-- hiphop-gold.JPG | | +-- jaragar-racing.JPG | | +-- liges-hommes.JPG | | +-- maserati-mechanical.JPG | | +-- mesh-genova.JPG | | +-- montre-mecanique.JPG | | +-- quarz-luxe.JPG | | +-- relogio-masculino.JPG | | +-- tissot-multifunction.JPG | | +-- vueLogo.png | | +-- wish-logo-800.png | +-- js | | +-- jquery.min.js | | +-- script.js | | +-- vue.js | +-- style | +-- main.scss | +-- style.css | +-- style.css.map +-- index.html +-- package.json +-- README.md 4 directories, 23 filesVisiblement les fichiers scripts sont mis en fin de page, juste avant la fin de l'élément body. C'est sans doute parce qu'on veut être sûr que les éléments et les id ont bien été créés et sont disponibles.
La ligne 11 du fichier index.html indique qu'il s'agit de la version 5.8.2 pour fontawesome. Sur le site officiel fontawesome.com la version courante à ce jour -- 3 décembre 2020 -- semble être 5.15.1 (octobre 2020).
La liste de description des montres et de leur prix est dans le fichier vue-project-master/assets/js/vue.js et les montres sont définies par un tableau d'objets.
Express : il manque peut-être des modules. Dans un terminal, tapez les instructions suivantes :
# installation de jasmine sudo npm install -g jasmine-node # installation de mongodb sudo apt install mongodb-server sudo service mongodb startEssayez maintenant dans un terminal, de créer un répertoire mvcExpress et suivez les indications pour l'application Fast As Hell, exemple numéro 4 (MVC) de la partie 8 du tuteur Javascript pour y déposer le projet proposé. L'exécution de npm install peut durer quelques secondes... Vous pouvez ignorer les messages d'erreur liés aux mises à jour. Il vous faudra peut-être faire Controle-C à la suite des tests jasmine. Une fois que vous avez tapé node app.js le serveur est lancé à l'adresse http://localhost:3000.
Lisez alors le fichier app.js qui définit l'application, parcourez la liste des répertoires et répondez aux questions suivantes :
Quelle infrastructure de serveur est utilisée : Express, koa ou Hapi ?
Une comparaison de ces infrastructures est ici.
Quelles sont toutes les "routes" (URL) possibles pour ce serveur ?
Quel fichier contient la définition ("template") de la homepage ?
Combien y a-t-il de fichiers en tout pour cette application ?
Réponses
Comme le montre le fichier package.json c'est Express qui est utilisé.
{ "name": "application-name", "version": "0.0.1", "private": true, "scripts": { "start": "node app.js" }, "dependencies": { "express": "3.2.6", "hjs": "0.0.4", "less-middleware": "0.1.12", "underscore": "1.4.4", "mongodb": "1.3.10" } }Les routes sont définies par le controller dans app.js. Il y en a quatre :
@gh> grep "controllers" app.js 12: Admin = require('./controllers/Admin'), 13: Home = require('./controllers/Home'), 14: Blog = require('./controllers/Blog'), 15: Page = require('./controllers/Page');La page de départ est définie dans mvcExpress/templates/home.hjs. Le format hjs du fichier correspond sans doute à hogan (Twitter).
Il y a 400 répertoires et 2012 fichiers. La structure des fichiers est là. Tout un programme... !
Angular : Regardez rapidement le site (en français) angular-basic-app avec sa vidéo et récupérez le code via github angular-basic-app. Essayez d'installer l'application via les instructions suivantes -- qui ne fonctionneront peut-être pas sur votre machine, mais ce n'est pas grave.
# installation d'Angular-cli version 6 (version gihub de janvier 2019) npm install @angular/cli@6.2.4 --save # installation de sass version 4 npm install node-sass@4.14.1 # installation du reste de l'application npm install # utilisation sur http://localhost:4243 ng serve --port 4243Après lecture du code de l'application dont index.html et après avoir compris comment fonctionne ng en ligne de commandes, trouvez-vous que c'est compliqué d'utiliser Angular ?
React : Regardez rapidement la vidéo pCA4qpQDZD8 qui implémente la todo list avec ReactJS. Est-ce beaucoup plus compliqué qu'avec la version Vanilla Javascript ?
Conclusion
Au vu de ces différents exemples, quel framework vous parait le plus facile à utiliser ?
Que penser des incompatibilités de version ?
Un dernier effort : lire le comparatif de ces frameworks sur blog.dyma.
COURS/TD/TP 05 : PHP
La semaine dernière, nous avons vu que Javascript est utilisé pour le front-end :
Mais aussi pour le back-end :
Et enfin, puisqu'il y a des outils en ligne de commandes, pour la partie devops :
Nous allons maintenant nous concentrer sur la partie back-end avec PHP et nous y intégrerons MySQL comme gestionnaire de bases de données relationnelles.
Commencez par vérifier que vous disposez de PHP, version 7.2 ou supérieure avec ses outils pour la ligne de commandes :
sudo apt install php7.2 sudo apt install php7.2-cli sudo apt install php7.2-readline sudo apt install php7.2-recode sudo apt install php7.2-zip sudo apt install php7.2-mysql sudo apt install php7.2-sqlite3 sudo apt install php7.2-json sudo apt install php7.2-xml sudo apt install php7.2-xsl sudo apt install php7.2-gd php --versionLisez ensuite mon tuteur PHP parties 1 et 2.
Vérifiez que vous comprenez les exemples de la partie prog01 du tuteur. Vous pouvez les tester dans le terminal, par copier/coller après avoir tapé php -a.
Vérifiez que vous comprenez les exemples de la partie prog02 du tuteur. Vous pouvez les tester dans le terminal, par copier/coller après avoir tapé php -a.
Vérifiez que vous comprenez les exemples de la partie prog03 du tuteur. Vous pouvez les tester dans le terminal, par copier/coller après avoir tapé php -a.
Essayez ensuite d'exécuter en ligne de commandes les quatre scripts ver1.php, ver2.php, ver3.php et ver4.php de l'archive ver.zip.
@ghchu07~/public_html/internet|(~gH) > php ver1.php Bonjour. Nous sommes sous Linux ghchu07 4.15.0-126-generic #129-Ubuntu SMP Mon Nov 23 18:53:38 UTC 2020 x86_64 @ghchu07~/public_html/internet|(~gH) > php ver2.php Bonjour. Nous sommes le 09/12/2020 vers 13:49:46 et ceci est php 7.2.24-0ubuntu0.18.04.7. @ghchu07~/public_html/internet|(~gH) > php ver3.php No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 18.04.5 LTS Release: 18.04 Codename: bionic Ubuntu 18.04.5 LTS \n \l @ghchu07~/public_html/internet|(~gH) > php ver4.php Versions de programmes pour ghchu07 @ 192.168.0.20 Ubuntu 18.04.5 LTS ====================================================================== Programme Version --------- ------- acrobat reader 9.5.5 apache2 Server version: Apache/2.4.29 (Ubuntu) chrome Chromium 87.0.4280.66 Built on Ubuntu , running on Ubuntu 18.04 firefox Mozilla Firefox 83.0 java openjdk 11.0.9.1 2020-11-04 latex pdfTeX 3.14159265-2.6-1.40.18 (TeX Live 2017/Debian) libreoffice LibreOffice 6.0.7.3 00m0(Build:3) mysql mysql Ver 14.14 Distrib 5.7.32, for Linux (x86_64) using EditLine wrapper node v12.20.0 perl This is perl 5, version 26, subversion 1 (v5.26.1) built for x86_64-linux-gnu-thread-multi php PHP 7.2.24-0ubuntu0.18.04.7 (cli) (built: Oct 7 2020 15:24:25) ( NTS ) python3 Python 3.6.9 R R version 4.0.3 (2020-10-10) -- "Bunny-Wunnies Freak Out" rexx/regina REXX-Regina_3.6(MT) 5.00 31 Dec 2011 ruby ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x86_64-linux]Que font ces scripts ? Que peut-on en déduire concernant les rapports entre devops et PHP ?
Essayez ensuite d'installer la pile LAMP, par exemple en suivant les explications pour Ubuntu 18.04 ou celles pour Debian.
Vérifier que l'URL http://localhost affiche bien la page par défaut d'Apache2.
Modifiez la configuration du serveur Apache2 pour que chaque utilisateur ait le droit d'exécuter du PHP dans son propre répertoire public_html. En principe, les instructions suivantes suffisent :
# pour que mon ~/public_html soit vu en http://.../pub/MOI cd /var/www sudo mkdir pub sudo ln -s /home/MOI/public_html/ /var/www/pub/MOI # attention pour certains Ubuntu, il faut utiliser cd /var/www/html sudo mkdir pub sudo ln -s /home/MOI/public_html/ /var/www/html/pub/MOI # pour que http://.../~MOI soit accepté : sudo a2enmod userdir # pour les gens pressés : /etc/init.d/apache2 restart # mézalors les utilisateurs n'ont pas le droit aux .php # il y a une section à <<commenter>> dans /etc/apache2/mods-enabled/php7.2.conf : # (en fin de fichier) ## (gH) le 24 janvier 2019 pour autoriser les utilisateurs à exécuter du php ## attention : il faut COMMENTER ces lignes # <IfModule mod_userdir.c> # <Directory /home/*/public_html> # php_admin_value engine Off # </Directory> # </IfModule> # ne pas oublier : /etc/init.d/apache2 restartRapatriez enfin dans votre répertoire public_html les fichiers phpversion.php et phpinfo.php ainsi que erreur.php à l'aide du fichier php-config.zip.
Que voyez-vous dans le navigateur si vous ouvrez ces pages avec le menu Fichier/Ouvrir ?
Et si vous les ouvrez via http://localhost ?
Essayez d'installer Xdebug pour Apache2 et PHP. En principe, les instructions suivantes suffisent :
# pour avoir les jolis affichages d'erreurs avec callstack en orange sudo apt install php-pear sudo pecl install xdebug # pour vérifier : php --ri xdebug # il faut modifier /etc/php7.2/apache2/php.ini et avoir # display_errors=On et html_errors=On # ne pas oublier de relancer apache : /etc/init.d/apache2 restartVérifiez ensuite que la page erreur.php affiche bien ce qui suit :
--- Pause (10 minutes).
Lisez tout le reste du tuteur PHP.
Essayez de faire les exercices 1, 2 et 3 de la série tds#cours 5.
Lisez les énoncés et les solutions des exercices 4, 5, 6 et 7 de la série tds#cours 5.
Essayez de faire les exercices 8 à 11 de la série tds#cours 5.
En déduire que vous devriez être capable de réaliser le CC pour la semaine de la rentrée en janvier 2020 afin d'avoir une note provisoire de CC.
Cours (confinement) janvier 2021
COURS/TD/TP 01 : PHP conceptuel, lecture et écriture de fichiers avec PHP
Lire la page consacrée au PHP conceptuel.
Essayer ensuite de faire la question 1.1 de l'examen licpro2019_1 (le corrigé est en fin de document).
Vérifier que vous savez accéder à sftp://devel.info.univ-angers.fr via Filezilla ou votre gestionnaire de fichiers préféré (rubrique "se connecter à un serveur") et que vous savez effectuer une connection ssh à devel.info.univ-angers.fr.
@ghchu07~/public_html/internet|(~gH) > pwd /home/gh/public_html/internet @ghchu07~/public_html/internet|(~gH) > ssh -YC -p 4920 devel.info.univ-angers.fr Welcome to Ubuntu 16.04.7 LTS (GNU/Linux 4.4.0-198-generic x86_64) [...] @devel~|(~gH) > pwd /home/infoleria/ghVérifier enfin que vous savez copier des fichiers depuis votre ordinateur vers devel.info.univ-angers.fr via scp.
@ghchu07~/public_html|(~gH) > echo bonjour > Bonjour.txt @ghchu07~/public_html|(~gH) > cat Bonjour.txt bonjour # attention, il vous faudra sans doute changer le nom du dossier en :/home/etud/licpro/votreLogin @ghchu07~/public_html|(~gH) > scp -P 4920 Bonjour.txt gh@devel.info.univ-angers.fr:/home/infoleria/gh/public_html/ Bonjour.txt 100% 8 3.1KB/s 00:00En particulier, vérifier que votre page pour le controle continu est accessible (elle pourra ne contenir que "Bonjour" par exemple).
Pour mémoire, le texte du CC et l'adresse de votre page pour ce controle est ici.
Vérifier que vous savez mettre une image avec la validation de votre page dans votre CV pour ce controle.
Si vous en avez marre de retaper votre mot de passe à chaque fois que vous effectuez une commande ssh ou scp, vous pouvez utiliser les commandes ssh-keygen et ssh-copy-id.
ssh-keygen est à exécuter une seule fois. Si le système répond file [...]/.ssh/id_rsa already exists. cela signifie que vous (ou le système) vous a déjà généré des clés. Ce n'est pas la peine de recommencer, donc il faut répondre n à la demande d'Overwrite.
La commande ssh-copy-id est à utiliser une seule fois pour chaque serveur sur lequel vous voulez vous connecter sans avoir à retaper votre mot de passe. La syntaxe est :
ssh-copy-id utilisateur@serveurC'est donc un peu comme une commande cp car cela recopie la partie publique de votre clé sur le serveur indiqué pour l'utilisateur indiqué. Cette commande vous demande bien sûr votre mot de passe sur le serveur de façon à y déposer la clé. Il est conseillé de tester immédiatement après la commande ssh user@server pour vérifier qu'on ne vous demande plus de mot de passe à la connexion. Attention : si la commande ssh requiert un numéro de port, il faut continuer à l'indiquer.
--- Pause (10 minutes).
Regarder comment on peut lire des fichiers en local et via des URL en PHP, en ligne de commandes et par page Web.
Regarder ensuite comment on peut écrire des fichiers en local en ligne de commandes et par page Web.
On pourra utiliser l'exercice 14 de la série tds#cours 5 avec ses solutions détaillées.
Lire enfin l'exercice decra TD4-2 afin de comprendre comment on peut utiliser les "nouvelles" fonctions PHP de lecture/écriture de fichiers.
S'il vous reste du temps, avancez sur votre CV pour le CC.
COURS/TD/TP 02 : PHP conceptuel et pages valides
Essayer de faire la question 1.2 de l'examen licpro2019_1 (le corrigé est en fin de document).
Avancer sur votre CV pour le CC. Commencer par la structure de la page sans les rubriques du CV.
Si votre serveur Apache local est fonctionnel et bien configuré (php activé, xdebug installé, répertoires personnels autorisés en exécution...), vous n'avez qu'à utiliser deux fenêtres : une fenêtre d'édition avec votre éditeur favori dans laquelle vous modifiez votre fichier cv_index.php et une fenêtre de visualisation avec votre navigateur favori dans laquelle vous affichez la page http://localhost/~votreLogin/cv_index.php. Il faut bien sûr ne pas oublier de sauvegarder le code avant d'actualiser la page dans le navigateur.
Si votre serveur Apache local n'est pas fonctionnel ou mal configuré il faut passer par une étape intermédiaire de redirection de sortie. Il vous faut alors trois fenêtres :
une fenêtre d'édition avec votre éditeur favori dans laquelle vous modifiez votre fichier cv_index.php ;
une fenêtre avec un terminal dans laquelle vous exécutez votre fichier cv_index.php :
# (une seule fois) cd ~/public_html # on exécute le cv pour voir s'il n'y a pas d'erreur php cv_index.php # si c'est OK, on redirige vers un fichier HTML php cv_index.php > cv_index.htmlune fenêtre de visualisation avec votre navigateur favori dans laquelle vous affichez la page cv_index.html.
Vérifier que votre CV pour le CC est lisible sur devel.info.univ-angers.fr à l'adresse indiquée.
Continuer sur votre CV pour le CC en ajoutant les boutons de validation HTML, CSS et le lien pour le zip. Ne pas essayer de mettre de bouton pour l'affichage du PDF.
Vérifier que ces boutons et le lien pour l'archive sont fonctionnels sur devel.info.univ-angers.fr.
Continuer sur le CV pour le CC avec l'ajout des rubriques du CV.
COURS/TD/TP 03 : MySQL et PHP à distance
Lire le tuteur MySQL sans faire les exercices en fin de tuteur.
--- Pause (10 minutes).
Faire les exercices corrigés de ce tuteur.
Vous utiliserez la page executeMysql pour tester vos requêtes.
COURS/TD/TP 04 : MySQL et PHP en local et sur serveur personnel
Vérifier que vous avez accès à MySQL en ligne de commandes en tant qu'administrateur et en tant qu'anonyme.
Pour créer un utilisateur anonymous avec un mot de psse éponyme et les bons droits, vous pouvez utiliser le code MySQL suivant :
CREATE USER 'anonymous'@'localhost' ; SET PASSWORD FOR 'anonymous'@'localhost' = PASSWORD('anonymous') ; GRANT SELECT ON statdata.* TO 'anonymous'@'localhost' ;Ecrire un script nommé sql pour la ligne de commandes qui exécute "bien" du code MySQL en tant qu'anonyme.
Installer et tester phpMyAdmin dont l'adresse est en local http://localhost/phpmyadmin/.
Créer sur votre ordinateur la base de données statdata et y générer les 9 tables des 5 exercices du tuteur à l'aide de l'archive mysql_tables_cr.zip.
Tester dans une session MySQL puis par script en ligne de commandes les solutions pour l'exercice 1 du tuteur MySQL (table titanic). Vérifier que vous maitrisez la redirection des entrées et des sorties pour le script sql en ligne de commandes.
--- Pause (10 minutes).
Faire l'exercice 7 de la série tds#cours 6. Pourquoi la solution combienPhp7 qui correspond exactement à l'énoncé n'est pas satisfaisante ?
Essayer de reproduire en local la page executeMysql dont le code source est ici.
Seriez-vous capable d'expliquer comment fonctionnent les pages quizz1, quizz2 et fa pour les réimplémenter en PHP 7 ?
COURS/TD/TP 05 : PHP et GD pour les images TP LONG (début)
Lire la page jphistopct et essayer de produire un histogramme pour les informations 30 hommes et 20 femmes avec le titre Rapport homme/femme en modifiant directement l'URL fournie.
Faire l'exercice 16 de la série tds#cours 6. On utilisera la version de jphistopct sur forge pour générer les images.
Le rendu demandé dans une page Web est ici.
Essayer de reproduire en local la page jphistopct dont le code source est ici après avoir téléchargé jpgraph-4.3.4.tar.gz et installé le module gd pour PHP 7 (sans oublier de relancer le serveur Apache). Refaire l'exercice 16 de la série tds#cours 6. qui utilise la version jphistopct locale que vous venez d'installer.
--- Pause (10 minutes).
Lire soigneusement le document tplong.pdf et essayer d'avancer le plus possible dans la réalisation de ce T.P.
COURS/TD/TP 06 : TP LONG (suite et fin) ; examens passés
Terminer d'implémenter en PHP 7 l'application liée au document tplong.pdf sachant que la solution pour PHP 5 est fournie dans l'archive tplongprogs.zip et que les différentes actions sont testables dans la page gestion.
--- Pause (10 minutes).
Essayer de répondre aux questions de l'examen (corrigé) licpro2020_1.
Un exemple d'appplication pour la section 5 se nomme trombiOrchestre dont le code source est ici.
Attention : la génération du PDF en mode paysage est parfois un peu lente (de l'ordre de 15 secondes).
Le code source pour l'impression est là.
Retour à la page principale de
(gH)