slDesign » Tutoriels

Tutoriel WordPress : Introduction à la création d’un thème WordPress personnalisé

Steve Leherpeux — Mon, 04 Oct 2010 10:32:50 +0000

Depuis quelques temps maintenant que je travaille sur WordPress comme base de mes développements Web, j’ai appris à utiliser ce moteur de blog, installer des extension et même en développer.

WordPress est certes un outil puissant utilisable comme moteur de Blog mais également comme base à la réalisation de sites Web Dynamiques ou de sites vitrines. Tous les blog WordPress sont réalisés sur la même base et pourtant, ils sont presque tous différents.

Je vous propose de partager avec moi une étape primordial qui fera de votre Blog un Blog unique, la création d’un thème personnalisé.

Infos :

Version du document : 0.1

Sommaire :

Page 1 – Introduction
Page 2 – Préparation
Page 3 – Création d’un thème
Page 4 – Edition avancée
Page 5 – Affichage des pages
Page 6 – Sidebar
Page 7 – Administration du thème
Page 8 – Personnalisation du thème
Page 9 – Intégration de Widget
Page 10 – Conclusion

I – Introduction

1°) Objet du tutoriel

Cet article à pour objectif de vous apprendre à développer un thème complet pour WordPress. A la fin de ce didacticiel, vous serez (normalement) en mesure de réaliser un Template 100% personnalisable.

Cet article est amené à évolué, il sera mis à jour en fonction des commentaires et améliorations apportées à ce dernier.

Ce tutoriel est une introduction à la création de thème WordPress.

Ce que n’est pas ce didacticiel :

Ce didacticiel n’a pas pour vocation de vous apprendre à développer en CSS, HTML, PHP. Ces langages sont utilisés et vous devez donc les maîtriser.

Ce n’est pas une introduction à WordPress. Vous devez connaitre ce moteur de Blog, savoir l’installer et installer des extensions.

Cet article n’abordera pas en détail l’intégration graphique au sein de WordPress.

2°) Pré-requis

PHP : Bonnes connaissances requises
CSS : Très bonne connaissance
JavaScript : Très bonne connaissances
WordPress : Bonne connaissance

3°) Editeur de code et outils de programmation

Editeur de Code HTML / PHP / JavaScript / CSS

Certes, il vous est possible de suivre ce tutoriel avec un simple éditeur de texte… mais je vous conseille d’utiliser un puissant éditeur de code pouvant supporter les langages suivants :

PHP
HTML
CSS
JavaScript / jQuery

Pour ma part, j’utilise Aptana Studio disponible à l’adresse suivante http://www.aptana.com/ et qui intègre un ensemble d’outils vous permettant de développer des sites Web dynamiques HTML / PHP / JAVASCRIPT.

Un éditeur vous permettra d’accéder à différentes fonctions qui me semblent indispensables :

Coloration syntaxique
Indentation
Numérotation de lignes
Recherche de documentation

Firefox et extensions pour développeurs

Firefox est bien plus qu’un navigateur Web… il permet également d’accéder à de nombreux outils utiles aux développeurs.

Extension Web Développer pour Firefox : Cette extension ajoute un menu à Firefox vous permettant d’avoir accès à différents outils :

Gestion des cookies
Manipulation et affichage des feuilles de style css
Informations sur les images
Informations sur les formulaires
Outils de validation HTML / CSS (W3C)

Site web de l’extension : http://chrispederick.com/work/web-developer/

Extension Firebug :

Firebug est une extension primordial pour le développement de sites Web. Contrairement à la barre de développement “Web Développer” cette extension est orientée ‘client’; il est ainsi possible d’analyser le code généré côté client par JavaScript.

4°) Ressources et documentations

Voici une liste de liens utiles ; je vous encourage vivement à les consulter avant de commencer et de les avoirs dans vos favoris :

http://codex.wordpress.org/Developer_Documentation – Documentation WordPress à l’attention des développeurs

http://codex.wordpress.org/Theme_Development – Documentation spécifique aux développement de thèmes

Il est important de bien appréhender les notions techniques de WordPress et notamment cette page : http://codex.wordpress.org/Plugin_API ; cette dernière vous apportera de nombreuses information sur l’API WordPress qui est à la base des développement autour du moteur de Blog.

5°) Introduction à l’API WordPress

Sans entrer dans les détails, je vais vous présenter en quelques lignes l’API WordPress. Une API vous permet d’interagir avec WordPress. Vous entendrez parler de HOOK

Il existe deux types de HOOK :

Les filtres
Les actions

Les filtres sont des événements que WordPress lancent afin de modifier des textes de différents types avant de les insérer dans la base de données ou de les afficher à l’écran

Les actions sont des événement que WordPress lance à des moments spécifique de leur exécution.

Ces éléments ne sont pas directement utilisés dans les thèmes mais principalement dans les plugins et widgets qui y sont intégrés

Les LOOPS sont utilisés par WordPress pour afficher chacun de vos articles.

La syntaxe de base est la suivante :

6°) Informations utiles

WordPress est installé en local chez moi sur un serveur LAMPP. OS Windows. J’utilise l’éditeur de Code Aptana Studio. Le rendu est réalisé sur Firefox. Il sera donc nécessaire de rendre ce code compatible avec d’autres navigateurs WEB.

Tutoriel HTML 5 : Réaliser une lecteur vidéo personnalisé

Steve Leherpeux — Tue, 14 Sep 2010 11:43:19 +0000

Depuis la sortie de HTML5 il est possible d’insérer et de manipuler de nombreux médias dans vos pages WEB, vous pouvez entre autre insérer un lecteur vidéo. C’est un réel plus pour les développeurs Web.

Nous allons donc voir comment intégrer un lecteur vidéo et comment le personnaliser afin d’obtenir le même design quelque soit le navigateur.

Information sur le document :

Version : 0.1
Date de publication : 14-09-2010
Date de révision : NC

Introduction

Avant de commencer vous trouverez sur le site du "W3C l’ensemble des informations portant sur la balise l’intégration de vidéo. Ces informations sont disponibles à l’adresse suivante : http://www.w3.org/TR/2008/WD-html5-20080610/video.html#video

Je tiens également à vous rappeler que l’intégration de vidéo via la balise ‘ n’est pas supporté par l’ensemble des navigateurs… et plus encore compliqué, les navigateurs ne supportent pas tous le même format de vidéo…

Théorie…

L’intégration de vidéo en HTML 5 se fait avec la balise "". Cette balise supporte différents attributs :

src :La source de la vidéo
poster : La source d’une image qui sera affichée si le navigateur ne supporte pas la balise "video"
autoplay :Démarrage automatique de la vidéo [Défaut = false]
start : Début de la vidéo
loopstart : Début de la lecture en boucle
loopend : Fin de la lecture en boucle
end : La vidéo est à la fin
playcount : Nombre de fois à lire
controls : Affiche ou non les contrôles
width : Largeur du lecteur
zq hauteur du lecteur

Les attributs src, autoplay, start, loopstart, loopend, end, playcount, et sont des attributs commun à tous les éléments de type "Médias".

Les étapes

Etape 1 – Création du document de base

Nous utiliserons ici une simple page Web :




Mon lecteur Vidéo HTML5

Etape 2 – Intégration de la vidéo

Nous allons intégrer une vidéo simple dans un premier temps. Saisissez le code ci-dessous dans votre page WEB :

Le résultat est le suivant :

Si vous cliquez avec le bouton droit de votre souris sur le lecteur, vous verrez apparaître un menu contextuel

Etape 3 – Etendre le lecteur

Nous allons maintenant étendre notre lecteur avec les attributs de base.

Nous avons ici simplement ajouter les contrôles et une image et activé l’autoplay

Création d’un lecteur vidéo HTML personnalisé:

Comme vous venez de le voir l’intégration du player est très simple mais limitée. En effet, le design de votre player dépend du navigateur et ce dernier n’est pas forcement adapté au design de votre site. Heureusement, nous allons pouvoir utiliser javascript ; en effet, les navigateurs sont gérés côté client donc, c’est votre navigateur qui intègre ce player. Nous allons donc pouvoir utiliser javascript pour agrémenter notre player.

Je vais dans cet article utiliser la bibliothèque jQuery que j’ai intégrée depuis Google Api. et j’ai également intégré la bibliothèque jQuery-ui. Je vais également créer un Plugin jQuery. Le code ci-dessous vous montre l’initialisation jQuery ainsi que la liaison avec mon plugin.

J’ai également ajouté un dossier "themes" ainsi qu’un dossier "themes/default/" qui vont héberger nos fichiers de styles. Vous trouverez ci-dessous la structure de notre projet :



	
	owPlayer - HTML 5 Web video Player

Ce tutoriel n’a pas pour but de vous expliquer le développement d ‘un plugin jQuery. Malgré tout, j’ai essayé de commenter le plus précisément possible le code de cette extension. Si vous ne vous sentez pas à l’aise avec jQuery et le développement de plugin, voici quelques ressources :
- Tutoriel sur l’édition de plugin jQuery [Lien]

- Tutoriel en Anglais [lien]

Théorie

Avant de commencer, il est utile de comprendre le fonctionnement et les attributs d’un lecteur vidéo HTML 5. Le lecteur HTML dépend de l’interface “Media Element”. Vous trouverez l’ensemble des informations relative à cette interface à l’adresse suivante : http://www.w3.org/TR/2010/WD-html5-20100624/video.html#media-element

Lorsque vous initialisez l’élément ‘’ vous avez accès à différents attributs.

Les éléments

readyState : Status de la video (Prete ou pas)
seeking : Retourne un intervalle de temps ; ceci permet de gérer un statut d’avancement
currentTime : Retourne la position actuelle
startTime : Retourne la position de départ
duration : Durée de la vidéo
paused : Status de la vidéo en pause
defaultPlaybackRate : Vitesse de lecture par défaut
playbackRate : Vitesse de lecture
TimeRange played : Retourne la durée jouée – intervalle
TimeRange seekable : Temps restant – intervalle
ended : Retourne vrai si la fin de la vidéo est atteinte
autoplay : Lecture automatique
loop : Relire la video
play : Jouer la vidéo
pause : Mettre la vidéo en pause
controls : Affiche les contrôles
volume : Volume du player
muted : Eteindre le son

Comme vous le voyez, nous disposons de différents attributs que nous allons pouvoir utiliser pour réaliser notre player. Javascript et dans notre cas jQuery vont nous permettre d’accéder et de manipuler nos données.

Etape par étape :

Etape 1 – Initialisation du plugin jQuery

La première étape consiste à initialiser notre plugin jQuery. J’ai decidé d’appeler ce plugin owPlayer

Penser utiliser un nom unique à votre plugin afin d’assurer la compatibilité avec d’autres plugin

Le code ci-dessous vous montre l’initialisation du plugin :

(function($) {

	$.fn.owPlayer = function(uri, options) {

		// Initialisation des options par defaut
		var defaults = {};

		// On étend les options avec les valeurs par défaut
		var options = $.extend(defaults, options);

		this.each(function(){
			$owPlayer = $(this);

		});
	};
})(jQuery);

