Mots-clé : jqueryui

IUT alternants : projet Django / Python à rendre le 12 février minuit au plus tard

A rendre le dimanche 12 février 2023 minuit au plus tard


Projet individuel


Comment le rendre

Faites un fichier README.txt et déposez-le ici
Dans le fichier README.txt, précisez :

  • le sujet choisi
  • l’adresse de votre site
  • un nom d’utilisateur
  • un mot de passe
  • (et plusieurs nom/mot de passe, s’il y a plusieurs niveaux de droits (administrateur/visiteur etc.))
  • si vous avez utilisé des librairies spécifiques que je vous ai autorisées, merci de le re-préciser

Sujet

Ce que vous voulez tant que c’est dans le cadre de ce que l’on a vu. Vous avez tout le Web comme inspiration !
N’oubliez pas de me donner le nom et le mot de passe pour se connecter !
Si vous gérez des profils différents (admin / user ou autre), donnez moi les noms et mots de passe de différents profils !


Fonctionnalités obligatoires

  • Nouveaux modèles
  • Nouvelles relations à mettre en oeuvre : ForeignKey, ManyToMany, OneToOne
  • Au moins un formulaire
  • Connexion + déconnexion (vu en cours)
  • Visualisation de tout dans l’interface d’administration

Sujets possibles

  1. Site de partage de photos
  2. Site de cocktails (cf ci-dessus)
  3. e-rated : site d’appréciations (selon des sujets, à définir)
  4. Ask-a-question : site où l’on pose des questions sur des sujets divers, et des gens répondent
  5. Write-a-book-together : site où l’on se connecte et où on peut écrire un livre à plusieurs
  6. Wedding-couple-site : site où l’on uploade + partage des photos de mariage + livre de commandes
  7. Playing-cards-collection : site où on scanne + échange des cartes (Magic the gathering)
  8. Polls-and-surveys : site de création de sondages (= QCM, exemple très beau ici : quipoquiz)
  9. Poems-generator : faire un cadavre exquis qui génère des poèmes + possibilité pour les utilisateurs de les noter / d’ajouter des mots
  10. The-future-of-post-it : faire un carnet de choses à faire pour les utilisateurs, qui envoie des mails de rappels de ces choses à des dates données
  11. Gift-ideas : un site où l’on va faire des idées de cadeaux / suggérer des idées de cadeaux + les noter (les meilleurs ressortent en premier)
  12. Le-bon-recoin : refaire le bon coin en plus simple
  13. Suggest-crawlers : site de suggestions : on clique sur un mot, il en suggère plein d’autres avec + définitions / liens de sites pour chacuns
  14. Tv-fans : site de présentations + notes d’émissions télé
  15. Faire le jeu SokoBan vu en cours, avec la possibilité de login, enregistrement. Pour les appels JSON supplémentaires, lorsque l’utilisateur choisit un tableau, s’en souvenir (= AJAX) et lorsqu’il se reconnecte, le remettre directement. Puis enregistrer son score lorsqu’il a terminé un niveau + montrer les meilleurs scores.

Pour les sujets qui suivent, ils sont possibles mais plutôt complexes et demandent plus d’investissement. Si vous êtes motivés, demandez-moi plus d’informations, je vous expliquerai les difficultés que vous allez rencontrer.

  1. Turn-by-turn : faire un jeu multijoueurs en tour par tour (jeu de cartes, de poker, ou de plateau etc)
  2. Chat-with-someone : site de chat/discussion
  3. A-maze-ing : site où l’on peut se ballader dans un labyrinthe et essayer d’en trouver la sortie

Sujet imposé si vous n’avez pas d’idée

Cocktails : on se connecte, on a une liste d’éléments (récupérés en JSON) disponibles, on coche ceux qui nous intéressent, on valide, c’est envoyé, et le retour en JSON affiche les cocktails qu’il est possible de faire avec ce que l’on a coché.


