jkconception le blog http://www.jkconception.com/dotclear/index.php/ fr 2007-07-09T12:24:32+02:00 daily 1 2007-07-09T12:24:32+02:00 Les crons, ou les tâches planifiées sous Linux … http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/oekz-ubdL4o/21-les-crons-ou-les-taches-planifiees-sous-linux 2007-07-09T12:24:32+02:00 fr Gwenael Dupont Technique Vous voulez planifier des tâches sur votre site internet ? Seul problème, vous n’êtes pas sur ce cher produit de Windows (ou ce produit cher à Windows, c’est vous qui voyez…) et le planificateur de tâches n’est pas disponible. Comme beaucoup de monde, votre hébergement se trouve sur un serveur Linux. Pas de problèmes, le planificateur de tâches existe aussi (whoohoo !), et il se nomme, assez barbarement d’ailleurs, « crontab » alors que les tâches elles-mêmes sont estampillés du joli sobriquet : « cron ». Sommaire

Un cron, c’est quoi ?

Un cron est un programme informatique qui va permettre de lancer des tâches préalablement planifiées à tel ou tel moment.

Un cron est ce que l’on appelle dans le jargon informatique un démon (« daemon » dans la langue de Shakespeare). C'est-à-dire que c’est un programme qui se lance au démarrage du système et qui attend le moment propice pour s’exécuter, soit lorsque les critères d’exécution d’un évènement sont remplies (voir la crontab). Il se remet en attente après avoir fait son travail, jusqu’au prochain évènement.

 

D’accord, mais ça sert à quoi ?

A beaucoup de choses ! Planifier ses tâches permet de lancer des scripts de manière automatique, sans avoir à le faire manuellement ! (Eh oui, n’oublions pas que les informaticiens sont par nature feignants… on programme pour en faire le moins possible… c’est pas très cohérent mais c’est comme ça :P ).

Ainsi, notre cron va pouvoir lancer des scripts qui vont faire des sauvegardes automatiques de notre base de données toutes les heures, des récupérations des statistiques de notre site tous les mois, etc… C’est donc très utile pour de l’administration système, mais ça peut aussi être tout à fait utile pour des tâches plus communes, comme envoyer des mails de rappel à telle date, jouer une musique à telle heure, et d’autres choses encore…

…par contre, ça fait toujours pas le café… mais c’est pas loin  :)

 

Et la crontab, c’est quoi ?

La crontab est votre table de tâches planifiées. C’est un script qui va contenir une liste de ligne de commandes qui correspondront à vos tâches. Le cron va ainsi avoir à portée de main toutes les instructions qu’il doit exécuter, ainsi que les horaires d’exécution.

Selon le système Linux, la crontab se trouve a un endroit différent :
Suse : /var/spool/cron/tabs/[utilisateur]
Debian et Ubuntu : /var/spool/cron/crontabs/[utilisateur]
FreeBSD et OpenBSD : /var/cron/tabs/[utilisateur]

Notons que le système Debian possède une crontab centralisée dans /etc/crontab

NB : Comme vous pouvez le remarquer, il existe une crontab par utilisateur  :).

 

Comment éditer sa crontab ?

Finie la théorie, nous allons maintenant entrer dans le vif du sujet, l’édition de sa crontab !
Première chose à faire, pour éditer sa crontab, lancer la commande :
crontab -e

Elle permet d’ouvrir la crontab dans l’éditeur de texte par défaut.

Chaque ligne de commande correspondra à une tâche planifiée. Elle se présentera sous la forme suivante :

mm hh jj MMM JJJ tâche > log

mm pour : minutes (entre 0 et 59).
hh pour : heures (entre 0 et 23).
jj pour : jour (entre 1 et 31).
MMM pour : mois (entre 1 et 12, ou les trois premières lettres du mois correspondant).
JJJ pour : jour de la semaine (entre 0 (pour dimanche) et 6 (pour samedi), ou les trois premières lettres du jour concerné. Notons que dimanche est aussi 7).
tâche pour : commande ou script shell à exécuter.
log pour : nom d'un fichier dans lequel stocker le journal des opérations. Si la clause> log n'est pas spécifiée, cron enverra automatiquement un courriel de confirmation. Pour éviter cela il suffit de spécifier > /dev/null.

Pour les 5 premières colonnes (qui sont les unités de temps qui déclencheront le cron), quelques options avancées sont possibles :
Une étoile ( * ) à la place d’une valeur signifiera pour toutes les valeurs de cette colonne.
Ainsi : 00 10 * * * tâche > log à la tâche d’effectuera tous les jours de tous les mois à 10h00.
Un tiret ( - ) entre deux valeurs signifiera toutes les valeurs entre la première et la deuxième valeur.
Ainsi : 00 6-10 * * * tâche > log à la tâche s’effectuera tous les jours à 6h00, 7h00, 8h00, 9h00 et 10h00 (de 6 à 10).
Une virgule ( , ) indique une liste de valeurs.
Ainsi : 00 6,10 * * * tâche > log à la tâche s’effectuera tous les jours à 6h00 et à 10h00.
Enfin, une barre oblique ( / ) indique des valeurs périodiques.
Ainsi, 0-59/2 10 * * * tâche > log à la tâche s’effetuera tous les jours, à toutes les minutes paires de 10h.
Notons que ‘*’ peut être combiné à ‘/’ : 00 10 */3 * * tâche > log à la tâche s’effectuera tous les 3 jours à 10h00.

