JQUERY Un plugin génial de validation de formulaire

Bonjour !
Aujourd'hui petit tutoriel sur un plugin de validation de formulaire. Fini la galère des formulaires validés tant bien que mal. Ici on fait ca très facilement et en un temps record.

Voici le résultat qu'on obtient a la fin :   

Validation du formulaire

Etape 1 : Tout d'abord, il faut télécharger les fichiers. Il vous faut la dernière version de JQuery, le plugin en question, les feuilles CSS relatives et un petit exemple pour vous aider si jamais vous êtes perdus :

Ficher d'exemple

Regardez dans l'archive (.zip), on retrouve ces élements.

Etape 2 : Ajoutez ces lignes entre vos balises  HEAD

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-fr.js" type="text/javascript"></script>

 Le fichier jquery.validationEngine-fr.js est une extension pour les personnes utilisant un navigateur parametré en francais. Les autres auront le plugin normal, en anglais. Vous pouvez cependant le parametrer comme bon vous semble.

Etape 3 : Une fois les librairies et le JQuery inclus, il faut maintenant appeler la fonction de validation du formulaire sur le formulaire que vous voulez valider.

$(document).ready(function() {

    $("#formID").validationEngine({

        success :  false,

        failure : function() { callFailFunction()  }

    })

})

Vous l'aurez compris, vous pouvez utiliser une classe ou un id, ici c'est le cas ou votre formulaire possède l'attribut id="formID"
Vous devez mettre ce code entre des balises <script type="text/javascript"></script> ou alors dans un fichier *.js et inclus dans cette même balise avec l'attribut src="monfichier.js"

Dernière Etape, 5 :
I ne reste plus qu'a associer à chaque champ que l'on veut valider une classe spécifique. Par exemple, pour un champ obligatoire qui ne doit comporter que des lettres et qui ne doit pas dépasser 100 caractères :

<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />

 Et voilà, maintenant, vous pouvez utiliser ces arguments pour la validation de vos champs :

optional: Special: Only validate when the field is not empty *Please call optional first
required: Field is required
length[0,100] : Between x and x characters allowed
maxCheckbox[7] : Set the maximum checkbox autorized for a group
minCheckbox[7] : Set the minimum checkbox autorized for a group
confirm[fieldID] : Match the other field (ie:confirm password)
telephone : Match telephone regEx rule.
email : Match email regEx rule.
onlyNumber : Numbers only
noSpecialCaracters : No special characters allowed
onlyLetter : Letters only
date : Invalid date, must be in YYYY-MM-DD format

Installer ie6 et ie7 sur Ubuntu

Bonjour à tous!

Mise en contexte

Ubuntero féru d’internet, vous avez votre propre blog…Cool!
Vous décidez d’en modifier le look, et c’est là que la misère commence: de quoi à l’air votre blog, pour les surfeurs utilisant d’autre navigateurs? Comment déceler et corriger les éventuelles erreurs qui pourraient apparaître à partir d’un autre navigateur, et notamment les Internet Explorer.
Certes, il existe des outils tels que celui-ci, qui peuvent aider, dans un premier temps, mais cela devient fastidieux d’utiliser de tel outils pour la moindre correction (surtout si vous êtes comme moi: partisan de la méthode essais/erreur !) .

Présentation d’ ie4linux

Je vous propose une méthode simple pour installer Internet Explorer 6 ET Internet Explorer 7, grâce au script ie4linux! Celui-ci permet l’installation rapide et facile de ces deux navigateurs, au travers d’une interface graphique.

Installation d’ ie4linux

Attention, le support d’Internet Explorer 7 via ie4linux est encore en phase beta! Ne le faites que si vous êtes sûr de vous! Si votre ordinateur explose, ne vous en prenez qu’à vous même. N’oubliez pas de faire des sauvegarde, de temps en temps! Chez moi, je n’ai eu aucu problème, mais cela ne veut pas dire que vous n’en aurez pas!!! A vos risques et périls
Pour installer ces navigateurs, certains paquets sont requis:
En console:
apt-get install wine libxxf86dga1 libxxf86vm1 cabextract
Ensuite, toujours en console:
wget http://www.tatanka.com.br/ies4linux/downloads/ies4linux-2.5beta6.tar.gz
tar zxvf ies4linux-2.5beta6.tar.gz
cd ies4linux-2.5beta6/
./ies4linux
Cette interface apparaîtra:

Choisissez les options qui vont bien, ensuite, cliquez sur “Advanced”:

Cochez la case “7.0″ tout en bas.
Puis, cliquez sur “Validez” et encore une fois sur “Validez”, attendez un peu que la magie opère et hop, vous avez maintenant droit à IE6 et IE7 dans menu>application>internet !
Le look que IE7 est celui de IE6, mais le rendu est bien celui de IE7, il n’y a aucun soucis la dessus

Désinstallation

Pour désinstaller ie4linux, il suffit, en console, d’exécuter le script à nouveau, mais avec un paramètre:
./ies4linux --uninstall


