Comme quelques autres amateurs de livres, j’avais joyeusement installé le plugin now reading reloaded, lui-même repris sur le plugin initial now reading. Hélas, la version française était loin d’être parfaite et, dans les dernières versions de wordpress, un bug affectait le titre de la page.

Le plugin m’intéressait car il permet d’afficher sur le blog les livres que l’on lit, y compris ceux qu’on a lu et à venir. En somme, votre bibliothèque se retrouve en ligne et le plugin donne même des statistiques !

Hélas, l’auteur a arrêté le développement du plugin à la version 5.1.3.2. Damned ! Plus qu’à mettre le nez dans le code pour finir de l’internationaliser, compléter le fichier de traduction pour la version française et corriger le dernier bug grâce aux bons conseils de Brendan Nelson.

J’ai également ajouté un support pour les différentes tailles d’images de couverture fournies par Amazon. Il est ainsi possible d’afficher toutes les tailles disponibles en appelant la fonction book_image avec en premier paramètre ‘small’, ‘medium’ ou ‘large’. Il est facultatif et s’il n’est pas mentionné, c’est la taille définie par défaut dans les options qui est utilisée.

Voici donc une version 5.1.3.3 qui ravira les francophones, du moins je l’espère. Pour les autres fichiers de langage, ils sont facilement actualisables avec poedit.

Pour obtenir un rendu différent, il est très facile de surcharger les templates comme indiqué dans le fichier readme. J’ai aussi ajouté une feuille de style pour personnaliser plus facilement la bibliothèque en fonction du thème.

Petite astuce souvent méconnue, un attribut très pratique a été introduit dans la plupart des navigateurs modernes : la possibilité de rajouter autocomplete="off" à un élément input. Quel intérêt ? Eviter que le navigateur ne propose automatiquement des valeurs pour cet élément.

Exemple : formulaire d’identification et création d’utilisateur (code volontairement simplifié)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Page : index.html
------------------------------------------------
[...]
<form>
<input name="identifiant" />
<input name="motpasse" type="password" />
<input type="submit" />
</form>
 
[...]
 
Page : new_user.html
-------------------------------------------------
[...]
<form action="create_user.html">
   Nom de l'utilisateur :
<input name="identifiant" />
   Mot de passe :
<input name="motpasse" />
</form>
 
[...]

Que se passera-t-il dans cet exemple si l’administrateur a choisi d’enregistrer ses informations d’identification ? Elles seront automatiquement reprises dans le formulaire de création d’un nouvel utilisateur. Une solution simple serait de nommer différemment les champs sur la seconde page mais il est tout aussi simple de spécifier au navigateur que l’on ne souhaite pas reprendre les informations en rajoutant autocomplete="off" en attribut dans les champs input :

1
2
3
4
5
6
7
8
9

[...]
<form action="create_user.html">
   Nom de l'utilisateur :
<input name="identifiant" />
   Mot de passe :
<input name="motpasse" />
</form>
 
[...]

C’est par exemple très pratique pour éviter de devoir retravailler des données avec cakephp et garder les fonctionnalités « automagic ».

Prenons un autre exemple : vous souhaitez utiliser Ajax pour proposer des réponses en fonction de la saisie dans un champ input. Une autre fonctionnalité des navigateurs modernes est de proposer automatiquement des suggestions en fonction d’anciennes saisies dans une liste déroulante. Problème avec votre fonctionnalité Ajax qui peut alors entrer en conflit. Là encore, la propriété autocomplete vous permet un meilleur contrôle de l’interface utilisateur.

Le validateur W3C signale une anomalie !

Dans la version 4.01 d’HTML et 1.0 d’XHTML, la propriété autocomplete n’est pas dans les spécifications du W3C. En revanche, le W3C le prévoit dans XHTML 2 et HTML 5 (du moins la question est posée). Dans l’intervalle, les navigateurs modernes ont déjà pris le train en marche car cet attribut est notamment utilisé par des sites demandant des numéros de carte de crédit.

La fondation Mozilla a alerté à de nombreuses reprises sur les risques de sécurité à utiliser un tel attribut par rapport à l’implémentation qui en avait été faite dans les navigateurs à l’époque mais la polémique s’est quasiment éteinte depuis la sortie des versions postérieures à 2008.