Ce que vous devez rendre

Idéalement

Si vous n’avez pas le choix

Les fichiers source de votre projet


Pour favoriser votre organisation

Utilisez ce que l’on a vu en cours (Google boilerplate)


Librairies autorisées


React autorisé

Note pour ceux qui connaissent / font / du React : la librairie est autorisée, mais il me faut le code d’origine, et non pas le code minifié / de production.


Interdiction d’utiliser une librairie JavaScript qui ne vienne pas des sites autorisés précédemment


Retard

Après la date et heure limite

Passé ce délai ce sera 1 pt par 2 heures de retard (mon robot qui analyse les mails prend en compte la date de réception du mail, tout est fait automatiquement).
Pour ceux qui essaient vraiment d’aller jusqu’à la dernière minute, toute heure entamée est comptée comme une heure complète.
Exemple : un point en moins si je le reçois un jour après à la minute près, soit date limite plus 00:01 minute.

N’oubliez pas de me donner le nom et le mot de passe pour se connecter !


Copier-coller

  • Copie sur une autre personne (« je se savais pas comment implémenter telle ou telle fonctionnalité dont j’avais besoin pour aller plus loin, je l’ai copiée sur un autre ») :
    • si la personne est clairement nommée : note pour la fonctionnalité divisée par 2 (uniquement la moitié du travail a été faite) ;
    • 0 aux deux personnes sinon ;
  • Si je m’aperçois que vous avez bêtement copié collé des sources Internet, je vous convoquerai pour vous demander de m’expliquer la fonctionnalité, et :
    • si vous ne savez pas m’expliquer le code alors 0 ;
    • si vous savez m’expliquer tout le code alors votre note totale sera divisée par vous + le nombre de contributeurs à ce projet, ce qui se rapprochera certainement de 0 aussi.

Voici un exemple de ce que vous pouvez faire, si vous choisissez le projet cocktails.


PDFs

Python Django

Exemple : cocktails

Pour avoir la moyenne

Lorsqu’on vient sur le site :

  • Si on n’est pas connecté, afficher le formulaire de connexion
  • Si on est connecté :
    • Appel AJAX #1 : aller demander la liste des cocktails et l’afficher
    • Appel AJAX #2 : lorsqu’on clique sur un cocktail, aller chercher le détail de ce cocktail et l’afficher

Pour dépasser un peu la moyenne

  • Formulaire de connexion
  • Gestion des erreurs / avertissements de base (avertissement si mot de passe trop court, erreur si login existant etc)

Pour dépasser largement moyenne

Possibilité de créer des cocktails


Créer un ingrédient

Appel AJAX simple à faire, nous l’avons vu en cours : envoi d’un formulaire :


Créer une unité

Appel AJAX simple à faire, nous l’avons vu en cours : envoi d’un formulaire :


Créer un cocktail

Le seul appel AJAX complexe à faire, voici l’interface utilisateur, à vous d’écrire le code JavaScript qui va derrière :

Pour avoir la note maximale

  • Ecrire tout correctement, parfaitement indenté (tous les éditeurs modernes vous font l’indentation automatique, servez-vous en !)
  • Tout écrire sous forme de classe (dans le cas de ce projet Cocktails, classe Ingredient, classe Unite, etc)
  • Tout séparer dans des fichiers selon cette organisation : un fichier JavaScript par classe, le nom du fichier = le nom de la classe en minuscule (dans le cas de ce projet Cocktails, classe ingredient.js, classe unite.js, etc)
  • Ecriture complète en ECMA6(plus de var, que des let, fonctions de la forme () = >{} etc)
  • Callbacks avancés avec gestion des closures

IUT : TP jQuery / jQuery Mobile

La note sera décomposée ainsi :

