Prog

27 nov. 2008

Utilisation du Frameworks JavaScript Mootools : L'Accordéon

19:28 Jean-Christophe Duvivier

Frameworks, JavaScript, Mootools,

Icone Mootools

J'ai rédigé ce tuto afin de faire découvrir le Frameworks JavaScript Mootools aux non connaisseurs. Il permet de présenter les bases de l'utilisation de cet outil, ce qui va vous permettre par la suite d'intégrer des éléments dynamiques dans vos applications.

Pour ce tuto, nous allons mettre en place un système d'accordéon tel que vous pouvez le voir ici : Mootools Accordion.

Vous allez commencer par récupérer tous les éléments nécessaires pour bosser ici : Mootools Accordion Pack.

Je vous laisse dézipper le tout sur votre PC et tester l'index. Alors ? Ça marche ? Effectivement, le pack est opérationnel.

Pour fonctionner, votre application a besoin de 4 fichiers :

mootools.js
demo.js
demo.css
index.html

Détaillons-les un peu :

Le fichier mootools.js

C'est LE fichier de base de Mootools. Il y recense toutes les variables et fonctions nécessaires au bon fonctionnement de vos applications. Dans le cas de l'accordéon, c'est ce bout de code qui est concerné :

var Accordion = new Class({
 
	Extends: Fx.Elements,
 
	options: {/*
		onActive: $empty,
		onBackground: $empty,*/
		display: 0,
		show: false,
		height: true,
		width: false,
		opacity: true,
		fixedHeight: false,
		fixedWidth: false,
		wait: false,
		alwaysHide: false
	},
 
	initialize: function(){
		var params = Array.link(arguments, {'container': Element.type, 'options': Object.type, 'togglers': $defined, 'elements': $defined});
		this.parent(params.elements, params.options);
		this.togglers = $$(params.togglers);
		this.container = $(params.container);
		this.previous = -1;
		if (this.options.alwaysHide) this.options.wait = true;
		if ($chk(this.options.show)){
			this.options.display = false;
			this.previous = this.options.show;
		}
		if (this.options.start){
			this.options.display = false;
			this.options.show = false;
		}
		this.effects = {};
		if (this.options.opacity) this.effects.opacity = 'fullOpacity';
		if (this.options.width) this.effects.width = this.options.fixedWidth ? 'fullWidth' : 'offsetWidth';
		if (this.options.height) this.effects.height = this.options.fixedHeight ? 'fullHeight' : 'scrollHeight';
		for (var i = 0, l = this.togglers.length; i < l; i++) this.addSection(this.togglers[i], this.elements[i]);
		this.elements.each(function(el, i){
			if (this.options.show === i){
				this.fireEvent('active', [this.togglers[i], el]);
			} else {
				for (var fx in this.effects) el.setStyle(fx, 0);
			}
		}, this);
		if ($chk(this.options.display)) this.display(this.options.display);
	},
 
	addSection: function(toggler, element, pos){
		toggler = $(toggler);
		element = $(element);
		var test = this.togglers.contains(toggler);
		var len = this.togglers.length;
		this.togglers.include(toggler);
		this.elements.include(element);
		if (len && (!test || pos)){
			pos = $pick(pos, len - 1);
			toggler.inject(this.togglers[pos], 'before');
			element.inject(toggler, 'after');
		} else if (this.container && !test){
			toggler.inject(this.container);
			element.inject(this.container);
		}
		var idx = this.togglers.indexOf(toggler);
		toggler.addEvent('click', this.display.bind(this, idx));
		if (this.options.height) element.setStyles({'padding-top': 0, 'border-top': 'none', 'padding-bottom': 0, 'border-bottom': 'none'});
		if (this.options.width) element.setStyles({'padding-left': 0, 'border-left': 'none', 'padding-right': 0, 'border-right': 'none'});
		element.fullOpacity = 1;
		if (this.options.fixedWidth) element.fullWidth = this.options.fixedWidth;
		if (this.options.fixedHeight) element.fullHeight = this.options.fixedHeight;
		element.setStyle('overflow', 'hidden');
		if (!test){
			for (var fx in this.effects) element.setStyle(fx, 0);
		}
		return this;
	},
 
	display: function(index){
		index = ($type(index) == 'element') ? this.elements.indexOf(index) : index;
		if ((this.timer && this.options.wait) || (index === this.previous && !this.options.alwaysHide)) return this;
		this.previous = index;
		var obj = {};
		this.elements.each(function(el, i){
			obj[i] = {};
			var hide = (i != index) || (this.options.alwaysHide && (el.offsetHeight > 0));
			this.fireEvent(hide ? 'background' : 'active', [this.togglers[i], el]);
			for (var fx in this.effects) obj[i][fx] = hide ? 0 : el[this.effects[fx]];
		}, this);
		return this.start(obj);
	}
 
});