Source : http://www.pastanque.be/splitsch/ubuntu/ie4linux-installer-internet-explorer-6-et-7-sur-ubuntu.html

Google Wave - That's now !

Qu'est ce que Google wave ??

Si vous suivez l'actualité des technologies de l'informatique, vous avez probablement entendu parler de cette fameuse vague, Google Wave arrive et c'est pour notre plus grande plaisir !

C'est une nouvelle facon de communiquer, à mi-chemin entre l'email, les chats, les forums, twitter et Netvibes.

Je suis perdu...

A tout nouveau concept, nouveau vocabulaire. Google a créé, inventé Google Wave, voici des petites explications..

1. Wave (vague) : une vague représente un flot de communication, avec plusieurs personnes humaines et des robots, se déroulant sur une période de temps. Ce flot de communication est lancé par un participant, à destinations d'autres participants (humains ou non). Les moyens de communication peuvent être de tous types : texte riche, images, documents, vidéos, cartes, évènements de calendrier, gadgets... Une vague est similaire aux Thread (discussions) des forums et de Gmail, aux conversations en messagerie instantanée etc.
2. Wavelet (vaguelette) : une vaguelette est une partie de vague qui peut être restreinte à certains utilisateurs. Par exemple, lors d'une discussion entre 5 amis, un couple d'ami peut vouloir discuter du même sujet mais sans que les autres n'accèdent à votre discussion. En créant une vaguelette privée, les deux personnes peuvent communiquer (en privé) tout en gardant le reste de la discussion (publique) disponible...
3. Blip : un blip est la plus petite unité de communication d'une vague : c'est l'équivalent de ce que vous envoyez dans un mail à chaque fois que vous cliquez sur le bouton envoyer. 

 Ainsi après avoir tout configuré, Google Wave s'affiche sous cette interface :

Analysons cette interface. En haut dans la colonne de gauche nous retrouvons les habituels dossiers de réception et d'émission d'emails (Réception, Corbeille, Tous, Spam...) ainsi que l'accès aux paramètres. Juste en dessous, une liste de contact (pour l'instant ça ressemble beaucoup à Gmail). La seconde colonne contient les waves avec un sujet, une icône pour les pièces jointes (le trombone gris) et les gadgets (la pièce de puzzle verte), les contacts y participant le nombre et l'heure des messages ainsi que le nombre de blip non lus (en blanc sur fond vert). En sélectionnant une wave, elle s'affiche dans la colonne de droite. On retrouve tout en haut la liste des participants, une barre d'outils et les blips. Jusqu'ici rien de très original.

Que puis-je faire de plus avec Google Wave ?