Ce code nous permet simplement d’initialiser notre plugin. Pour le moment la variable ‘default’ permettant de définir nos options par défaut est vide mais nous le compléterons ultérieurement.

Etape 2 – Chargement des feuilles de style

Notre extension va nous permettre de changer de thème en le spécifiant simplement dans les options ; nous devons donc charger les feuilles de style dynamiquement.

//Chargement des éléments de style
var cssThemeFile = options.theme;
$('').appendTo('head');
$('').appendTo('head');

Etape 3 – Construction du wrapper et des contrôles

Cette étape consiste simplement à construire notre interface. Nous aurions pû réaliser cette étape directement dans notre page HTML mais j’ai opté pour une génération interne à mon plugin.

Le code ci-dessous nous permet de créer un conteneur principal :

//Création du conteneur principal
$owPlayerWrapper = '';
$owPlayer.wrap($owPlayerWrapper);
$('.owPlayerWrapper').width(options.width);

Le code ci-dessous nous permet de réaliser notre conteneur qui accueillera nos contrôles:

//Création du panel de contôles
$owPlayerControls = '';
$owPlayerControls += '';
$owPlayer.after($owPlayerControls);

Ce code permet d’insérer un conteneur juste derrière notre balise "

Reste à insérer nos contrôles (boutons et autres éléments) à l’intérieur de ce conteneur

// Création des contrôles
var $owPlayerControls = '';
$owPlayerControls += 'Play / Pause';
$owPlayerControls += '';
$owPlayerControls += '00:00';
$owPlayerControls += 'Mute / Unmute';
$owPlayerControls += 'Volume';
$owPlayerControls += '';
$($owPlayerControls).appendTo('.owPlayerControlsContener');

Voici la liste de ces contrôles et leurs rôles :

owPlayerBtPlay : Bouton lecture / pause
owPlayerSeeker : Il s’agit de la barre d’avancement
owPlayerTimer : Le timer "00:00"
owPlayerSoundBox : Conteneur pour la gestion du son
owPlayerBtSound : Son on/off
owPlayerSoundTrigger : Bouton déco pour l’affichage du slider pour le son
owPlayerSoundSlider : Slider pour le son

Etape 4 – Bouton Play / Pause

Maintenant que nous venons de réaliser nos différents contrôles, il faut leur assigner des fonctions.

Commencons par le bouton "owPlayerBtPlay" ; ce bouton va nous permettre de jouer l’animation ou de la mettre sur pause. Nous l’avons vu plus haut, ce qui déclanche la video est l’action "play".

	/** Bt Play */
		$('.owPlayerBtPlay').click(function() {
			if ($owPlayer.attr('paused') == false) {
				$owPlayer[0].pause();
				$(this).removeClass('ui-icon-play').addClass('ui-icon-pause');
			} else {
				$owPlayer[0].play();
				$(this).removeClass('ui-icon-pause').addClass('ui-icon-play');
			}
		});

Quelques informations : Ce code permet de vérifier si le lecteur est en pause ou non. Le cas échéant, si le lecteur est en pause, on déclanche la lecture.

Etape 5 – Gestion du son

Nous allons maintenant nous occuper du son, nous avons deux éléments importants :

Le bouton On / Off
Le slider permettant de régler le volume

Dans un premier temps, occupons nous du bouton permettant d’activer / désactiver le son :

	/** Bouton pour le son */
		//@TODO Récupérer la valeur du son lors du Mute pour le récupérer lors de l'unmute
		$('.owPlayerBtSound').click(function(){
			if($owPlayer.attr('muted') == true){
				//Activation du son - le slider passe à 50
				$('.owPlayerSoundSlider').slider('value', '50');
				$(this).removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on');
			}else{
				//Desactivation du son
				$owPlayer.attr('muted', true);
				$('.owPlayerSoundSlider').slider('value', '0');
				$(this).removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');
			}
		});

Cette action permet d’eteindre ou d’activer le son à travers le slider que nous verrons par la suite.

Le slider nous permet de gérer le volume du son. Pour réaliser ce slider, j’utilise l’extension “jQuery-ui "slider()"

	/** Slider pour le son */
	//Cache le slider à l'initialisation
	$('.owPlayerSoundSlider').hide();

	//Action pour afficher le slider
	$('.owPlayerSoundBox').hover(function() {
		$('.owPlayerSoundSlider').show();
	}, function() {
		$('.owPlayerSoundSlider').hide();
	});

	//Action du slider
	$('.owPlayerSoundSlider').slider( {
		orientation : "vertical",
		value:0.50,
		range:"min",
		max:1,
		step:0.05,
		animate:true,
		slide : function(e, ui) {
			$owPlayer.attr('muted', false);
			video_volume = ui.value;
			$owPlayer.attr('volume', ui.value);
		}
	});

Il s’agit ici simplement de lier notre slider à l’attribut "volume" du player.

Etape 6 – Gestion du seeker

Deux éléments encore. Le timer qui nous permet d’afficher le temps écoulé et le slider nous permettant de naviguer au sein même de la vidéo

Gestion du timer : Il s’agit ici de récupérer le temps et la position de lecture ; nous devons pour cela utiliser un "écouteur"

	//Durée totale de la vidéo
		var video_duration = $owPlayer.attr('duration');

		//Fonction de convertion pour le timer
		var gTimeFormat=function(seconds){
			var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
			var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
			return m+":"+s;
		};

		/** Gestion du Timer */
		var seekUpdate = function() {
			var currenttime = $owPlayer.attr('currentTime');
			if(!seeksliding) $('.owPlayerSeeker').slider('value', currenttime);
			$('.owPlayerTimer').text(gTimeFormat(currenttime));
		};

		//Mise à jour des informations
		$owPlayer.bind('timeupdate', seekUpdate);	

		//Affichage du texte
		$('.owPlayerTimer').text(' / '+gTimeFormat(video_duration));

La fonction jQuery "Bind" permet de mettre en continu le timer de notre lecteur. Au par avant, j’ai juste créé une fonction "gTimeFormat" qui permet de convertir notre temps en minutes/secondes

Dernière étape, le slider pour la navigation au sein même de la vidéo.

	/** Slider pour le seeker */

		//Initialise la variable du slider
		var seeksliding;

		var createSeek = function() {
			if($owPlayer.attr('readyState')) {
				var video_duration = $owPlayer.attr('duration');
				$('.owPlayerSeeker').slider({
					value: 0,
					step: 0.01,
					orientation: "horizontal",
					range: "min",
					max: video_duration,
					animate: true,
					slide: function(){
						seeksliding = true;
					},
					stop:function(e,ui){
						seeksliding = false;
						$owPlayer.attr("currentTime",ui.value);
					}
				});
			} else {
				setTimeout(createSeek, 150);
			}
		};

		createSeek();

Cette fonction "createSeek()" permet de réaliser un slider pour naviguer au sein même de la vidéo. Lors de l’arrêt du slider, il y a une recherche de la position.

Etape 7 – Appel du plugin

La derniere étape consiste à initialiser notre plugin dans notre page HTML. L’opération est simple, un simple "$([selecteur]).owPlayer([url],[options]);" permet de réaliser cette opération. Vous aurez bine évidement pris soin d’intégrer le plugin et les différentes bibliothèques au par avant.

Le code ci-dessous vous montre cette intégration :



    
	owPlayer - HTML 5 Web video Player
	
	
	
	


	owPlayer::

Résultat final

Cette capture vous montre le résultat final. Ce résultat et bien évidement le même sur Firefox, Chrome ou Safari (non testé sur les autres navigateurs)

Conclusion

Vous venez de voir qu’il n’est pas si compliqué que cela de rendre votre lecteur vidéo complètement personnalisé. Malheureusement, la compatibilité n’est pas encore au rendez-vous et faudra encore pour quelques temps compter sur les lecteurs Flash….

Cet exemple n’est qu’un bribe de ce qu’il est possible de réaliser, il est possible d’étendre ce lecteur en y insérant de nouvelles fonctions :

Playliste
Changement de thèmes dynamiques
Navigation de Playliste –Next / Prev
Gestion des différents navigateurs

Dans les prochaines versions, j’aurai l’occasion d’améliorer cette extension et de gérer ces différentes fonctions.

N’hésitez pas à laisser vos commentaires / remarques pour les éventuelles questions afin de faire évoluer cet article.

Vous trouverez-ci dessous les codes complets de l’application ainsi qu’un fichier zip téléchargeable.

Code javascript : owPlayer.js

(function($) {

	$.fn.owPlayer = function(uri, options) {

		// Initialisation des options par defaut
		var defaults = {
			autoplay : false,
			width : 854,
			height : 480,
			theme : 'default',
			poster : null
		};

		// On étend les options avec les valeurs par défaut
		var options = $.extend(defaults, options);

		this.each(function() {
			$owPlayer = $(this);

			// Chargement de la video
				$owPlayer.attr('src', uri);

				// Chargement des éléments de style
				var cssThemeFile = options.theme;
				$(
						'')
						.appendTo('head');
				$(
						'')
						.appendTo('head');

				// Création du conteneur principal
				$owPlayerWrapper = '';
				$owPlayer.wrap($owPlayerWrapper);
				$('.owPlayerWrapper').width(options.width);

				// Création du panel de contôles
				$owPlayerControlsContener = '';
				$owPlayerControlsContener += '';
				$owPlayer.after($owPlayerControlsContener);

				// Création des contrôles
				var $owPlayerControls = '';
				$owPlayerControls += 'Play / Pause';
				$owPlayerControls += '';
				$owPlayerControls += '00:00';
				$owPlayerControls += 'Mute / Unmute';
				$owPlayerControls += 'Volume';
				$owPlayerControls += '';
				$($owPlayerControls).appendTo('.owPlayerControlsContener');

				// Action des boutons et initialisation des sliders
				/** Bt Play */
				$('.owPlayerBtPlay').click(
						function() {
							if ($owPlayer.attr('paused') == false) {
								$owPlayer[0].pause();
								$(this).removeClass('ui-icon-play').addClass(
										'ui-icon-pause');
							} else {
								$owPlayer[0].play();
								$(this).removeClass('ui-icon-pause').addClass(
										'ui-icon-play');
							}
						});

				// Durée totale de la vidéo
				var video_duration = $owPlayer.attr('duration');

				// Fonction de convertion pour le timer
				var gTimeFormat = function(seconds) {
					var m = Math.floor(seconds / 60) < 10 ? "0"
							+ Math.floor(seconds / 60) : Math
							.floor(seconds / 60);
					var s = Math.floor(seconds - (m * 60)) < 10 ? "0"
							+ Math.floor(seconds - (m * 60)) : Math
							.floor(seconds - (m * 60));
					return m + ":" + s;
				};

				/** Gestion du Timer */
				var seekUpdate = function() {
					var currenttime = $owPlayer.attr('currentTime');
					if (!seeksliding)
						$('.owPlayerSeeker').slider('value', currenttime);
					$('.owPlayerTimer').text(gTimeFormat(currenttime));
				};

				$owPlayer.bind('timeupdate', seekUpdate);

				$('.owPlayerTimer').text(' / ' + gTimeFormat(video_duration));

				/** Slider pour le seeker */

				// Initialise la variable du slider
				var seeksliding;

				var createSeek = function() {
					if ($owPlayer.attr('readyState')) {
						var video_duration = $owPlayer.attr('duration');
						$('.owPlayerSeeker').slider( {
							value : 0,
							step : 0.01,
							orientation : "horizontal",
							range : "min",
							max : video_duration,
							animate : true,
							slide : function() {
								seeksliding = true;
							},
							stop : function(e, ui) {
								seeksliding = false;
								$owPlayer.attr("currentTime", ui.value);
							}
						});
						// $video_controls.show();
					} else {
						setTimeout(createSeek, 150);
					}
				};

				createSeek();

				/** Bouton pour le son */
				// @TODO Récupérer la valeur du son lors du Mute pour le
				// récupérer lors de l'unmute
				$('.owPlayerBtSound').click(function() {
					if ($owPlayer.attr("muted") == true) {
						// Activation du son - le slider passe à 100
						$('.owPlayerSoundSlider').slider('value', '50');
						$(this).removeClass('ui-icon-volume-off').addClass(
								'ui-icon-volume-on');
					} else {
						// Desactivation du son
						$owPlayer.attr('muted', true);
						$('.owPlayerSoundSlider').slider('value', '0');
						$(this).removeClass('ui-icon-volume-on').addClass(
								'ui-icon-volume-off');
					}
				});

				/** Slider pour le son */
				$('.owPlayerSoundSlider').hide();
				$('.owPlayerSoundBox').hover(function() {
					$('.owPlayerSoundSlider').show();
				}, function() {
					$('.owPlayerSoundSlider').hide();
				});

				$('.owPlayerSoundSlider').slider( {
					orientation : "vertical",
					value : 0.50,
					range : "min",
					max : 1,
					step : 0.05,
					animate : true,
					slide : function(e, ui) {
						$owPlayer.attr('muted', false);
						video_volume = ui.value;
						$owPlayer.attr('volume', ui.value);
					}
				});

			});
	};
})(jQuery);