NB : les lignes commençant par un dièse ( # ) sont des commentaires et ne seront pas traitées.

Important 1 : D'abord, il faut s'assurer que le script fonctionne en mode shell, c'est à dire qu'il est capable de s'executer depuis la ligne de commande. Pour cela, il faut placer dans la première ligne #!/usr/local/bin/php s'il s'agit d'un script php, #!/usr/bin/perl si c'est un script perl, ou #!/bin/bash pour un script shell, puis utiliser la commande chmod 700 script.cgi sur le script. Si vous avez l'accès telnet/ssh, vous pouvez tester son execution avec ./script.cgi

Important 2 : N'oubliez pas d'utiliser la commande "cd /home/login" au début de votre script, ou bien d'utiliser des chemins absolus lorsque vous précisez le nom d'un fichier (par exemple /home/login/texte.txt au lieu de texte.txt), car votre script s'éxécutera dans le répertoire.

Voilà un exemple d’une ligne d’une crontab:
00 10 * * * toto /usr/local/bin/php /home/toto/www/test/back.php
(Tous les jours à 10h00, le script back.php s’exécute.)

 

Conclusion :

Vous voilà donc prêt à créer vos propres tâches planifiées sous Linux. Ce didacticiel reste sommaire et n’explique que les spécificités pour éditer sa crontab, mais la colonne « tâche » peut être très poussées puisqu’elle peut comprendre un script shell, php, cgi, perl, … à exécuter, et on peut très vite compliquer les choses.
De nombreux sites expliquent ce que sont les crons et comment travailler avec, à vous de parcourir la toile pour rechercher des informations plus techniques.

Sources :
Guide OVH : MutualiseCron
Wikipedia : La crontab et les crons

]]> http://www.jkconception.com/dotclear/index.php/2007/07/09/21-les-crons-ou-les-taches-planifiees-sous-linux Un menu par onglet svp http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/YHtCDgy1YHs/20-un-menu-par-onglet-svp 2007-07-02T13:21:40+02:00 fr Jonathan Kowalski Technique La navigation par onglets est devenue, depuis quelques temps, omniprésente dans le web d'aujourd'hui, c'est un fait. Cela pose donc quelques questions et notamment, pourquoi ce système est-il devenu si populaire ? Comment le rendre véritablement éfficace et bien sur, comment qu'on fait ? La navigation par onglets est devenue, depuis quelques temps, omniprésente dans le web d'aujourd'hui, c'est un fait. Cela pose donc quelques questions et notamment, pourquoi ce système est-il devenu si populaire ? Comment le rendre véritablement éfficace et bien sur, comment qu'on fait ?

Sommaire

Pourquoi c'est bien ?

En fait l'un des principax avantages de l'onglet et sa capacité à cumuler deux indicateurs forts :

  • "Je suis la navigation"
  • "Vous êtes ici"
D'autre part, les onglets sont, souvent, synonymes de profondeur. En effet de part leur agencement et leur design, on doit avoir l'impression que la page en cours est "au-dessus" des autres.

Au-delà de cette considération purement cosmètiques (;)), la navigation par onglets dispose donc, de bien des avantages. De par leur image renvoyée par l'inconscient collectif d'abord (l'utilisateur sait que des onglets représente la navigation), de part leur image tout court ensuite puisque les onglets sont généralement facilement identifiables

Comment les optimiser

C'est décidé, vous allez utiliser les onglets. Cependant vous vous demandez encore comment les utilisez correctement.

En tout premier lieu et ca tombe sous le sens, ne pas les utiliser à contre-emploi. Ne pas violer l'inconscient collectif en les utilisant à d'autres fins que la navigation. Utiliser un design clair qui fasse que :

  1. les onglets soient facilement accessibles
  2. 'il y ait une réelle interconnexion entre les onglets
  3. l'onglet sélectionné soit immédiatement identifiable parmi les autres

Il convient, enfin de sélectionner par défaut un onglet, afin de garder la navigation cohèrente et de ne pas dépasser cinq à six onglets (sur ce sujet un article très intéressant concernant la navigation d'Amazon ICI_[en])

Comment qu'on fait ?

Le HTML
<ul id="menu">
<li><a href="index.php">Accueil</a></li>
<li><a href="apropos.php">A propos</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

Une liste, tout ce qu'il y a de plus classique.

Les CSS
ul#menu{
clear:both;
list-style: none;
margin:0;
  }
  ul#menu li {
  float: left;
  }
ul#menu li a {
text-align: center;
width: 87px;
height: 15px;
display: block;
background-image:url(images/fondbouton.jpg);
background-repeat: no-repeat;
background-position: center left
 }
ul#menu li a:hover, ul#menu li a:active {
  background-position: top left;
}
ul#menu li a.selected {
  background-position: bottom left;
  cursor:default;
}

La aussi beaucoup de classique. On enlève les puces via la propriété list-style et on applique un float:left à chaque "list item" afin que notre liste soit en ligne et non pas en bloc

