Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Projet ISN 2018 : Bullet journal ======
Projet Web utilisant :
  * python avec le framework Flask
  * page HTMl
  * framework Boostrap pour les styles CS

==== fichier de l'application web app.py ====
<code python file app.py>
#! /usr/bin/python
# -*- coding:utf-8 -*-
import json 
from flask import Flask, render_template, request, redirect, url_for, session
app = Flask(__name__)
 
username = 'nina'
password = 'ninaetleo'
	 
#taches : dictionnaire (tableau associatif) de tâches
taches=[]

#id : identifiant de la tache
id = 1
 
@app.route('/')
def accueil():
  if not session.get('authentifie'):
    return render_template('login.html')
  else :
    #lire le fichier
    lire()
    return render_template('accueil.html', message = session['username'])
  #sauver()
  #print(taches)
  return render_template('accueil.html') 
  
@app.route('/login', methods=['POST'])
def login():
    # vérification du compte et du mot de passe
    if request.form['username'] == username and request.form['password'] == password:
       session['authentifie'] = True
       session['username'] = username
    else:
       return render_template('login.html', message = "Erreur de compte ou de mot de passe !")
    return redirect(url_for('accueil'))
 
@app.route("/logout")
def logout():
    # deconnexion
    session['authentifie'] = False
    return redirect(url_for('accueil'))
  
@app.route('/page2')
def page2():
  return render_template('page2.html') 
  
@app.route('/page3')
def page3():
  global taches
  # fournir au template index.html le tableau taches accomplie et non accomplie
  accomplies = []
  nonaccomplies = []
  for tache in taches:
    if tache["accomplie"] == False:
      nonaccomplies.append(tache)
    else:
      accomplies.append(tache)
  return render_template('page3.html', accomplies=accomplies, nonaccomplies=nonaccomplies)

@app.route('/toto')
def index():
  global taches
  # fournir au template index.html le tableau taches accomplie et non accomplie
  accomplies = []
  nonaccomplies = []
  for tache in taches:
    if tache["accomplie"] == False:
      nonaccomplies.append(tache)
    else:
      accomplies.append(tache)
  return render_template('index.html', accomplies=accomplies, nonaccomplies=nonaccomplies)
 
@app.route('/ajout', methods=['POST'])
def ajout():
  # utiliser les variables globales taches et id
  global taches, id
  vartache = request.form['tache']
  taches.append({"id":id, "libelle":vartache, "accomplie":False})
  print("taches apres ajout {}".format(taches))
  
  # sauver le tableau
  sauver()
  #incrémenter id pour la prochaine tâche
  id = id + 1
  return redirect(url_for('page3'))
 
@app.route('/miseajour', methods=['POST'])
def miseajour():
  # utiliser les variables globales taches et id
  global taches, id
  varid = request.form['choix']
  print("varid : {}".format(varid))
  # mise à jour de la tâche
  for tache in taches:
    if tache["id"] == int(varid):
      tache["accomplie"] = True
  return redirect(url_for('page3'))
  
def sauver():
  global taches
  with open('leonie.txt', 'w') as fichier:
     fichier.write(json.dumps(taches, indent=4))
     print(taches)

def lire():
   global taches, id
   #with open(url_for('static', filename='leonie.txt'), "r") as fichier:
   with open('leonie.txt', 'r') as fichier:
      taches=json.load(fichier)
   print("taches contient {}".format(taches))
   id=len(taches)+1
  
if __name__ == '__main__':
    # il faut définir une clé secrete 
    app.secret_key = 'laclesecrete'
    app.run(debug=True, host='0.0.0.0', port=5005)
</code>

==== Fichiers HTML ====
  * page login.html
<code html fichier login.html>
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Projet Bullet'journal</title>
      <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id='haut'>
      <h2>NINA et LEO</h2>
      <p> Bienvenue <strong>les poulets/poulettes</strong>.</p>
      <img src="http://www.lyc-valadon.ac-limoges.fr/local/cache-vignettes/L250xH220/siteon0-e5814.png?1513160567" />
    </div> 
    <div class="container-fluid" >
      <h2 class="text-primary">Authentification</h2>
      <form action="/login" method="POST" >
        <div  style="margin:5px">
          <input type="text" name="username" placeholder="Nom de compte" class="form-control" />
        </div>
        <div style="margin:5px">
          <input type="password" name="password" placeholder="Mot de passe" class="form-control" />
        </div>
        <div style="margin:5px">
          <input type="submit" value="S'authentifier" class="btn btn-primary" />
        </div>
      </form>
      <div class="text-primary">{{message}}</div> 
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>
</code>

  * page accueil.html