Code HTML : index.html



    
	owPlayer - HTML 5 Web video Player
	
	
	
	


	owPlayer::

Code CSS : style.css

/**
 * owPlayer stylesheet file
 * Extend jQuery-ui stylesheet
 * @author slDesign
 * @version 0.1
 */

.owPlayer{
	margin:0;
	padding:0
}
.owPlayerControlsContener{
	height:24px;
	z-index:100;
	margin-top:-5px;
}

.ui-icon{
	border:1px solid #ccc;
	padding:1px;

}
.owPlayerControl{
	float:left;
	margin:1px 8px;
}

.owPlayerSeeker{
	width:500px;
	height:4px;
}

.owPlayerSoundBox *{
	margin:0;
}
.owPlayerSoundSlider{
	height:300px;
	float:left;
	margin-top:-90px;
}

Remerciements :

Merci à l’équipe de Big Buck Bunny pour la vidéo [site] [licence]. Cette vidéo a été réalisée sous Blender

Merci à Cristian-Ionut Colceriu pour son article initial qui m’a aidé à rédigé celui-ci

Des milliers de tutoriels en Français et sur toutes les applications

Steve Leherpeux — Tue, 24 Aug 2010 17:12:48 +0000

Si vous cherchez des tutoriels Français et que vous ne trouvez pas votre bonheur sur les ressources gratuites, voici un site qui pourra vous aider !

tuto.com vous permet de consulter des centaines de tutoriaux gratuits et des milliers d’autres pour quelques euros !

Je vous propose dans cet article de vous présenter les différents services et avantages de tuto.com.

Tuto.com c’est quoi ?

Tuto.com est une place de marché dédiée aux tutos informatiques en vidéo. Chacun peut y apprendre à utiliser un logiciel ou bien partager ou vendre un savoir-faire informatique. Apprenez pas à pas, à votre rythme et visionnez les vidéos sans limite de temps, parmi un catalogue de 10816 tuto. tuto

Fonctionnement

Le système est basé sur des crédits, qui représentent la monnaie de tuto.com. Il est à noter que vous pouvez également avoir accès à des centaines de tutoriaux gratuits sans achat de crédits mais simplement en vous inscrivant.

Après vous être inscrit, vous aurez accès au catalogue de formation et pourrez également acheter des crédits.

Comment fonctionnent les crédits ?

1 crédit = 1 euro. Acheter des crédits, vous permet de les utiliser pour télécharger les formations vidéo qui vous intéressent. En achetant un forfait de crédits, vous remplissez donc une tirelire virtuelle avec laquelle vous pourrez acheter des vidéos de formation, simplement et rapidement.

Formez-vous grâce à + de 10800 vidéosUne fois vos crédits en poche, vous pouvez vous former immédiatement au logiciel de votre choix, grâce à un catalogue de plus de 10800 vidéos de formation qui s’enrichit quotidiennement.
Téléchargement des vidéos immédiatAprès avoir acheté des crédits, vous pourrez immédiatement les utiliser pour télécharger les vidéos qui vous intéressent et ainsi débuter votre formation sans attendre !
Lecture illimitée des vidéosUne fois les vidéos téléchargées, vous pouvez les lire de façon illimitée dans le temps, sans avoir besoin d’être connecté sur Internet. Vous vous formez à votre rythme, pas à pas.
Aucun engagement sur la duréeChez Tuto.com, nous pensons que c’est la qualité de nos vidéos qui vous retiendra. Nous ne proposons donc pas d’abonnement. Vous ne payer que pour ce que vous consommez.

Acheter ou Vendre ?

Sur Tuto.com, vous avez 2 types d’utilisateurs: ceux qui souhaitent se former à un logiciel et ceux qui souhaitent partager leurs connaissances sur un logiciel. Sur Tuto.com, vous trouverez des cours en vidéo dédiés aux logiciels de bureautique, de 3D, de vidéo, du web, de programmation, de traitement de l’image, du print… Certaines vidéos sont gratuites, d’autres payantes.

Si vous maitrisez un logiciel, Tuto.com vous permet de gagner de l’argent. Enregistrer un tutorial vidéo et soumettez-le nous. Il sera alors validé par notre équipe et sera mis en vente.

Conclusion

tuto.com est un service complet de tutoriaux vidéos qui vous permettra de trouver de nombreuses ressources de qualités professionnelles ou encore publier vos tutoriaux.

De nombreux logiciels et thématiques y sont abordés, de PHP à .net, de Photoshop à Gimp ou encore de 3D Studio Max à Blender.

N’hésitez pas à vous inscrire et profitez des nombreuses ressources gratuites pour vous faire votre propre avis.

Support HTML 5 – La solution pour gérer la compatibilté des navigateurs

Steve Leherpeux — Sun, 08 Aug 2010 07:26:21 +0000

HTML 5, CSS 3 c’est bien beau, ça rend bien service et c’est sympa… malheureusement, tout n’est pas parfait au pays des rêves car de nombreux utilisateurs (vos lecteurs et utilisateurs) ne peuvent pas profiter de ces nouveaux attributs HTML et CSS.

Il est important de penser « utilisateurs ». Les modifications apportées par HTML 5 et CSS 3 ne sont pas encore implémentées par tous les navigateurs. Ne pouvant pas forcer tout le monde à utiliser un seul navigateur, il faut s’efforcer de prendre en compte cet compatibilité.

Comment pouvons nous vérifier cette compatibilité, comment savoir quel navigateur est compatible avec tel attribut HTML ou CSS ? C’est ce que je vous propose de voir dans cet article.

Solution Javascript

Une des première solution consiste à utiliser javascript pour vérifier

Si vous mettez ce simple script sur votre page, vous déclencherez une alerte « true » ou « false » selon les navigateurs.

Alerte sur un navigateur supportant l'attribut Pattern

Alerte sur un navigateur ne supportant pas l'attribut Pattern

C’est un moyen simple mais assez contraignant de vérifier la compatibilité de tel ou tel attribut…

Commentaires conditionnels

Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d’inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l’une ou l’autre de ses versions.

Techniquement, il s’agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s’il doit interpréter le contenu du commentaire ou bien l’ignorer.

Cette technique a le mérite d’exister, surtout lorsque l’on connait les différences qu’il existe entre IE et les autres navigateurs mais, elle ne s’applique que à Internet Explorer et elle devient vite lourde à gérer…

Class Modernizr

Modernizr ajoute classes à l’élément

qui vous permettent de cibler les fonctionnalités du navigateur spécifique dans votre feuille de style. Vous n’avez pas réellement besoin d’écrire du Javascript pour l’utiliser.

Initialisation :

Il suffit de lier la bibliothèque dans votre doument HTML :

Voici un exemple concret concernant l’attribut « border-radius » qui n’est pas disponible sur IE… Eh bien, avec Modernizr vous pouvez accomplir tout cela! La syntaxe est très intuitive, aussi:

Code HTML


	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis fermentum quam, ut feugiat dui ornare eu. Aenean vitae purus eget nunc sagittis sollicitudin eget a lorem.

Feuille de style CSS :

	.radius p span{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display:block;
	width:300px;
}

.borderradius p span{
	border:1px solid #cc3300;
}

.no-borderradius p span{
	border:1px solid #000;
}

L’opération est simple, vous déclarer une class « .[mon attribut] » ou « .no-[mon atribut] » dans votre feuille de style pour gérer les différentes compatibilité…

Border Radius sous firefox

Border radius sous IE après mise en forme via ".no-borderradius"

Il est également possible d’appliquer des conditions sur des éléments javascript. Voici un exemple concernant « localStorage »

Cette bibliothèque ne répond surement pas à toutes les problématiques mais elle mérite que l’on s’y arrette. Elle est simple d’utilisation et bien documentée

Pour télécharger « Modernizr », rendez-vous sur le site de l’auteur : http://www.modernizr.com/.

Conclusion

Il n’existe pas de solution parfaite, cela dit, vous disposez de différentes techniques qui vous permettrons d’adapter vos pages Web sur tous les navigateurs. Vous pouvez également orienter vos utilisateurs à utiliser un autre navigateur.

-----

A bientôt…

Formulaires HTML5 – Quoi de neuf ?

Steve Leherpeux — Sat, 07 Aug 2010 08:37:05 +0000

Nouveautés HTML 5 – Formulaires et champs de formulaires

Petite introduction aux formulaires HTML 5… Je vous propose de voir en images et en code les différentes modifications apportées par les nouveaux attributs HTML 5.

Introduction :

HTML 5 apporte son lot de nouveautés également sur les formulaires. Il est important de prendre en considération ces modifications car elles vont permettre un meilleur échange entre les utilisateurs et éditeurs de contenu. Elles sont également là pour nous rendre service et optimiser le WEB de demain.