Concernant les liens, on leur applique un dispay:block afin de pouvoir leur fixer des dimensions (l'élément a est en effet de type inline (tant au niveau xHTML que CSS) par défaut et ne peut donc par définition se voir appliquer de dimensions).

Il est à noter que notre élément a dispose de trois états :

  1. normal
  2. survolé ou actif
  3. selectionné

Pour chacun de ces états on va, non pas appliquer un background diffèrent pour chaque état, mais utiliser une seule image contenant nos trois états et dont on va modifier la position.

Par exemple on utilisera cette image :

Ainsi pour l'effet normal on fixera le fond de l'image au centre, pour le survolé, on se met en haut et pour le selectionné, on se met en bas (A noter aussi que j'ai affecté le curseur par défaut, soit la flêche à cet état afin de rendre la navigation optimale).
Simple, non ?

Le PHP

A l'évocation du mot PHP je sens poindre la question :

Mais pourquoi s'entête-t-il à nous mettre du PHP partout ?
Et j'aurais envie de répondre, soyez heureux, il n'y a pas de JavaScript ;)

Plus sérieusement, en tant que bon webmaster je suis évidemment (voire éminemment) feignant. De fait, il est impensable d'inscrire en dur sur chaque page l'élément effectivement sélectionné. Nous allons donc utiliser PHP afin que cette tâche soit automatique.

Le principe

Sur chaque page, nous allons, controler l'adresse de cette page, si elle correspond à l'un de nos liens, on applique à ce lien la classe CSS "selected" qui correspond à l'effet selectionné.

La fonction
<?php
  function selected($myPage) {
    if (strpos($_SERVER['PHP_SELF'], $myPage)===false) {
      echo '';
    } else {
      echo 'class="selected" ';
    }
  }
?>

On utilise la fonction strpos qui retourne la position numérique de la première occurrence de $myPage dans la chaîne de caractères $_SERVER['PHP_SELF'].
Si $myPage n'est pas trouvé, on ne retourne rien, sinon on écrit class="selected"

Il ne reste plus qu'a implémenter cela dans notre liste du début :

<ul id="menu">
 <li><a <?php selected('index') ?>href="index.php">Accueil</a></li>
 <li><a <?php selected('apropos') ?>href="apropos.php">A propos</a></li>
 <li><a <?php selected('contact') ?>href="contact.php">Contact</a></li>
</ul>

C'est fini

Voilà, voilà, vous savez maintenant comment et pourquoi créer un menu par onglets.
Critiques, questions, problèmes et commentaires dans... les commentaires [mode apple off ;)]

]]> http://www.jkconception.com/dotclear/index.php/2007/07/02/20-un-menu-par-onglet-svp Et si on parlait navigation ? http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/7fi-SZCujj0/19-et-si-on-parlait-navigation 2007-06-13T23:05:33+02:00 fr Jonathan Kowalski Internet Il peut paraître bizarre qu'à l'heure du web 2.0, du dynamisme affirmé de notre toile, on puisse encore discutailler sur la navigation. C'est vrai quoi, le webmaster que je suis, et que vous êtes peut-être, sais très bien comment rendre un site navigable efficacement et agréablement. Ben oui, non mais sans blague !!! ... Bon allez, faisons fî, l'espace de quelques secondes, de notre ego naturel de meilleur webmaster du monde et tachons, grâce à Derek Powazek, de nous poser les vrais questions. C'est vrai quoi, le webmaster que je suis, et que vous êtes peut-être, sais très bien comment rendre un site navigable efficacement et agréablement.
Ben oui, non mais sans blague !!!
...
Bon allez, faisons fî, l'espace de quelques secondes, de notre ego naturel de meilleur webmaster du monde et tachons, grâce à Derek Powazek, de nous poser les vrais questions.

Sommaire

Qu'est-ce que la navigation ?

On commence par les définitions du net et on apprend d'après le glossaire de powered-by-net, que la navigation c'est :
Fait de passer d'une page à l'autre dans un site Internet. Le système de navigation permet d'accéder directement à la page désirée sans être obligé de suivre un ordre pré-établi.
Ok, rien de bien neuf, rien qui mérite un article (sic). En revanche une définition trouvée sur le site de la garde côtière canadienne mérite toute notre attention :
Déplacement d'un point à un autre en sachant où on se trouve par rapport à la route choisie.
Bien qu'étant originellement, déstinée à la navigation en mer, elle se rapproche assez de ce qu'est ou en tout cas devrait être la navigation sur un site web.

Passé, présent, futur

La navigation sur un site web, n'est pas qu'un simple ensemble de liens, c'est un véritable outil de communication voire d'intéraction avec l'utilisateur. La navigation doit pouvoir le renseigner sur son passé, son présent et son futur sur votre site, répondant ainsi aux questions :
  1. D'où viens-je ?
  2. Où suis-je ?
  3. Où Puis-je aller ?
