Zhell - Portfolio de Julien Siwek - Intégrateur / Développeur Web Freelance

Focus et Blur sur les formulaires avec jQuery

Zhell — Thu, 02 Sep 2010 10:40:36 +0000

Il est souvent utile, pour économiser de la place, de ne pas mettre de label pour les champs d’un formulaire, pour les intégrer directement dans le contenu de l’input. Il devient alors obligatoire d’enlever ce texte lors du focus sur le champ, pour éviter à l’utilisateur de devoir supprimer ce contenu avant de rentrer ses informations. (et pourquoi pas, remettre la valeur par défaut si rien n’a été saisi). Cela peut se faire en quelques lignes de jQuery :

$('.reset').focus(function(){
if($(this).attr('value') == this.defaultValue) $(this).attr('value', '');
}).blur(function(){
if($.trim(this.value) == '') this.value = (this.defaultValue ? this.defaultValue : '');
});

Grâce à ce petit bout de code, les champs possédant la classe .reset, seront vidés lors du focus, et la valeur par défaut sera remise si aucune donnée n’a été tapée.
(Voir l’exemple sur le formulaire de recherche de la sidebar ->)

Simple, et efficace !

NB : Cela marche aussi sur les textarea

Numericable

Zhell — Wed, 25 Aug 2010 11:38:10 +0000

Numericable

Intégration from scratch de l’ensemble des pages et newsletters, et développement front office avec jQuery (onglets, google maps, agendas, carousels…)

Visiter le site : http://offres.numericable.fr

ParisTech Review

Zhell — Mon, 02 Aug 2010 10:11:52 +0000

ParisTech Review

Intégration from scratch de l’ensemble des pages et newsletters, et développement front office avec jQuery.

Visiter le site : http://www.paristechreview.com

Entremont

Zhell — Fri, 07 May 2010 13:23:10 +0000

Entremont

Intégration et développement complet (jeux concours, site marque…)

Visiter le site : http://www.entremont.fr

Montruc Gerlinéa

Zhell — Tue, 13 Apr 2010 08:29:52 +0000

Montruc Gerlinéa

Intégration et développement complet (espace membre, ajout de recettes par les utilisateurs, ajout de commentaires, impression de webcoupons…)

Visiter le site : http://www.montrucgerlinea.fr

Envoi de mails en PHP avec phpmailer

Zhell — Wed, 09 Sep 2009 14:46:30 +0000

Pour ceux qui ne connaitraient pas encore cette classe (très !) pratique, il s’agit comme son nom l’indique d’une classe php permettant de l’envoi d’emails de manière très simplifiée. On peut utiliser le serveur SMPT afin d’envoyer des emails, ou simplement avec la fonction mail de PHP. Nous allons voir comment utiliser cette classe pour envoyer un mail au format HTML avec la fonction mail de PHP.

Il faut donc commencer par télécharger la classe phpmailer (de préférence la version pour php5/6).

Il faut ensuite inclure cette classe dans notre fichier php servant à envoyer
notre email :

// Pensez à préciser l'endroit ou est stockée votre classe
require_once 'inc/classes/class.phpmailer.php';

On crée ensuite notre objet PHPMailer, puis on définit l’expéditeur, le sujet, le message (au format HTML donc), ainsi que le destinataire :

$mail = new PHPMailer();
$mail->IsHTML(true); // Email au format HTML
$mail->From = "adresse.de@lexpediteur";
$mail->FromName = "Nom du l'expediteur";
$mail->Subject = "Sujet du mail";
$mail->MsgHTML('Contenu de votre message au format HTML');
$mail->AddAddress("adresse.du@destinataire"); // Vous pouvez donc ajouter plusieurs destinatiares

Il nous reste alors plus qu’à envoyer l’email en vérifiant que tout se passe bien :

if($mail->Send())
echo "Message envoyé";
else
echo "Erreur lors de l'envoi";

Vous pouvez ensuite ajouter des pièces jointes (AddAttachment()) ou des destinataires en copie. Vous pouvez accéder aux différentes méthodes sur le site officiel.

