Gestion de post-it en HTML5 / css / Jquery, avec api localstorage HTML5

Mehdi Nedjar

il y a 12 ans

Table des matières

Toggle

Avec lэarrivée imminente de HTML5 et ces nouvelles API nous pouvons faire beaucoup plus de chose sans avoir une base de données, ou même du code dynamique côté serveur (PHP par exemple).

C’était par exemple le sujet du mini-projet des étudiants en première année à SUPINFO Valenciennes que j’ai formés, faire un site de type « TODO List ».

Le sujet était assez intéressant, il mêlait à la fois de la simple mise en forme, avec le post-it en CSS/HTML que nous avions vu en cours mais aussi le faite de pouvoir rajouter ou supprimer dinamiquement des post-it avec du Jquery.

Le plus compliqué étant la partie de devoir sauvegarder / restituer les post-it sans utiliser de base de données et donc en utilisant l’api HTML5 nommée Localstorage car cette fois si nous ne l’avions pas vue en cours il fallait donc utiliser la documentation fournie.

Voici donc une démarche a suivre si vous voulez vous aussi le réaliser.

Première partie : Création de la base HTML

Avant toutes choses, il faut déjà avoir un visuel de comment nous voyons notre futur site afin de ne pas avoir à refaire du code et surtout de ne pas perdre du temps sur le codage des fonctions plus tard.

Voici un schéma représentant notre futur site :

En général, lorsque l’on débute le CSS/ HTML, les gens se retrouve un peu perdus sur comment faire la mise en forme, c’est pourquoi je préconise toujours de faire des schémaq détailler afin d’avoir une bonne vue de l’architecture future du site.

Ceci fait nous pouvons nous attaquer à la partie codage de la base,pour rappelle nous voulons faire le site en HTML5 /CSS.

Une fois notre base faite nous allons faire la structure d’un post-it ainsi que son contenu, pour cela rien de plus simple, avec notre schéma nous pouvons voir qu’il nous faut 3 blocs contenant et un bloc général ce qui nous donne donc :

[html]<!DOCTYPE html>
<html>
<head>
<title>Mon site TODO List</title>
</head>
<body>
<header>
<h1>Mon TODO List</h1>
</header>
<nav>
<ul>
<li><a href="#">Ajouter un Todo</a></li>
</ul>
</nav>
<div>
<section>
<div class="post-it">
<div class="titre">mon titre</div>
<div class="contenue">mon contenue</div>
<div class="date">le 12/12/12</div>
</div>
</section>
</div>
<footer>
Créer par Anthony Dubuissez
</footer>
</body>
</html>
[/html]

Pour récapituler : Une div générale contenant elle-même 3 autres div avec les différents contenus.

Partie deux : Mise en forme avec du CSS

Maintenant que nous avons notre base, nous allons faire le style css afin d’avoir quelque chose qui ressemble à un post-it avec du contenu, pour cela j’ai pris une image de post-it :

Afin de pouvoir mettre du css nous allons tous simplement rajouter la balise <link href= »style.css » rel= »stylesheet »> dans notre code HTML, plus présicement dans notre <head></head>

[html] <head>
<title>Mon site TODO List</title>
<link href="style.css" rel="stylesheet">
</head>
[/html]

passons maintenant au codage du style :

[css].post-it {
background-image: url("post-it.jpg");
height: 300px;
width: 300px;
float: left;
}
.titre {
margin-top: 60px;
margin-left: 60px;
font-weight: bold;
font-size: 20px;
text-align: center;
height: 25px;
width: 180px;
}
.contenue {
margin-left: 60px;
margin-top: 30px;
height: 100px;
width: 180px;
}
.date {
margin-left: 60px;
margin-top: 20px;
text-align: center;
height: 30px;
width: 180px;
}
[/css]

ce qui nous donne donc :

Ou si l’on duplique notre code HTML pour afficher plusieurs post-it :

Partie trois : Ajout d’un Todo via un formulaire sur la même page.

Dans leur sujet il était demandé que l’ajout d’un nouveau post-it ce fasse avec une popup javascript interne, donc une « modal form »

pour cela rien de plus simple avec jquery & jqueryUI

-ajout des scripts dans l’entête HTML

[html] <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.button.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script>
<script src="http://jqueryui.com/ui/jquery.effects.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link href="style.css" rel="stylesheet">[/html]

-ajout du formulaire html

[html] <form>
<fieldset>
<label for="todo">Todo Name :</label>
<input type="text" name="todo" id="todo" class="text ui-widget-content ui-corner-all" /><br /><br />
<label for="description">Description :</label>
<textarea name="description" id="description" cols="26" rows="5"></textarea><br />
<label for="datepicker">Dead Line :</label>
<input type="text" name="date" id="datepicker" value="" class="text ui-widget-content ui-corner-all" /><br />
<input type="reset" value="Reset values" />
</fieldset>
</form>
[/html]

