Archives mensuelles : août 2005

Mini Cars

Les geeks savent inventer des concepts totalement inutiles et tellement indispensables. Le dernier en date consiste à adapter les voitures pour le marché très prometteur des Minipouces. Voici mes essais.

Photo d'une Aston Martin pour Minipouces
Photo d'une Lamborghini pour Minipouces
Trouvé via : mOBiuS

Mouse Recorder by Mauriz

Maurice Svay nous propose une belle performance technique avec son script permettant de mémoriser le tracé de votre pointeur de souris. Vous pouvez par la suite faire un replay et l’effet est saisissant.

Comme le précise le titre de la page « AJAX is evil », la démonstration est double et amène la réflexion sur le coté négatif d’une telle technologie. Nous ne sommes pas en effet à l’abris d’une incursion dans notre vie privée …

Ligue des Champions 2005/2006, tirage au sort du premier tour

Le tirage au sort du premier tour de la Ligue des Champions a eu lieu Jeudi 25 Aôut à 16h30. Le résultat nous promet de belles soirées de Football en perspective avec un alléchant duel Liverpool-Chelsea. Lyon aura l’honneur d’affronter les Galactiques.
Tableau du tirage au sort du premier tour de la Ligue des Champions 2005-2006

Retrouvailles et duels de géants

Plusieurs équipes retrouveront de vieilles connaissances pour ce premier tour. On pense en particulier à l’Inter et Porto, Milan et le PSV mais surtout Liverpool, Champion d’Europe en titre contre Chelsea Champion d’Angleterre en titre(et pot pourri d’oseille). Les Blues auront à coeur de prendre leur revanche sur les Reds qui les avaient sortis en demi-finale de cette compétitions l’année dernière(sur un but heureux de Luis Garcia). Ils partent logiquement favoris d’autant plus qu’ils ont enregistré l’arrivé d’Essien depuis peu…

Les Galactiques à Gerland

Cela faisait des années que j’espérais que Lyon puisse jouer le Real de Madrid. Ce voeux est exaucé puisque cette année Gerland aura l’honneur d’accueillir les Galactiques. Lyon pourra donc se mesurer à un monument du Football Européen qui a gravé pas moins de neuf fois son nom au palmarès de la plus prestigieuse des compétitions.
On espère que d’ici là l’OL retrouve son fond de jeu qui lui fait défaut depuis le début de la saison. Il faudra certainement se méfier des deux adversaires du groupes qui ne sont cependant pas inconnus aux yeux des Lyonnais.

Le calendrier de Lyon

  • Mardi 13 septembre : Lyon – Real Madrid
  • Mercredi 28 septembre : Rosenborg – Lyon
  • Mercredi 19 octobre : Lyon – Olympiakos Le Pirée
  • Mardi 1er novembre : Olympiakos Le Pirée – Lyon
  • Mercredi 23 novembre : Real Madrid – Lyon
  • Mardi 6 décembre : Lyon – Rosenborg

Bonne chance à Lille qui est tombé dans un groupe difficile. Et bien sûr allez l’OL :D

Créer un moteur de recherche avec XmlHttpRequest et PHP

AJAX est une technologie qui permet d’apporter une plus grande richesse dans l’interface et l’ergonomie d’un site.
Si il est bon de ne pas en abuser au risque de dénaturer le document web, on peut se laisser aller à la tentation d’apporter quelques fonctionnalités intéressantes.
Celle que je vous propose ici consiste à intégrer un moteur de recherche à la manière d’un Google Suggest. Sauf qu’ici vous pourrez avoir un code lisible ^^
Je ne vais pas aborder le concept d’AJAX car certains en parlent déjà très bien. Je vous recommande d’ailleur de lire cet article (Anglophobe, s’abstenir).

PS: Ce billet remplace celui qui s’appelle désormais Introduction à XMLHttpRequest et PHP

Principe

Il faut réunir trois principes pour concevoir cet élément d’application. Tout d’abord nous avons besoin de Javascript et de XMLHttpRequest afin de pouvoir communiquer en arrière plan avec le serveur. Nous allons utiliser la classe XHRConnection pour nous faciliter la vie. Ensuite, il est nécessaire d’avoir un service web se chargera de construire le document XML que nous parserons avec l’API DOM. Enfin afin que l’effet visuel soit efficace nous devrons utiliser les CSS.

Le moteur comprendra une zone de résultat (balise ul) qui ne contiendra pas d’élément de liste. C’est cette liste que nous construirons selon le fichier XML généré et renvoyé par le serveur. Selon que la recherche soit prolifique ou non, la zone de résultat sera cachée ou montrée.

Payes ton code

Vous allez voir, c’est en fait très simple à mettre en place. Voici tout d’abord le formulaire :

<form id="formulaire" action="index.php" method="post">
	<fieldset>
	<p>
		<label for="foo">Saisissez les chaines à rechercher dans le champ de formulaire ci-desous :</label>
		<input type="text" name="foo" id="foo" value="" onkeyup="loadData();" />
	</p>
	<ul id="zoneResultats" style="visibility: hidden;"></ul>
	<p>
		Texte à placer pour tester que les réponses s'affichent par dessus... Lorem ipsum ...
	</p>
	</fieldset>
</form>

Voici le code javascript dont vous aurez besoin :

