Mots-clé : cours

IUT : jQuery / jQuery Mobile

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 !

Voici les fonctionnalités obligatoires :

  • Connexion + déconnexion (vu en cours)
  • Effets jQuery sur les éléments
  • Appels JSON : au moins deux appels en plus de ceux vus en cours

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 me rendre

  1. Sur 4 points : le site HTML (bootstrap / design) et le code source du site HTML (HTML5, indentation)
  2. Sur 10 points : les appels AJAX, ainsi que des effets avec jQuery + de la construction dynamique d’éléments avec jQuery (indentation jQuery / JavaScript)
  3. Sur 6 points : le site HTML mobile avec du jQuery Mobile et des appels AJAX (indentation).

Pour favoriser votre organisation

  • Créez un dossier « SiteWeb » : vos pages HTML classiques, et votre code JavaScript
  • Créez un dossier « SiteMobile » : vos pages HTML pour jQuery Mobile, et votre code JavaScript pour jQuery Mobile
  • Créez un dossier « json » : tout votre code « serveur » (en Php sûrement), qui renvoie les pages au format JSON que les deux sites précedents appelleront. C’est la « référence » à n’écrire qu’une fois (copiez-collez ce dossier dans les deux dossiers précédents lorsque vous modifiez le code serveur (sous Linux, pas la peine, faites juste un lien symbolique (si vous voulez plus d’informations contactez moi)))

Librairies autorisées

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

Dernier délai

Dimanche 2 avril à minuit

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).
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 le lundi 3 avril à 00:01.
N’oubliez pas de me donner le nom et le mot de passe pour se connecter !

Rendu du TP

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 Django/Python pour ceux qui veulent essayer les nouvelles technologies).

Avertissements

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

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.

ISEN Institut Supérieur de l’Électronique et du Numérique : cours e-Commerce


Cliquez ici pour télécharger le cours.

Rappel pour les vhosts :

  • Rajouter la correspondance dans le fichier Hosts
  • Créer le vhost (exemple dans le PDF ci dessus) dans sites-avalaible puis lien symbolique dans sites-enabled via l’ordre ln -s ../site-avalaible/nomdelaconf nomdelaconf.conf
  • Redémarrer Apache : sudo service apache2 restart

WordPress : thème enfant : comment inclure des fichiers « proprement »

Si vous avez crée un template « enfant », comme je l’ai déjà fait plusieurs fois, un des problèmes les plus énervants à chercher est : comment trouver le répertoire courant du thème.

En fait WordPress met à disposition deux fonctions, et il vous faut utiliser soit l’une, soit l’autre :

  • get_stylesheet_directory_uri()
  • get_template_directory_uri()

get_stylesheet_directory_uri()

Vous renvoie le répertoire de l’enfant, donc le répertoire en cours du thème « enfant » que vous êtes en train de développer.

get_template_directory_uri()

Vous renvoie le répertoire du parent, cela peut être pratique si vous voulez chercher des informations dans le parent (utiliser une feuille de style déjà présente, par exemple, afin de ne pas la copier-coller dans votre thème).

NodeJS qui sert des fichiers et accède à MongoDB

// Exemple copié collé et adapté sur stackoverflow :
// http://stackoverflow.com/questions/15630770/node-js-check-if-path-is-file-or-directory
// http://stackoverflow.com/questions/7268033/basic-static-file-server-in-nodejs
//
var http = require('http'),
    url = require('url'),
    fs = require('fs'),
    mongoose = require('mongoose'),
    fileSystem = require('fs'),
    path = require('path');
var mimeTypes = {
    "html": "text/html",
    "jpeg": "image/jpeg",
    "jpg": "image/jpeg",
    "png": "image/png",
    "js": "text/javascript",
    "css": "text/css"};

var server;
var Schema = mongoose.Schema;

mongoose.connect('mongodb://localhost/test');
var db = mongoose.connection;

var personneSchema = new Schema({
  nom: String,
  prenom: String
});
var Personne = db.model('Personne', personneSchema);

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function () {
    console.log('DB connexion reussie');
    server = http.createServer(function (request, response) {
        if (request.url=='/personnes') {
            console.log("> JSON");
            Personne.find({}).select('nom prenom').exec(function (err, p) {
                if (err) {
                    return console.log(err);
                }
                var retour='[';
                for (var i = 0; i < p.length; i++) {
                    retour+='{'+ p[i].nom+', '+p[i].prenom+'},';
                };
                retour=retour.substr(0, retour.length-2)+']';
                response.writeHead(200, {
                    'Cache-Control': 'no-cache, must-revalidate',
                    'Expires': 'Mon, 26 Jul 1997 05:00:00 GMT',
                    'Content-type': 'application/json'
                });
                response.end(retour);
            });
            // Stopper tout traitement :
            return;
        }
        var uri = url.parse(request.url).pathname;
        var filename = path.join(process.cwd(), uri);
        console.log("> " + filename);
        fs.exists(filename, function(exists) {
            if ((!exists) || (fs.lstatSync(filename).isDirectory())) {
                console.log(">> fichier inexistant : " + filename);
                response.writeHead(200, {'Content-Type': 'text/plain'});
                response.write('404 Not Found\n');
                response.end();
                // Stopper tout traitement :
                return;
            }
            var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
            response.writeHead(200, {'Content-Type':mimeType});

            var fileStream = fs.createReadStream(filename);
            fileStream.pipe(response);
        });

        //var p = new Personne({
        // nom: 'Pons',
        // prenom: 'Olivier'
        //});
        //p.save(function (err) {
        // if (err) {
        // return console.log(err);
        // }
        // var query = Personne.find();
        // query.select('nom prenom');
        // query.exec(function (err, p) {
        // if (err) return console.log(err);
        // for (var i = 0; i < p.length; i++) {
        // console.log(p[i].nom+' '+p[i].prenom);
        // };
        // console.log('Nombre total d\'enregistrements : '+p.length);
        // });
        //})
    });
    // Listen on port 8000, IP defaults to 127.0.0.1
    server.listen(8000);
    // Put a friendly message on the terminal
    console.log("Server running at http://127.0.0.1:8000/");
});