(Note aux futurs bacheliers qui viennent de passer l'épreuve de philo : je peux comprendre que vous arretiez là la lecture ;) )
Cela peut paraître évident à tous, mais faisons le test, prenons une page au hasard dans le vaste web.
Peut-elle répondre à nos trois questions existentielles ?
La réponse est trop souvent non.

Mais pourquoi est-ce important ?

Bien oui, c'est vrai ça au fait !
Tout simplement parceque c'est un élément inévitable de votre crédibilité. Des études montrent sans discussion possible que la navigation est l'un des facteurs-clé dans le choix par l'utilisateur de vous "bookmarker" ou de simplement passer à autre chose...

Les règles à suivre

Maintenant que vous êtes convaincus de la pertinence d'une bonne navigation, voici donc trois règles simples pour rendre notre navigation plus crédible.
Ne jamais lier la page sur laquelle on est

La navigation parle (ne me regardez pas comme ça !), donc je le re-dis, la navigation parle et quand le pointeur de la souris se transforme en petite main au dessus-d'un lien, elle dit : "Ceci est un lieu où vous pouvez aller, cliquez-moi pour y aller maintenant".

De fait, l'internaute s'attend donc, lors du clic, à être transporté sur une nouvelle page ou à défaut à ce qu'il se passe quelque chose. Hors s'il ne se passe rien lors du clic, l'expèrience de navigation, justement, devient mauvaise puisque le visiteur est alors déçu.

Toujours montrer où l'on est
Ce point est dans la même veine que le premier, il est très important que l'utilisateur ne se sente jamais perdu (on verra dans un prochain article l'importance des "sitemaps"). Donnez-lui le maximum d'indices visuels sur sa position.
Réfelechir avant de lier

Tout simplement, à chaque lien, mettez-vous à la place du visteur qui arrive sur votre page pour la première fois et posez-vous la question : "Est-ce que ce lien va me servir dans le cadre de la navigation globale du site ?"

Soyez toujours sûr que votre navigation raconte l'histoire que vous voulez qu'elle raconte et surtout qu'elle demeure la description fidèle de votre site pour votre visiteur

Cela pose évidemment de nombreuses questions, peut-être même plus que cela n'apporte de réponses, le lien "Accueil" doit-il faire partie de la navigation globale ? Faut-il rester sous les cinq liens pour cette dernière ? Quid des sous-menus ? De nombreuses questions pour une réponse : ça dépend.

Architecturez, designez, créez votre site en fonction des internautes que vous avez et en fonction de ceux que vous voulez et surtout n'oubliez jamais, on peut toujours faire mieux...

Ressources

Cet article est une traduction libre de l'article de Derek Powazek, Where am I ? que vous pouvez trouvez en VO ICI]]> http://www.jkconception.com/dotclear/index.php/2007/06/13/19-et-si-on-parlait-navigation eyeOS ou l'autre dimension du web http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/LhmKSkqmHaU/18-eyeos-ou-l-autre-dimension-du-web 2007-06-10T22:00:11+02:00 fr Jonathan Kowalski Internet Vous en avez révé (sisi avouez...) EyeOs l'a fait.... Vous en avez révé (sisi avouez...) EyeOs l'a fait....

Mais quoi donc me direz-vous la bave aux lèvres et les yeux tout écarquillés ?!!?!?
Prenez un mouchoir, je vais mettre fin à cet insoutenable suspense (sic). EyeOS vient enfin de sortir en version 1.0 finale joliment baptisée Dahlia.

Bref tout cela est bien joli mais ne nous dis pas ce qu'est EyeOs. Et bien EyeOs est, comme son nom l'indique partiellement, un Operating System ou système d'exploitation (un Windows quoi) qui utilise uniquement votre navigateur préféré.
En effet ! Point d'installation ici, il suffit d'ouvrir votre panda et vous tombé nez-à-nez avec un véritable petit système contenant tout ce qu'il faut pour bien travailler, navigateur de fichier, calendrier, traitement de texte, jeu d'echec et même navigateur internet !

Bon attention, on est loin de la puissance de l'outil de Microsoft ou d'une bonne distib Linux mais c'est déjà impressionnant.
Impressionnant donc et la performance est clairement à souligner mais le mieux est encore d'aller se rendre compte par soi-même de la bête grâce à la page de demo.

La dernière question reste de connaitre la véritable pertinence d'avoir un OS qui se lance à partir d'un autre...

Ressources

Liens

l'adresse d'EyeOS

Screens




]]> http://www.jkconception.com/dotclear/index.php/2007/06/10/18-eyeos-ou-l-autre-dimension-du-web Créer un preloader HTML http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/RrAGPFiIRDo/17-creer-un-preloader-html 2007-06-08T19:21:28+02:00 fr Jonathan Kowalski Technique Un preloader HTML ?? A quoi ça peut bien servir et comment ça se fait ? PS: Vous pouvez cliquer sur "Lire la suite", rien ne charge vraiment ;-) A quoi ça peut bien servir et comment ça se fait ?

Loader fictif

PS: Vous pouvez cliquer sur "Lire la suite", rien ne charge vraiment ;-)

Sommaire

Le but...

Compte tenu du poids des images, du contenu dynamique à parser toujours croissant, il peut arriver que votre page ne soit pas très esthétique durant son chargement.
Afin de rendre ce chargement un peu plus agréable à l'utilisateur, nous allons voir ici comment développer un petit preloader grâce à JavaScript et la manipulation de propriétés CSS.