<script type="text/javascript">
// Déclaration de la fonction de Callback
// + ----------------------------------------------------------------------------------
// + afficherResultats
// + Affiche ou non le conteneur en fonction du résultat de la recherche
// + ----------------------------------------------------------------------------------
function afficherResultats(obj) {
	// Construction des noeuds
	var tabResult = obj.responseXML.getElementsByTagName('resultat');
	document.getElementById('zoneResultats').innerHTML = '';
	if (tabResult.length > 0) {
		// On définit la hauteur de la liste en fonction du nombre de rsultats et de la hauteur de ligne
		var hauteur = tabResult.length * 22; 
		with(document.getElementById('zoneResultats').style) {
			visibility = 'visible';
			height = hauteur + 'px';
		};
		for (var i = 0; i < tabResult.length; i++) {
			resultat = tabResult.item(i); 
			var egt = document.createElement('li');
			var lnk = document.createElement('a');
			var texte = document.createTextNode(resultat.getAttribute('titre'));
			lnk.appendChild(texte);
			lnk.setAttribute('href', resultat.getAttribute('url'));
			lnk.setAttribute('title', resultat.getAttribute('titre'));
			egt.appendChild(lnk);
			document.getElementById('zoneResultats').appendChild(egt);
		}
	}
	else {
		document.getElementById('zoneResultats').style.visibility = 'hidden';
	}
}
// Déclaration de la fonction qui lance la recherche
function loadData() {
	// Création de l'objet
	var XHR = new XHRConnection();
	XHR.appendData("foo", document.getElementById('foo').value);
	// On soumet la requête
	// Signification des paramètres:			
	// 	+ On indique à l'objet qu'il faut appeler le fichier search.php
	// 	+ On utilise la méthode POST, adaptée l'envoi d'information
	// 	+ On indique quelle fonction appeler lorsque l'opération a été effectuée
	XHR.sendAndLoad("search.php", "POST", afficherResultats);
}
	</script>

Coté serveur, nous avons ce petit script PHP :

[php]
header("Pragma: no-cache");
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Content-type: application/xml");

if(!empty($_REQUEST["foo"])) {
$rqListBillet = "
SELECT *
FROM `blog_blabla`
WHERE `titre` like '" . $_REQUEST["foo"] . "%'
ORDER BY `date_parution` DESC";
$rsListBillet = mysql_query($rqListBillet);
$xml = "";
if (mysql_num_rows($rsListBillet) > 0) {
while ($billet = mysql_fetch_object($rsListBillet)) {
$xml .= "\ntitre) . "\" url=\"/blog/" . $billet->url_page . ".html\" />";
}

}
}
else {
$xml = "";
}
$xml .= "\n
";
echo utf8_encode($xml);
[/php]

Pour la mise en page, veuillez vous référer au fichier suivant: styles.css.

N'oubliez pas de tester le formulaire, ça se passe ici

Sutekidane V2

Voici donc enfin le site qui va avec le favicon. Sutekidane dans sa version 2 se dote d'un moteur de blog tout neuf et intègre de nouvelles fonctionnalités.

Rien d'exceptionnel. Mais il manquait en particulier un moteur de recherche. La V2 comble ce manque et ajoute en plus un "quicksearch" utilisant [acronym]AJAX[/acronym].

Mieux vaut tard que jamais

Je n'ai donc pas pu présenter la nouvelle mouture de mon blog au concours CSSR. Néanmoins je remercie l'initiative des modérateurs du forum Alsacréation sans qui je ne me serais peut être jamais mis à l'oeuvre.

Nouveautés

Je ne parlerais pas ici des fonctionnalités du module d'administration. Voici les principales innovations :

Le Moteur de recherche
Vous pouvez chercher un billet ou un commentaire précis. Le petit plus réside dans l'utilisation de l'opérateur "name:" qui vous permet de rechercher un auteur en particulier.
Le Moteur de recherche Quicksearch
Vous remarquerez le formulaire de recherche présente ici. Si vous tapez au moins trois lettre d'un mot-clé, le moteur de recherche Quicksearch vous proposera une liste de résultats ci-contre. Merci AJAX :)
Les TagMarks
Je gère à présent mes liens grâce à des tags, un peu à l'image des blogmarks.
Les Trackbacks
Le blog intègre la gestion des trackbacks. Je n'ai pas encore eu le temps de mettre en place le concept "entrants et sortants". Mais ça ne saurait tarder.
Les smileys cliquables
Ce n'est pas tellement une innovation mais les smileys sont cliquables. Comme j'ai toujours à coeur de séparer la forme, le contenu et le comportement, c'est un script javascript externe qui rend les images cliquables…

Le moteur n'est pas totalement achevé. En plus d'éventuels bugs par ci et là, certains éléments graphiques devront prochainement être ajoutés. Enfin, pour les pages du labo, je m'excuses par avance, car je n'ai pas eu le temps de toutes les intégrer au nouveau design. Bonne lecture à tous :)

Prolongations

Le concours CSSR pour lequel je devais rendre une copie le 17 Août accorde actuellement une prolongation pour les retardataires et ce, jusqu’au 22. Autant le dire, je ne serais pas dans les temps même si c’est pour bientôt. En attendant, voici déjà le nouveau favicon :D

Joyeux anniversaire Dotclear

Tour Eiffel
« Deux petits mots pour Dotclear qui a aujourd’hui deux ans. Encore bravo à son auteur, Olivier Meunier et tout mes encouragements pour l’équipe qui s’occupe du projet.

Si vous lisez ceci et que vous envisagez d’avoir un blog, vous n’êtes pas obligé de le faire vous même (comme moi ^^), prenez le meilleur qui soit : Dotclear. Merci à tout ceux qui participent à cette célébration.

<edit 09/09/05>Les trackbacks sont désormais fonctionnels</edit>