Partie 0 : Travailler en ligne …. ou pas
L'interface permet de faire pas mal de choses directement en ligne (édition, modification, copie ..) En fonctions des convenances, il est sera plus simple pour certains de travailler sur leur poste.
Il est assez simple de télécharger les fichiers sur son ordinateur, puis de les uploader sur le serveur . Il faut juste être rigoureux, mais tous le début du projet peut se faire sur un poste, seule la troisième partie devra se faire en ligne (échange de données avec les formulaires).
On peur également en profiter pour faire des sauvegardes de son travail.
Voici un exemple complet pour récupérer l'ensemble du site (a faire en début d'heure par exemple, ou chez vous pour commencer)
1 2
Choisir OK
Un ficher de ce type est généré
Cliquer dessus et choisir télécharger
Sur votre ordinateur,
bouton doit extraire ici
Un dossier est créé
Dans ce dossier , on retrouve
et à l'intérieur, tout le site :
On peut entrer dans les dossiers, éditer les fichiers.
En suite, deux méthodes pour uploader les modifications sur le site , on upload l'ensemble l'ensemble du site, ou juste les fichiers modifiés.
Uploader l'ensemble du site (plutôt déconseillé sauf en cas de nombreux fichiers modifiés).
il faut se placer au niveau du répertoire contenant le site .
De retour sur l'espace de publication , bien cliquer sur la maison pour être sur d'être à la racine de votre espace personnel
choisir , fair eclisser l'archive dans la zone d'upload (ou cliquer sur la zone puis sélectionner le fichier ) Quand c'est fait, cliquer sur retour, cliquer sur l'archive que vous venez d'uploader :
et choisir
surtout pas décompresser dans un dossier
et voila
Uploader fichier par fichier
Quand on ne modifie que quelques fichiers, il est plus simple et efficace d'uploader fichier par fichier :
Il faut se situer dans le gestionnaire de fichier en ligne dans le répertoire ou se situe le fichier à uploader. Par exemple si j'ai modifié le fichier index.html, je dois me situer à la racine du répertoire jbk.
Supprimer le fichier index.html dans l'espace distant , puis uploader le fichier index.html présent sur mon poste.
Quand on travaille ainsi, on a plus de confort, surtout pour les scripts python.
pPar contre il faut penser à nettoyer régulièrement l'espace distant , par exemple ici,
les deux fichiers zip ne servent plus à rien le fichier index.html~ est une sauvegarde , il faut également le supprimer
partie II Le projet JukeBox → le web
La partie web du projet :
Cette partie peut se faire intégralement sans problèmes depuis l'interface en ligne , l'avantage des pages html, c'est que "les erreurs de codes", n'empêchent pas la lecture des pages.
On est pas sur du langage de programmation, mais sur du langage balisé ! Cette partie fait suite au document intitulé Le projet JukeBox, Bilan partie I.
Quelques idées , libre à vous de personnaliser / modifier ces propositions On décide faire un site du trois pages, avec :
• une page d'accueil: index.html
• une page pour le JukeBox : jbk.html
• une page pour un éventuel jeu de quizz : quizz.html
Pour gagner du temps , à défaut d'être original, on utilise les feuilles des styles
bootstrap ,normalement déjà incluse dans la page index.html si vous avez suivi le premier document.
(<link href="https://pbellevue.libreedu.ovh/dev/system/components/bootstrap/
css/bootstrap.min.css" rel="stylesheet">)
à la fin de votre code html, il doit également y avoir avant </html>
On y ajoute une touche personnelle pour nos propres javascripts :
• penser à créer un fichier ./js/script.js
• y écrire par exemple
Ce programme ne fait rien que d'attendre qua la page soit chargée, on en reparlera plus tard.
Avant de copier la page index.html en jbk.html et quizz.html, nous allons ajouter un petit menu https://getbootstrap.com/docs/4.1/examples/
Plusieurs modèles sont proposés , par exemple pour placer une barre de navigation fixe ne haut de la page https://getbootstrap.com/docs/4.1/examples/navbar-fixed/.
On affiche le code source de cette page, on colle le contenu des balises entre les balises body de notre page .
Copier / coller c'est bien beau, mais il faut quand même réfléchir, il faudra en plus :
• déplacer les balises main et div du jumbotron
• placer la balises met viewport dans le head
de div (du jumbotron)
il faut aussi ajouter la ligne viewport dans le head du document.
On obtient un visuel de ce type , un mélange de notre page de départ et du modèle bootstrap
On peut décaler la partie grise vers le bas pour laisser de l'espace sous la barre de titre, on repère la ligne ci-dessous dans le code
On modifie ainsi notre feuille de style
La page d'accueil devient : (penser à faire CTRL + F5) espace libre ( padding )
Attention, toutes les contenus sont des exemples, il faut faire quelques modifications , par exemple le nom du site peut apparaître ici
Le code
devient par exemple
On obtient le visuel
Dernier détail , les liens , home doit pointer vers index.html, JukeBox vers jbk.html, et jeu vers quizz.html. Il faut bien regarder le code, et l'adapter ...
On va pouvoir maintenant copier puis personnaliser chaque page en utilisant les outils proposés en ligne :
recommencer pour créer la page jbk.html
Partie III Le jukeBox : les scripts python
Le HTML 5 + CSS pour présenter les données et préparer l'interface utilisateur (IHM), c'est parfait.
Pour traiter les données stockées sur le serveur, il faudra utiliser un langage de programmation installé sur le serveur , dans notre cas : du python.
Pour commencer cette partie à égalité . Nous allons privilégier le travail en local (sur notre poste de travail). Il conviendra ensuite d'ajouter les lignes propres aux fichiers cgi.
On part de l'archive téléchargeable ici : https://libreedu.ovh/cgi_data.zip On décompresse l'archive et on vérifie que tout est OK :
Le dossier décompressé s'appelle cgi_data, et il contient deux dossiers
On entre dans le dossier cgi, puis bouton droit ouvrir avec sur le fichier fonctions.py et l'exécuter pour vérifier que tout est bon.
Le principe d'un script cgi par rapport à un programme classique en python , c'est qu'if faut soigner l'affichage (les print) qui sera une réelle voie de communication entre votre application web et le serveur .
Le fichier fonctions.py sera notre librairie, c'est à dire qu'il contiendra des fonctions que nous appellerons depuis un autre fichier .
Q1) Pour nous approcher du fonctionnement final de notre application web , nous allons créer un nouveau fichier nommé ressources.py a côté de fonctions.py
contenant uniquement les lignes :
#!/usr/bin/python3
# -*- coding: UTF-8 -*-
from fonctions import *
Quand on l'exécute, on obtient la même sortie que quand on exécute fonctions.py (c'est lié à l'import).
Q2) Supprimer du fichier fonctions.py tous les print et tous les appels aux fonctions ( Le fichier fonctions.py ne doit contenir que des fonctions!)
Q3) Ajouter une fonction from_file_to_liste qui prenne comme argument UnFichier (le chemin vers un fichier ) et retourne une liste nommées lines (on utilisera file = open(Unfichier,
"r",encoding="utf-8") lines = file.readlines() file.close() )
Q4) Ajouter une fonction load_Artistes qui prennent argument une liste (de lignes : lesmorceaux) et retourne une liste d'artistes sans doublons L_A.
Q5) Quand c'est fait, modifier le fichier ressources.py, pour qu'il exécute des instructions à la demande.
la commande
print(load_Artistes(from_file_to_liste("../data/listeok.csv"))) doit permettre d'afficher tous les artistes.
Au programme de NSI :
Les dictionnaires , les tableaux (contenant des éléments du même type ) et le traitement des données en table (Il s’agit d’utiliser une liste de p-uplets dans un langage de programmation ordinaire pour introduire la notion de base de données qui sera vue en terminale)
La demande que nous allons faire au fichier ressources.py se fera sous la forme d'un dictionnaire . Par exemple pour afficher les artistes ligne par ligne :
{'action':'show_un_artiste_pl','fichier':'./data/listeok.csv'}
qui est une structure de dictionnaire , on peut accéder aux données par les indices On modifie le fichier ressources.py pour pouvoir lui passer des commandes :
#!/usr/bin/python3
# -*- coding: UTF-8 -*-
from fonctions import *
choix = eval(input("Entrer un choix")) print(choix.keys())
for key, val in choix.items():
print(key, val)
Tester, puis modifier pour obtenir le comportement suivant
{'action':'show_un_artiste_pl','fichier':'./data/listeok.csv'} doit retourner un artiste par ligne {'action':'show_un_artiste_html','fichier':'./data/listeok.csv'} doit retourner un artiste par ligne entourer des balises "<option value='index'> artiste </option>" index est la position de l'artiste dans la liste.
from collections import namedtuple
ExtraitMusical = namedtuple('Extrait',['groupe','album','titre','chemin'])
voir https://www.tutorialspoint.com/namedtuple-in-python