Toutefois, le validateur du W3C continue de signaler une erreur car autocomplete reste un attribut non standard. Pour passer outre malgré tout, il suffit d’attribuer la propriété par javascript après le chargement de la page ou d’émuler complètement la fonctionnalité. Ce n’est pas élégant mais c’est le seul moyen à l’heure actuelle d’avoir l’imprimatur du W3C.

Les mises à jour sont régulières et il est préférable de les installer car ce composant est souvent actualisé.

Toutefois, j’ai buté dans un os et, comme je suis partageur, je me dis qu’il vaut mieux le ronger à plusieurs (j’ai soumis un ticket à ce sujet sur cakephp d’ailleurs).

Envoyer un courriel avec le composant email

Le manuel est très bien fait et laisse peu de place au hasard. La création du message peut se faire directement dans le contrôleur (hum côté MCV, ça se pose un peu là) ou via des layouts et des vues (c’est mieux).

Le composant permet 2 méthodes d’envoi :

• La fonction mail de PHP : Elle est relativement limitée et, si elle n’est pas implémentée sur le serveur, ne fonctionne pas.
• L’utilisation du protocole SMTP (sending mail protocol) : C’est ce protocole qui est généralement utilisé par les clients de messagerie habituels. Son utilisation ne nécessite pas toujours de s’authentifier mais la plupart des fournisseurs d’accès internet (FAI) l’impose pour éviter des utilisations frauduleuses de leurs serveurs.

Pour envoyer un mail via SMTP, il vous faut habituellement 3 informations : l’adresse du serveur, un nom d’utilisateur et un mot de passe, accessoirement un numéro de port (25 par défaut) . Vous les avez ? Parfait. Passons à la suite.

La configuration du composant est des plus simples et documentée dans le manuel de cakephp. Je ne reviendrais donc pas là-dessus.

Mes courriels ne partent pas !

Après avoir suivi scrupuleusement les instructions et renseigné correctement le tableau smtpOptions, vous essayez fièrement votre script et… une erreur 550, le mail n’est pas parti !

Cet incapable de serveur SMTP vous explique que le message ne peut pas être relayé depuis <votre nom de domaine ou IP> ou quelque chose dans ce goût là ! Fiévreusement, vous vérifiez toutes vos informations, elles sont correctes !

Mais que s’est-il donc passé ?

Pour le savoir, utilisons telnet (accessible par l’invite de commande sous Windows, tapez menu démarrer -> exécuter ->cmd et ok, par la console sous Linux). Pourquoi ? Telnet va nous permettre de simuler étape par étape une transaction SMTP pour voir où réside le problème.

Première étape, se connecter au serveur SMTP. Entrez la commande : telnet <votre_serveur_smtp> XX où XX est le numéro du port (généralement 25 mais pas forcément).
Normalement votre serveur devrait vous répondre quelque chose du genre : 220 - . Peut importe le texte, pourvu que le code soit 220. Cela veut dire que le serveur attend vos commandes.

Deuxième étape, dire bonjour. Entrez HELO. Le serveur va vous répondre quelque chose qui doit commencer par le code 250. Si ce n’est pas ce code, il est fort possible que le serveur n’accepte pas d’entrer en discussion avec un client non reconnu.

Troisième étape, demandez à s’identifier. Tapez AUTH LOGIN. Si le serveur vous renvoie un code 503, c’est que vous n’avez pas à vous identifier. S’il s’agit d’un code 334, il attend un identifiant et un mot de passe.

C’est cette procédure que suit le composant email de CakePhp (et c’est normal). Lorsqu’il reçoit une réponse 503, il n’envoie pas de nom d’utilisateur ni de mot de passe considérant que c’est inutile. Tout va bien quand ça l’est vraiment.

Mon hébergeur, mavenhosting (très bien au demeurant), m’a réservé une petite surprise sur laquelle j’ai passée quelques heures. Le serveur SMTP renvoyait un code 503 à mon AUTH LOGIN mais refusait d’envoyer des e-mails sans authentification et tout finissait en une belle erreur 550.