ce qui nous donne donc ce fichier HTML :

[html]<!DOCTYPE html>
<html>
<head>
<title>Mon site TODO List</title>
<meta charset="windows-1252" >
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.button.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script> <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Mon TODO List</h1>
</header>
<nav>
<ul>
<li><a href="#">Ajouter un Todo</a></li>
</ul>
</nav>
<div>
<section>
<div class="post-it">
<div class="titre">mon titre</div>
<div class="contenue">mon contenue</div>
<div class="date">le 12/12/12</div>
</div>
</section>
</div>
<div id="dialog-form" title="Create new todo">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="todo">Todo Name :</label>
<input type="text" name="todo" id="todo" class="text ui-widget-content ui-corner-all" /><br /><br />
<label for="description">Description :</label>
<textarea name="description" id="description" cols="26" rows="5"></textarea><br />
<label for="datepicker">Dead Line :</label>
<input type="text" name="date" id="datepicker" value="" class="text ui-widget-content ui-corner-all" /><br />
<input type="reset" value="Reset values" />
</fieldset>
</form>
</div>
<footer&gt
Créer par Anthony Dubuissez
</footer>
</body>
</html>[/html]

ainsi qu’un fichier css :

Afin de pouvoir interagir avec notre futur code javascript nous allons remplacer notre lien de création par un bouton :

[html]<button id="create-PostIt">Add a Todo</button>[/html]

Une fois la partie HTML / CSS presque terminer nous allons maintenant nous occuper du code de la « modal form »

[javascript]<script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add a todo": function() {
if($( "#todo" ).val() != "" && $( "#description").val() != "" & $( "#datepicker").val() != "" )
{
$( "section" ).append( ‘<div class="post-it">’ +
‘ <div class="titre">’ + $( "#todo" ).val() +’</div>’ +
‘<div class="contenue">’ + $( "#description").val() + ‘</div>’ +
‘ <div class="date">’+ $( "#datepicker").val() + ‘</div>’ +
‘</div>’ );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-PostIt" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
$(function() {
$( "#datepicker" ).datepicker({dateFormat:’dd-mm-yy’});
});
});
</script>
[/javascript]

Vous êtes perdu ?
voici une petite explication du code :
Grâce au différent paramètre donner par Jquery l’on peut modifier et faire une pseudo validation de notre formulaire, globalement tout notre code d’ajout d’un post it ce fait ici :

[javascript]<br />
if($( "#todo" ).val() != "" && $( "#description").val() != "" & $( "#datepicker").val() != "" )
{
$( "section" ).append( ‘<div class="post-it">’ +
‘ <div class="titre">’ + $( "#todo" ).val() +’</div>’ +
‘<div class="contenue">’ + $( "#description").val() + ‘</div>’ +
‘ <div class="date">’+ $( "#datepicker").val() + ‘</div>’ +
‘</div>’ );
$( this ).dialog( "close" );
}
[/javascript]

Si nous avons quelque chose d’écrit dans nos champs, Todo, description et datepicker alors nous ajoutons un nouveau bloc de post-it avec les valeurs données.I ne nous reste plus qu’à faire une autre fonction pour supprimé un post-it avant de s’attaquer à notre dernière partie : le localStorage

Rajout d’une image de croix pour la suppression :

css

[css].croix {
background-image: url(‘croix.jpg’);
width:13px;
height:13px;
float: right;
margin-right: 30px;
margin-top: 35px;
}[/css]

rajout de la div pour la croix dans le javascript :

[javascript]$( "section" ).append( ‘<div class="post-it">’ +
‘<div class="croix"></div>’ +
‘ <div class="titre">’ + $( "#todo" ).val() +’</div>’ +
‘<div class="contenue">’ + $( "#description").val() + ‘</div>’ +
‘ <div class="date">’+ $( "#datepicker").val() + ‘</div>’ +
‘</div>’ );
[/javascript]

Bien sur, on ne veut que l’image ne s’affiche que lorsque l’on est sur un post-it :