Je vous conseille de ne pas trop toucher à ce fichier, sauf si vous vous y connaissez ;)

Ensuite vient le fichier demo.js

window.addEvent('domready', function() {
 
	//create our Accordion instance
	var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#41464D');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#528CE0');
		}
	});
 
	//add click event to the "add section" link
	$('add_section').addEvent('click', function(event) {
		event.stop();
 
		// create toggler
		var toggler = new Element('h3', {
			'class': 'toggler',
			'html': 'Common descent'
		});
 
		// create content
		var content = new Element('div', {
			'class': 'element',
			'html': '<p>A group of organisms [...] </p>'
		});
 
		// position for the new section
		var position = 0;
 
		// add the section to our myAccordion using the addSection method
		myAccordion.addSection(toggler, content, position);
	});
});

Un code un peu plus digeste que le précédent. Détaillons-le :

windows.addEvent('domready', function())

Cette méthode permet d'exécuter la fonction dès que l’arbre dom est chargé. Elle est nécessaire dans tous vos scripts liés au Frameworks Mootools.

var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#41464D');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#528CE0');
		}
	});

Ici on déclare une nouvelle instance de la classe Accordion en spécifiant les éléments html qui vont interagir avec le JavaScript. En l'occurence, les éléments h3 de classe toggler et les éléments div de classe element. On définit ensuite la couleur du texte des éléments dans les deux états : activé et non activé.

//add click event to the "add section" link
	$('add_section').addEvent('click', function(event) {
		event.stop();
 
		// create toggler
		var toggler = new Element('h3', {
			'class': 'toggler',
			'html': 'Common descent'
		});
 
		// create content
		var content = new Element('div', {
			'class': 'element',
			'html': '<p>A group of organisms [...] </p>'
		});
 
		// position for the new section
		var position = 0;
 
		// add the section to our myAccordion using the addSection method
		myAccordion.addSection(toggler, content, position);
	});

Ce code permet d'ajouter une nouvelle section suite à un clic sur un élément d'id add_section. Cet ajout de section se caractérise par l'ajout d'un élément h3.toggler et d'un élément div.element. Ce bout de code n'a pas vraiment d'importance dans l'utilisation d'un accordéon classique.

Ensuite vient le fichier demo.css

#accordion {
	margin:20px 0px;
}
 
h3.toggler {
	cursor: pointer;
	border: 1px solid #f5f5f5;
	border-right-color: #ddd;
	border-bottom-color: #ddd;
	font-family: 'Andale Mono', sans-serif;
	font-size: 12px;
	background: #D2E0E6;
	color: #528CE0;
	margin: 0 0 4px 0;
	padding: 3px 5px 1px;
}
 
div.element p, div.element h4 {
	margin:0px;
	padding:4px;
}
 
blockquote {
	padding:5px 20px;
}

Rien de bien particulier. C'est ici que se paramètre le style de votre application.

Enfin, le fichier index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="../mootools.js"></script>
	<script type="text/javascript" src="demo.js"></script>
	<title>Accordion Demo</title>
</head>
<body>
	<h1>Accordion</h1>
	<h2>Introduction</h2>
	<p>
		The Accordion gives you a fancy way to only show the really needed content.
	</p>
	<hr />
	<div>
		<a id="add_section" href="#">add section</a>
	</div>
	<div id="accordion">
		<h3 class="toggler">History</h3>
		<div class="element">
			<h4>Common ancestor</h4>
			<p>The first suggestion [...]</p>
			<blockquote>"Could one not say [...]</blockquote>
			<h4>The Origin of Species</h4>
			<p>In 1859, Charles Darwin's [...]</p>
			<blockquote>[P]robably all [...]</blockquote>
			<p>The famous closing [...]</p>
		</div>
 
		<h3 class="toggler">Evidence of universal common descent</h3>
		<div class="element">
			<h4>Common biochemistry and genetic code</h4>
			<p>All known forms [...]</p>
			<img src="images/phylogenetic_tree.png" width="340" height="230" align="right" alt="" />
			<p>The universality [...]</p>
			<h4>Phylogenetic trees</h4>
			<p>Another important [...]</p>
		</div>
 
		<h3 class="toggler">Examples of common descent</h3>
		<div class="element">
			<h4>Artificial selection</h4>
			<p>Artificial selection [...]</p>
			<img src="images/biglittledog.jpg" width="180" height="151" align="right" alt="" />
			<h4>Dog breeding</h4>
			<p>An obvious [...]</p>
		</div>
	</div>