En fouillant un peu sur le net, je me suis aperçu que le standard HELO était devenu EHLO (extended HELO). Pour autant, tous les serveurs devraient pouvoir encore gérer HELO. Et bien pas Exim dans les versions supérieurs à la 4.2.

En utilisant EHLO, puis AUTH LOGIN, le serveur m’a renvoyé un code 334 pour me demander de m’authentifier. Il m’a donc suffit de modifier légèrement mailer.php à la ligne 693 comme ceci :

1
2
3
4
5

if(!$this->__smtpSend("EHLO {$host}", '250')) {
        if (!$this->smtpSend("HELO {$host}", '250')) {
            return false;
        }
    }

La commande HELO ne sera utilisée que si EHLO ne fonctionne pas. Je ne sais s’il est souhaitable de faire ainsi et je laisse le soin aux excellents développeurs (bénévoles qui plus est) de cakePHP de trancher. En attendant, ça semble fonctionner.

La freebox fournit par défaut des fonctionnalités de routeur et wi-fi mais il y a des cas où celles-ci ne répondent pas aux besoins (wi-fi N, plusieurs PC en éthernet…) et où un simple switch ne suffit pas. Sous peine de crouler sous les conflits d’IP ou des pertes de connexion aléatoires ou intermittentes, il y a certaines précautions de configuration à respecter pour associer un routeur à une freebox.

Configuration de la freebox

Console de configuration des fonctionnalités routeur et DHCP de la freebox

Pour cela branchez la freebox directement sur votre PC par le câble Ethernet.

Les fonctionnalités de la freebox se configurent à partir de la console de gestion du compte, onglet internet, accessible en s’identifiant sur http://subscribe.free.fr/login/

En cochant la case « activer le service », vous activez la fonction routeur de la freebox. Vous pouvez également activer la fonctionnalité de serveur DHCP.

Si vous n’activez pas la fonctionnalité routeur de la freebox, la configuration sera différente selon que vous êtes en zone dégroupée ou non. A moins que vous n’ayez des problèmes de connexion, je vous recommande de l’activer (il vous faudra certainement redémarrer la freebox). Laissez l’IP par défaut pour la freebox soit 192.168.0.254

Configuration du routeur (freebox avec service routeur activé)

Débranchez la freebox et connectez votre PC au routeur (par câble Ethernet de préférence), mais ne branchez pas la freebox tout de suite sur le port WAN. Allez dans la console de gestion de votre routeur (généralement en entrant 192.168.0.1 ou 192.168.1.1 dans le navigateur internet).

Important : Votre réseau local doit donc utiliser une classe de réseau différente s’il est sur 192.168.0.xxx, passez le sur 192.168.1.xxx. Pour cela, commencez par attribuer l’IP 192.168.1.1 à votre routeur le cas échéant et reconfigurez éventuellement le serveur DHCP (normalement, ce n’est pas la peine).Redémarrez le routeur si besoin (notamment si votre PC ne se connecte plus du tout au routeur) et retournez dans la console de gestion. Si vous laissez votre routeur sur la même classe de réseau, il se comportera comme un simple switch (ou votre réseau fera des siennes, c’est selon).

Configuration internet du routeur

• Type de connexion : DHCP (si serveur DHCP activé sur Freebox) ou Static IP (si serveur DHCP désactivé sur Freebox)

Pour une configuration en IP statique :

• Adresse IP : 192.168.0.1 (IP sur le LAN du routeur Freebox)
• Masque : 255.255.255.0
• Passerelle : 192.168.0.254 (c’est l’IP de la freebox telle qu’indiquée dans sa console de gestion, voir plus haut)
  
• DNS primaire et secondaire  : voir plus bas

Configuration du LAN

• IP du routeur : 192.168.1.1
• Masque : 255.255.255.0
• IP des postes : DHCP ou IP statiques selon la configuration de votre serveur DHCP (192.168.1.xxx)
• Passerelle : 192.168.1.1 (IP du routeur)
• DNS : 192.168.1.1 (IP du routeur)

Il ne vous reste plus qu’à connecter la freebox au port WAN de votre routeur.