<code html fichier accueil.html>
<!DOCTYPE html>
<html lang="fr">
  <head>
   <title>Projet Bullet'journal</title>
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
   <meta charset="UTF-8">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id='haut'>
      <h2>NINA et LEO</h2>
      <p> Bienvenue <strong>les poulets/poulettes</strong>. | <a href="/logout">Se déconnecter.</a></p>
      <img src="http://www.lyc-valadon.ac-limoges.fr/local/cache-vignettes/L250xH220/siteon0-e5814.png?1513160567" />
      <a href="{{ url_for('page2') }}" >Page suivante</a> 
    </div> 
    <div id='image'>
      <img src="{{ url_for('static', filename='images/carnet.png') }}">
    </div>
  </body>
</html>
</code>

  * page page2.html
<code html fichier page2.html>
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Projet Bullet'journal</title>
      <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id='haut'>
      <h2>NINA et LEO</h2>
      <p> Bienvenue <strong>les poulets/poulettes</strong>. | <a href="/logout">Se déconnecter.</a></p>
      <img src="http://www.lyc-valadon.ac-limoges.fr/local/cache-vignettes/L250xH220/siteon0-e5814.png?1513160567" />
      <a href="{{ url_for('accueil') }}">Page précédente</a> | 
      <a href="{{ url_for('page3') }}" >Page suivante</a>
    </div> 
    <div class="container-fluid" >
      <div class="row">
        <div id='agendaG' class="col-sm-6")>
          <iframe src="https://calendar.google.com/calendar/embed?src=fr.french%23holiday%40group.v.calendar.google.com&ctz=Europe%2FParis" style="border: 0" width="400" height="300" frameborder="0" scrolling="no"></iframe>
        </div> 
        <div  id='agendaD' class="col-sm-6">
        </div>
      </div>
    </div>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>
</code>


  * page page3.html
<code html fichier page3.html>
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Projet Bullet'journal</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id='haut'>
      <h2>NINA et LEO</h2>
      <p> Bienvenue <strong>les poulets/poulettes</strong>. | <a href="/logout">Se déconnecter.</a></p>
      <img src="http://www.lyc-valadon.ac-limoges.fr/local/cache-vignettes/L250xH220/siteon0-e5814.png?1513160567" />
      <a href="{{ url_for('page2') }}">Page precedente</a>
    </div> 
    <div id='agenda'>
      <div id="todo">
        <div>
          <h1>Todo liste</h1>
          Ajouter une nouvelle tâche : 
          <form action="/ajout" method="POST">
            <input type="text" name="tache">
            <input type="submit" value="Enregistrer">
          </form>
        </div>
        <div>
          <h2>Tâches non accomplies</h2> 
          <form action="/miseajour" method="POST">	
            <ul>
           {% for tache in nonaccomplies %}
              <li><input type="checkbox" name="choix" value="{{tache.id}}">{{tache.libelle}}</li>
           {% endfor %}
            </ul>
            <input type="submit" value="Mettre à jour">
          </form> 
        </div>
        <div>
          <h2>Tâches accomplies</h2>
          <ul>
          {% for tache in accomplies %}
             <li>{{tache.libelle}}</li>
          {% endfor %}
          </ul>
        </div>
      </div>
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     
  </body>	
</html>
</code>

  * fichier style.css
<code css fichier style.css>
body {
background-color: white;
color: white;
} 
	
#agenda{
  background-image:url("images/ouvert.jpg");
  background-repeat:no-repeat;
  background-size: cover;
}
#todo {
  #margin-left:20px;
  padding:70px;
}
#toto {
  padding:70px;
  background-image:url("images/ouvertG.jpg");
  background-repeat:no-repeat;
}

#agendaG {
  width:800px;
  padding:40px;
  background-image:url("images/ouvertG.jpg");
  background-repeat:no-repeat;
  background-size:cover;
}
#agendaD {
  padding:70px;
  background-image:url("images/ouvertD.jpg");
  background-repeat:no-repeat;
  background-size:cover;
}
</code>

  * fichier de données leonie.txt
<code json fichier leonie.txt>
[
    {
        "id": 1,
        "libelle": "Lire",
        "accomplie": true
    },
    {
        "id": 2,
        "libelle": "Aller en cours",
        "accomplie": false
    },
    {
        "id": 3,
        "libelle": "RDV dentiste",
        "accomplie": false
    }
]
</code>