</body>
</html>

Ce fichier recense 3 éléménts capitaux :

<div id="accordion">
</div>

C'est dans cette div que devront figurer tous vos élements dynamiques. Ne l'oubliez pas ;)

<h3 class="toggler">
</h3>

C'est en cliquant sur ces éléments que vous allez déclencher l'action (affichage ou masquage de la DIV).

<div class="element">
</div>

Ce sont les éléments qui seront masqués ou affichés

Enfin, un détail très important, n'oubliez pas de déclarer le DOCTYPE de votre document ainsi que de faire figurer le paramètre xmlns dans votre balise HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

On s'en tiendra là pour cette première approche. Je vous conseille vivement d'aller fouiner sur le site de Mootools afin de tester dans un premier temps toutes les démos, afin de les mettre en application et ainsi maitriser ce Frameworks qui a de l'avenir ;)

Categorie Prog Nombre de commentaires 4 commentaires aucun rétrolien

14 nov. 2008

Utiliser PDO (PHP Data Objects)

21:35 Jean-Christophe Duvivier

PDO, PHP,

Rapide tuto sur l'extension PDO désormais incluse dans les nouvelles versions de PHP (depuis la 5.1 me semble-t-il). Qu'est-ce-que PDO ? C'est une extension qui permet de fournir une interface d'abstraction à l'accès de données, ce qui signifie que l'on utilise les mêmes fonctions pour exécuter des requêtes ou récupérer les données quelque soit la base de données utilisée.

On va vite voir comment mettre ça en place :

Avant toute chose, et comme nous avions l'habitude de le faire dans les anciennes versions de PHP, il faut renseigner les informations du serveur et de la base de données.

<?php
$login = 'login';
$mdp = 'mdp';
// Pour MySQL :
$bdd = 'mysql:host=localhost;dbname=mabase';
// Pour SQLite :
$bdd = 'sqlite:/chemin_vers_fichier_de_configuration';
// Pour PostgreSQL
$bdd = 'pgsql:host=localhost port=4444 dbname=mabase user=login password=mdp';
// Pour Oracle
$bdd = 'OCI:dbname=mabase', 'login', 'mdp';
?>

Rien de difficile à comprendre. Le seul problème réside dans la syntaxe, que l'on a pas l'habitude de voir. Ensuite vient la connexion à la bdd.

<?php
$login = 'login';
$mdp = 'mdp';
$bdd = 'mysql:host=localhost;dbname=mabase';
try {
$cnx = new PDO($bdd, $login, $mdp);
}
catch (PDOException $error) {
die("Erreur de connexion : " . $error->getMessage() );
}
$cnx = null; // Fermeture de la connexion
?>

Pour ceux qui n'ont pas l'habitude de gérer les exceptions de cette manière, avec try et catch, je vous renvois à la documentation PHP disponible ici : www.php.net. Et maintenant, intéressons nous aux requêtes. Concernant les requêtes les plus utilisées, PDO distingue deux types de requêtes : les requêtes renvoyant un résultat (SELECT...) et les requêtes ne renvoyant pas de résultat (INSERT...). Cette distinction n'était pas présente dans les versions antérieures de PHP (mysql_query était utilisé pour tout type de requête). Voyons comment PDO gère ceci :

<?php
$login = 'login';
$mdp = 'mdp';
$bdd = 'mysql:host=localhost;dbname=mabase';
try {
$cnx = new PDO($bdd, $login, $mdp);
}
catch (PDOException $error) {
die("Erreur de connexion : " . $error->getMessage() );
}
// Requête sans renvoi de résultat
$req = "INSERT INTO clients (pseudo, mail) VALUES ('toto, 'toto@gmail.com')";
$cnx->exec($req);
// Requête avec renvoi de résultat(s)
$req = "SELECT * FROM clients";
$res = $cnx->query($req);
$cnx = null; // Fermeture de la connexion
?>