Le principe

Il est tout simple (le principe), nous allons diviser notre page en deux parties, l'une contenant tout le contenu de notre site, l'autre ce qui sera presenté au visiteur durant le chargement du dit-contenu.

Le HTML

<body>
<div id="wait">
<!--on place ici notre loader, l'image vue plus haut par exemple-->
</div>
<div id="content">
<!--on place ici tout le contenu du site-->
</div>
</body>

Voilà, rien de compliqué donc, on passe au JavaScript qui va nous permettre d'obtenir l'effet voulu.

Le JavaScript

On va placer deux petits scripts, le premier entre les balises <head> de notre page, le second à la fin du document, juste avant la balise </body> de celui-ci.

Dans le head
Le code
<script type="text/javascript" language="javascript">
<!--
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name)
{
if (document.getElementById)
{
return document.getElementById(name).style;
}
else if (document.all)
{
return document.all[name].style;
}
else if (document.layers)
{
return document.layers[name];
}
}

function ap_showWaitMessage(div, flag)
{
if (!DHTML) return;
var x = ap_getObj(div);
x.display = (flag) ? 'block':'none'
return true;
}

ap_showWaitMessage('wait', 1);
//-->
</script>
l'explication

Allons y pour l'explication de ce petit bout de code :

La variable DHTML et la fonction ap_getObj nous permet de selectioner par l'id du div ses CSS quelque soit l'arbre de DOM de notre navigateur.

La fonction ap_showWaitMessage(div, flag) va en fonction du "flag" fixé le display du div à block ou à none. En d'autres termes, on donne l'identifiant du div voulu à la fonction et par l'opérateur conditionnel ? (que l'on a déjà vu dans Le styleswitcher Javascript) si le flag est à 1 on affiche le div, s'il est à 0 on le masque.

Pour finir, on affiche par défaut le div 'wait'

A la fin de la page
Le code
<script type="text/javascript" language="javascript">
<!--
ap_showWaitMessage('wait', 0);
ap_showWaitMessage('content', 1);
//-->
</script>
L'explication

En fin de page, donc lorsque toute notre page est chargée (c'est là qu'est l'astuce ;-)), on cache le div d'attente et on affiche le div content

Pour finir

Deux petites remarques pour finir, il est à noter que le display de votre div content doit être fixé à none par défaut, et celui de wait à block

La seconde remarque concerne l'accessibilité, en effet si votre visiteur a désactivé l'usage de JavaScript dans son navigateur, il n'aura pas accès à votre site !
Il est donc nécessaire d'insérer un lien vers votre page dépourvue de tout effet javascriptien dans votre preloader

Voilà pour notre preloader, remarques, critiques et autres c'est dans les comm' :)

]]> http://www.jkconception.com/dotclear/index.php/2007/06/08/17-creer-un-preloader-html Les cookies http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/ydv8xdVfG34/15-les-cookies 2007-06-02T21:54:48+02:00 fr Jonathan Kowalski Technique Recettes PHP et JavaScript des cookies. Parceque les cookies, c'est bon... PHP et JavaScript des cookies.

Parceque les cookies, c'est bon...

Sommaire

Qu'est-ce qu'un cookie

 En plus de délicieux gateaux les cookies sont aussi, selon Wikipedia,
de petits fichiers textes stockés par le navigateur Web sur le disque dur du visiteur d'un site Web et qui servent (entre autres) à enregistrer des informations sur le visiteur ou encore sur son parcours dans le site. Le webmestre peut ainsi reconnaître les habitudes d'un visiteur et personnaliser la présentation de son site pour chaque visiteur ; les cookies permettent alors de garder en mémoire combien d'articles il faut afficher en page d'accueil ou encore de retenir les identifiants de connexion à une éventuelle partie privée : lorsque le visiteur revient sur le site, il ne lui est plus nécessaire de taper son nom et son mot de passe pour se faire reconnaître, puisqu'ils sont automatiquement envoyés par le cookie.