(1) Sur 4 points – Le site HTML (bootstrap / design) et le code source du site HTML (HTML5, indentation + sortie à l’imprimante correcte)
(2) Sur 10 points : Les appels AJAX, ainsi que des effets avec jQuery + de la construction dynamique d’éléments avec jQuery (indentation Php et jQuery / JavaScript + sortie à l’imprimante correcte)
(3) Sur 6 points : le site HTML mobile avec du jQuery Mobile et des appels AJAX (indentation + sortie à l’imprimante correcte, sachant que, encore une fois, j’en attends moins du site mobile que du site principal).

Prenez en compte ces avertissements :
– interdiction d’utiliser une librairie JavaScript qui ne vienne pas des sites officiels jQuery, jQueryUI, jQuery Mobile ou Bootstrap
– dernier délai : fin de semaine de notre dernier cours, soit dimanche à minuit. Passé ce délai ce sera 1 pt par 2 heures de retard (je prendrai en compte la date de réception du mail) ;
– copie sur une autre personne (« je se savais pas comment implémenter telle ou telle fonctionnalité dont j’avais besoin pour aller plus loin, je l’ai copiée sur un autre »), deux cas se distinguent :
– si la personne est clairement nommée, cette fonctionnalité ne sera pas prise en compte dans la notation (= 0 pour cette fonctionnalité) ;
– si la personne est clairement nommée, et qu’il y a une amélioration de la fonctionnalité : note pour la fonctionnalité divisée par 2 (uniquement la moitié du travail a été faite) ;
– 0 aux deux personnes sinon ;
– si je m’aperçois que vous avez bêtement copié collé des sources Internet, je vous convoquerai pour vous demander de m’expliquer la fonctionnalité, et deux cas se distinguent :
– si vous ne savez pas m’expliquer le code alors 0 ;
– si vous savez m’expliquer tout le code alors votre note totale sera divisée par vous + le nombre de contributeurs à ce projet, ce qui se rapprochera certainement de 0 aussi.
– rendu du TP possible : vous ne m’envoyez que le code HTML et JavaScript, et un lien vers un site sur lequel vous avez tout réalisé. Ainsi, je n’aurais pas à installer / regarder ce qui a été fait en Php (ou Python pour ceux qui sont allés plus loin que les cours Php (oui, il y en a !)), et je regarderai ce que j’ai cité plus haut.

JavaScript, jQuery et closure: petit exercice à faire

Ci suit un petit exercice JavaScript: copiez collez les deux morceaux de code qui suivent dans une page jsfiddle.net

Si vous examinez le code JavaScript, il est très simple : l’objectif de l’exercice semble simple : il faut juste faire « flasher » les libellés les uns après les autres (c’est là que la difficulté se trouve).

Seul problème, avec le code qui suit et semble correct : ça ne fonctionne pas. L’exercice est… de trouver la solution en JavaScript.

Ne regardez pas la fin, car il y a la solution !.

Code HTML :