Petite note si vous souhaitez envoyer des emails en UTF8, pensez à encoder votre fichier php en UTF-8, à préciser l’encodage pour php mailer, et rajouter le meta correspondant dans votre message HTML :

$mail->CharSet = 'utf-8'; // Précision sur l'encodage pour phpmailer
$mail->MsgHTML('Contenu de votre message au format HTML'); // Précision de l'encodage du mail

Mise en ligne Wordpress – le SQL

Zhell — Fri, 17 Jul 2009 23:52:20 +0000

Comme c’est souvent le cas, on développe et commence à remplir un site sous Wordpress en local avant de procéder à la mise en ligne. On publie en effet rarement un site vide qu’on enrichira par la suite, on fixe une base.

Lors du passage en ligne, il est possible d’utiliser la fonction fort pratique ‘export de Wordpress afin de passer tout le contenu du local vers la production. Cependant, il est parfois nécessaire d’exporter toute la base pour garder les bons id de pages, de catégories, etc…

Il suffit dans ce cas de passer tous les fichiers sur le serveur, de supprimer le fichier wp-config.php à la racine de Wordpress pour pouvoir en recréer un nouveau directement dans le navigateur avec les identifiants de base de données de votre hébergement.

Il faut ensuite copier l’intégralité de la base de données. Cependant on remarquera que les liens des images, des posts, etc… ne correspondent plus. Il faut donc modifier tout ça pour rendre Wordpress complètement fonctionnel. Connextez vous à votre phpmyadmin (ou autre) afin d’effectuer quelques reqêtes SQL pour modifier les chemins absolus enregistrés par Wordpress en local, ce qui donne ceci :

UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldsite.com', 'http://www.newsite.com') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.oldsite.com','http://www.newsite.com');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.oldsite.com', 'http://www.newsite.com');

Il suffit maintenant de remplacer le oldsite et newsite de ces requêtes par vos propres url, et le tour est joué !
Attention cependant, cela ne modifie pas les champs cachés (pouvant servir de vignettes aux posts par exemple, il faudra donc peut être les changer selon ce que vous avez mis en place).

Il sera de plus peut être nécessaire de jetter un oeil dans Réglages -> Divers pour vérifier que le dossier de stockage des uploads est bien fixé à « wp-content/uploads» , sans quoi vos uploads de fichiers risquent de ne plus marcher !