Il est bon de noter qu'en cas d'erreur, les fonctions exec() et query() renvoient FALSE.

Maintenant que nous avons sélectionné nos enregistrements, il faut les récupérer. Nous avions l'habitude des mysql_fetch_array, mysql_fetch_object... Avec PDO, nous ne sommes pas dépaysés, mais la syntaxe est différente. Là voici :

<?php
$login = 'login';
$mdp = 'mdp';
$bdd = 'mysql:host=localhost;dbname=mabase';
try {
$cnx = new PDO($bdd, $login, $mdp);
}
catch (PDOException $error) {
die("Erreur de connexion : " . $error->getMessage() );
}
// Requête sans renvoi de résultat
$req = "INSERT INTO clients (pseudo, mail) VALUES ('toto, 'toto@gmail.com')";
$cnx->exec($req);
// Requête avec renvoi de résultat(s)
$req = "SELECT * FROM clients";
$res = $cnx->query($req);
while ($row = $res->fetch(PDO::FETCH_NUM)){}
// PDO::FETCH_NUM renvoie un tableau avec des clefs numériques.
// PDO::FETCH_ASSOC renvoie un tableau associatif.
// PDO::FETCH_BOTH renvoie un tableau associatif avec des clefs numériques.
// PDO::FETCH_OBJ renvoie une instance de stdClass.
$cnx = null; // Fermeture de la connexion
?>

J'ai mentionné dans l'exemple les constantes les plus utilisées, il y a en tout 17 méthodes permettant de "récolter" les enregistrements d'une base de données.

Nous arrivons au terme de ce tutoriel d'initiation à PDO. J'espère qu'il vous servira dans vos futurs scripts PHP ;)

Pour de plus amples informations à propos de PDO, je vous renvois à la documentation PHP, comme a son habitude, très bien expliquée. Rendez-vous ici : www.php.net

Categorie Prog Nombre de commentaires 6 commentaires aucun rétrolien

12 nov. 2008

Gestion d'une Google Map avec PHP

12:40 Jean-Christophe Duvivier

Google, GoogleMaps, JavaScript, PHP,

Nous voilà en route pour un tutoriel sur l'utilisation et la gestion d'une Google Map en ne manipulant que du code PHP. C'est pas génial ?! Vous le savez surement, et ça coule de source, l'API GoogleMaps est, à la base, géré principalement par du JavaScript. Etant donné que certains développeurs ont un peu de mal avec ce langage, et que celui utilisé par l'API GoogleMaps n'est pas du JavaScript de base, des classes PHP on vu le jour. Elles sont nombreuses sur la toile, nous allons nous intéresser à l'une d'entre elles : N/X API to Google Maps.

Pour la télécharger, ils vous suffit de vous rendre sur l'excellent site de PHP Classes, une immense bibliothèque de classes PHP qui vous simplifiera grandement la vie. L'enregistrement est nécessaire pour pouvoir accéder aux fichiers, cela ne prend que quelques secondes et cela vous fera gagner des jours ;) La classe est donc disponible ici : www.phpclasses.org

Une fois téléchargée, nous allons nous intéresser de près à cette classe. Pour ceux qui l'ont parcouru rapidement, vous aurez pu constater que ce sont des méthodes qui génèrent le code JavaScript nécessaire à l'affichage de la carte. Il nous suffit donc d'utiliser ses méthodes pour obtenir ce que l'on souhaite. Vous avez placé votre classe à la racine ou dans un répertoire de votre site ? Alors c'est parti !

La première chose à faire est de récupérer une clé (API Key) gentiment délivrée par Google à cette adresse : Google Maps API Key. Une fois que vous aurez lu l'intégralité de la page, vous devrez renseigner le champ "My web site URL". Il faut saisir l'adresse dans laquelle se trouvera votre GoogleMaps. Si elle est à la base : http://www.monsite.fr/, si elle est dans le répertoire toto : http://www.monsite.fr/toto. Il ne faut surtout pas la changer de place après l'obtention de votre clé, ou alors il vous faudra redemander une clé valide à Google.

Commencez par ouvrir votre classe php, et recherchez-y la ligne suivante (ligne 37 en principe) :

<?php define(GoogleMapsKey, '<your api key here>'); ?>

Remplacez <your api key here> par votre clé valide.