<table id="s-inscrire-infos">
<tbody>
<tr>
<td id="label-nomprenom"> <span><label for="label-nomprenom"><b>Nom et prénom&nbsp;:&nbsp;</b></label></span> </td>
<td> <span> <input type="text" name="nomprenom" id="nomprenom" class="form-nom-prenom" size="50" maxlength="50" /> </span> </td>
</tr>
<tr class="erreur" id="erreur-nomprenom" style="display:none">
<td colspan="2">* Il faut renseigner votre nom et prénom</td>
</tr>
<tr>
<td id="label-adresse1"> <span> <label for="label-adresse"> <b>Adresse ligne 1 :&nbsp;</b> <br /> <font size="-2">(ou nom de la société)&nbsp;</font> </label> </span> </td>
<td> <span><input type="text" name="adresse1" id="adresse1" class="form-adresse" size="50" maxlength="60" /></span> <br /> <span class="tiny">Rue, voie, boîte postale, nom de société</span> </td>
</tr>
<tr class="erreur" id="erreur-adresse1" style="display:none">
<td colspan="2">* Il faut au moins renseigner une ligne</td>
</tr>
<tr>
<td id="label-adresse2"> <span><label for="label-adresse"><b>Adresse ligne 2 :&nbsp;</b> <br /> <font size="-2">(facultatif)&nbsp;</font> </label></span> </td>
<td> <span><input type="text" name="adresse2" id="adresse2" class="form-adresse" size="50" maxlength="60" /></span> <br /> <span class="tiny">Appartement, bâtiment, étage, digicode, cedex, etc.</span> </td>
</tr>
<tr>
<td id="label-cp"> <span><label for="label-cp"><b>Code postal&nbsp;:&nbsp;</b></label></span> </td>
<td> <span> <input type="text" name="cp" id="cp" class="form-cp" size="20" maxlength="20" /> </span> </td>
</tr>
<tr class="erreur" id="erreur-cp" style="display:none">
<td colspan="2">* Il faut renseigner votre code postal</td>
</tr>
<tr>
<td id="label-ville"> <span><label for="label-ville"><b>Ville&nbsp;:&nbsp;</b></label></span> </td>
<td> <span> <input type="text" name="ville" id="ville" class="form-ville" size="25" maxlength="50" /> </span> </td>
</tr>
<tr class="erreur" id="erreur-ville" style="display:none">
<td colspan="2">* Il faut renseigner votre ville</td>
</tr>
<tr>
<td id="label-tel"> <span> <label for="tel"><b>Numéro de téléphone&nbsp;:&nbsp;</b></label> </span> </td>
<td> <span> <input type="text" name="tel" id="tel" class="form-tel" size="15" maxlength="20" /> </span> </td>
</tr>
<tr class="erreur" id="erreur-tel" style="display:none">
<td colspan="2">* Il faut renseigner votre téléphone</td>
</tr>
<tr>
<td colspan="2" class="form-submit"> <input type="submit" value="Valider" /> </td>
</tr>
</tbody>
</table>

Code JavaScript :

jQuery.fn.getBg = function() {
return $(this).parents().filter(function() {
var color = $(this).css('background-color');
return color != 'transparent' && color != 'rgba(0, 0, 0, 0)';
}).eq(0).css('background-color');
};

function flash(id, font_color, bg_color, nb) {
var bc = $(id).getBg();
var cl = $(id).css('color');
var mx = parseInt(nb);
if (mx <= 0) {
mx = 1;
}
for (var i = 0; i < mx; i++) {
$(id).animate({
backgroundColor: bg_color,
color: font_color
}, 200).animate({
backgroundColor: bc,
color: cl
});
};
}

dataMessage = new Array("#erreur-nomprenom", "#erreur-adresse1", "#erreur-cp", "#erreur-ville", "#erreur-tel");
var theQueue = $({});
for (key in dataMessage) {
var m = dataMessage[key];
if (m.indexOf('#erreur') == 0) {
console.log('should add:'+m);
theQueue.queue('flash', function(next) {
console.log('i will flash:'+m);
$(m).fadeIn('slow', function() {
flash('#label-' + this.id.substr(7), "#ffffff", "#aa0000", 3);
next();
});
});
}
}
theQueue.dequeue('flash');

Solution :

var theQueue = $({});
for (key in dataMessage) {
var m = dataMessage[key];
if (m.indexOf('#erreur') == 0) {
console.log('should add:' + m);
var toFlash = (function(m) {
return function(next) {
console.log('i will flash:' + m);
$(m).fadeIn('slow', function() {
flash('#label-' + this.id.substr(7), "#ffffff", "#aa0000", 3);
next();
});
}
})(m);
theQueue.queue('flash', toFlash);
}
}
theQueue.dequeue('flash');

Eh oui pas si évident que ça à trouver !

Merci à Julien pour son aide !

Si vous avez d’autres solutions n’hésitez pas à les mettre dans un commentaire en bas !