Information : A ce jour, ces nouveautés ne sont compatible qu’avec les navigateurs « WEBKIT » (Safari et Google Chrome).

Placeholder attribut :

Cet attribut permet d’insérer dans votre champ un exemple de texte à saisir qui a la propriété de disparaître au focus. Ceci remplace l’utilisation de javascript pour réaliser cette opération…

Avant…

Après…

Autofocus

cet attribut permet de sélectionner un champ en particulier au chargement de la page

Avant…

Après…

Exemple HTML 5 Autofocus

Attribut Required

Permet de spécifier si un attribut est obligatoire. Si le champ reste vide au submit, il sera mis en évidence.

Avant…

		 	
		 	
		 		Nom d'utilisateur : 

		 		

				Mot de passe : 

				

				Prénom :

Aperçu Required avant HTML5

Après…

		 	
		 		Nom d'utilisateur : 

		 		

				Mot de passe : 

				

				Prénom :

Résultat attribut HTML5 Required

Champ email & url

Permet de spécifier un type de champ email ou url et execute des vérifications

Avant…

        
		
					News Letter : 

					

					Votre site Web :

Check mail avant HTML5

Check URL avant HTML5

Après…

				
					News Letter : 

					

					Votre site Web :

Résultat Champ de type Mail HTML5

Les messages d’erreurs seront directement gérés par les navigateurs.

Il est également possible d’utiliser l’attribut « pattern » qui vous permettra de spécifier la structure des données saisies en lieu et place d’un REGEX javascript :

Si vous êtes familier avec les expressions régulière vous aurez compris que le format accepté devra contenir uniquement des lettres de 4 à 10 caractères.

Les nouveaux types de champs :

Voici les différentes valeurs pouvant être attribuées :

tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color

Conclusion

Certes ces nouveautés ne sont encore applicable que sur les navigateurs « WEBKIT » mais il est clair que ces nouveaux attributs seront disponible sous peu pour les navigateurs Mozilla (voir IE…). Alors n’hésitez pas à utiliser ces nouveaux attributs dès maintenant.

Lien : Documentation W3C

Speed tuts : local storage ou la sauvegarde locale

Steve Leherpeux — Fri, 06 Aug 2010 07:42:35 +0000

HTML 5 nous apporte de nombreuses et belles surprises dont un fait l’objet de ce tutoriel : « localStorage ». A vrai dire, cette fonctionnalité ne fait pas parti officiellement de HTML 5 mais y est lié indirectement.

Le principe est simple, cette fonctionnalité vous permet de sauvegarder l’ensemble de vos données saisies en locale ; que vous rafraichissiez la page ou que vous quittiez votre navigateur et le relancez sur la même page, vos données seront sauvegardées.

Nous allons voir dans ce tutoriel la façon d’implémenter « localStorage ».

I – Introduction & prérequis

Avant de commencer, vous devez connaître le HTML 5 ainsi que l’utilisation du framework javascript jQuery.

Page de base :



 
 
 
 Tutoriel local storage

Vous trouverez ci-dessous la page qui nous servira de base pour ce tutoriel et qui intègre la bibliothèque jQuery

II – Création d’un contenu éditable

Un des nouveaux attributs de HTML 5 est « contenteditable ». Cet attribut vous permet de réaliser des éléments éditables par les utilisateurs. Pour mettre en place cet attribut

Code HTML – zone de saisie :

Todo Liste

Liste éditable

Jusque là, c’est bien mais lorsque vous quittez votre navigateur ou si vous rafraichissez votre page, le contenu ne sera pas sauvegardé… Comment faire sans pour autant poster nos données ?

Utilisation de javascript

Pour sauvegarder nos données, nous allons utiliser la propriété « localStorage » qui nous permettra de sauvegarder nos données en locale sans l’utilisation de cookies. Vous trouverez ci dessous le code javascript commenté qui nous permettra de réaliser cette opération.

Code javascript :

Une fois cette opération réalisée, sauvegardez votre fichier puis saisissez plusieurs lignes dans votre liste et sortez du focus. Vous pouvez maintenant fermer votre navigateur et le relancer ou encore rafraichir votre page, les données saisies seront sauvegardées.

Code complet et ressources :

Code complet du tutoriel :

Tutoriel local storage

Todo Liste

Compatibilité

Au moment ou je vous parle, cette implémentation est compatible avec les navigateurs et versions suivantes (windows):

Chrome 4 +
Firefox 3.6 +
IE 8 +
Opéra 10 +
Safari 4 +

Tutoriel Graphisme Gimp – Création d’un support CD – DVD

Steve Leherpeux — Thu, 29 Jul 2010 06:44:38 +0000

Je vous propose dans cet article de réaliser un CD avec Gimp. Ce tutoriel est disponible en version WEB et également en version screen cast (encours de réalisation…).

Difficulté : 5/10

Durée : 20 minutes

1°) Création du document

Après avoir lancé « Gimp », créez un nouveau document vierge de 1000px par 1000px (Figue 1.1). Masqué tout de suite le calque « Arrière-plan » afin d’afficher la grille.

Figure 1.1 - Création d'un nouveau document Gimp

2°) Création du paterne

Nous allons créer la forme de base de notre CD, pour cela, rien de plus simple puisqu’il s’agit d’un cercle… Tout d’abord, ajoutez un nouveau calque que vous nomerez « Patern CD ». Sélectionnez l’outil elipse dans la boite à outil Gimp puis dessinez un cercle quelconque. Il est inutile de réaliser un cercle parfait puisque nous allons régler le positionnement et la taille de notre cercle avec la boite de dialogue de réglage.

Dans la boite de dialogue, entrez les informations suivante (figure 2.1) :

Position : 50 – 50

Taille : 900 – 900 pixels

Figure 2.1 - CD Gimp - Création du cercle principal

Remplissez la forme obtenu avec une couler c3c3c3.

Ce paterne nous servira de base pour une sélection complète de notre CD, Dupliquez le et nommez le nouveau calque « Fond CD ».

3°) Création du trou central

Pour cette opération, nous allons réaliser les mêmes opération que précédemment mais avec de nouveaux réglages. Executez les opérations suivantes :

Créez un nouveau calque et nommez le « Cercle central – petit »
Outil Ellipse puis dans la boite de dialogue, entrez les informations suivantes (figure 3.1):
- Position 435 – 435
- Taille 130 – 130
Remplissez de noir ou d’une couleur quelconque

Figure 3.1 - Réglages pour le trou central

4°) Création du cercle central moyen

Idem que pour le petit cercle avec les informations suivantes :

Nom du calque : Cercle central – Moyen
Position 390 – 390
Taille 220 – 220
Remplissage 8f8f8f

Figure 3.2 - Réglages pour le cercle central - moyen

5°) Création du grand cercle central

Idem que le cercle de taille moyenne avec les informations suivantes :

Nom du calque : Cercle central – Grand

Position 340 -340

Taille 320 -320

Remplissage 6b6b6b

Figue 3.4 - Réglages pour le grand cercle central

6°) Création du trou

Nous avons maintenant notre CD complet ou presque… nous allons maintenant réaliser le trou central. Pour cela, faite « Alpha vers sélection » sur le calque « Cercle Central – petit » puis sélectionnez le calque « Fond CD » puis touche « Suppr. » de votre clavier. Répétez cette opération de suppression sur les calques « CCercle central – Moyen » et « Cercle central – Grand »

Masquez le calque « Cercle central – petit » afin d’obtenir notre paterne définitif (figure 4.2)

Figure 4.2 - Aperçu du paterne

7°) Réalisation de l’effet irisé

Créez un rectangle centré sur le CD avec les réglages suivants :

Figure 5.1 - Réglagles pour la sélection rectangulaire

Ceci nous permet de travailler sur la moitié de notre image car nous appliquerons par la suite un effet miroir.

Sélectionnez l’outil dégradé et sélectionnez ensuite un dégradé de type « Full Saturation Spectrum ».

Figure 5.3 - Dégradé de type Saturation spectrum

Remplissez votre sélection rectangulaire de haut en bas avec ce dégradé.

Ensuite, dans le menu calque, faites « Calque => Découpage automatique du calque ».

Il est ensuite nécessaire de déformer notre rectangle afin qu’il ai une forme d’entonnoir horizontal. Pour cela, utilisez l’outil perspective (figure 5.6).

Figure 5.6 - Déformation du rectangle irisé

Cliquez sur « Transformer » pour valider la deformation.

Dans le menu, cliquez sur « Calque => Calque au dimension de l’image » puis dupliquez le calque. Sélectionnez ce nouveau calque et enfin dans le menu, « Calque => Transformer => Miroir horizontal ».

Fusionner ce nouveau calque avec l’autre côté irisé (fusionner vers le bas) puis réglez l’opacité de ce calque à 15 %.

Figure 6.1 - Apercu après effet irisé

8°) Lueur blanche

Nous allons réalisé une lueur blanche comme celle qu’il pourrait y avoir avec le soleil…

Créez un nouveau calque puis réalisez une sélection rectangulaire avec les informations suivantes :

Figure 7.1 - Sélection rectangulaire pour la lueur blanche

Remplissez cette sélection de blanc.

Appliquez un flou gaussien de 25 puis baissez l’opacité à 45%. Faites un « Alpha vers sélection » sur le calque CD puis « inverser la sélection » (Ctrl+i), sélectionnez à nouveau votre calque « lueur blanche » et « Suppr » de votre clavier pour effacer ce qui dépasse.

Pour finir, utilisez l’outil rotation et appliquez une rotation de 45°.

9°) Réglages finaux…

Vous pouvez maintenant réaliser différents réglages tel que l’opacité du centre du CD

Figure 8.1 - Aperçu final du CD

Je vous laisse décorer le CD à votre guise…

Tutoriel CSS : 3D Transform

Steve Leherpeux — Tue, 27 Jul 2010 07:36:25 +0000

Le version 3 de CSS nous a apporté son lot de nouveauté ; parmi les plus connues et plus utilisées on peut citer « Corner radius » ou encore les dégradés mais une nouvelle propriété très intéressante va vous permettre une encore plus grande liberté : la propriété « transform ».

De la 3D en CSS ?

Je n’irai pas jusqu’à dire qu’il s’agit de 3D mais plutot d’effet 3D au même titre que nous pouvons réaliser ces effets avec un logiciel de graphisme.

Nous verrons dans cet article comment réaliser un cube en effet 3D.

I – Introduction

Avant toute chose, il est nécessaire de prendre en compte la comptabilité. L’utilisation de la propriété CSS 3D transform n’est compatible qu’avec Firefox 3.5+ [-moz-transform] (documentation) et Safari 3.2+[-webkit-transform](documentation).

Travaillant essentiellement sur Firefox, je ne m'aventurerai pas dans les détails de Safari mais il n'y a pas d'énormes différences...

1°) Prérequis

Connaissances HTML / CSS
Vous vous souvenez de vos cours de géométrie ?
Un éditeur CSS / HTL

2°) Un peu de théorie...

