Blog de ALkyD.net

Même si parfois j'ai tendance à ne pas les utiliser, les conventions de nommage des variables, des fonctions et des classes sont pourtant très utiles lors d'un développement web ou autre :

• 80% du coût engendré lors de la vie d'un programme est dû à sa maintenance.
• Il est rare qu'un programme soit toujours maintenu par son concepteur.
• Les conventions de nommage augmentent la lisibilité du code facilitant ainsi la compréhension et la vitesse d'appropriation de nouveau code par les ingénieurs.
• Si vous livrez votre code source en tant que produit à part entière, vous devez vous assurer qu'il est bien présenté et propre, tout comme les autres produits que vous créez.

Ces conventions sont présentées ci-dessous et reprennent en grande partie les conventions données par Sun (ceux qui s'occupent de java), présentes sur leur site :

Classes :

Les noms des classes doivent respecter les règles suivantes :

• La première lettre est en majuscule.
• N'utiliser que des lettres et des chiffres.
• La première lettre de chaque mot qui compose le nom de la classe doit être en majuscules.
• Donner des noms simples et descriptifs.
• Eviter les acronymes, hormis ceux communs (XML, HTML, URL...).

Variables et attributs :

Les noms de variables doivent respecter les règles suivantes :

• La première lettre est en minuscules. Ex. : maVariable, tabArticle, count, listeValeurs, ...
• N'utiliser que des lettres et des chiffres.
• La première lettre de chaque mot qui compose le nom de la variable doit être en majuscule (sauf la toute première lettre).
• Donner des noms simples et descriptifs.
• Ne pas commencer les noms par '-' ou '_' (bien que cela ne soit pas parfois possible).
• Variables d'une seule lettre pour un usage local (comme à l'intérieur d'une fonction).

Méthodes et fonctions :

Il existe plusieurs sortes de méthodes :

• Les accesseurs getXxx(), qui permettent d'obtenir la valeur de l'attribut (généralement privé) Xxx d'une classe.
• Les mutateurs setXxx(valeur), qui permettent de modifier la valeur de l'attribut (généralement privé) Xxx d'une classe.
• Les méthodes booléennes isXxx(), qui renvoie un booléen sur l'état de quelque chose. Ex. isReadable(), contraction de 'it is readable ?', littéralement 'est-ce lisible ?'.
• La première lettre est en minuscule, et la première lettre de chaque mot qui compose le nom de la fonction est en majuscules.

Constantes :

Les noms de constantes doivent respecter les règles suivantes :

• Toutes les lettres sont en majuscules.
• Séparer les mots par un underscore '_'.
• Donner des noms simpls et descriptifs.
• N'utiliser que des lettres et des chiffres.
• Ne pas utiliser des tirets '-' ou d'autres caractères (#, $, accents, ...).

La notation hongroire :

La notation hongroise est une variante de la notation ci-dessus, à la différence près que la première lettre (ou premier mot) qui compose le nom de la variable est remplacée par l'abréviation du type de variable. Par exemple :

• bView indique que c'est un booléen (b).
• iCount indique que c'est un entier (i).
• sLibelle indique que c'est une chaîne de caractères (s).
• cValue indique que c'est un caractère (c).
• ...

Divers :

Pour des questions de lisibilité, il est également conseillé d'aérer son code, c'est-à -dire de mettre des espaces utiles et de bien indenter son code :

• Mettre un espace avant et après le signe égal (=), le signe 'différent de' (!), le signe '=>' :

$var = 'Ma chaîne';
$n = 4;
$arret = true;
$tab = array('Pomme' => 'rouge', 'Poire' => 'jaune');

au lieu de

$var='Ma Chaine';
$n=4;
$arret=true;
$tab=array('Pomme'=>'rouge','Poire'=>'jaune');

• Mettre un espace après une virgule,
• Mettre l'accolade ouvrante en dessous du mot-clé, et non à côté (de préférence) :

if ($toto == 1)
{
     ...
}

au lieu de

if ($toto == 1) {
   ...
}

• Utiliser des guillemets simples. Avec des guiillemets doubles, PHP parse la chaîne contenue entre ces guillemets, c'est-à -dire l'analyse en recherchant d'éventuelles variables et les remplace par leur valeur. Alors qu'avec des guillemets simples, PHP affiche la chaîne telle qu'elle est écrite dans le code, ce qui est sensiblment plus rapide.

Dans un précédent billet, nous avons vu qu'Ajax permettait de mettre à jour seulement une zone de la page en dialoguant directement avec le serveur.

Dans un premier temps, vous devez implémenter le fichier Javascript suivant (où les commandes Ajax sont définies) dans votre page au moyen de la balise <script> : <script language="javascript" src="xmlhttprequest.js" type="text/javascript"></script>. Ce fichier est composé de deux fonctions. La première, getHTTPObject(), permet de récupérer un objet XMLHTTPRequest selon votre navigateur. Cet objet est en quelque sorte le "noyau" d'Ajax, c'est grâce à lui que vous allez pouvoir exécuter des requêtes serveur avec Javascript. La seconde permet grosso-modo de mettre à jour la zone définie au préalable.

Fichier "xmlhttprequest.js" : 

function getHTTPObject()
{
	var xmlhttp = false;
	
	// On essaye de récupérer l'objet XMLHTTPRequest selon le navigateur (IE, Firefox...)
	try
	{
		// Internet Explorer
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{
		try
		{
			// Autres navigateurs
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (E)
		{
			// Sinon l'objet XMLHTTPRequest n'existe pas
			xmlhttp = false;
		}
	}
	
	// Si l'objet XMLHTTPRequest existe, on en crée une instance
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
	{
		try
		{
			xmlhttp = new XMLHttpRequest();
		}
		
		catch (e)
		{
			xmlhttp = false;
		}
	}
		
	return xmlhttp;
}


function sendData(page, id)
{
	var xml_object = getHTTPObject();
	var f = document.Form;
	
	xml_object.open("POST", page, true);

	xml_object.onreadystatechange = function()
	{
		if (xml_object.readyState == 4)
			document.getElementById(id).innerHTML = xml_object.responseText;
	}
	
	xml_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	data = "txt_Pseudo=" + f.txt_Pseudo.value + "&txt_Pass=" + f.txt_Pass.value;
	xml_object.send(data);
}

Créez une page "ajax.php" :

<div id="ajax">

	<form name="Form" onsubmit="return false;">
	
		Votre pseudo. : <input type="text" size="50" name="txt_Pseudo" /><br />
		Votre mot de passe : <input type="password" name="txt_Pass" /><br />
		<input type="submit" value="Envoyer" onclick="sendData('traitement.php', 'ajax')" />
	
	</form>
	
</div>

Puis une autre page "traitement.php" :

<?php
echo '<p>Bonjour ' . $_POST['txt_Pseudo'] . ' !</p>';
echo '<p>Votre mot de passe est "' . $_POST['txt_Pass'] . '".</p>';
?>

Sur la page "ajax.php", un formulaire est crée et délimité par une balise <div id="ajax"> : ça sera notre zone de mise à jour. Un bouton est ajouté à ce formulaire, et, lorsqu'il sera cliqué, appelera la fonction sendData. Le premier argument de cette fonction, "traitement.php", indique la page où le traitement du formulaire s'effectuera. Le deuxième argument, "ajax", fait référence à l'attribut "id" de la balise <div>, c'est-à -dire à la zone qui sera mise à jour.

Dans la fonction sendData, Javascript appelera "traitement.php" et l'exécutera comme un serveur classique le ferait, grâce à la ligne xml_object.open("POST", page, true);. Puis le résultat de cette exécution est récupéré (traitement.php affiche le pseudo et le mot de passe), et, à l'aide de la méthode innerHTML propre à Javascript (qui permet de modifier le contenu d'un élément HTML comme <div>), ce résultat est affiché à la place du formulaire.

La méthode sendData écrite ci-dessus est fonctionnelle pour ce petit formulaire, mais elle sera sans doute insuffisante si vous comptez améliorer ce formulaire. Si tel est le cas, il vous faudra modifier deux lignes précises dans la fonction sendData :

• La première ligne est var f = document.Form;, qui fait référence au formulaire. "Form" est son nom (attribut name).
• La seconde ligne est data = "txt_Pseudo=" + f.txt_Pseudo.value + "&txt_Pass=" + f.txt_Pass.value;. Il faut en effet lister tous les champs que vous voulez traiter sur la page traitement.php. Si, par exemple, vous rajoutez un troisième champ "Age", que vous nommez txt_Age, il vous faudra rajouter à la suite de cette ligne l'expression "&txt_Age=" + f.txt_Age.value de façon à former une chaîne de cette façon-là  : champ1=valeur1&champ2=valeur2&champ3=valeur3...

Pour plus d'informations sur les différentes méthodes de l'objet XMLHTTPRequesttel tel que onreadystatechange, je vous propose de consulter les articles suivants :

- http://robloche.free.fr/javascript/tuto_xhr/tuto_xhr.html

- http://www.openweb.eu.org/articles/objet_xmlhttprequest/

Je vous présente mon dernier site, qui n'est autre que mon site perso sur lequel se greffe ce blog : www.alkyd.net

Qu'est-ce Ajax ? On en entend régulièrement parler ces temps-ci sur la toile, et on le présente même comme une révolution (le fameux Web 2.0). Il s'agit pourtant d'une technologie pas si récente que ça, puisqu'essentiellement composée de CSS et de Javascript...

Si vous êtes un minimum familier avec le développement Web, vous savez que PHP est un langage du côté serveur, qui s'exécute à chaque rafraîchissement de la page. Pour afficher du contenu dynamique (provenant d'une base de données par exemple) et mettre à jour la présente page, le visiteur doit systématiquement rafraîchir celle-ci ou passer d'une page à l'autre. Pour faire très simple, le but d'Ajax est de "transformer" PHP (ou un autre langage serveur) en un langage client, c'est-à -dire en faisant toutes les tâches habituelles de PHP (recupération de contenu dans une base de données, affichage de celle-ci, traitement de formulaires...) sans pour autant rafraîchir la page entière.

Vous avez par exemple une page où se trouve un formulaire. En haut se trouve la bannière du site et sur la gauche se trouve le menu de navigation.

Avec du PHP "classique" (sans Ajax), lorsqu'on clique sur le bouton Envoyer, le formulaire est envoyé et la page est rafraîchie. Le serveur doit donc faire quatre traitements (schéma simplifié) :

• 1. Traitement du formulaire envoyé par le client et renvoi du résultat (genre "Merci de nous avoir écrit blabla")
• 2. Récupération de la bannière
• 3. Et récupération du menu pour réafficher la page.

Avec du PHP assorti à de l'Ajax, lorsqu'on clique sur le bouton Envoyer, le formulaire est soumis et la zone de formulaire (ici représentée par des pointillés) est mise à jour. Le serveur a un seul traitement à effectuer :

• 1. Traitement du formulaire envoyé par le client et renvoi du résultat.

Ajax permet donc de mettre à jour des zones locales d'une page. Ici, juste le formulaire est rafraîchi, il n'y a donc pas besoin d'afficher à nouveau la bannière et le menu. Les avantages sont plutôt conséquents : économie de la bande passante, serveur moins sollicité (puisque moins d'informations à traiter) et navigation plus aisée (on ne sort jamais de la page).

Dans un prochain billet, j'expliquerais l'utilisation et l'implémentation d'Ajax dans une page.

Les bases de Smarty et de son cache ont été abordées précédemment. Ce billet complète un peu plus ces bases.

Reprenons un exemple précédent : index.php

<?php
$tpl = new Smarty();

if (! $tpl->is_cached('index.tpl''))
{
       // Instructions
}

$tpl->display('index.tpl');
?>

Ce bout de code fonctionne lorsqu'il y a une seule page unique index.php. Imaginons maintenant que cette page recoive en paramètre (dans l'URL) l'identifiant d'un article à afficher, par exemple index.php?id_article=2, index.php?id_article=36, ... Le script précédent ne fonctionnerait plus puisque chaque page d'article utiliserait le même cache, ce qui poserait des problèmes.

La solution est de faire passer comme deuxième argument dans la méthode is_cached l'identifiant de cet article :

<?php
$tpl = new Smarty();
$id_article = addslashes($_GET['id_article']);

if (! $tpl->is_cached('index.tpl', $id_article))
{
       // Instructions
}

$tpl->display('index.php', $cache_id);
?>

Avec ce script, il est possible d'avoir un cache par contenu différent d'une seule page, ce qui peut se révéler très pratique. Attention à la dernière ligne, où $cache_id est rajouté à la méthode display.

Dans un précédent billet, j'avais fait un tour rapide du système de templates PHP, Smarty. Ce billet a pour but d'expliquer un peu plus en profondeur les fonctionnalités de Smarty.

Installation

Une fois que vous avez copié Smarty (http://smarty.php.net) dans un répertoire de votre site, vous devez simplement instancier un objet Smarty dans une page .php :

<?php
// Inclusion de la classe Smarty
include ('chemin_vers_smarty/Smarty/libs/Smarty.class.php');

// Création d'un objet de template Smarty
$tpl = new Smarty();
...
...
$tpl->display('xxx.tpl');
?>

Vous pouvez paramétrer Smarty en modifiant les propriétés dans la classe Smarty.class.php, mais vous pouvez également le paramétrer directement dans le code de votre page .php, ce qui est préférable si vous comptez utiliser Smarty à plusieurs endroits différents de votre site, mais avec une configuration différente.

Le cache de Smarty

L'une des grandes forces de Smarty est d'utiliser un système de gestion du cache. Le cache sert à accélérer le chargement des pages, en demandant au serveur d'aller chercher le code HTML directement dans un fichier de cache plutôt que de regénérer le code PHP de ladite page. Selon le principe du client/serveur, lorsqu'une page PHP doit être exécutée, elle est d'abord envoyée au serveur (Apache, IIS...) qui traite s'il le faut avec une base de données (MySQL) et renvoie le code HTML généré au navigateur qui, lui, l'affiche.

Lorsque le cache est activé, le serveur va renvoyer le code HTML au navigateur (la tâche habituelle) et, en plus, va stocker ce même code HTML dans un fichier précis (qui pourra être identifié par la suite). Ceci est valable pour le premier affichage de la page :

Pour les affichages suivants, le serveur sautera les étapes de transformation du PHP et ira chercher son code HTML directement dans le fichier de cache correspondant à la page que l'on veut afficher.

Et si le serveur ne trouve pas de fichier de cache correspondant, ou que le code HTML qui y est contenu est trop ancien, les pages PHP seront regénérées et le nouveau code HTML produit à nouveau stocké et donc utilisé pour le prochain rafraîchissement. Le serveur n'est donc sollicité qu'une fois tous les x rafraîchissements (le x est configurable dans les paramètres de Smarty via la propriété cache_lifetime, voir ci-dessous) au lieu de l'être habituellement à chaque appel de la page.

L'utilisation d'un cache peut donc s'avérer très utile pour décharger le serveur et optimiser la bande passante du site. Par chance, celui de Smarty est très bien conçu, car doté de fonctions utiles sur la gestion du cache.

Par exemple, Smarty dispose d'une fonction is_cached(), qui vérifie d'abord s'il existe un cache de la page où la fonction est appelée. Si ce cache existe, alors Smarty l'affiche, sinon il exécute le code de la page. La fonction is_cached est généralement utilisée dans une condition if :

index.php

<?php
$tpl = new Smarty();

if (! $tpl->is_cached('index.tpl''))
{
       // Instructions
}

$tpl->display('index.tpl');
?>

Ici, la méthode is_cached vérifie si index.tpl (la page de cache de index.php) existe ou pas. Si elle existe, elle est appelée et afficher avec la méthode display(). Si elle n'existe pas, les instructions contenues dans l'instruction if sont exécutées, puis affichées avec display() et stockées (sous forme HTML) en parallèle dans le fichier de cache index.tpl.

On peut également spécifier une durée de vie pour le fichier de cache index.tpl, ce qui peut être utile si la page doit être régulièrement modifiée (de l'ordre d'une fois par jour par exemple). Il suffit alors de rajouter la ligne suivante :

// Nombre de secondes en une journée
$tpl->cache_lifetime = 60 * 60 * 24;

avant l'appel à la fonction is_cached().

Il est donc important de connaître le cycle de modification de vos pages. Si vous avez une page d'accueil qui affiche la météo et des news régulières, c'est-à -dire une page souvent modifiée, il est parfaitement inutile d'utiliser le système de cache de Smarty. En revanche, si c'est une page qui présente les coordonnées de votre entreprise ou ses activités, la mise en cache peut être très intéressante.

Dans un prochain billet, j'aborderais les principales fonctions utilisées pour élaborer une page de template en HTML.

Je viens de terminer un site il y a à peine plus d'une heure, et il est mis en ligne : http://www.alorsparlonsen.com. C'est un site ayant pour thème une maladie orpheline qu'une maman m'a demandé de faire pour son fils de 8 ans, atteint du syndrôme de Dandy-Walker. Le site retrace l'histoire du petit Jordan à travers plusieurs domaines de sa vie : école, famille, sport...

Côté technique, j'ai utilisé PHP 5, l'URL Rewriting d'Apache, l'éditeur FCK editor pour la rédaction des articles et bien sûr Smarty pour les templates. La rédaction du contenu du site s'effectue via une zone d'administration que je développe continuellement sur ma machine, un peu comme, par exemple, le projet phpBB, qui est sans cesse en développement et qui s'améliore de version en version.

Le site étant hébergé chez OVH, j'ai connu un très gros problème qui a bien failli me provoquer une crise de nerfs : OVH a bien PHP 5, mais il refuse son interprétation en .php (.php5 obligatoire). L'intruction Addtype x-mapp-php5 .php dans un .htaccess (voir ce précédent billet) ne fonctionne pas pour de soi-disant tests sur PHP 5 ! Du coup, j'ai été obligé de renommer tous mes fichiers et mes includes en .php5, et me suis juré de ne plus prendre OVH pour mes futurs hébergements (connaissant la lenteur des hébergeurs, il y a fort à parier que l'année prochaine, cette contrainte ne sera pas toujours résolue). Malheureusement ce blog est également hébergé chez OVH, et donc mon futur site perso aussi...

Lire la suite

En CSS, la propriété height permet de spécifier une hauteur fixe pour les blocs de type <div> ou <p>.

div.bloc {
   height: 100px;
}

Si le texte contenu dans le bloc ne dépasse pas la hauteur spécifiée par height, pas de probléme d'affichage, et ce, quelques soit les navigateurs.

Par contre, si le texte dépasse la hauteur, sous Internet Explorer, le bloc sera automatiquement agrandi tandis que sous les autres navigateurs respectant les standards du Web come Firefox, Mozilla..., le bloc s'en tiendra à la valeur spécifiée par height, et le texte sortira des limites du bloc, faussant ainsi l'affichage de la page.

La propriété min-height permet de spécifier une hauteur minimale au bloc, qui s'agrandira alors automatiquement lorsque le texte qui y est contenu dépasse le min-height.

div.bloc {
   height: 100px;
   min-height: 100px;
}

Problème :

Pour cela, il faudra utiliser du hack CSS, dont son principal but est de corriger les défauts d'IE en matière de standards du Web. Cela consiste simplement en l'inclusion d'instructions CSS non comprises par IE :

div.bloc {
   height: 100px;
}

html>body div.bloc {
   height: auto;
   min-height: 100px;
}

IE n'interprètera que la partie div.bloc et ignorera la partie html>body div.bloc puisqu'il ne comprend pas le html>body. En revanche, les autres navigateurs liront cette deuxième partie et annuleront la valeur 100px du height de la première partie div.bloc en mettant la valeur auto, et affecteront 100px à min-height.

En PHP, la fonction print_r() permet de voir le contenu d'un tableau ou d'un objet, ce qui se révèle très pratique pour débugger. Cependant, il faut systématiquement faire encadrer l'appel de print_r() par des balises HTML '<pre>' et '</pre>', faute de quoi, l'affichage du tableau se fera sur une seule ligne et sera peu lisible.

Créez donc la fonction suivante :

function print_rr()
{
	$tab = func_get_args();
	$nb = func_num_args();
	
	echo '<pre>';
	
	for ($i = 0; $i < $nb; $i++)
	{
		echo 'Tableau :<br />';
		print_r($tab[$i]);
	}
	echo '</pre>';
}

Vous pourrez ainsi afficher plusieurs tableaux à la suite sans taper à chaque fois '<pre>' et '</pre>' :

print_rr($tab1, $tab2, $tab3, ...);

PHP 5 est maintenant sorti il y a un an et demi, et je constate (malheureusement) que tous les hébergeurs n'ont pas encore fait le grand saut (sans doute pour des problèmes techniques... ou de flemmardise :) ). Et parmi tous ceux qui ont opté pour la mise à jour vers PHP 5, un autre "problème" survient régulièrement : il faut utiliser l'extension .php5.

Alors, évidemment, si votre site a plusieurs milliers de pages à l'extension .php (voire .php3 ou .php4), c'est assez ennuyeux...

Comment faire pour que toutes vos pages .php soient considérées comme des pages .php5 ? La solution viendra d'Apache et de ses fameux fichiers .htaccess !

Créez simplement un fichier .htaccess dans la raçine de votre site, et ajoutez dedant la ligne suivante :

AddType x-mapp-php5 .php

et le tour est joué ;)

NOTE : cette ligne marche en tout cas sur 1and1.fr, et je pense qu'elle fonctionne pour tous les hébergeurs utilisant PHP 5 avec l'extension .php5.

NOTE 2 : Ces porcs d'OVH n'accepte pas cette ligne ! Faîtes donc attention aux mauvaises surprises...

Bienvenue sur mon blog personnel.

Ce blog aura pour thème les technologies du Web, plus particulièrement le dèveloppement et les langages de programmation orientés Web.

Les principaux langages concernés seront bien sûr PHP, mais aussi Javascript, CSS, HTML, XML et, dans une moindre mesure, Flash.

L'autre orientation majeure de ce blog aura pour trait AJAX. Non, ce n'est pas une marque de nettoyant bien connue en France, mais une technologie Web récente qui commence doucement, mais sûrement, à révolutionner le développement Web (ou à y apporter une grosse évolution, si vous voulez).

Personnellement, je pratique du Web "standard" (Javascript, CSS, HTML) depuis 1998, et du PHP depuis 2000, et je suis passé à la version 5 depuis le 1er jour où cette version est sortie (13 juillet 2004). Et pourtant, j'étais loin d'imaginer qu'en ce beau jour de septembre 2000, la découverte de PHP dans un livre que m'avait offert mon père "par hasard" bouleverserait à jamais mon existence... Car c'est bien simple, non seulement aujourd'hui, je suis toujours autant passionné à mort par ce langage, mais il ne passe pratiquement pas un seul jour sans que je ne fasse du PHP... !

Du côté de Javascript, je maîtrise bien mais bof quoi, j'aime moyen ce langage, la faute à un comportement et un débuggage assez capricieux et � la possibilité de le désactiver dans les navigateurs Web, ce qui fout en l'air tout le travail effectué en JS !

Quant à AJAX, je l'ai découvert il y a même pas quelques semaines, et j'en suis littéralement tombé sous le charme ! Pas d'inquiètudes alors, mon blog en parlera comme il faut, bien en profondeur ;)

Bref...

@ bientôt sur mon blog ;)