L'alyblog

Aller au contenu | Aller au menu | Aller à la recherche

Développement web

vendredi, novembre 5 2010

Compatibilité Jquery et mootools

Actuellement, je travaille sur un projet qui utilise des scripts de la librairie mootools. Je dois insérer des scripts qui utilise le merveilleux jQuery. Je me dis, pas de problème, jQuery a un mode de compatibilité, que j'ai déjà utilisé dans d'autre projets.

Malheureusement, cela ne fonctionne pas avec Mootools. Mootools semble refuser de fonctionner si au moment de son instanciation, la variable $ existe déjà.

L'ensemble des préconisations de la page de compatibilité de jQuery ne fonctionne pas non plus.

La solution, la voici :

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="../js/mootools-core.js"></script>

En gros, on commence par charger la librairie jQuery. Le symbole $ devient donc un objet jQuery. Ensuite, grâce à noConflict(), on libère la variable $. Enfin, on peut charger mootools qui ne pose plus aucune résistance !

PS : Pour utiliser jQuery dans la page, ne pas utiliser le $, mais jQuery. exemple : jQuery('#mon-element').

vendredi, mars 5 2010

Suppression récursive de dossiers similaires

Si, dans un projet, pour une raison quelconque, vous devez supprimer des dossiers, qui ont tous le même nom, comme par exemple les dossiers ".svn", voici une commande magique sur unix :

find . -name « .svn » -type d -exec rm -rf {} \;

Tapez cela dans le dossier racine de votre projet.

PS: le dossier ".svn" n'est qu'un exemple. Car la méthode la plus propre serait de faire un export du projet subversion.

jeudi, octobre 29 2009

Envoi d'email HTML avec CodeIgniter

J'ai rencontré pas mal de problème lors de l'envoi d'emails HTML avec CodeIgniter. Le problème est que Code Igniter rend compatible les emails avec la norme RFC 2045.

mais cette norme ne semble pas bien interpretée par un grand nombre de client de messagerie.

J'ai donc décidé de revenir à des mails plus basique.

Pour cela, il faudra modifier la class Email de base de Code Igniter, ou mieux, surcharger la classe par une classe Perso.

Dans la fonction _build_message(), il suffit de commenter (ou supprimer) les lignes

$hdr .= "Content-Transfer-Encoding: quoted-printable";

Cette ligne apparait plusieurs fois, selon que l'email soit en html, ou html-attach (si des pièces jointes sont attachées). Le fait de commenter cette ligne signifie que l'email n'est plus en encodage quoted-printable. Ensuite, il faudra commenter les lignes :

$this->_body = $this->_prep_quoted_printable($this->_body);

En faisant cela, on ne passe plus par la fonction qui encode le contenu du message en quoted-printable

Maintenant, les mails passent correctement !

lundi, octobre 19 2009

Template codeigniter pour Eclipse

logo eclipseAfin de gagner toujours un peu de temps dans le développement, j'ai décidé de créer des petits templates pour Code igniter sur Eclipse.

Lire la suite...

lundi, août 3 2009

API Météo Google

meteo_couv.gif Pour un projet, j'avais besoin d'une API me donnant la météo.

Pas facile de trouver une API simple, sans fioriture, et donc sans besoin de parser, puis filtrer à grand coups d'expressions régulières !!

Je suis tombé sur une API non officielle de Google qui permet de le faire : http://www.google.com/ig/api?weather=maville

Lors de la récupération avec SimpleXml, le flux n'est pas en utf-8. Donc la classe n'arrive pas à récupérer le contenu.

En continuant mes recherches, je suis tombé sur l'ajout d'un paramèter de langue : "hl=" qui permet de spécifier un encodage, ou une langue, mais pas les deux cumulés.

Donc, soit on ajoute "&hl=fr" à l'url et on obtient le résultat en français mais pas en utf-8; Soit on ajoute "&hl=utf8", et on obtient le résultat en UTF8 mais pas en français.

L'astuce consiste donc, pour cumuler les deux, à passer par d'autre fonctions :