Créez ou ouvrez un fichier PHP dans lequel figurera votre carte. Nous allons commencer par une version de base pour bien assimiler les méthodes.

<?php
require "nxgooglemapsapi.php"; // Inclusion de la classe
$api = new NXGoogleMapsAPI(); // Création d'une instance de la classe
$api->setWidth(800); // Définition de la largeur de la carte
$api->setHeight(600); // Définition de la hauteur de la carte
?>
 
<html>
  <head>
    <?php echo $api->getHeadCode(); ?>
  </head>
  <body onLoad="<?php echo $api->getOnLoadCode(); ?>">
    <?php echo $api->getBodyCode(); ?>
  </body>
</html>

Je pense que les commentaires suffisent à la bonne compréhension du script : après avoir créé une instance de la classe, on utilise une méthode chargée de fixer la largeur de la carte et une autre chargée de fixer sa hauteur. Dans le code HTML qui suit, on fait juste appel à des méthodes chargées d'écrire le code javascript nécessaire dans le HEAD, le BODY et les paramètres du BODY.

Et si nous procédions à une utilisation plus poussée de cette classe ? C'est parti !

<?php
require "nxgooglemapsapi.php"; // Inclusion de la classe
$api = new NXGoogleMapsAPI(); // Création d'une instance de la classe
$api->setWidth(800); // Définition de la largeur de la carte
$api->setHeight(600); // Définition de la hauteur de la carte
$api->setZoomFactor(16); // Définition du zoom
$api->addControl(GLargeMapControl); // Ajout des contrôleurs
$api->addControl(GMapTypeControl); // Ajout des types de vue
$api->addControl(GOverviewMapControl); // Ajout de la carte miniature
?>
 
<html>
  <head>
    <?php echo $api->getHeadCode(); ?>
  </head>
  <body onLoad="<?php echo $api->getOnLoadCode(); ?>">
    <?php echo $api->getBodyCode(); ?>
  </body>
</html>

Quelques explications s'imposent pour ces nouvelles méthodes :

$api->setZoomFactor(16);

Permet de définir la valeur du zoom. Plus le zoom est important, plus la localisation sera précise. La valeur maximum est 17.

$api->addControl(GLargeMapControl);

Permet d'ajouter des contrôleurs pour régler le zoom, et se déplacer sur la carte. Il existe deux types de contrôleurs de tailles différentes. Ceux-ci sont les plus importants. Pour avoir les contrôleurs réduits, il suffit d'utiliser le code suivant :

$api->addControl(GSmallMapControl);

$api->addControl(GMapTypeControl);

Affiche 3 boutons qui vont permettre à l'utilisateur d'afficher la carte en format "plan", "satellite" ou bien "mixte".

$api->addControl(GOverviewMapControl);

Permet d'ajouter une miniature de la carte dans le coin inférieur droit. Cela permet de naviguer plus rapidement sur la carte.

Maintenant que tout cela est vu, nous allons passer à l'ajout d'adresses sur la carte.

<?php
require "nxgooglemapsapi.php"; // Inclusion de la classe
$api = new NXGoogleMapsAPI(); // Création d'une instance de la classe
$api->setWidth(800); // Définition de la largeur de la carte
$api->setHeight(600); // Définition de la hauteur de la carte
$api->setZoomFactor(12); // Définition du zoom
$api->addControl(GLargeMapControl); // Ajout des contrôles (zoom, déplacement...)
$api->addControl(GMapTypeControl); // Ajout des types de vue
$api->addControl(GOverviewMapControl); // Ajout de la carte miniature
$api->addAddress("49 avenue des champs élysées Paris", "Haagen-dazs Paris", true);
$api->addAddress("74 avenue des champs élysées Paris", "La Fnac", false);
?>
 
<html>
  <head>
    <?php echo $api->getHeadCode(); ?>
  </head>
  <body onLoad="<?php echo $api->getOnLoadCode(); ?>">
    <?php echo $api->getBodyCode(); ?>
  </body>
</html>

Rien de compliqué. Nous faisons appel à la méthode "addAddress" et nous renseignons dans une premier temps l'adresse (avec rue, ville, CP...), dans un deuxième temps le contenu de l'infobulle et enfin le centrage automatique. Si la valeur est "TRUE", la carte se centrera automatiquement sur l'adresse. Si la valeur est "FALSE", la carte ne sera pas centrée sur l'adresse. À noter que si plusieurs adresses ont l'attribut "TRUE", la carte se centrera sur la dernière adresse ajoutée. De plus, il est possible de faire appel à une méthode de centrage par latitude/longitude :

