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>
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>
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>
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>
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;
}
fichier leonie.txt
[
    {
        "id": 1,
        "libelle": "Lire",
        "accomplie": true
    },
    {
        "id": 2,
        "libelle": "Aller en cours",
        "accomplie": false
    },
    {
        "id": 3,
        "libelle": "RDV dentiste",
        "accomplie": false
    }
]