http://www.w3.org/TR/css3-3d-transforms/

Rotation d'un objet : -moz-transform: rotate(angle);

Exemple :

-moz-transform: rotate(30);



Figure 1.2.1 - Propritét CSS Transform rotate - Rotation d'un div de 30°



Redimensionnement 2D axe X et Y d'un objet : -moz-transform:  scale(sx[, sy]);

Si [sy] n'est pas renseigné, il aura la même valeur de [sx]

Modifier la perspective : -moz-transform: skew(ax,[ay]);

Permet de modifier l'axe de perspective, vous pouvez également utilsier skewX(deg) et skewY(deg) pour les utiliser indépendament.

Exemple : -moz-transform: skewY(30deg);

Parlons maintenant de la propriété "transform:matrix", il faut comprendre dans Matrix la traduction "matrice". Nous avons une forme géométrique qui est constituée de différents points [a,b,c,d] que nous pouvons manipuler.

-moz-transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d construit la transformation de la matrice
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */

Quelques exemples :

.matrix {
width: 200px;
height: 100px;
background: #f5f5f5;
-moz-transform:matrix(1,0,0.6,1,15em,0);
}

Rendu (figure 1.2.3)

Figure 1.2.3 - Rendu de la proprité transform:matrix

Exemple 2 - Retournement d'objet

.matrix {
width: 200px;
height: 100px;
background: #ff8000;
-moz-transform:matrix(-1,0,1.2,1,20em,12em);
}

Résultat (figure 1.2.4) :

Figure 1.2.4 - Résultat transform:matrix - retournement d'objet

Exemple 3 : Reflexion

-moz-transform: matrix(1, 0, 0, -1, 0, 0);

Figure 1.2.5 - Exemple transform:matrix - Reflexion

Autres exemples (non-shématisés) :

Rotation 90° sur la gauche : -moz-transform:matrix(0,-1,1,0,0,0);

II - Création d'un cube 3D

1°) Code HTML de base

Il faut tout d'abord créer 3 blocs qui nous permettrons de simuler notre cube. Ces 3 blocs seront encadrés par un div global.

Code HTML du cube





Tutoriel CSS 3D




 
 Content
 Content
 Content

J'ai également créé un fichier css qui nous permettra de mettre en forme notre cube 3D. Dans un premier temps, j'ai simplement dissocier les blocs.

Code CSS fichier style.css

#cube {
 position: relative;
 top: 200px;
 margin:0 0 230px 0;
}

#cube .cubeSide{
 height:200px;
 width:200px;
}
#topSide{
 background:#ff8000;
}
#leftSide{ background:#0080c0;}
#rightSide{background:#00ff40;}

Voici le résultat obtenu (figure 2.1.1) :

Figure 2.1.1 -CSS Transform - Cube 3D Etape 1

Maintenant, passons à des choses un peu plus sympa, nous allons appliquer notre propriété "transform" à notre cube :

.leftFace {
 background: #ff8000;
 -moz-transform: skewY(30deg);
}

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
}

Nous avons appliqué ici une propriété "transform:skewY" permettant d'incliner nos div sur leurs axes Y donnant ainsi un effet de perspective.

Figure 2.1.2 - Transformation perspective sur l'axe Y - [transform:skewX(val)

Positionner les DIV : Nous devons appliquer un positionnement "absolute" à l'ensemble de nos blocs afin que ceux-ci puissent êtres dissocié et placés indépendament (figure 2.1.3) .

Code CSS : Positionnement des DIV

.topFace, .leftFace, .rightFace {
position: absolute;
}

Figure 2.1.3 - Positionnement absolute des blocs

Ensuite, nous allons positionner notre bloc right (figure 2.1.4). Il s'agit ici de décaller notre bloc de 200px sur la droite et vers le bas.

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
 top: 200px;
 left: 200px;
}

Figure 2.1.4 - Positionnement du bloc "rightSide"

Intéressons nous maintenant à la partie haute, c'est à dire le DIV topSide. C'est la partie la plus compliquée...

.topFace {
 -moz-transform: rotate(60deg);
 left: 100px;
 top: 42px;
}

.topFace div {
 background: #0080c0;
 -moz-transform: skewY(-30deg) scaleY(1.16);
}

Quelques explications : Pour donner cet effet, il est nécessaire de pivoter notre face (-moz-transform: rotate(60deg);), puis nous appliquons une perspective et un redimenssionnement.

Figure 2.1.5 - CSS Effet 3D - Cube final

Avec un peu d'habillage, voici le résultat final :

Figure 2.1.5 - CSS Effet 3D - Cube Final

Impossible de se connecter au panel d’administration Magento (Problème et solution)

Steve Leherpeux — Sat, 24 Jul 2010 06:36:37 +0000

Après l’installation de Magento, il est possible que vous rencontriez des problèmes de connexion à l’espace d’administration, notamment si vous travaillez en local.

En effet, ce problème est lié aux cookies que Magento ne parvient pas à stocker. Le fait de travailler en local implique qu’il n’y a pas de nom de domaine et donc la sauvegarde des cookies ne se fait pas.

Deux possibilités :

Solution 1 – Modifier l’URL d’accès au script :

Dans certains cas si vous travaillez en local, l’utilisation de l’adresse « localhost » pose un problème. Essayé de vous connecter en tapant directement l’IP dans votre barre d’adresse : « http://127.0.0.1/magento/admin/« .

Solution 2 – Éditez les paramétres des cookies

-Rendez-vous dans votre répertoire : « app/code/core/Mage/Core/Model/Session/Abstract/ ». Éditez le fichier « Varien.php avec un éditeur de texte »

-Trouvez le code suivant (~ligne 78),

// session cookie params
 $cookieParams = array(
 'lifetime' => $cookie->getLifetime(),
 'path'     => $cookie->getPath(),
 'domain'   => $cookie->getConfigDomain(),
 'secure'   => $cookie->isSecure(),
 'httponly' => $cookie->getHttponly()
 );

et remplacez par :

// session cookie params
 $cookieParams = array(
 'lifetime' => $cookie->getLifetime(),
 'path'     => $cookie->getPath(),
 //'domain'   => $cookie->getConfigDomain(),
 //'secure'   => $cookie->isSecure(),
 //'httponly' => $cookie->getHttponly()
 );

-Sauvegardez et essayez de vous connecter à nouveau.

Ceci devrait fonctionner…

CodeIgniter Tutorial : Introduction et première application

Steve Leherpeux — Tue, 20 Jul 2010 13:34:15 +0000

Je ne suis pas un fan inconditionné des Frameworks PHP, ces derniers peuvent parfois s’avérer trop lourds pour certaines applications. L’apprentissage d’un framework PHP peut être fastidieu, et la documentation n’est pas toujours au rendez-vous.

Puis un jour, j’ai découvert CodeIgniter ! Je vous propose un tour d’horizon de ce framework à travers le développement d’un petit CRM. Nous verrons ainsi comment intégré CodeIgniter et comment tirer parti de ces nombreux avantages.

Notes de versions : Cette article est amené à évolué. Etant mon premier tutoriel CodeIgniter, vos remarques et toute critique pouvant améliorer cet article seront les bienvenues

Version 0.1 du 20 Juillet 2010

L’application présentée dans ce tutoriel n’a pas pour vocation d’être utilisée en production mais une version plus élaborée et complète sera prochainement disponible sur ce site.

I – Framework PHP

Définition d’un Framework (Source Wiki) :

En programmation informatique, un framework est un kit de composants logiciels structurels, qui définissent les fondations ainsi que les grandes lignes de l’organisation de tout ou partie d’un logiciel (architecture). En programmation orientée objet un framework est typiquement composé de classes mères qui seront dérivées et étendues par héritage en fonction des besoins spécifiques à chaque logiciel qui utilise le framework.

Les framework sont utilisés pour modeler l’architecture des logiciels applicatifs, des applications web, des middleware et des composants logiciels. Les framework sont achetés par les ingénieurs, puis ajoutés comme partie intégrante des logiciels applicatifs mis sur le marché, ils sont par conséquent rarement achetés et installés séparément par un utilisateur final.

Des tentatives de francisation du terme ont été faites. On trouve ainsi parfois les termes cadre d’applications, proposé par l’Office québécois de la langue française ou cadriciel. L’expression atelier de développement est également employée.

Un framework est un ensemble d’outils et de composants logiciels organisés conformément à un plan d’architecture et des design patterns. L’ensemble forme un squelette de programme. Il est souvent fourni sous la forme d’une bibliothèque logicielle, et accompagné du plan de l’architecture cible du framework.Avec un framework orienté objets, le programmeur qui utilise le framework pourra personaliser les éléments principaux du programme par extension, en utilisant le mécanisme d’héritage: créer des nouvelles classes qui contiennent toutes les fonctionnalités que met en place le framework, et en plus ses fonctionnalités propres, créées par le programmeur en fonction des besoins spécifiques à son programme. Le mécanisme d’héritage permet également de transformer des fonctionnalités existant dans les classes du framework.

Un framework est conçu en vue d’aider les programmeurs dans leur travail. L’organisation du framework vise la productivité maximale du programmeur qui va l’utiliser – gage de baisse des coûts de construction du programme. Le contenu exact du framework est dicté par le type de programme et l’architecture cible pour lequel il est concu.

2°) Les avantages d’un Framework

Recyclage du code : Le code est réutilisable, ceci signifie qu’il n’est plus nécessaire de coder 4 ou 5 fois la même chose pour des projets différents

Fiabilité : Le code de ces Frameworks sont testés et maintenus par une grande communauté de développeurs.

Débogage : le frameworks PHP ont leurs propres méthodes de débogage spécifiques qui vous permettent de repérer facilement les erreurs dans votre développement.

Aide communautaire: Vous ne jamais se sentir seul alors que le codage de ces cadres. Lorsque vous jamais ressenti aucune pression, vous pouvez demander de l’aide dans les communautés. Il ya bon nombres de développeurs, qui va sûrement aider dans votre développement.

Note : Pour plus d’information, je vous invite à consulter le livre blanc « frameworks php pour l’entreprise » que vous pourrez découvrir à l’adresse suivante : http://www.clever-age.com/veille/publications/developpement-specifique/livre-blanc-frameworks-php-pour-l-entreprise.html (envoi après demande par mail).

II – Présentation de CodeIgniter

1°) Sur le site de l’éditeur :

CodeIgniter est un framework PHP puissant avec un très faible encombrement, construit pour les codeurs PHP qui ont besoin d’une boîte à outils simple et élégante pour créer des applications web complet. Si vous êtes un développeur qui vit dans le monde réel de l’hébergement mutualisé et des comptes clients avec des délais, et si vous êtes fatigué de cadres de grandes lourdement et de manière approfondie sans-papiers

J’ai choisi de diffuser cette définition car elle représente assez bien ce qu’est CodeIgniter. Si vous avez déjà testé Zend Framework ou encore Symphonie, vous allez rapidement vous rendre compte de ces petites différences qui font de CodeIgniter un Framework Simple, Intuitif et rapide à mettre en oeuvre.