$api->setCenter('latitude','longitude');

Pour en revenir à l'infobulle, il vous est possible d'y insérer du texte, mais aussi du code HTML avec insertion d'images etc.

Pour terminer ce tutoriel, nous allons implémenter une fonction de recherche sur notre carte avec zone de saisie et renseignement de la latitude et de la longitude.

<?php
require "nxgooglemapsapi.php"; // Inclusion de la classe
$api = new NXGoogleMapsAPI(); // Création d'une instance de la classe
$api->setWidth(800); // Définition de la largeur de la carte
$api->setHeight(600); // Définition de la hauteur de la carte
$api->setZoomFactor(17); // Définition du zoom
$api->addControl(GLargeMapControl); // Ajout des contrôleurs
$api->addControl(GMapTypeControl); // Ajout des types de vue
$api->addControl(GOverviewMapControl); // Ajout de la carte miniature
$api->addAddress("49 avenue des champs élysées Paris", "Haagen-dazs Paris", true);
$api->addAddress("74 avenue des champs élysées Paris", "La Fnac", false);
?>
 
<html>
  <head>
    <?php echo $api->getHeadCode(); ?>
  </head>
  <body onLoad="<?php echo $api->getOnLoadCode(); ?>">
    <?php echo $api->getBodyCode(); ?>
    <form>
      <input type="text" value="" name="address" id="address" />
      <input type="button" value="Rechercher" onClick="moveToAddressDMarker(document.getElementById(’address’).value) ;" />
      x : <input type="text" value="" id="coordX" />
      y : <input type="text" value="" id="coordY" />
    </form>
  </body>
</html>

x représente donc la latitude, et y la longitude. On sort légèrement de la programmation en PHP je vous l'accorde, mais ça reste très abordable ;)

J'en reste là pour ce tuto, je vous laisse l'adapter à vos besoins ;)

Categorie Prog Nombre de commentaires 15 commentaires aucun rétrolien

18 oct. 2008

TV 4 IT, votre source d'information audiovisuelle

10:26 Jean-Christophe Duvivier

.NET, PHP, Symfony,

Après les livres, je vous propose une nouvelle source d'information relative a la programmation orientée web : la télévision. J'ai découvert cette WebTv récemment, en cherchant un article de Cyril Pierre de Geyer sur Symfony. Il s'agit de TV 4 IT.

Cette WebTv se définit comme "La WebTv des architectes de l'IT". Aussi, vous y trouverez surtout du .NET au détriment de PHP. Cependant, de plus en plus d'articles vidéos, majoritairement présentées par Cyril Pierre de Geyer voient le jour. Rien que pour ça, ça vaut le coup d'y aller.

De plus, si vous avez le temps, et le niveau, il vous est possible de devenir reporter pour TV 4 IT.

Alors rendez-vous sur www.tv4it.net ;-)

Categorie Prog Nombre de commentaires aucun commentaire aucun rétrolien

16 oct. 2008

PHP Solutions, le magazine indispensable aux programmeurs web

12:06 Jean-Christophe Duvivier

Ajax, e-commerce, Flash, Flex, Oracle, PHP, PHP Solutions, Python, Symfony, Web 2.0, Zend,

Vous l'aurez surement constaté, les magazines qui traitent de programmation web ne sont pas nombreux sur le marché, ce qui implique qu'il n'est pas facile d'en trouver de qualité. Soit les thèmes abordés sont trop vastes, soit le niveau ciblé est trop bas etc. J'ai donc envie de vous faire découvrir un magazine qui ne traite, certes, que de PHP mais dont la pertinence vous poussera vite à vous y intéresser. Il s'agit de PHP Solutions.

logo php solutions

J'ai acheté mon premier exemplaire de ce magazine lors des 2èmes Journées Scientifiques EuroMéditerranéennes au Palais Neptune de Toulon, et j'ai tellement été séduit par la pertinence de "l'ouvrage" que je me suis abonné !

Les thèmes abordés dans ce magazine sont en adéquation avec l'évolution technologique du web. On parle bien de technologies actuelles, et non pas de technologies d'il y a 10 ans. Au programme :