$xml = simplexml_load_string(utf8_encode(file_get_contents(http://www.google.com/ig/api?weather=lille&hl=fr")));

on va récupérer notre flux par la fonction file_get_contents, puis l'encoder en utf-8 par la fonction utf8_encode. Maintenant, il suffit de charger le résultat avec simplexml_load_string !

That's it !

mercredi, juillet 29 2009

CSS - contextes de formatage

Voici un excellent billet pour comprendre les contextes de formatage pour les éléments flottants en CSS.

Bonne lecture !

jeudi, juin 25 2009

Jquery - personnaliser la boite modale "dialog"

Pendant le développement d'un projet web, notamment l'espace d'administration, il est préférable d'afficher une boîte de confirmation avant la suppression d'un enregistrement, ou toute autre action importante.

La fonction confirm() de javascript le fait très bien, mais n'est pas très esthétique, bloque complètement la navigation, et n'est pas personnalisable.

Je vous propose de le faire avec Jquery et JqueryUi.

Lire la suite...

vendredi, mai 22 2009

Code Igniter - fichiers de langue

Tous les modules ou helpers par défaut de Code Igniter sont, bien évidemment en anglais.

Mais il respecte l'architecture globale, et utilise donc des fichiers de langues, qui se trouve dans "/system/language/english/".

De nombreux contributeurs réalisent la traduction de ses fichiers dans d'autre langages. Il suffit de se rendre sur la page des traductions de Code Igniter et de télécharger ses fichiers de langue.

Dans mon cas, je télécharge le fichier de langue "français".

Ensuite, dans le fichier "/application/config/config.php", je modifie la ligne

$config['language']	= "french";

Je crée le dossier "french" dans le dossier "/system/language/", et je copie le contenu de l'archive téléchargée.

Et voila ! Notre application est en français !

mercredi, mai 20 2009

Bienvenue Code Igniter

logo code igniter

Pour mon nouveau projet, je souhaite utiliser un framework existant, que je complèterai avec mes classes persos si besoin.

J'avais déjà testé Symfony, mais la difficile prise en main ne m'avait pas convaincu si l'on souhaite garder une certaine souplesse; ce qui ne retire en rien à l'excellent résultat de Symfony : c'est énorme tout ce qu'on peut faire.

Mais souhaitant conserver une simplicité d'exécution, et ne pas être trop dépendant du framework choisi, je décide d'utiliser Code Igniter.

D'après mes tests, Code Igniter semble correspondre à ce que je recherche :

  • Un framework léger
  • Un framework qui nous laisse libre sur pas mal d'aspects (charte de développement, architecture,...).
  • De nombreux outils pour nous simplifier le dév (les helpers)
  • un système de plugins
  • Et bien sûr : M-V-C

mardi, février 17 2009

l'accessibilité : c'est pour quand ?

Hier soir, j'entrevois une voiture plutôt jolie mais, sans avoir le temps de l'identifier réellement. Tout ce que j'ai le temps de voir est qu'il s'agit d'une Renault.

Je souhaitais rapidement, et depuis mon téléphone portable, consulter le site du constructeur pour découvrir le modèle de cette voiture, mais impossible de surfer sur le site de renault avec un mobile : temps de réponse énorme, corps de page en animation flash, ...

Je trouve ça fou qu'en 2009, avec l'explosion des téléphones portables wifi, ou des forfaits 3g, des sites comme celui de renault ne soient pas encore accessible !

L'accessibilité n'est pas seulement pour les mal-voyants, c'est aussi une ouverture sur de nombreux modes de connexion. Donc, même si certains acteurs économique n'ont pas encore compris que le web devait être ouvert à tout public (mal-voyants, non-voyants, etc), ils pourraient au moins se préoccuper de leurs clients potentiels valides, qui utilisent de nouveaux modes de communication.

A bon entendeur ...

lundi, mars 10 2008

limitation à 9 variables dans les Htaccess

Pour un projet client, de nombreuses variables doivent être passées dans l'url, et bien sûr, cette url doit être réécrite. De nombreux cas étants possibles, on se retrouvait avec beaucoup de groupes dans le htaccess comme celui ci : (-([0-9]+))?.
Le premier jeu de parenthèse est présent car tout le groupe est facultatif (d'où la présence du "?" final). Le deuxième jeu de parenthèse représente la variable à récupérer (constituée de chiffre de 0 à 9).

Le problème est donc que chaque groupe facultatif constitue donc 2 variables : $1 représente le contenu du premier jeu de parenthèse et $2 le contenu du deuxième jeu de parenthèse.
On arrive donc assez rapidement à un nombre conséquent de variables. Et lors de test, je n'arrivais pas à récupérer la variable $10, ni les suivantes d'ailleurs.
J'ai ensuite trouvé une info sur le site d'apache :

Back-references are $N (N=0..9) identifiers which will be replaced by the contents of the Nth group of the matched Pattern.

Apache limite à 9 le nombre de variables dans une réécriture d'url.
Il est peut être possible de modifier ce paramètre dans la configuration du serveur web, mais cette solution n'est pas satisfaisante pour les hébergements où l'on ne maitrise pas la configuration.

Pour diviser par 2 le nombre de variable, j'ai découvert la notion de groupe passif : (?: ).
En effet, chaque jeu de parenthèse représente une variable pour Apache. Cependant, avec la notion précédemment citée, le groupe sera tout simplement ignoré.
Si on reprend l'exemple de tout à l'heure : (-([0-9]+))?, il suffit de le modifier et écrire : (?:-([0-9]+))?.
Le premier jeu de parenthèse ne sera plus une variable !

vendredi, février 1 2008

Installation d'eclipse pour du développement LAMP

Eclipse est un framework conçu à la base pour être extensible via des plugins. Initialement développé pour le langage java, Eclipse est aujourd'hui fortement utilisé pour d'autres langages de développement.
Nous allons nous intéresser au développement web LAMP.

Lire la suite...

mercredi, décembre 27 2006

Encodage dans mysql

A la suite d'une erreur de type :

Illegal mix of collations (latin1_general_ci,IMPLICIT) and

(cp1251_general_ci,COERCIBLE) for operation 'like'

je me suis demandé à quel niveau l'encodage cp1251_general_ci intervenait puisque mon éditeur de texte encode en utf-8, ainsi que l'encodage spécifié dans ma page xhtml et l'interclassement de ma base de données.

Avec la commande :

SHOW VARIABLES LIKE 'char%'

Voici ce que MySql retourne :

character_set_server  	cp1251
character_set_system 	utf8
character_set_database 	latin1
character_set_client 	utf8
character_set_connection 	utf8
character-sets-dir 	/usr/local/share/mysql/charsets/
character_set_results 	utf8

Sur FreeBsd, MySql dispose de plusieurs configurations par défaut, selon le type d'utilisation et la puissance du serveur. Les fichiers de configuration par défaut se trouve ici :

/usr/local/share/mysql/my-huge.cnf
/usr/local/share/mysql/my-large.cnf
/usr/local/share/mysql/my-medium.cnf
/usr/local/share/mysql/my-small.cnf

Pour personnaliser la configuration de MySql, il suffit de déplacer le fichier par défaut sélectionné dans :

/etc/my.cnf

Pour modifier l'encodage, j'ai ajouté ces lignes :

#Set the default character set.
default-character-set=latin1
#Set the default collation.
default-collation=latin1_swedish_ci

dans la section [client] et [mysqld].

Les encodages et interclassements disponibles sont dans le répertoire définit par la variable character-sets-dir vue précédemment.

mercredi, décembre 6 2006

Gestion des connexions à une base MySql

Pour un projet à fort trafic, j'ai voulu effectuer des tests sur l'optimisation des connexions à une base de données.

J'ai volontairement exclu les connexions persistantes, car elles sont plus complexes à maitriser, et elles peuvent ajouter des nouveaux problèmes.

J'ai donc comparé 2 techniques :

  • Une connexion que j'initialise au début de la création de ma page et que j'utilise pour toutes les requêtes de la génération d'une page
  • Une connexion par requête que je ferme juste après.

On entend souvent que la deuxième technique est meilleure et qu'il faut toujours fermer la connexion le plus tôt possible.

En utilisant "Apache Bench" (disponible avec apache), j'ai pu comparé des montées en charge avec ces deux méthodes.
Le principe est simple : simuler 200 connexions simultanées à la page d'accueil de mon site en développement. Il y a des appels à la base de données classique comme l'affichage des dernières news,...

Une connexion par requête http

Concurrency Level:      200
Time taken for tests:   24.966934 seconds
Complete requests:      200
Failed requests:        103
   (Connect: 0, Length: 103, Exceptions: 0)
Write errors:           0
Total transferred:      1421396 bytes
HTML transferred:       1380996 bytes
Requests per second:    8.01 #/sec (mean)
Time per request:       24966.934 ms (mean)
Time per request:       124.835 ms (mean, across all concurrent requests)
Transfer rate:          55.59 Kbytes/sec received


Percentage of the requests served within a certain time (ms)
  50%  17665
  66%  21200
  75%  21530
  80%  21735
  90%  22679
  95%  23138
  98%  23919
  99%  24724
 100%  24737 (longest request)

Une connexion par requête SQL

Concurrency Level:      200
Time taken for tests:   42.109496 seconds
Complete requests:      200
Failed requests:        147
   (Connect: 0, Length: 147, Exceptions: 0)
Write errors:           0
Total transferred:      1527933 bytes
HTML transferred:       1486119 bytes
Requests per second:    4.75 #/sec (mean)
Time per request:       42109.497 ms (mean)
Time per request:       210.547 ms (mean, across all concurrent requests)
Transfer rate:          35.43 Kbytes/sec received
Percentage of the requests served within a certain time (ms)
  50%  27068
  66%  31418
  75%  33313
  80%  35299
  90%  36821
  95%  41163
  98%  41164
  99%  41164
 100%  41164 (longest request)

On se rend bien compte que utiliser la même connexion à la base est moins couteux pour le serveur web.
En effet, les 200 connexions mettront environ 25 secondes à être traitées alors que dans le cas de connexions individuelles, ces demandes seront traitées en 42 secondes.

P.S : si quelqu'un sait interpréter d'autre informations de apache bench, je suis preneur...

mercredi, octobre 18 2006

Mise en page CSS : esprit tordu ?

Ma première mission dans ma nouvelle boite consiste en la réalisation d'un site internet.

Pour sa réalisation, le choix du couple Xhtml + Css me parait évident vu que je développe mes sites internet de cette façon depuis quelques années et qu'aucune contrainte ne se présente.

Mais certains de la société me mettent gentillement en garde : Attention, les designs en CSS posent souvent des problèmes. Des personnes ont essayés avant toi, et beaucoups de problèmes se sont posés. Notamment avec FireFox.

Aïe ! Je précise que l'utilisation des feuilles de style Css ne posent pas plus de problème que la réalisation d'un design en tableau, bien au contraire. Et surtout, ce n'est pas FireFox qui posent problème mais bien les navigateurs non respectueux des standards (I.E 6 en locurence).
Enfin, je précise que la réalisation d'un site en tableau me prendrait du temps, vu que je n'en n'ai pas fait depuis bien longtemps...

Ce qui me gène dans cet épisode, ce n'est pas la crainte des graphistes envers une technologie qu'ils ne connaissent pas, mais c'est plutôt que l'utilisation des feuilles de style EST la manière la plus logique d'habiller une page.
Pourquoi certaines personnes pensent que bricoler avec des cellules d'un tableau (en fusionner certaines, en diviser d'autres, ajouter des cellules vides pour réaliser une marge, et j'en passe) est une manière logique de faire de la mise en page ?

Franchement, je me demande qui a l'esprit le plus tordu ...

jeudi, juillet 13 2006

Dépôt subversion inaccessible : Berkeley DB error

En voulant parcourir un de mes dépôts subversion, je suis devenu tout blanc et j'ai eut un coup de chaud :

Berkeley DB error
svn: Berkeley DB error while opening environment for filesystem /.../subversion/xxx/db: Permission non accordée



Dès que j'ai vu Permission non accordée je suis redevenu normal.
Si vous avez des soucis avec votre base de données Berkeley, voici une commande qui m'a déjà rendu bien des services : db4.2_recover. Elle permet de corriger une base de donnée corrompue.

Pour l'utiliser, il faut se placer dans le dossier db de votre dépôt.
cd /../votredepot/db/

Puis saisir simplement db4.2_recover

Et voila, tout refonctionne à merveille.

mardi, juillet 11 2006

Réaliser ses icones avec photoshop

Si comme moi, vous utilisez photoshop pour toutes vos réalisations graphiques, vous êtes confronté aux problèmes de la réalisation d'icones.
Il faut utiliser un logiciel tiers.

Plus maintenant, grâce à un plugin gratuit : Ico format. Ce plugin permet d'ouvrir des icones au format ".ico" ou d'enregistrer votre image en ".ico".

Vous pourrez maintenant utiliser Photoshop pour réaliser ou modifier vos icones !

jeudi, février 23 2006

styliser un formulaire

Excellent tutoriel pour styliser un formulaire.

mercredi, février 8 2006

bgMaker - creation de motif de fond de page

Après le ButonMaker, voila encore un bon outil disponible en ligne : bgMaker.
Celui permet de réaliser des motifs qui se répètent pour les fonds de page par exemple.

mardi, janvier 31 2006

Button Maker

Bien pratique
Lien à ne pas perdre : Button Maker :: Adam Kalsey
Pour réaliser des images typiques de validation propres et discrètes.

- page 1 de 2