2°) Quelques références

Vous trouverez une liste plus complète d’applications et de sites réalisés avec CodeIgniter mais si vous voulez voir tout de suite ce qu’il est possible de faire avec ce Framework, voici quelques ressources :

3°) Resources

Une des forces de CodeIgniter (comme tout bon framework) est représenté par sa communauté et plus particulièrement sa communauté Française. Vous pouvez consulter les ressources « Françaises » à l’adresse suivante : http://codeigniter.fr/. Vous y trouverez la documentation, des tutoriels, ScreenCasts et un forum.

Si vous souhaitez plus de ressource, le site principal de CodeIgniter accessible à l’adresse suivante : http://codeigniter.com/

II – Introduction à CodeIgniter

Note : Les sections qui suivent requiers certains prérequis pour le bon suivi de ce didacticiel.

Un éditeur de codes PHP – HTML – CSS – Javascript
Des connaissances dans les langages de programmation WEB – PHP – HTML – CSS – Javascript
Un serveur WAMP ou LAMP ou MAMP (selon votre OS)

Note de versions et outils :

Version CodeIgniter : 1.7.2
Version PHP : 5
Editeur HTML – PHP : Aptana IDE
Framework jQuery et jQuery UI
Nom du projet : crmIgniter – Un dossier portant ce nom est créé à la racine du serveur Apache ‘www/crmIgniter/’

PS. Si vous ne comprenez pas un seul mot de ce qui est ci-dessus, passez votre chemin

1°) Préparation du projet

Lancer votre IDE puis créez un nouveau projet à la racine de votre serveur WEB « crmIgniter » (j’utilise AptanaIDE)

2°) Téléchargement & installation

La première chose à faire, consiste à télécharger le Framework qui est matérialiser par une archive téléchargeable à l’adresse suivante : http://codeigniter.com/download.php

Une fois téléchargé cette archive, vous pouvez l’extraire. Après extraction, vous découvrirez deux dossiers :

Un dossier system
Un dossier user_guide

Déplacez l’ensemble de son contenu dans votre répertoire « crmIgniter » de sorte que votre fichier « index.php » soit à la racine de votre projet (figure 2.1.1).

Figure 2.2.1 - Contenu du repertoire crmIgniter

Regardons d’un peu plus prêt la structure du Framework et plus particulièrement le dossier « system » qui contient entre autre :

Le dossier « codeigniter » correspond au Framework lui-même
Le dossier « application » dans lequel sera stocké notre application
Le dossier « helpers » regroupant des outils de manipulation PHP
Le dossier « librarie » regroupant des bibliothèques de fonctions PHP

CodeIgniter est un Framework développé selon le principe du MVC – Model View Controller. Je vous renvoie à l’adresse suivante pour la définition complète de ce qu’est le MVC : http://dico.developpez.com/html/3020-Conception-MVC-Model-View-Controller.php

Ouvrons maintenant notre dossier « application » et détaillons son contenu :

Le dossier « config » qui contient nos données de configuration
Le dossier « controllers » contenant des fichiers de class qui sont liés à nos URL
Le dossier « view » correspondant aux vues

Comme un exemple vaut mieux qu’un grand discourt, tapez l’adresse suivant dans votre navigateur « http://localhost/crmIgniter/index.php/welcome/ ». Après avoir validé l’URL, vous devriez voir s’afficher la page de bienvenue (figure 2.2.2)

Figure 2.2.2 - Page de bienvenue CodeIgniter

Essayons de comprendre… nous avons une URL dont le trigger est « welcome », le contrôleur portant le même nom va s’executer. Regardons de plus prêt le contenu du fichier « /controllers/welcome.php » :

Code PHP :

load->view('welcome_message');
 }
}

/* End of file welcome.php */
/* Location: ./system/application/controllers/welcome.php */

Ce fichier est une class et la fonction principale « index() » execute l’action « load->view ». Nous somme donc dans un contexte POO. Le « $this » définie notre application, en somme, nous pourrions traduire celas par « Mon application charge la vue ‘welcome_message’.

Si nous regardons à l’intérieur de notre dossier « view », nous devrions trouver un fichier « welcome_message.php ». En ouvrant ce fichier, nous pouvons consulter le code HTML qui le compose.

III – Notions de bases

1°) Modèle MVC

Le Modèle-Vue-Contrôleur (en abrégé MVC, de l’anglais Model-View-Controller) est une architecture et une méthode de conception qui organise l’interface homme-machine (IHM) d’une application logicielle. Ce paradigme divise l’IHM en un modèle (modèle de données), une vue (présentation, interface utilisateur) et un contrôleur (logique de contrôle, gestion des événements, synchronisation), chacun ayant un rôle précis dans l’interface. Cette méthode a été mise au point en 1979 par Trygve Reenskaug, qui travaillait alors sur Smalltalk dans les laboratoires de recherche Xerox PARC.

Pour faire plus simple, il s’agit simplement d’un model qui sépare la présentation du code.

Figure 3.1.1 - Organisation MVC

2°) Chargement des vues et URL

Le schéma de fonctionnement dans CodeIgniter est le suivant :

Le contrôleur principal analyse l’URL et va charger une vue, cette vue étant exécutée par une fonction

IV – Tutoriel Projet crmIgniter – Réalisation d’un CRM avec CodeIgniter

Introduction et notes : La réalisation de cette application se fait dans le cadre d’un tutoriel et n’a pas pour vocation à être mis en production. Le code est à vocation didacticiel et n’est pas optimisé ni sécurisé. Ce tutoriel évoluera au fil de l’application et servira de base à d’autres articles.

1°) Configuration

Nous allons commencer à configurer notre projet. Pour cela, ouvrez le dossier ‘application/config/’ dans votre éditeur. ce dossier contient l’ensemble des fichiers de configuration. Nous allons commencer par éditer notre fichier ‘config.php’. Vous devez simplement renseigner / modifier les élements de ce fichier. J’ai simplement modifier l’URL de base :

$config['base_url']    = "http://localhost/crmIgniter/";

Configurons maintenant notre base de données. Dans un premier temps, créez une base de données MySql « crmIgniter », ne créz pas de table pour le moment, nous verrons cela ultérieurement.

Ouvrez votre fichier « application/config/database.php » puis renseignez les éléments de ce fichier.

$active_group = "default";
$active_record = TRUE;

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "crmIgniter";
$db['default']['dbdriver'] = "mysql";
$db['default']['dbprefix'] = "";
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = "";
$db['default']['char_set'] = "utf8";
$db['default']['dbcollat'] = "utf8_general_ci";

/* End of file database.php */
/* Location: ./system/application/config/database.php */

Nous reviendrons ultérieurement sur ces fichiers de configuration.

2°) Les contrôleur CodeIgniter

Un contrôleur est simplement une class qui est nommée dans le but d’être chargée en fonction d’une URL.

L’exemple suivant : « http://www.monsite.com/articles/

chargera la class « articles ». Ce contrôleur devra contenir des fonctions permettant de charger des vues. Par défaut, la fonction « index() » chargera la vue par défaut

class articles{
    function index(){
    //Code à executer
    }
}

Il est possible de charger un contrôleur par défaut, cette opération peut se faire en éditant le fichier « application/config/routes.php »

$route['default_controller'] = 'articles';

Il vous est possible de passer des segments d’URL dans vos fonctions :

example.com/index.php/products/shoes/sandals/123

3°) Les vues CodeIgniter

Une vue est simplement une page WEB ou un fragment de page WEB. Cette vue est chargée par le contrôleur en relation avec L’URL

Code HTML – Exemple du contenu d’une vue

code

Nous l’avons vu précédemment, cette vue est chargée par le contrôleur et la fonction qui permet de charger une vue est la suivante :

load->view('blogview');
 }
}
?>

Il vous est possible de charger plusieurs vues si nécessaire.

Vous pouvez également transférer des données à votre vue depuis votre contrôleur.

$data = array(
 'title' => 'My Title',
 'heading' => 'My Heading',
 'message' => 'My Message'
 );

 $this->load->view('blogview', $data);

ou encore :

load->view('blogview', $data);
 }
}
?>

Enfin, CodeIgniter utilise une façon particulière de boucler les données d’un tableau

load->view('blogview', $data);
 }
}
?>

Code HTML



<?php echo $title;?>




My Todo List

Vous pouvez si vous le souhaiter utiliser une syntaxe classique.

4°) Les helpers

Les helpers sont des bibliothèques de fonctions qui permettent de manipuler des données ; il en existe plusieurs sortes, on peut citer entre autre le helper « url » permettant de manipuler les chaines d’URL ou encore l’helper « email » permettant de manipuler les chaines d’email.

Il existe différentes façon de charger ces helpers, soit un par un ou via un tableau si vous devez en charger plusieurs. Cette opération est exécutée dans le constructeur de vos models.

class maClass extends Controller{
    function maClass(){
        parent::Controller();
        $this->load->helper('url');
        $this->load->helper('email');
    }
}

est équivalent à

class maClass extends Controller{
    function maClass(){
        parent::Controller();
        $this->load->helpers(aray('url','email'));
    }
}

Dans le cadre de mon application, je vais avoir besoin de manipuler différents types de données, voici les helpers que je vais charger :

function home(){

 //Constructeur
 parent::Controller();

 //Chargement des helpers
 $this->load->helpers(
 array(
 'url',
 'email',
 'array',
 'html',
 'date',
 'form'
 ));

 }

La documentation CodeIgniter étant très bien réalisé, n’hésitez pas à consulter cette dernière pour en savoir plus sur les helpers.

5°) URL Rewriting ou comment modifier les URL CodeIgniter

Note : Cette section impose que votre serveur Apache soit configuré pour accépter « l’URL Rewriting », si ce n’est pas le cas, vous devez activer le module d’URL Rewriting. Si vous souhaitez en savoir plus sur l’URL Rewriting, voici quelques ressources :

http://www.urlrewriting.fr/

http://codeigniter.com/user_guide/general/urls.html

Comme vous avez pu le remarquer, pour accéder à notre page « home », nous avons une URL de ce type : http://localhost/crmIgniter/index.php/home/. Nous allons voir comment modifier l’URL d’accès et avoir une URL plus propre. Ceci peut être réalisé en utilisant une règle simple, qui est stocké dans un fichier nommé « .Htaccess » .

Ce que le. Htaccess nous permet de faire, c’est créer une série de règles. Alors tout d’abord, vous devez créer un fichier nommé. Htaccess à la racine de votre application WEB (ou dans le répertoire où vous avez index.php).

Saisissez le code ci-dessous dans votre fichier « .htaccess » :

Code du fichier htaccess :

DirectoryIndex index.php
RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|js|robots\.txt|favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.php/$1 [L,QSA]

Quelques explications :

On défini l’index
Activation du moteur de réécriture
Défini les conditions de réécriture
Active les régles de réécriture

Vous pouvez tester et entrer l’URL « http://localhost/crmIgniter/home/ » dans votre navigateur.