L'intérêt de Google Wave est que chaque Wave est une façon unifiée de communiquer avec ses contacts. Qu'ils soient tous hors ligne, connectés à leur messagerie instantanée, ou un savant mélange des deux, la façon de communiquer est TOUJOURS la même : il suffit de cliquer sur une vague et de commencer à taper (pour le texte), glisser déposer une image (pour l'uploader), coller un lien vers youtube, flickr, etc... pour insérer une galerie ou une vidéo automatiquement. Google Wave se charge alors du reste en temps réel.

Un contact est connecté ? Il a voir en temps réel ce que vous marquez (si vous le souhaitez et qu'il fait partie de vos destinataires), caractère par caractère, sans qu'il soit nécessaire de cliquer sur "envoyer". Il pourra même répondre ou il le souhaite (avant, au milieu ou après votre contribution) et éditer ce que vous avez dit.

Un autre contact n'est pas connecté ? Pas de soucis, wave enregistre le tout en temps réel, et ce destinataire pourra revoir ce que vous avez tapé (mais aussi les autres participants) et dans quel ordre grâce à une barre de temps (timeline) similaire au visionnage d'une vidéo.

Un des contacts est japonais et ne parle pas un mot de français ? Invitez donc un robot de traduction à votre wave, il se chargera de traduire (toujours en temps réel) ce que vous dite. Vous parlez des cours des actions de MSFT et GOOG ? Un robot financier que vous aurez invité pourra ajouter les graphes temps réel des cours des actions pour les entreprises dont vous parlez. Assez parlé de travail, organisons une soirée ! Intégrez une carte Google maps et éditez la en temps réel avec les autres participants.

Vous allez me dire que c'est du Google docs en temps réel. Oui ! Mais c'est aussi du Gmail, du Google Talk, du Google calendar, du Google Maps, du Youtube, du Picasa, du Gdrive du Google Translate et du Orkut en même temps. Et même d'avantage ! Un ami est sur twitter ? Pas de soucis, un robot peut intégrer ses tweets dans la vague. Un autre ami est disponible via son téléphone mobile ? Un sms pourra lui envoyer toutes les informations de la discussion.

Que veut Google avec Wave ?

Google Wave a pour objectif de devenir 3 choses : un service, une plateforme et un protocole. Le service, Google Wave est exactement ce que vous venez de découvrir via les paragraphes précédents et les captures d'écran. La plateforme est l'application derrière Google Wave et son API, open source, disponibles pour être installés par tous (pour les entreprises par exemple). Google espère ainsi que ce système soit utilisés par plusieurs grosses entités pour atteindre une masse critique rapidement. Enfin, le protocole (brouillon disponible) a pour but de permettre à tous les waves installés de pouvoir communiquer. Ainsi si un utilisateur de Google Wave veut parler à un utilisateur de Microsoft Wave et inviter un robot de Yahoo Wave, le tout doit savoir comment communiquer.

L'espoir de Google est d'attirer les développeur dans leur API Google Wave afin de générer un cercle vertueux : des développeurs font des choses cool avec Wave, plus d'utilisateurs viennent sur le service, donc nouveaux développeurs et fournisseurs de service arrivent sur la plateforme...

À en croire les réactions de l'auditoire de Google I/O, la chose a été TRÈS bien accueillie. Et il est fort probable que l'ouverture de l'API ce vendredi soit un grand succès pour Google.

C'est tout ce que l'on peut faire avec Wave ? Communiquer ? Mais c'est nul ça ne change rien à ce que l'on peut faire avec Gmail par exemple...

Le potentiel (mon enthousiasme) étant très fort, je vais essayer de vous présenter un autre exemple de ce qui sera possible avec wave. J'ai omis plus haut de vous parler d'une fonctionnalité intéressante, la possibilité de publier une vague. Ainsi vous pourriez rendre public le contenu d'une vague de votre choix, faire qu'elle soit indexable même autoriser d'autres utilisateur a y prendre part.

Ainsi une vague publique mais uniquement accessible en lecture pourra constituer un de vos billet sur votre blog, que vos lecteurs liront en temps réel alors que vous serez en train de le taper avec vos co-auteurs. Une autre vague publique mais accessible en écriture pourra faire office de flux de commentaires. Les possibilités sont quasiment infinies...

Utiliser le debugger en PHP avec Eclipse

Nous allons ici découvrir comment utiliser le débugger pour n'importe quel projet php sous eclipse.

Téléchargement et copie du fichier sur votre installation.

D'abord téléchargez le "Zend Debugger" ICI. Prenez la dernière version correspondante à votre système d'exploitation.
Si ce lien ne fonctionne pas, allez directement sur le site zend.com et téléchargez "zend debugger".

Ensuite lorsque vous avez téléchargé ce fichier, dézippez le et allez dans le répertoire correspondant à la version de php que vous avez.

Pour connaitre votre version de php, ouvrez une console et tapez la commande php --version.

Copiez le fichier ZendDebugger.so dans le fichier que vous voulez. Peu importe. Mieux vaut cependant que vous le mettiez dans un endroit stratégique, usuel et destiné à cet usage : le dossier de librairies de PHP.

Si vous etes sous ubuntu, les librairies de php se trouvent dans le répertoire qui doit ressembler à /usr/lib/php5/20060613+lfs. Attention, Ce répertoire change en fonction de votre version de php.

Si vous etes sous windows, c'est soit dans program files/php5 soit dans votre installation wamp.

Parametrage de votre serveur web

Il faut ensuite éditer votre fichier php.ini.

astuce sous ubuntu pour le trouver, tapez "locate php.ini" dans une console.

Lorsque vous l'avez trouvé ( ubuntu :  /etc/php5/apache2/php.ini) lancez un éditeur de texte puis ajoutez ces lignes :

[Zend]
zend_extension="/{chemincompletversvotrefichier}/ZendDebugger.so"
zend_debugger.allow_hosts="127.0.0.1, {AJOUTEZ ICI UNE PLAGE D'ADRESSE AUTORISEE, par exemple 192.168.1.* si votre ip est de ce style}"
zend_debugger.expose_remotely=always

un petit redémarrage du serveur web est de rigueur sous ubuntu :

/etc/init.d/apache2 restart

vous pouvez vérifier si votr emodule est installé en créant une petite page avec ce code <?php  phpinfo(); ?> 

Parametrage de votre Eclipse php

Il faut ensuite paramétrer eclipse pour utiliser le debugger correctement.

Cliquez sur la fleche à coté de l'icone en forme d'insecte puis sélectionnez  "Debug configuration".

Remplir les champs
Name,
PHP Server->New et renseignez les informations de votre serveur,
File en rensignant n'importe quel fichier (c'est un fichier pris au hasard, ce n'est pas important).

Pour utiliser Firefox comme navigateur, allez dans le menu Window->Préférences->General->WebBrowser puis sélectionnez Use external Web Browser.

Votre debugger est maintenant pret à etre utilisé avec Eclipse, Php et firefox.

Un beau Nuage de compétence !!!

Si ca vous interesse, vous pouvez faire le votre sur cet excellent site : tagul.com

nFriedly

Je viens de découvrir ce site qui m'a l'air vraiment extra en ce qui concerne les ressources AJAX et JS. Tuto à gogo, c'est pas ici : nfriedly