Interaction entre Flash et PHP
Familiarisation avec Flex
Initiation à Zend et Symfony
Utilisations de classes objets et développement d'API
Conception d'une application avec Ajax
Administration Oracle en PHP
Apprentissage à Python
Découverte d'applications e-commerce
Couplage entre JAVA et PHP
etc...

Vous l'aurez compris, des thèmes d'actualité pertinents qui permettre de pallier les manques d'Internet, sur des sujets aussi précis que ceux-là.

Étant donné que ce magazine n'est pas présent dans toutes les papeteries/librairires, je vous conseille vivement de vous y abonner. Un abonnement à 6 numéros coûte en ce moment 35€, et vous recevrez en cadeau les archives des anciens numéros sur CD, 2 numéros Hors Série, 2 livres de programmation web etc. Bref, toutes les informations sont disponibles ici : www.phpsolmag.org.

Categorie Prog Nombre de commentaires aucun commentaire aucun rétrolien

15 oct. 2008

Afficher un slideshow de votre galerie Flickr sur votre site

11:31 Jean-Christophe Duvivier

Ajax, Flickr, Internet, Site, Tutoriel, Web, Web 2.0,

Inutile de vous présenter ce concentré d'Ajax, la référence du partage d'images personnelles sur le web : Flickr

prog_flickr

Les fonctionnalités de ce site sont tout simplement énormes : partage, retouche, classement, géolocalisation de vos photos, ce qui pousse tout internaute, du noob au nerd à se servir de cette outil pour référencer ses photos personnelles.

Le but du tutoriel que je vous propose est d'afficher vos photos Flickr sur votre site et/ou blog personnel. Nous allons pour cela nous servir de l'outil Flickrshow développé par Ben Sekulowicz-Barclay

L'installation de Flickrshow est très simple, tout comme sa configuration.

Préambule :

Il vous faut tout d'abord télécharger le fichier Javascript que vous pourrez trouver ici : http://v6.flickrshow.com/scripts/scripts.js

1ère étape : Mise en Place :

Une simple inclusion dans votre fichier PHP/HTML est nécessaire :

<script type="text/javascript" src="js/scripts.js"></script>

Il vous suffit ensuite d'insérer le code suivant à l'endroit où vous voulez afficher votre slideshow, en remplacant "VOTREALBUM" par l'id de votre album que vous trouverez sur Flickr (dans la barre d'adresse, après avoir doublé-cliqué sur votre album). Il est en principe composé de 17 chiffres et lettres.

<div id="fsDemo" style="height:600px;width:400px;">
</div>
<script type="text/javascript">
var cesc = new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00"});
</script>

2ème étape : Sélection des photos :

L'affichage des photos en fonction de l'album auquel elles correspondent est une chose, mais comment procéder pour afficher toutes ses photos, sans distinction d'album ? Pour cela flickrshow propose différents paramètres :

flickr_photoset : Affiche les photos d'un album précis.
flickr_group : Affiche les photos d'un groupe précis.
flickr_tags : Affiche les photos rattachées à des tags précis (séparez les tags par des virgules lors de la déclaration).
flickr_user : Affiche les photos d'un membre précis.

De plus, il vous est possible de combiner les paramètres "flickr_user" et "flickr_tags" :

var slideshow= new flickrshow("fsDemo", {flickr_tags: "paysage", flickr_user: "jchristophe.d"});

Cela vous affichera donc toutes mes photos portant le tag "paysage".

3ème étape : Modifier l'apparence de Flickrshow :

a. Modifier les couleurs

Ben Sekulowicz-Barclay a développé plusieurs CSS vous permettant de choisir le style de votre Flickrshow parmis différents styles : bleu(blue), vert(green), gris(grey), et rose(pink). Pour sélectionner le thème "green", il suffit de déclarer la variable suivante :

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", theme: "green"});

Si aucune de ces CSS ne vous convient, ou si vous voulez modifier quelques éléments, il suffit de rattacher votre propre CSS, en déclarant, au préalable, la variable suivante :

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", theme: "none"});

Voici la feuille de style (du thème "green") à modifier et à appeler depuis votre squelette pour appliquer votre propre style :

/* WRAPPER
************************************************************************************* */
 
div.fs { background: #E8E8E8 !important; }
 
/* WRAPPER - LOADING
************************************************************************************* */
 
div.fs div.fsLoading { 
	background: #E8E8E8 url("http://v6.flickrshow.com/themes/green/al.gif") 50% 50% no-repeat!important;
	z-index: 500;
}
 
div.fsLoaded-0 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-1 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-2 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-3 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important;}
div.fsLoaded-4 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-5 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-6 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-7 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-8 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-9 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-10 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
 
 
/* WRAPPER - SLIDER
************************************************************************************* */
 