La dernière étape cosniste à modifier notre fichier de configuration et plus particulièrement la section « $config['index_page'] = « index.php »; – il suffit d’effacer « index.pp » afin de laisser vide la valeur de notre « index_page ». Ceci aura pour effet de retirer les « index.php/ » dans nos liens.

6°) Création d’un template CodeIgniter.

A ce stade, nous devons à chaque chargement de fichier répéter nos en-tête, nos footer… Ceci n’est pas très pratique l’orsque l’on a l’habitude d’utiliser un système de pseudo Frame ou de charger des templates. Nous allons donc créer un système de template.

Etape 1 – Création du contrôleur principal

Créez un fichier application.php dans votre répertoire contrôleur, ce fichier nous servira de contrôleur principal :

Code du contrôleur principal :

load->view('template');
}
}

Vous pouvez ensuite créer la vue principale relative à notre contrôleur, dans notre exemple il s’agit du fichier template.php :

Code du fichier template.php

load->view('crmHeader');
$this->load->view('crmNav');
$this->load->view('crmContent');
$this->load->view('crmFooter');
?>

Dernière étape, créer les différents blocs qui composent notre template :

crmHeader
crmNav
crmContent
crmFooter

Code du fichier crmHeader :





crmIgniter - CodeIgniter CRM Application

 







crmIgniter
CodeIgniter CRM

Code du fichier crmNav



 Utilisateurs
 Comptes
 Affaires

Code du fichier crmContent


Contenu de l'application...

Code du fichier crmFooter


© - openWab & CodeIgniter - crmIgniter 2010 - Contact

Vous l’aurez compris, il n’y aura plus qu’à modifier les fichier de contenu (matérialisé ici par le fichier crmContent.php).

Note : Il existe d’autres méthodes mais j’ai souhaité vous présenter celle là dans un premier temps afin de vous expliquer la structure du projet. Si vous le souhaitez, il existe une librairie réalisée par un utilisateur de CodeIgniter permettant l’intégration de vues partielles. Vous pouvez consulter les informations relatives à cette librairie sur le Forum de CodeIgniter : http://codeigniter.com/forums/viewthread/62366/

Voici le résultat en image (figure 4.6.1):

Figure 4.6.1 - Interface principale crmIgniter

7°) Syntaxe alternative des vues

CodeIgniter vous permet d’utiliser une syntaxe alternative dans vos vues en lieu et place du «

Vous pouvez utiliser la syntaxe suivante :

Note : Avant de pouvoir utiliser cette fonction, il est nécessaire d’activer les « Short tag » dans le php.ini.

D’autres syntaxes sont disponibles notamment en ce qui concerne les structures de contrôle

Reportez-vous à la documentation si vous souhaitez utiliser les syntaxes courtes : http://codeigniter.com/user_guide/general/alternative_php.html

8°) Notre module Utilisateurs

Nous allons dans cette section créer notre premier module. Nous nous intéresserons au module utilisateurs qui permet entre autre de lister, créer ou modifier les utilisateurs.

Étape 1 – Création du contrôleur et des vues

Dans votre dossier contrôleur, créez un fichier « users.php », ce sera notre contrôleur principal dont voici le code :

load->view('users_module');
 }
}

Rien de spécifique, ce module va simplement charger la vue « users_module » que nous allons créer. Cette vue va simplement lister les actions pouvant être executées.

load->view('crmHeader');
$this->load->view('crmNav');
?>

Nouvel utilisateur
Liste des utilisateurs

load->view('crmFooter');
?>

Nous allons maintenant modifier notre contrôleur en y ajoutant une fonction « add_user » :

load->view('users_module');
 }

 function add_user(){
 $this->load->view('user_add_new');
 }
}

Créez maintenant la vue « user_add_new »

Code du fichier user_add_new.php :

load->view('crmHeader');
$this->load->view('crmNav');
?>
Nouvel utilisateur::
Cette interface vous permet d'ajouter un nouvel utilisateur
retour
load->view('crmFooter');
?>

Cliquez sur le lien « Nouvel utilisateur » et vous devriez voir notre nouvelle vue.

Vous pouvez réaliser les mêmes opération pour la vue « list_users » ; vous trouverez ci-dessous les différents codes dont notre contrôleur complet.

load->view('users_module');
 }

 //Fonction add_user permettant d'ajouter un utilisateur
 function add_user(){
 $this->load->view('user_add_new');
 }

 //Fonction list_user listant les utilisateurs
 function list_users(){
 $this->load->view('users_list');
 }

 //Fonction update_user pour modifier un utilisateur
 function update_user(){
 $this->load->view('user_update');
 }

 //Fonction user_delete supression d'un utilisateur
 function delete_user(){
 $this->load->view('user_delete');
 }
}

Etape 2 – Création du formulaire d’ajout d’utilisateur

Ouvrez votre fichier user_add_new.php, nous allons réaliser notre formulaire d’ajout de données puis réaliser l’enregistrement dans notre base de données :

Avant toute chose, veillez à charger les helper « Form » ; ce helper permet la manipulation de formulaires.Ce helper vous permet entre autre de générer des formulaires et des champs de formulaires. Vous trouverez ci-dessous le code de notre fichier « user_add_new » :

'add_user','class'=>'standardForm');

//Overture du formulaire
echo form_open("",$formAtt);

//Ajout d'un champ hidden
echo form_hidden("id",'');

//Labels + Champs de type texte
echo form_label("Nom d'utilisateur : ");
echo form_input('username');
echo form_label("Mot de passe : ");
echo form_input('password');

//Initialisation des valeurs d'un dropdown (select)
$titles = array(
 'Madame'=>'Madame',
 'Mademoiselle'=>'Mademoiselle',
 'Monsieur'=>'Monsieur'
);
echo form_label("Civilité : ");
echo form_dropdown("title",$titles);

echo form_label("Nom : ");
echo form_input('name');
echo form_label("Prénom : ");
echo form_input('subname');
echo form_label("Email : ");
echo form_input('mail');
echo form_label("Fonction : ");
echo form_input('role');

//Génération du bouton submit
echo form_submit("add_user","Enregistrer");

//Fermeture du formulaire
echo form_close()
?>

Voici le code HTML généré par l’utilisation du helper et des fonctions qui y sont liées :

Code HTLM généré :



Nom d'utilisateur : 

Mot de passe : 
Civilité: 

Nom : 

Prénom: 

Email : 
Fonction :

Note : Je n’ai pas testé l’efficacité de ce helper en terme de performance mais son utilisation peut faire gagner un peu de temps en terme de développement.

Voici le résultat en image (Figure 4.8.1) :

Figure 4.8.1 - Formulaire ajout d'un utilisateur

Étape 3 – Traitement du formulaire

Reste à récupérer les données et à les insérer dans notre formulaire. Pour cela, nous allons utilise la class « database », il est don cnecessaire de l’initialiser dans notre contrôleur :

//Chargement de la class database
$this->load->database();

Ensuite, nous pouvons l’utiliser simplement en stockant les données de notre formulaire dans un tableau :

$_POST['id'],
 'username'=>$_POST['username'],
 'password'=>sha1($_POST['password']),
 'title'=>$_POST['title'],
 'name'=>$_POST['name'],
 'subname'=>$_POST['subname'],
 'mail'=>$_POST['mail'],
 'role'=>$_POST['role']
 );
 //Insert
 $this->db->insert('users', $newUser); 

 echo 'Enregistrement inséré';
}

?>

Etape 4 – Lister des données

Comme vous avez pu le voir, les opérations sur les bases de données sont facilité avec l’utilisation de cette class. Nous allons voir comment lister des données provenant de notre base de données. Pour cela, nous utiliserons la class « pagination », cette class permet de générer facilement des pages de résultats et une navigation entre ses pages.

La première étape consiste à initialiser nos bibliothèque. Voici le code du Contrôleur « users » dans lequel j’ai initialiser deux librairies. La librairie « pagination » pour naviguer entre les pages et la librairie « table » qui va nous permettre d’afficher nos résultats dans un tableau.

//Chargement de la librairie pagination
 $this->load->library('pagination');

 //Chargement de la librairie table
 $this->load->library('table');

Une fois ses paramètres initialisés, nous pouvons les utiliser à travers différentes méthodes et options. Vous trouverez ci-dessous le code de notre fonction « users_list() » de notre contrôleur « users ».

//Fonction list_user listant les utilisateurs
 function list_users(){

 //Chargement de la librairie table
 $this->load->library('table');

 //Chargement de la librairie pagination
 $this->load->library('pagination');

 //Défini l'URL de base
 $config['base_url'] = 'http://localhost/crmIgniter/users/list_users/';

 //Initialise le nombre total d'enregistrements
 $config['total_rows'] = $this->db->get('users')->num_rows();

 //Initialise le nombre d'enregistrements à afficher par page
 $config['per_page'] = '10';
 $config['num_links'] = '10';
 $config['full_tag_open'] = '';
 $config['full_tag_close'] = '';

 //Initialisation de notre pagination
 $this->pagination->initialize($config);        

 //Execution de la requête - Voir documentation http://codeigniter.com/user_guide/database/active_record.html
 $this->db->select('id,title,name,subname,mail');
 $data['records'] = $this->db->get('users',$config['per_page'],$this->uri->segment(3));

 //Chargement de la vue et transfert des données à notre vue
 $this->load->view('users_list',$data);

 }

Quelques explication :

Chargement de nos librairies.
1. L’url sert à indiquer au script après quels éléments il devra insérer le numéro d’enregistrement
2. On récupére le nombre total d’enregistrement afin de calculer le nombre de page
3. On configure le nombre d’enregistrement par page
4. On configure le nombre maximum de liens à afficher
5. On configure les balises qui engloberons nos liens de pagination
6. Initialisation globale de notre pagination
Exécution de la requête
Chargement de la vue

Il ne reste plus qu’à exécuter cela dans notre vue, ouvrez votre vue « users_list.php » et éditez le code comme ci-dessous

load->view('crmHeader');
$this->load->view('crmNav');
?>
Liste des utilisateurs::

table->set_heading('ID','Titre','Nom','Prénom','Email');

//Initialisation de notre tableau
echo $this->table->generate($records);//Données récupérées de $data['records'] du contrôleur

//Initialisation de la pagination
echo $this->pagination->create_links();

?>

load->view('crmFooter');
?>

Quelques explications :

Chargement de notre template
Initialisation des en-têtes de notre tableau set_heading()
Initialisation du tableau
Initialisation de la pagination
Chargement du footer

Nous pouvons maintenant afficher nos résultats. Le tableau n’est pas mis en forme mais vous pouvez déjà naviguer dans votre tableau. Reste à appliquer un beau CSS à notre table.

Vous trouverez en figure 4.8.2 le résultat obtenu :

Figure 4.8.2 - Tableau et pagination générés avec la class HTML Table et pagination de CodeIgniter

Etape 5 – Modification d’enregistrement

