Table des matières

Projet ISN 2018 : Bullet journal

Projet Web utilisant :

fichier de l'application web app.py

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)

Fichiers 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>
  • 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>