div.fs div.fsSlider
{
   background: #D1D1D1 url("http://v6.flickrshow.com/themes/green/sl.gif") !important;
}
 
div.fs div.fsSliderH { 
	background: #99CC00 !important; 
	cursor: pointer;
}
 
/* WRAPPER - BUTTONS
************************************************************************************* */
 
div.fs ol.fsButtons { background: #E8E8E8; }
 
div.fs ol.fsButtons li {
	background: #E8E8E8 50% 50% no-repeat;
	overflow: hidden;
	text-indent: -999px;
	z-index: 300;
}
 
div.fs ol.fsButtons li.fsButtonA { background-image: url("http://v6.flickrshow.com/themes/green/ip.gif") !important; }
div.fs ol.fsButtons li.fsButtonB { background-image: url("http://v6.flickrshow.com/themes/green/ir.gif") !important; }
div.fs ol.fsButtons li.fsButtonC { background-image: url("http://v6.flickrshow.com/themes/green/il.gif") !important; }
 
div.fsPlaying ol.fsButtons li.fsButtonA { background-image: url("http://v6.flickrshow.com/themes/green/is.gif") !important; }
 
/* WRAPPER - IMAGES
************************************************************************************* */
 
div.fs ol.fsImages { background: #D1D1D1; }
 
div.fs ol.fsImages li h2 {
	color: #2E2E2E !important;
	font-family: "Lucida Grande", "Helvetica", "Arial", Sans-serif;
	font-weight: lighter;
	overflow: hidden;
	z-index: 200;
}

b. Modifier la taille des images

Par défaut, Flickr propose plusieurs tailles pour afficher vos images. Elles sont identifiées grâce à des lettres :

s petit carré 75x75
t miniature, côté le plus long de 100
m petit, côté le plus long de 240
- moyen, côté le plus long de 500
b grand, côté le plus long de 1024 (existe uniquement pour de très grandes images d'origine)
o image d'origine, jpg, gif ou png selon le format source

Il suffit donc d'insérer cette lettre dans la variable principal. Exemple pour une taille miniature :

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", size:"_t"});

c. Modifier la vitesse de changement des images

Il vous suffit d'insérer dans la variable le laps de temps entre l'affichage total de 2 photos. Exemple pour 3 secondes :

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", speed:3});

c. Debug Mode

Flickrshow est doté d'un mode de débuggage afin de permettre à l'utilisateur d'identifier les erreurs en cas de non affichage du Slideshow.

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", debug:1});

N'oubliez pas de désactiver le mode debug si votre slideshow fonctionne.

Et voilà pour ce tuto =) Vous pouvez venir voir le résultat sur ma galerie perso ou sur le site officiel de Flickrshow.

Categorie Prog Nombre de commentaires 14 commentaires aucun rétrolien

10 oct. 2008

Un peu de lecture

21:43 Jean-Christophe Duvivier

4IM, Frameworks, Symfony,

Alors que pour la plupart des gens les bonnes résolutions se prennent lors de chaque nouvelle année civile, pour ma part, ça se passe plutôt à chaque nouvelle année scolaire.

the definitive guide to symfony

Quoi de neuf pour la rentrée 2008 ? La familiarisation avec un Frameworks. À la base je m'étais dit que j'allais développer une grosse application de A à Z, que ça serait une bonne expérience etc. Puis Ben, un pote de 4IM m'a brièvement parlé de sa récente expérience avec un Frameworks : PEAR. Ça m'a donné envie d'approfondir les recherches, et j'ai donc décidé de m'initier à Symfony, un Frameworks relativement jeune qui, à l'heure actuelle, est considéré comme l'un des Framworks les plus complets. Et pour connaître tout ses rouages, quoi de mieux qu'un book ?

Alors me voilà propriétaire, depuis aujourd'hui même, du "Definitive Guide to Symfony". Exclusivement rédigé en anglais, il promet d'être très intéressant. Je vous ferai part de mon expérience acquise en fur et à mesure, afin que vous puissiez apprendre avec moi ^^.

Categorie Prog Nombre de commentaires aucun commentaire aucun rétrolien

page 2 de 2 - billets suivants »