UPDATE wp_options SET option_value = replace(option_value, ‘http://www.oldsite.com’, ‘http://www.newsite.com’) WHERE option_name = ‘home’ OR option_name = ’siteurl’;
UPDATE wp_posts SET guid = replace(guid, ‘http://www.oldsite.com’,'http://www.newsite.com’);
UPDATE wp_posts SET post_content = replace(post_content, ‘http://www.oldsite.com’, ‘http://www.newsite.com’);

Changer le préfixe de table Wordpress

Zhell — Thu, 16 Jul 2009 09:59:40 +0000

Même si cela peut paraître extrêmement simple grâce à la simplicité de Wordpress, cela ne l’est finalement pas autant que ça. Une fois Wordpress installé avec l’extension de base « wp_» , il est possible qu’il faille changer ce préfixe pour une quelconque raison (protéger son site d’attaques éventuelles par exemple?).

C’est un petit peu plus compliqué que simplement changer le préfixe des tables dans phpMyAdmin et le wp-config.php, voici donc les étapes à suivre, pour changer le préfixe « wp_» par « new_» :

Changer le préfixe de table dans le fichier de configuration de Wordpress (wp-config.php à la racine).
```
$table_prefix  = 'new_';
```
Renommer l’ensemble des tables avec le nouveau préfixe (wp_options devient alors new_options)
Le dernier point, qui ne vient pas forcément à l’esprit, est de changer certaines valeurs dans la table new_options (anciennement wp_options) et new_usermeta. En effet certaines valeurs dépendent du préfixe de table et doivent être changés :
- Dans new_options, changer wp_user_roles en new_user_roles.
- Dans new_usermeta, changer wp_capabilities en new_capabilities, wp_user_level en new_user_level, et wp_autosave_draft_ids en new_autosave_draft_ids

(Cette option n’est pas forcément présente, elle l’est uniquement si vous avez sauvegardé des brouillons lors de vos éditions de post).

Voilà pour le changement de préfixe !

Espacements verticaux entre li sous IE

Zhell — Wed, 08 Jul 2009 10:37:24 +0000

Vous avez sans doute déjà passé un certain temps à essayer d’enlever un horrible espace blanc entre les éléments d’une liste sous Internet Explorer. Encore un bug du célèbre navigateur assez dérangeant. Afin de remédier à cela, il existe plusieurs solutions plus ou moins efficaces et ou fastidieuses à mettre en place.

Le problème provient de l’indentation du code qui est mal interprété par IE. Une solution simple (mais vraiment fastidieuse) consiste à enlever l’ensemble de ces indentations. Une jolie liste bien indentée comme cela :


Element 1
Element 2
Element 3

deviendrait au final :

Element 1
Element 2
Element 3

C’est assez imbuvable vous en conviendrez. On peut aussi commenter entre chaque élément, mais cela n’améliore pas forcément la lisibilité non plus :

Element 1
Element 2
Element 3

Il existe une solution purement CSS, plus propre. Il s’agit de floater les éléments de la liste (il faudra bien entendu s’assurer que les

s’adaptent à la taille du conteneur pour ne pas avoir de surprise.). Pour éviter la perte de flux habituelle liée à la propriété float, il faut récupérer le flux en floatant le conteneur ou en appliquant le petit combo du overflow:hidden, avec une hauteur et largeur différente de auto. On obtient donc ceci côté CSS :

ul{
width:200px;
overflow:hidden;
}

li{
width:100%;
float:left;
}

Courage !

Utiliser des Webservices en PHP : nuSOAP

Zhell — Mon, 06 Jul 2009 10:13:09 +0000

J’ai très récemment dû utiliser un webservice développé en .NET afin d’interagir avec un serveur gérant l’ensemble des données clients de plusieurs grandes marques. En fouillant un peu sur la toile à la recherche d’infos sur l’utilisation d’un tel Webservice en PHP, je suis tombé sur la librairie nuSOAP.

N’ayant pas la totale liberté sur le serveur et ne pouvant pas forcément utiliser les dernières classes PHP5 pour l’utilisation de SOAP, j’ai donc simplement installé cette librairie et commencé mes tests. Il se trouve que la récupération et l’envoi de données au serveur se trouve réellement simplifié avec cette librairie.

Une fois téléchargée puis installée (il suffit de copier le dossier lib sur votre serveur), il suffit d’inclure nusoap.php et commencer à interroger le serveur. Voici ce que ça peut donner sur un exemple minimaliste :

require_once('classes/nusoap/nusoap.php');
$clientSOAP = new soapclient('http://adresse-du-webservice.asmx');

// Appel de la fonction GetAllCountries
$result = $clientSOAP->call('GetAllCountries');

L’appel à la fonction GetAllCountries nous renvoie une chaîne que l’on doit parser en XML afin d’en récupérer les données. Il est possible qu’il faille préciser au client SOAP d’utiliser WSDL, il suffit dans ce cas de modifier le constructeur en ajoutant « true» comme second paramètre et « ?WSDL» à la fin de l’adresse comme ceci :

require_once('classes/nusoap/nusoap.php');
$clientSOAP = new soapclient('http://adresse-du-webservice.asmx?WSDL', true);

// Appel de la fonction GetAllCountries
$result = $clientSOAP->call('GetAllCountries');

Une fois la réponse serveur récupérée, on peut donc la parser, en utilisant par exemple simpleXML, que l’on pourra parcourir simplement afin de récupérer les données voulues :

$xml = simplexml_load_string($result['GetAllCountriesResult']);

Afin de pouvoir passer simplement des paramètres au webservice, il suffit de rajouter un tableau en tant que paramètre lors de l’appel de la méthode call :

$result = $clientSOAP->call('GetUserId', array(
'login'		=> $email,
'password'	=> $pass
));

Voilà pour la base de l'utilisation de nuSOAP !