L'objectif de cette activité est de comprendre comment s'organisent les interactions entre plusieurs pages et comment cela se traduit au niveau du codage en python.
Trois autres notions seront introduites :
- l'utilisation d'une variable,
- l'utilisation d'un style sur identifiant de balise,
- le positionnement d'une image.
1- Créer les dossiers et fichiers
a- Créer l'arborescence des dossiers de l'exercice
L'exercice comprend deux pages web, une feuille de style style.css, une image et le fichier python exercice2.py requis pour le lancement du site web :
En premier lieu, créer le dossier exercice2 à l'intérieur du dossier projets_Flask ainsi que les dossiers static, css, images, templates en respectant la hiérarchie ci-dessus.
b- Créer la feuille de style
- Dans Edupython, créer un nouveau script et copier/coller le code suivant :
p {
color : black ;
text-align : left;
}
h1 {
color : green ;
text-align : center;
font-size : 18px;
font-style : italic;
}
#coul1 {
color : blue;
}- Sauvegarder sous ce fichier dans le dossier css avec comme nom de fichier style.css - veiller à mettre l'extension .css
c- Placer une image dans le dossier images
Télécharger l'image suivante logo-site.png et l'enregistrer dans le dossier images.
Cette image sera utilisée à la fin de cette activité.
d- Créer la page d'accueil html
- Dans Edupython, créer un nouveau script et copier/coller le code suivant :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel ="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<h1>Accueil de l'exercice 2</h1>
<p>Vous êtes le bienvenu</p>
<p>Voici un hyperlien : <a href="{{ url_for('page_2') }}">Vers la page 2</a></p>
</body>
</html>
- Sauvegarder sous ce fichier dans le dossier templates avec comme nom de fichier index.html - veiller à mettre l'extension .html
e- Créer la deuxième page html
- Dans Edupython, créer un nouveau script et copier/coller le code suivant :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel ="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<h1 > Vous êtes sur la deuxième page </h1>
<p>Voici un exemple d'affichage d'une variable : {{message}}</p>
<p>Le même message en bleu en utilisant du css sur id : <span id="coul1">{{message}}</span></p>
</body>
</html>- Sauvegarder sous ce fichier dans le dossier templates avec comme nom de fichier page2.html - veiller à mettre l'extension .html
f- Créer le fichier python de lancement du site web
- Dans Edupython, créer un nouveau script et copier/coller le code suivant :
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def accueil():
return render_template("index.html")
@app.route("/pageDeux")
def page_2():
return render_template("page2.html", message="vous venez de cliquer sur le lien de la page2")
app.run(debug=True)- Sauvegarder sous ce fichier dans le dossier exercice2 avec comme nom de fichier exercice2.py - veiller à mettre l'extension .py
2- Analyser le fonctionnement
Dans Edupython lancer l'exécution du fichier exercice2.py
Dans votre navigateur saisir l'adresse localhost:5000 afin de visualiser la page d'accueil et tester le fonctionnement du lien hypertexte.
2-1 Analyser les liens entre les pages
Compléter le schéma suivant afin de mettre en évidence les différents liens entre les fichiers.
Repérer en premier le nom des fichiers (n'est affiché que le corps des pages html), puis indiquer le type de chaque lien.
2-2 Analyser un style sur id
L'utilisation d'un style sur un identifiant permet de définir un style particulier sur une balise précise.
Les balises <span> ou <div> sont deux balises couramment utilisées.
Elles se comportent comme des calques pour lesquels il est possible de gérer de nombreuses propriétés comme la position.
2-2 Analyser l'utilisation d'une variable
La page web qui sera envoyée au client, est construite par la fonction python render_template( ).
La valeur de la variable message sera alors incorporée dans le fichier html.
3- Améliorer les pages
a- Ajouter une image
- On souhaite ajouter l'image logo-site.png sur la page d'accueil.
Ajouter la ligne de code dans le fichier index.html avec l'écriture conforme à Flask en vous inspirant de :
- la ligne qui appelle le fichier css :
<link rel ="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
- et de l'instruction classique de l'appel d'un fichier image :
<img src="/images/logo-site.png" alt="logo site">
- On souhaite que l'image soit affichée en haut à droite de la page :
- Insérer le code de l'image dans une balise <div id="img-logo"> ... </div>
- Ajouter le style css img-logo pour gérer cet alignement (10 pixels du bord haut et 20 pixels du bord droit) et obtenir le rendu suivant :
b- Ajouter un lien
Il manque un lien pour revenir à la première page à partir de la page2.
Compléter la ligne de code html pour revenir à la première page :
- déplacer le sélecteur d'adresse à utiliser pour un lien hypertexte
- compléter l'adresse à utiliser
Implémenter ce lien et tester le.