Nous allons voir ici comment modifier un enregistrement mais avant cela, nous allons voir comment récupérer nos résultats sans l’utilisation de la Class « htm_table ».

Dans notre contrôleur « users.php », nous avons une fonction permettant de récupérer les résultats de notre et nous les passons dans notre vue à l’aide de la variable $data['records']. Nous allons utiliser ces données pour créer un tableau.

//Execution de la requête - Voir documentation http://codeigniter.com/user_guide/database/active_record.html
$this->db->select('id,title,name,subname,mail');
$data['records'] = $this->db->get('users',$config['per_page'],$this->uri->segment(3));

Dans un premier temps, nous allons initialiser les données dans notre vue puis boucler les résultats.

Voici le code de notre vue users_list.php:

load->view('crmHeader');
$this->load->view('crmNav');
?>
Liste des utilisateurs::

result_array();

 //Boucle les enregistrements et création du lien de modification
 foreach($rows as $k => $v){
 echo "";
 }
 ?>
 
 
 
 ID
 Titre
 Nom
 Prénom
 Mail
 Options
 
 
 
 
 $v[id]
 $v[title]
 $v[name]
 $v[subname]
 $v[mail]
 Modifier
 
 
 
 pagination->create_links();
 ?>
 
 


 load->view('crmFooter');
 ?>

ID	Titre	Nom	Prénom	Mail	Options
$v[id]	$v[title]	$v[name]	$v[subname]	$v[mail]	Modifier
pagination->create_links(); ?>

Notre tableau est maintenant créé et nous pouvons naviguer entre les différentes pages. J’ai ajouté une nouvelle colonne « Options » qui me permet d’effectuer des actions en cliquant sur un lien. Ici, c’est un lien qui déclenchera ma fonction ‘update_user’ et qui est suivi de l’identifiant (figure 4.8.3).

Figure 4.8.3 - Table de mise à jour de données

La structure d’une URL CodeIgniter est la suivante :

« example.com/class/function/ID »

Créez une nouvelle vue « user_update.php » et placez y le code suivant :

load->view('crmHeader');
$this->load->view('crmNav');
?>
Mise à jour d'un utilisateur

load->view('crmFooter');
?>

En cliquant sur le lien vous devriez lancer la vue « user_update.php ».

Il ne reste plus qu’à créer notre formulaire de modification, pour cela, nous allons utiliser la class « database ». Voici étape par étape les opérations à réaliser :

Récupéré l’ID de notre enregistrement à modifier

Exécuter la requête nous permettant de récupérer l’enregistrement souhaité

Générer le formulaire

Envoyer et traiter le formulaire pour mise à jour de la base de données

Commençons…

Nous devons récupérer l’ID de l’enregistrement ; rappelez-vous, dans le script précédent, celui qui affiche la liste des utilisateurs, nous avons généré des liens qui passent l’ID de l’utilisateur dans l’URL :

Modifier

Notre URL après avoir cliqué sur un lien ressemblera donc à cela :

http://localhost/crmIgniter/users/update_user/10

Rappelons nous la structure de notre URL :

http://localhost/crmIgniter/[Class]/[Fonction]/[ID]

Pour récupérer notre ID, nous allons utiliser la class « URI Class » qui permet de manipuler nos chaines d’URL et ce que nous pouvons appeler des « Segments ». Cette class met à notre disposition une fonction « uri->segment() » ; Cette fonction attend en paramètre le N° de segment que vous souhaitez récupérer.

Que se passe t’il si dans mon fichier « user_update.php » je met le code suivant ?

code//Récupération de l'ID
$id = $this->uri->segment(3);
echo $id;

Et bien j’affiche le Segment correspondant à mon ID soit l’ID à récupérer

Maintenant que nous avons récupérer notre ID, il ne nous reste plus qu’à récupérer les données de notre table. Pour cela nous utiliserons Activ_record. CodeIgniter utilise une version modifiée de la class « activ_record ». activ_record est un model d’accès et de traitement des bases de données permettant de manipuler les données.

Pour modifier un enregistrement la fonction est la suivant « $this->db->update([table],[données]);

Vous trouverez ci-dessous le code commenté de notre fichier user_update.php.

load->view('crmHeader');
$this->load->view('crmNav');
?>
Mise à jour d'un utilisateur
uri->segment(3);
echo "Id actif : $id
";
$query = $this->db->get_where('users', array('id' => $id));
$activUser = $query->result_array();
$activUser = $activUser[0];
echo ''."\n";
print_r($activUser);
echo ''."\n";

/**
 * Ici commence le formulaire
 * On utilise le form helper pour générer le formulaire +
 * les inputs
 */
echo form_open('users/update_user/'.$id);
echo form_label('Nom d\'utilisateur : ');
echo form_input('username',$activUser['username']);
echo form_label('Civilié : ');
$options = array();
echo form_dropdown('title',array('Madame'=>'Madame','Mademoiselle'=>'Mademoiselle','Monsieur'=>'Monsieur'),$activUser['title']);
echo form_label('Nom : ');
echo form_input('name',$activUser['name']);
echo form_label('Prénom : ');
echo form_input('subname',$activUser['subname']);
echo form_label('Email : ');
//Un tableau permettant de passer des attributs à notre input
$mailData = array(
 'name'        => 'mail',
 'id'          => 'mail',
 'value'       => $activUser['mail'],
 'maxlength'   => '200',
 'size'        => '50',
 'style'       => 'width:300px'
);
echo form_input($mailData);
echo form_submit('update_user','Enregistrer les modifications');
echo form_close();

/**
 * Récupération des données - Traitement du formulaire
 */
if(isset($_POST['update_user'])){
 echo "Formulaire soumis :: Traitement de la mise à jour...
";
 //Passage des données récupérées dans un tableau
 $data = array(
 'username' => $_POST['username'],
 'title' => $_POST['title'],
 'name' => $_POST['name'],
 'subname' => $_POST['subname'],
 'mail' => $_POST['mail']
 );
 //Sélection de l'enregistrement à modifier
 $this->db->where('id',$id);
 //Modification de l'enregistrement
 $this->db->update('users',$data);
}
?>

load->view('crmFooter');
?>

Les figures ci-dessous vous montre en image les actions réalisées (Figures 4.8.4, 4.8.5, 4.6).

Figure 4.8.4 - Formulaire de mise à jour utilisateur

Figure 4.8.5 - Base de données avant la mise à jour

Figure 4.8.7 - Base de données après la mise à jour

Étape 6 – Suppression d’un enregistrement

La suppression d’un enregistrement suivra le même chemin à la différence prêt que nous utiliserons la fonction « $this->db->delete('mytable', array('id' => $id));" de la class activ_record.

Il suffit pour cela d’ajouter un lien de suppression à notre liste d’utilisateurs et d’y lier encore une fois l’ID de l’utilisateur. Le lien pointera sur la fontion « delete_user() » de notre contrôleur.

Supprimer

Notre vue contiendra simplement notre fonction de suppression :

load->view('crmHeader');
$this->load->view('crmNav');
?>
Supression d'un utilisateur : 
uri->segment(3);
if(isset($_POST['confirm_delete'])){
 $this->db->delete('users', array('id' => $id));
 echo "L'enregsitrement N° $id a bien été supprimé ! \n";
}else{
 ?>
 
 
 Etes vous sur de vouloir supprimer l'enregistrement N°  de la table utilisateurs ?
 
 
 
load->view('crmFooter');
?>

V – Conclusion

Vous venez de voir comment utiliser dans les grandes lignes le Framework CodeIgniter. En conclusion on peut remarquer différents points forts :

L’utilisation du model MVC
Des class et des helpers facilitant grandement le développement d’application WEB
Une documentation riche
La facilité d’intégrer ses propres librairies et extensions

CodeIgniter est donc un Framework très intéressant ne demandant pas un trop long apprentissage.

VI – Ressources

Applications développées avec CodeIgniter

68KB – Script de base de données de connaissances

BackendPro Control Panel : Application permettant de gérer la partie administration d’un site ou d’une application

Blogmer : Blog script qui se veut simple d’utilisation et convivial et dont les fonctions sont essentielles

Ionize CMS : Un puissant gestionnaire de contenu réalisé avec CodeIgniter

Sites développés avec CodeIgniter

Vous trouverez la liste des sites réalisés avec CodeIgniter à l’adresse suivante : http://codeigniter.com/projects/

Documentation & Tutoriels

Documentation principale : http://codeigniter.com/user_guide/

Tutoriels Vidéo : http://codeigniter.com/tutorials/

Wiki : http://codeigniter.com/wiki/

Ressource CodeIgniter : http://codeigniterdirectory.com/

slDesign » Tutoriels

Tutoriel WordPress : Introduction à la création d’un thème WordPress personnalisé

Sommaire :

I – Introduction

1°) Objet du tutoriel

Ce que n’est pas ce didacticiel :

2°) Pré-requis

3°) Editeur de code et outils de programmation

Editeur de Code HTML / PHP / JavaScript / CSS

Firefox et extensions pour développeurs

4°) Ressources et documentations

5°) Introduction à l’API WordPress

6°) Informations utiles

Tutoriel HTML 5 : Réaliser une lecteur vidéo personnalisé

Introduction

Théorie…

Les étapes

Etape 1 – Création du document de base

Etape 2 – Intégration de la vidéo

Etape 3 – Etendre le lecteur

Création d’un lecteur vidéo HTML personnalisé:

Théorie

Etape par étape :

Etape 1 – Initialisation du plugin jQuery

Etape 2 – Chargement des feuilles de style

Etape 3 – Construction du wrapper et des contrôles

Etape 4 – Bouton Play / Pause

Etape 5 – Gestion du son

Etape 6 – Gestion du seeker

Etape 7 – Appel du plugin

owPlayer::

Résultat final

Conclusion

Code javascript : owPlayer.js

Code HTML : index.html

owPlayer::

Code CSS : style.css

Remerciements :

Des milliers de tutoriels en Français et sur toutes les applications

Tuto.com c’est quoi ?

Fonctionnement

Acheter ou Vendre ?

Conclusion

Support HTML 5 – La solution pour gérer la compatibilté des navigateurs

Solution Javascript

Commentaires conditionnels

Class Modernizr

Initialisation :

Code HTML

Feuille de style CSS :

Conclusion

Formulaires HTML5 – Quoi de neuf ?

Introduction :

Placeholder attribut :

Avant…

Après…

Autofocus

Avant…

Après…

Attribut Required

Avant…

Aperçu Required avant HTML5

Après…

Résultat attribut HTML5 Required

Champ email & url

Avant…

Check mail avant HTML5 Check URL avant HTML5 Après…

Les nouveaux types de champs :

Conclusion

Speed tuts : local storage ou la sauvegarde locale

I – Introduction & prérequis

II – Création d’un contenu éditable

Code HTML – zone de saisie :

Todo Liste

Utilisation de javascript

Code javascript :

Code complet et ressources :

Code complet du tutoriel :

Todo Liste

Compatibilité

Check mail avant HTML5

Check URL avant HTML5

Après…