Conseil : Si vous avez de vieux postes en Windows 98 dans votre réseau, il est préférable de les mettre en IP statiques sinon il peut y avoir des problèmes de visibilité du poste sur le réseau.

Si vous voulez utiliser la redirection de ports, il vous suffit de mettre la freebox en DMZ (zone démilitarisée) par son adresse 192.168.0.1

Configuration du routeur (mode routage de la freebox désactivé)

Normalement, la configuration avec la freebox en routeur devrait fonctionner. Dans le cas contraire, ou si vous ne souhaitez pas l’activer, voici les configurations du routeur et des postes.

En zone dégroupée (IP fixe)

Si le serveur DHCP est désactivé, il vous faut récupérer votre IP attribuée par Free ainsi que celle de la passerelle. Pour cela, le plus simple est brancher directement un PC sur la freebox et dans l’onglet « support » de votre état de connexion vous aurez les infos.

• Paramètres Internet du routeur

Type de connexion : Automatic Configuration – DHCP
ou
Type de connexion : Static IP
Adresse IP : IP donnée par Free
Masque : 255.255.255.0
Passerelle : Passerelle donnée par Free
DNS 1 : (voir la liste des DNS de Free)
DNS 2 : (voir la liste des DNS de Free)

• Paramètres Réseau du routeur

Adresse IP : 192.168.1.1
Masque : 255.255.255.0

• Paramètres Réseau des PC

Adresse IP : 192.168.1.xxx (si serveur DHCP désactivé sur routeur)
Masque : 255.255.255.0
Passerelle : 192.168.1.1
DNS : 192.168.1.1

En zone non dégroupée

• Paramètres Internet du routeur

Type de connexion : PPPoE
Identifiant : xxxxxxxxxx@freeadsl (numéro de téléphone)
Mot de passe : xxxxxxxxxx (celui de la console d’administration Freebox)

• Paramètres Réseau du routeur

Adresse IP : 192.168.1.1
Masque : 255.255.255.0

• Paramètres Réseau des PC

Adresse IP : 192.168.1.xxx (si serveur DHCP désactivé sur routeur)
Masque : 255.255.255.0
Passerelle : 192.168.1.1
DNS : 192.168.1.1

Informations pratiques

Liste des IP des serveurs DNS de Free

• 212.27.40.240
• 212.27.40.241

http://www.journaldufreenaute.fr/05/03/2008/tuto-le-routeur-de-la-freebox-explications-et-configuration.html

Partage de fichiers sous windows dans le réseau local

Protocoles utilisés par la connexion

Pour ceux qui voudraient partager des fichiers ou des imprimantes par le réseau local, le protocole NetBIOS doit être chargé sur chacun des postes (et pour chacune des cartes réseau utilisées le cas échéant).

C’est un piège courant quand on configure un réseau local car il ne sont généralement pas installés par défaut.

Cliquez sur installer, protocole, NetBIOS NWLink. Le protocole de transport compatible IPX s’installera en même temps automatiquement. Il est utile pour les parties en réseau local pour de vieux jeux.

Pour plus de renseignements sur le partage de fichiers :

http://www.commentcamarche.net/contents/configuration-reseau/partage-fichiers.php3

L’inconvénient d’un applet est qu’il nécessite des connaissances en java ou actionscript pour flash (en plus du logiciel payant dans ce dernier cas).

Toutefois, il existe plusieurs solutions gratuites qui permettent des upload multiples en flash :