[javascript] function addCroix() {
$(‘.croix’).each(function(){
$(this).css(‘opacity’, 0);
$(this).css(‘display’, ‘block’);
});
$(‘.post-it’).hover(function(){
$(this).children(‘.croix’).stop().fadeTo(500, 0.7);
},function(){
$(this).children(‘.croix’).stop().fadeTo(500, 0);
});
$(‘.croix’).click(function() { if(confirm(‘Voulez vous supprimer ce todo ?’)){ $(this).parent().remove(); }
[/javascript]

puis rajouter la fonction dans la fonction qui génére le post-it :

[javascript] if($( "#todo" ).val() != "" && $( "#description").val() != "" & $( "#datepicker").val() != "" )
{
$( "section" ).append( ‘<div class="post-it">’ +
‘ <div class="titre">’ + $( "#todo" ).val() +’</div>’ +
‘<div class="contenue">’ + $( "#description").val() + ‘</div>’ +
‘ <div class="date">’+ $( "#datepicker").val() + ‘</div>’ +
‘</div>’ );
addCroix();
$( this ).dialog( "close" );
}
[/javascript]

À ce point là nous avons donc un système d’ajout suppression de post-it fonctionelle, seulement voila vous rafraichissez votre page et pouf ! plus aucun post-it, c’est là que rentre en jeu la nouvelle api HTML5 le localStorage

Partie quatre : Ajout du Localstorage

Le localstorage va nous permettre d’utiliser la « base de données » de votre navigateur pour y stocker des informations de la même manière que les cookies.
Rajout d’une fonction pour générer un id qui n’est pas encore prit :

[javascript] function postIdNum(){
var id = 0;
while(localStorage.getItem(‘postit’+id) != null)
{
id++;
}
return id;
}
[/javascript]

Pour le rajout de la sauvegarde des post-it dans le localstorage nous allons modifier notre fonction qui permet d’ajouter le code HTML:

[javascript] if($( "#todo" ).val() != "" && $( "#description").val() != "" & $( "#datepicker").val() != "" )
{
var id = postIdNum() ;
$( "section" ).append( ‘<div id="’+id +’" class="post-it">’ +
‘<div class="croix"></div>’ +
‘ <div class="titre">’ + $( "#todo" ).val() +’</div>’ +
‘<div class="contenue">’ + $( "#description").val() + ‘</div>’ +
‘ <div class="date">’+ $( "#datepicker").val() + ‘</div>’ +
‘</div>’ );
addCroix();
localStorage.setItem(‘postit’+id, id);
localStorage.setItem(‘titre’+id, $( "#todo" ).val());
localStorage.setItem(‘descr’+id, $( "#description").val());
localStorage.setItem(‘date’+id, $( "#datepicker").val());
$( this ).dialog( "close" );
[/javascript]

Note : j’ai rajouté un id à notre div post-it afin de pouvoir retrouver / supprimer plus tard.
Il ne nous reste donc plus qu’a faire notre bind sur la suppression avec le localstorage, seulement voila comme nos post-it sont crées dynamiquement après le chargement de la page il est assez difficile de les manipuler, c’est pourquoi je vais utiliser un plugin de jquery nommée « livequery » qui va me permettre de binder une action click même si il n’y a pas encore d’attribut de créer : HTML :

[html]<script src="jquery.livequery.js"></script>[/html]

refactorisation de la fonction addcroix() :

Rajout de la fonction de suppression avec livequery :

[javascript] $(document).ready(function(){
addCroix();
$(".croix").livequery(‘click’, (function(){
if(confirm("Voulez vous supprimer ce ToDo ?")){
var id = $(this).parent().attr("id");
suppresionTodo(id);
$(this).parent().remove();
}
}));
});
[/javascript]

Rajout de la fonction suppresionTodo :

[javascript]function suppresionTodo(id)
{
localStorage.removeItem("postit"+id);
localStorage.removeItem("titre"+id);
localStorage.removeItem("descr"+id);
localStorage.removeItem("date"+id);
}[/javascript]

et enfin rajout de la fonction qui va nous permettre de mettre les post-it déjà créer l’ors du rechargement de la page :

[javascript] function getAllTodo()
{
for(item in localStorage){
if(item.substr(0,6) == "postit"){
var id = 0;
id = localStorage.getItem(item);
$( "section" ).append( ‘<div id="’+id +’" class="post-it">’ +
‘<div class="croix"></div>’ +
‘ <div class="titre">’ + localStorage.getItem(‘titre’+id) +’</div>’ +
‘<div class="contenue">’ + localStorage.getItem(‘descr’+id) + ‘</div>’ +
‘ <div class="date">’+ localStorage.getItem(‘date’+id) + ‘</div>’ +
‘</div>’ );
}
}
}
[/javascript]

il suffit de rajouter la fonction getAllTodo() dans notre $(document).ready et le tour est jouer :).

Voici l’adresse github ou vous retrouverez le projet complet valide HTML5 et CSS :
https://github.com/JustEra/TodoList-
Feel free to fork / Comment !