Un cookie a une durée de vie limitée, fixée par le concepteur du site. Ils peuvent aussi expirer à la fin de la session sur le site, ce qui correspond à la fermeture du navigateur. Les cookies sont largement utilisés pour simplifier la vie des visiteurs et lui présenter des informations plus pertinentes. Mais une technique particulière permet aussi de suivre un visiteur sur plusieurs sites et ainsi de collecter et recouper des informations très étendues sur ses habitudes. Cette technique a donné à l'usage des cookies une réputation de technique de surveillance violant la sphère privée des visiteurs.
Nous voilà un plus cultivé, bien maintenant comment utiliser ces cookies (pour faciliter la vie de l'utilisateur pas pour le fliquer hein !).
D'une manière générale deux voire trois manipulations se font sur les cookies, la création, la lecture et la destruction.
Deux méthodes pour faire tout cela, en PHP ou en JavaScript. Puisque l'on peut avoir besoin de connaitre les deux, commençons par le PHP :

Manipuler des cookies en PHP
Création
La création de cookies en PHP se fait via la fonction setcookie qui se definit comme suit : bool setcookie ( string name [, string value [, int expire [, string path [, string domain [, bool secure [, bool httponly]]]]]] )
Comme vous pouvez le voir seul le nom est obligatoire. Il est aussi à noter que les cookies sont des en-têtes et doivent donc être envoyer avant toute sortie balise <html> ou <head>
Voyons tout de suite un exemple un poil plus concret.
Exemple
<?php setcookie("Nom","Dupond",time()+3600); ?>
Ceci va donc nous créer un cookie nommé "Nom" dont la valeur est "Dupond" et qui expire dans une heure. Concernant l'argument expire, il est à noter que celui-ci est un timestamp Unix et qu'il vous faudra donc utiliser la fonction time() ou mktime(). Si vous occultez l'argument expire ou si vous le fixez à 0, le cookie expirera à la fin de la session (soit la fermeture du navigateur).
Je ne m'attarderais pas plus sur les arguments de setcookie mais vous pouvez retrouver toutes les explications nécessaires sur l'excellent manuel php ICI.
Lecture
La aussi la manipulation est simplissime, on récupère nos cookies grâce aux variables prédéfinies $_COOKIES ou $HTTP_COOKIE_VARS
Ainsi et pour reprendre l'exemple :
Exemple
<?php
echo $_COOKIE['Nom']; // affichera Dupond
echo $HTTP_COOKIE_VARS['Nom']; //affichera aussi Dupond mais n'est disponible qu'a partir de PHP 4.1.0
?>
La aussi c'est tout simple !
A noter que si vous désirez lister tous vos cookies vous pouvez le faire via la méthode suivante :
<?php
print_r($_COOKIE); //affichera tous vos cookies
?>
Voilà pour la lecture, passons donc à la destruction !
Destruction (MAJ 04/06)
La méthode vue précédemment (à savoir l'utilisation de setcookie avec comme seul argument le nom du cookie) ayant à priori des réactions difficilement prévisibles, puisque si un cookie dont la valeur est null, est censé être éffacé du client, cela ne semble pas toujours être le cas, nous allons voir deux méthodes plus "sûres" afin de faire disparaitre ces délicieux biscuits.
La première, toujours en utilisant la fonction setcookie, consiste à fixer la date d'expiration dans le passé (-1 heure par exemple).
Exemple
<?php
setcookie("Nom", "", time()-3600); //detruira notre ami Dupond :'(
?>
la seconde méthode est, comme le suggère notre ami Thanh, d'utiliser la fonction unset toujours utile pour détruire une variable !
Exemple
<?php
unset($_COOKIE["Nom"]); //detruira notre ami Dupond :'(
?>

Voilà, c'est à peu près tout ce qu'il y a à savoir sur les cookies et leur manipulation via PHP. Rien de bien compliqué donc et c'est aussi le cas avec JavaScript, que nous allons voir tout de suite.
Mais avant je sens pointer la question :
Mais pourquoi je me ferais ***** à apprendre à les manipuler en JavaScript alors que je sais le faire maintenant en PHP ?
Très bonne question à laquelle, en temps que pseudo informaticien et vrai feignant, il est difficile de trouver une réponse engageante. Cependant on pourra en avncer au moins deux, la première : "On en sait jamais assez"...
Ok, passons à la deuxième alors, on a pu voir que la manipulation via PHP nous obligeait à utiliser la fonction setcookie avant toute sortie ce qui est somme toute assez limitatif hors JavaScript nous permet de nous affranchir de cette limitation en nous permettant la manipulation de cookie à n'importe quel moment/endroit de notre page.
Troisième raison qui n'en est pas une, c'est aussi très simple.

Manipuler des cookies avec JavaScript
Création
Evidemment que ce soit en JavaScript, PHP, VBScript ou Mambo, un cookie reste un cookie avec les mêmes paramètres.
En Javascript on crée un cookie grâce à document.cookie, le mieux est de créer une fonction afin d'éviter les répétitions de code. On pourra donc utiliser la fonction vu précédemment dans le tuto pour créer un changeur de style en JavaScript :
<script type="text/javascript" language="JavaScript" >
function creerCookie(name,value,days) {
if (days) {
var date = new Date(); //on instancie un objet Date
date.setTime(date.getTime()+(days*24*60*60*1000)); //on recupère la date
var expires = "; expires="+date.toGMTString(); //on fixe la date d'expiration
}
else expires = ""; //si la date n'est pas précisée on fixe la valeur par défaut
document.cookie = name + "=" + value + expires + "; path=/"; //on crée le cookie
}
</script>
On place ce bout de code entre les balises <head> de notre page. Ainsi pour créer un cookie, il suffit d'appeler cette fonction à partir du corps de notre page et de cette manière :
Exemple
<script type="text/javascript" language="JavaScript" >
creerCookie("Nom","Dupond",30);
</script>
Cela va donc nous créer un cookie "Nom" qui aura pour valeur "Dupond" et qui expirera à 30 jours.
Lecture
Ici aussi, on utilise une fontion qui se présente comme suit :
<script type="text/javascript" language="JavaScript" >
function lireCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
</script>
Cette fonction étant un peu compliqué, on la détaillera pas ici (a moins que vraiment vous insistiez ;p). Toujours est-il que son utilisation, elle, est très simple puisqu'il suffit d'inserer dans notre corps de page un petit appel de cette manière :
<script type="text/javascript" language="JavaScript" >
var nom = lireCookie("Nom"); //nom prendra pour valeur "Dupond"
</script>
Destruction
Pour finir, la destruction, pour détruire notre cookie, on va en fait recréer notre cookie, mais avec une date d'expiration obsolète :
<script type="text/javascript" language="JavaScript" >
function EffaceCookie(nom)
{
date = -1;
creerCookie(nom,null,date);
}
</script>
L'expiration a, ici, été fixée à -1 jour, mais peu importe du moment que c'est antérieur à maintenant (moins 1 heure aurait marché). Donc voila ne reste plus qu'a appeler la fonction depuis notre page, je vous fais grâce d'ailleurs de celui-ci et m'en vais aller déguster quelques biscuits aux pépites de chocolat... ;)]]> http://www.jkconception.com/dotclear/index.php/2007/06/02/15-les-cookies Sécuriser un formulaire http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/XP8TFeLhnag/12-securiser-un-formulaire 2007-05-28T11:38:21+02:00 fr Jonathan Kowalski Technique Lorsque vous créez des formulaires (de contact par exemple), il subsiste toujours le risque, qu'un individu malveillant tente d'y insérer du code afin d'hacker votre joli site. Nous allons donc voir ici une première base afin de rendre vos scripts un peu plus sécurisés. htmlspecialchars.
En effet prenons l'exemple d'un formulaire tout simple.

Le formulaire

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mon formulaire pas sécurisé</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="traitement.php">
<p>Quel est votre nom ? <input name="nom" type="text" id="nom" size="20" maxlength="20" /></p>
<p><input type="submit" value="Baptise" /></p>
</form>
</body>
</html>

Dès lors, la page traitement.php que vous pourriez utiliser ressemblerait à ceci :

la page de traitement

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Affiche le nom</title>
</head>
<body>
<p>Bonjour, votre nom est : <?php echo $_POST['nom']; ?></p>
</body>
</html>

Ce n'est absolument pas sécurisé !

En effet l'utilisation du echo permet d'inscrire n'importe quel code HTML et est donc une faille potentielle
Mais comment regler ceci me direz-vous. Sechez donc les gouttes de sueur qui perlent sur votre front, la solution existe !

Il faut et il suffit (pour la plupart des utilisateurs en tout cas) de supprimer tout caractère suspicieux et notamment les "<" et ">".
Ca tombe bien une fonction php s'occupe de faire cela très bien, j'ai nommé : htmlspecialchars.
Ainsi htmlspecialchars va remplacer :

  • "&" (et commercial) qui devient "&amp;"
  • """ (guillemets doubles) qui devient "&quot;" lorsque ENT_NOQUOTES n'est pas utilisée.
  • "'" (single quote) qui devient "&#039;" uniquement lorsque ENT_QUOTES est utilisée.
  • "<" (inférieur à) qui devient "&lt;"
  • ">" (supérieur à) qui devient "&gt;"
La fonction s'utilise donc de la manière suivante : string htmlspecialchars ( string string [, int quote_style [, string charset]] ).
Ne vous inquiètez pas, nous allons détailler quelque peu cette fonction et notamment ses arguments.

Les arguments de htmlspecialchars
  • string string
    • Tout simplement la chaîne de caractères que vous voulez traiter.
  • int quote_style
    • Ici vous avez le choix entre :
    • ENT_COMPAT
      • Constante par défaut, elle convertit les guillemets double et ignore les simples.
    • ENT_QUOTES
      • Qui convertit à la fois doubles et simples.
    • ENT_NOQUOTES
      • Qui ignore à la fois doubles et simples
  • string charset
    • Le dernier argument (optionnel), vous permet de spécifier le jeu de caractères utilisé durant la conversion (par défaut ISO-8859-1)

En définitive, notre page traitement.php ressemblera donc à ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Affiche le nom</title>
</head>
<body>
<p>Bonjour, votre nom est : <?php echo htmlspecialchars($_POST['nom'], ENT_QUOTES); ?></p>
</body>
</html>

Voilà, plus de caractères dangereux, c'est là un premier pas vers une plus grande sécurisation de vos formulaires, il ne vous plus plus qu'à vous rendre à vos claviers !

Aller plus loin

N'hésitez pas à vous renseigner sur les fonctions htmlentities ou htmlspecialchars_decode qui pourront peut-être aussi vous servir

]]> http://www.jkconception.com/dotclear/index.php/2007/05/28/12-securiser-un-formulaire POMPAGE - Bien utiliser le texte alternatif http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/ictcUpvOqb8/11-pompage-bien-utiliser-le-texte-alternatif 2007-05-25T11:41:35+02:00 fr Jonathan Kowalski Technique Un excellent article du non-moins excellent Pompage à propos du texte alternatif (balise alt entre autre) de sa pertinence et de sa méthodologie. POMPAGE - Bien utiliser le texte alternatif... Un excellent article du non-moins excellent Pompage à propos du texte alternatif (balise alt entre autre) de sa pertinence et de sa méthodologie.

POMPAGE - Bien utiliser le texte alternatif

]]> http://www.jkconception.com/dotclear/index.php/2007/05/25/11-pompage-bien-utiliser-le-texte-alternatif La guerre des DRM http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/LQBFZe4anAs/10-la-guerre-des-drm 2007-05-03T23:00:13+02:00 fr Jonathan Kowalski Internet Il n'y a pas longtemps, dans un monde très proche du notre, un homme porté par la voie populaire osa se dresser contre l'opression... Ou quand Kevin Rose, fondateur de Digg cède à la pression de ses internautes et prend ses responsabilités face à la toute puissante industrie des DRM. Ou quand Kevin Rose, fondateur de Digg cède à la pression de ses internautes et prend ses responsabilités face à la toute puissante industrie des DRM.

Un nouvel espoir

Peut-être connaissez-vous Digg ?
Peut-être savez-vous, par ailleurs, que de nombreux DVD HD sont protégés par DRM (protection contre la reproduction des films) ?

Bon pour répondre à la première question, Digg est, depuis sa naissance fin 2004, l'une des icônes du Web 2.0. Digg permet notamment aux utilisateurs de proposer des actualités, sur lesquelles ceux-ci peuvent voter et ainsi influer sur le classement de ces actualités.

Bien, mis à part un petit elargissement de votre culture web si vous ne connaissiez pas Digg, il est légittime de se demander à ce moment du post, pourquoi ? C'est bien joli tout ça mais où veut-il en venir et quel est le rapport avec les DRM ?

En fait là où ça devient intéressant (qui a dit pas trop tôt :P ) c'est que les DRM consistent en une clé sur 128 bits censée rester secrète et cryptant données audio et vidéos.
Hors ce qui devait arriver, arriva et un utilisateur, de Digg donc, dévoila la fameuse clé.

L'empire contre-attaque

Evidemment, cette actu a immédiatement eu un succès énorme avec plus de 15 000 votes en à peine quelques heures. (Notons tout de même que cette clé permet de copier n'importe quel film gravé avant la dernière date de modification de celle-ci soit le 23 avril)

Apprenant cela, l'AACS LA, consortium gérant les protections du même nom, ont immédiatement contacter Digg afin d'exiger la suppression de cette infamie.

Tout rentra dans l'ordre puisque le post fut supprimer et l'utilisateur banni à titre d'exemple.

Pourtant, la rebéllion s'organisa et un nouvel article fut réécris quelques minutes seulement après la suppression du premier. Nouvel article qui fut presque immédiatement supprimé à son tour. Cependant les utilisateurs de Digg continuèrent à publier massivement des articles incluant la clé de la discorde tous supprimés quelques instants plus tard.

Le retour du Jedi

Ce petit jeu continua jusqu'à ce que Kevin Rose, fondateur de Digg prenne la parole sur le blog de Digg :

Aujourd'hui, c'est un jour de folie. En tant que fondateur de Digg, je voulais partager ma réflexion avec vous. Nous avons essayé de rester disponibles. Nous vous avons toujours laissé le pouvoir à la communauté. Occasionnellement, nous sommes intervenus pour supprimer des sujets qui violaient les règles d'utilisation du site ( lien vers des sites pornographiques, haine raciale etc..). Donc aujourd'hui a été un jour difficile pour nous. Nous avons du choisir de retirer ou de laisser des thèmes contentant un code sur la base d'une injonction. Pour éviter un scénario où Digg serai interrompu ou fermé, nous avons décidé de plier et de supprimer toute histoire mentionnant ce code.

Mais maintenant, après avoir vu des centaines de mentions, et lu des milliers de commentaires, vous avez rendu les choses très claires. Vous préférez que Digg coule en se battant plutôt que de le voir plier face à une société plus puissante. Nous avons entendu, et à partir de maintenant, nous n'effacerons pas les histoires mentionnant ce code, et nous ferons face aux conséquences quelles qu'elles soient.

Si nous perdons, et bien au moins nous serons morts en combattant
La V.O.

Kevin Rose a certainement contenté sa force vive, celui qui le fait vivre, celui qui décide, le seul qui soit vraiment au centre du Web 2.0, l'utilisateur. Il va maintenant devoir faire face et rendre compte à la justice et à la puissante AACS LA (derrièrre qui se cache IBM, Intel, Microsoft, Panasonic, Disney, Sony, Toshiba ou encore Warner Bros).

A la fin Luke bat l'empereur tandis que Vador symbole incarné du mal se repentit. Il semble cependant que le coté obscur soit beaucoup plus puissant dans la vie réelle et il est probable qu'un seul Luke ne suffise pas. A bon entendeur...

]]> http://www.jkconception.com/dotclear/index.php/2007/05/03/10-la-guerre-des-drm Affichage en 95C http://feedproxy.google.com/~r/JkconceptionLeBlog/~3/MfajkUcIWHc/8-affichage-en-95c 2007-03-28T15:52:19+02:00 fr Jonathan Kowalski Marketing Excellente campagne d'affichage pour Wonderbra ! Il fallait y penser ! Excellente campagne d'affichage pour Wonderbra ! Il fallait y penser !

On remarquera le jeune homme à qui la pub semble aussi beaucoup plaire...


]]> http://www.jkconception.com/dotclear/index.php/2007/03/28/8-affichage-en-95c