• Nas Uploader (http://www.nasuploader.com) : C’est certainement le plus simple mais aussi le moins souple côté configuration. Du coup, il est très bien adapté pour celui qui veut une solution simple et rapide.
• SWF Upload (http://swfupload.org) : C’est peut-être le plus connu. Il est entièrement paramétrable ce qui le rend également difficile à prendre en main.
• Fancy Upload (http://digitarald.de/project/fancyupload) : Le plus esthétique à mon sens. Son seul « défaut » est de s’appuyer sur le framework javascript Mootools pour fonctionner ce qui peut poser des problèmes si vous en utilisez un autre (par exemple prototype

Côté serveur, le script PHP n’a rien de révolutionnaire puisque le traitement du fichier chargé reste identique.

C’est très bien, mais ne peut-on rien y faire ?

Plusieurs solutions sont possibles :

• Utiliser un autre language de CGI pour récupérer et afficher les informations du téléchargement
• Utiliser un applet java ou Flash (il y en a des très biens)
• Utiliser PHP (et ajax bien sûr pour mettre à jour l’affichage)

Oui, vous avez bien lu, on peut utiliser PHP. Pour les vieilles versions, il est nécessaires d’appliquer un patch à l’installation PHP, mais à partir de la version 5.2.0, le support pour le module APC est intégré dans la distribution. Pour les plus courageux, le suivi est possible en PHP4, mais je trouve quand même plus simple de passer à PHP 5.2. Un italien a aussi décrit une méthode sans installer APC. L’inconvénient est qu’elle se base sur un suivi de l’apparition de fichiers temporaires ce qui la rend complètement inutilisable lorsque de nombreux fichiers sont créés quasi simultanément.

La suite du message décrit comment utiliser APC pour récupérer les informations sur le déroulement d’un upload.

Installer APC

APC est un package PECL qui n’est pas installé par défaut dans PHP. Vous trouverez  un guide d’installation sur http://fr.php.net/manual/fr/apc.installation.php Pour les utilisateurs de Windows qui ne pourraient pas compiler la bibliothèque, voici un lien alternatif pour trouver des modules compilés dans l’attente du retour de pecl4win.

Configurer APC pour suivre l’upload de fichiers

Par ailleurs, il faut encore activer l’option d’APC permettant de récupérer des informations sur le chargement en cours. Pour cela, il suffit de rajouter apc.rfc1867 = on dans le fichier php.ini. Il faut aussi charger l’extension dans le php.ini grâce à extension="apc.so" ou extension=php_apc.dll sous Windows

Récupérer les informations sur le chargement en cours

Une fois le module APC et son extension rfc1867 fonctionnels, il est possible de récupérer les information du chargement en cours. Vous trouverez de nombreux scripts sur la toile permettant d’exploiter cette fonctionnalité :

• Uploadprogressmeter : un autre package PECL avec un exemple.
• Megaupload : Très complet, il peut aussi utiliser Perl et JSP.

Si vous êtes un acharné du code, voici quelque explications basé sur l’utilisation d’un iframe (voir http://blog.bafouille.fr/?p=16 pour plus d’informations sur l’upload de fichier). Il nous faut tout d’abord un formulaire avec un champ caché nommé APC_UPLOAD_PROGRESS et une id unique. Nous utiliserons pour cela la fonction PHP uniqid(). Comme il ne faut pas recharger la page suite à la soumission du formulaire, la cible de celui-ci sera un IFRAME caché. Enfin, il nous faut lancer en parallèle un javascript pour interroger le serveur et mettre à jour les informations de chargement.

1
2
3
4
5
6
7
8

< ?php $id_for_apc = uniqid(); ?>;
<form id="leForm" action="traitement.php" enctype="multipart/form-data" method="pcost" onsubmit="pollProgress(<?php echo $id_for_apc ?>)">
<input id="<?php echo $id_for_apc ?/>" name="APC_UPLOAD_PROGRESS" type="hidden" value="< ?php echo $id_for_apc ?>" />
<input id="leFichier" name="leFichier" type="file" />
<input type="submit" value="Charger le fichier" />
</form>
<div>Total du fichier : <span id="total">Inconnu</span></div>
<div>En cours : <span id="current">0</span></div>

Tout ce qu’il y a de plus simple. Le script traitement.php est quant à lui tout ce qu’il y a de plus classique pour traiter des fichiers téléchargés. Son résultat va s’afficher dans l’Iframe caché, il faudra donc y récupérer les informations pour afficher le résultat final de l’upload.

Direction le javascript maintenant

Lors de la soumission du formulaire, la fonction pollProgress est appelée avec en paramètre la valeur du champ APC_UPLOAD_PROGRESS. Personnellement, je préfère cette méthode car il est plus sûr de passer l’id en argument que d’aller la chercher dans le document Html de départ qui peut avoir changé ou qui possède des frames (argh !).

Le but de pollProgress est d’interroger le serveur en utilisant l’objet XMLHttpRequest. Pour cela, soit on programme tout de zéro, soit on utilise un framework javascript. Personnellement, j’utilise Prototype car, d’une part, il est également utilisé par script.aculo.us, bibliothèque d’effets javascript et, d’autre part, il permet des manipulations du DOM en gérant lui-même les spécificités d’Internet Explorer.

Notre fonction pollProgress(upload_id) pourrait ressembler à ceci :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function pollProgress(upload_id)
{
   new Ajax.Request('getUploadProgress.php?upload_id='+upload_id, {
                     method : 'GET',
                     onSuccess: function(transport) {
                                   var upload_info = transport.responseJSON;
                                   /* Les informations retournés par le serveur
                                      sont disponibles dans l'objet upload_info
                                      (total, current, filename, name et done) */
                                   if(upload_info.done) {
                                      $(current).update(upload_info.current);
                                      $(total).update(upload_info.total);
                                      /* Si le chargement n'est pas fini, on relance la fonction */
                                      if(upload_info.done == 0) pollProgress(upload_id);
                                    }
                                  }
                                })
}

C’est évidemment l’approche a minima car on se contente d’actualiser la valeur de la taille du fichier (total) et de la quantité d’octets chargés (current). Enfin, en divisant l’un par l’autre, on a un taux de progression que l’on peut représenter graphiquement…

Le grand avantage de Prototype est qu’il simplifie fortement le code et, en exploitant le format JSON, on peut récupérer directement les informations sous forme de variables javascript.

En attendant, il manque le script PHP qui va gentiment nous donner ces informations au format JSON :

Pas bien sorcier. Toute la magie repose sur apc_fetch qui va renvoyer un tableau associatif $ret[index] où index possédant les valeurs suivantes :

• total : taille du fichier en octets
• current : nombre d’octets déjà reçus
• filename : nom du fichier tel que transmis dans l’input file
• name : valeur de l’attribut name de l’input file
• start-time : timestamp du début du chargement
• done : statut du chargement (0 : en cours, 1 : fini)

Une fois le chargement fini, la fonction renvoie également ces valeurs d’index :

• temp_filename : chemin vers le fichier temporaire
• rate : Taux de transfert en b/s
• cancel_upload : Information sur le résultat de l’upload (0 : succès, 1 : la taille du fichier excède upload_max_file_size, 2 : la taille excède MAX_FILE_SIZE, 3 : chargement partiel, 4 : pas de fichier chargé, 5 : le répertoire temporaire est absent, 6 : impossible d’écrire le fichier, 7 : chargement annulé)

Fort heureusement, l’annulation d’un chargement change malgré tout la valeur de l’index "done" en 1 sinon nous aurions une jolie boucle infinie dans le script ! A noter que les informations fournies à la fin du chargement sont également disponibles dans $_FILES.

Enfin, la fonction json_encode nous permet de passer le tableau de retour au format JSON pour la fonction javascript.

Le script est loin d’être complet mais je pense que c’est une bonne base de départ pour celui qui veut se lancer.

Je ne reviendrais pas ici sur ce qu’est Ajax, on en trouvera une excellente explication sur Wikipédia. Clavier faisant, je soumettais requête sur requête jusqu’à buter sur un os, un gros os.

Tout marchait à merveille à l’exception notable de l’upload de fichier vers un serveur. La raison ?

L’objet XMLHttpRequest, utilisé par Ajax pour échanger avec le serveur, ne gère pas les données binaires. Plus simplement, impossible de soumettre directement le fichier avec un formulaire prévu pour le transfert de fichier grâce à enctype=”multipart/form-data”.

Il n’y aucune parade pour l’instant en la forme actuelle de l’objet XMLHttpRequest à part simuler une absence de rechargement de la page.

Faute de grives, on se contente de merles et quelques expédients sont possibles. La plupart sont listés sur ce blog.

La solution avec un iframe masqué a ma préférence car c’est la plus portable. Les vrais soucis commencent quand on veut afficher la progression du chargement.

Pour plus de renseignements :

• Upload de fichiers grâce à l’extension APC de PHP et affichage de la progression du chargement
  
• Upload de fichiers via Flash et affichage de la progression du chargement