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 :

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

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.

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…

	<script>
		$(document).ready(function(){
			$('.placeholder').focus(function(){

				if($(this).val() == $(this).attr('alt')){
					$(this).val('');
				};
			});
			$('.placeholder').blur(function(){
				if($(this).val() == ""){
					$(this).val($(this).attr('alt'));
				}
			});

		});
	</script>
	<form>
		<input type="text" class="placeholder" name="first-name" alt="John" value="John"/><br/>
		<input type="text" class="placeholder" name="last-name"  alt="Doe" value="Doe"/><br/>
		<input type="submit" name="submit" value="Save"/>
	</form>

Après…

	<form>
	<input type="text" name="first-name" placeholder="John"/><br/>
	<input type="text" name="last-name" placeholder="Doe"/><br/>
	<input type="submit" name="submit" value="Save"/>
	</form>

Autofocus

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

Avant…

	<script>
		$(document).ready(function(){
			$('.selectedInput').focus();
		});
	</script>
	<form>
	<input type="text" name="first-name" placeholder="John"/><br/>
	<input class="selectedInput" type="text" name="last-name" autofocus/><br/>
	</form>

Après…

        	<form>
	<input type="text" name="first-name" placeholder="John"/><br/>
	<input type="text" name="last-name" autofocus/><br/>
	</form>

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…

		 	<script>
		 		$(document).ready(function(){
					$(".verifForm").click(function(){
						if($(".required").val() == ""){
							alert("Vous devez remplir tous les champs...");
							return false;
						}
					});
				});
		 	</script>
		 	<form>
		 		<label>Nom d'utilisateur : </label><br/>
		 		<input class="required" type="text" name="username" value=""/><br/>
				<label>Mot de passe : </label><br/>
				<input class="required" type="text" name="password" value=""/><br/>
				<label>Prénom : </label><br/>
				<input type="text" name="subname" value=""/><br/>
				<input class="verifForm" type="submit" name="submit" value="Save"/>
		 	</form>

Aperçu Required avant HTML5

Après…

		 	<form>
		 		<label>Nom d'utilisateur : </label><br/>
		 		<input required="required" type="text" name="username" value=""/><br/>
				<label>Mot de passe : </label><br/>
				<input required="required" type="text" name="password" value=""/><br/>
				<label>Prénom : </label><br/>
				<input type="text" name="subname" value=""/><br/>
				<input type="submit" name="submit" value="Save"/>
		 	</form>

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…

        <script>
        	function isValidEmailAddress(emailAddress) {
				var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
				return pattern.test(emailAddress);
			}
			function isValidUrlAddress(urlAdress) {
				var pattern = new RegExp(/http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/);
				return pattern.test(urlAdress);
			}
            $(document).ready(function(){
            	$('.mail').blur(function(){
					if (!isValidEmailAddress($(this).val())) {
						alert("Email non valide !");
						return false;
					};
				});

				$('.url').blur(function(){
					if(!isValidUrlAddress($(this).val())){
						alert("URL non valide !");
						return false;
					}
				});
            });
        </script>
		<form>
					<label>News Letter : </label><br/>
					<input class="mail" type="text" placeholder="YouMail@provider.com" required /><br/>
					<label>Votre site Web : </label><br/>
					<input class="url" type="text" name="yourWebSite" placeholder="www.yoursite.com"/><br/>
					<input  type="submit" name="submit" value="Inscription"/>
				</form>

Check mail avant HTML5

Check URL avant HTML5

Après…

				<form>
					<label>News Letter : </label><br/>
					<input type="email" placeholder="YouMail@provider.com" required /><br/>
					<label>Votre site Web : </label><br/>
					<input type="url" name="yourWebSite" placeholder="www.yoursite.com"/><br/>
					<input  type="submit" name="submit" value="Inscription"/>
				</form>

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 :

<input type="text" name="username" placeholder="Nom d'utilisateur" pattern="[A-Za-z]{4,10}"/>

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

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 :

<!DOCTYPE html>
<html>
 <head>
 <meta name="generator" content="HTML Tidy, see www.w3.org">
 <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
 <title>Tutoriel local storage</title>
 <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
 </script>

 </head>
 <body>

 </body>
</html>

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 :

	<h5>Todo Liste</h5>
	<ul class="editable" id="todoListe" contenteditable="true">
	    <li>
	    </li>
	</ul>
	<p>
	    <button id="clearStorage">
	        Effacer mon localStorage
	    </button>
	</p>

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 :

<script type="text/javascript">
$(function(){
	var editable = document.getElementById('todoListe');

	//Action réalisée au focus
	$(editable).blur(function(){
		//Sauvegarde des données saisies dans un variable 'myStorage'
		localStorage.setItem('myStorage', this.innerHTML);
	});

	//Récupération de nos données en cas de chargement...
	if (localStorage.getItem('myStorage')) {
		editable.innerHTML = localStorage.getItem('myStorage');
	};

	//Fonction pour affacer le localStorage
	$('#clearStorage').click(function(){
		localStorage.clear();
		location.reload() ;
	});
});
</script>

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
        <title>Tutoriel local storage</title>
        <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
        </script>
        <style type="text/css">
            .editable {
                background: #f5f5f5;
                border: 1px solid #000;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var editable = document.getElementById('todoListe');
                //Action réalisée au focus
                $(editable).blur(function(){
                    //Sauvegarde des données saisies dans un variable 'myStorage'
                    localStorage.setItem('myStorage', this.innerHTML);
                });

                //Récupération de nos données en cas de chargement...
                if (localStorage.getItem('myStorage')) {
                    editable.innerHTML = localStorage.getItem('myStorage');
                };

                //Fonction pour affacer le localStorage
                $('#clearStorage').click(function(){
                    localStorage.clear();
                    location.reload();
                });
            });
        </script>
    </head>
    <body>
    	<h5>Todo Liste</h5>
            <ul class="editable" id="todoListe" contenteditable="true">
                <li>
                </li>
            </ul>
            <p>
                <button id="clearStorage">
                    Effacer mon localStorage
                </button>
            </p>
    </body>
</html>

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 +

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 :

• http://www.club-3d.com/
• http://www.bambooinvoice.org/
• http://ionizecms.com/

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

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 :

<?php

class Welcome extends Controller {

 function Welcome()
 {
 parent::Controller();
 }

 function index()
 {
 $this->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

<?php
class Products extends Controller {

function shoes($sandals, $id)
{
echo $sandals;
echo $id;
}
}
?>

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 :

<?php
class Blog extends Controller {

 function index()
 {
 $this->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 :

<?php
class Blog extends Controller {

 function index()
 {
 $data['title'] = "My Real Title";
 $data['heading'] = "My Real Heading";

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

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

<?php
class Blog extends Controller {

 function index()
 {
 $data['todo_list'] = array('Clean House', 'Call Mom', 'Run Errands');

 $data['title'] = "My Real Title";
 $data['heading'] = "My Real Heading";

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

Code HTML

<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
<h1><?php echo $heading;?></h1>

<h3>My Todo List</h3>    

<ul>
<?php foreach($todo_list as $item):?>

<li><?php echo $item;?></li>

<?php endforeach;?>
</ul>

</body>
</html>

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 :

<?php
class application extends Controller{

//Constructeur
function application(){
parent::Controller();
}

//Function index
function index(){
$this->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

<?php
$this->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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>crmIgniter - CodeIgniter CRM Application</title>
<meta name="description"
 content="crmIgniter - un CRM réalisé avec le Framework PHP CodeIgniter" />
 <base href="http://localhost/crmIgniter/" />
<link href="design/style.css" type="text/css" rel="stylesheet" />
<link href="js/jQuery/css/ui-lightness/jquery-ui-1.8.2.custom.css"/>
<script type="text/javascript" src="js/jQuery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jQuery/js/jquery-ui-1.8.2.custom.min.js"></script>
</head>
<body>
<div id="header">
<h1>crmIgniter</h1>
<h2>CodeIgniter CRM</h2>
</div>

Code du fichier crmNav

<div id="crmNav">
<ul>
 <li><a href="users" title="Gestion des utilisateurs">Utilisateurs</a></li>
 <li><a href="accounts" title="Gestion des comptes">Comptes</a></li>
 <li><a href="business" title="Gestion des affaires">Affaires</a></li>
</ul>
</div>

Code du fichier crmContent

<div id="content">
<h3>Contenu de l'application...</h3>
</div>

Code du fichier crmFooter

<div id="footer">
<p>&copy; - openWab &amp; CodeIgniter - crmIgniter 2010 - <a href="mailto:#">Contact</a></p>
</div>
</body>
</html>

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 « <?php echo [variable ou fonction]; ?>

Vous pouvez utiliser la syntaxe suivante :

<?=$variable?>

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

<?=$variable?>

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

<ul>

 <?php foreach($todo as $item): ?>

 <li><?=$item?></li>

 <?php endforeach; ?>

 </ul>

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 :

<?php
class users extends Controller{

 function users(){
 parent::Controller();

 }

 function index(){
 $this->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.

<?php
$this->load->view('crmHeader');
$this->load->view('crmNav');
?>
<div id="content">
<a href="users/add_user/" title="nouvel utilisateur">Nouvel utilisateur</a>
<a href="users/list_users/" title="Liste des utilisateurs">Liste des utilisateurs</a>
</div>
<?php
$this->load->view('crmFooter');
?>

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

<?php
class users extends Controller{

 function users(){
 parent::Controller();

 }

 function index(){
 $this->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 :

<?php
$this->load->view('crmHeader');
$this->load->view('crmNav');
?>
<h3>Nouvel utilisateur::</h3>
<p>Cette interface vous permet d'ajouter un nouvel utilisateur</p>
<p><a href="users/">retour</a></p>
<?php
$this->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.

<?php
class users extends Controller{

 function users(){
 parent::Controller();

 }

 //Fonction index chargeant la vue par défaut
 function index(){
 $this->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 » :

<?php
//Initialisation des attributs du formulaire
$formAtt = array('id'=>'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é :

<form action="http://localhost/crmIgniter/" method="post" id="add_user"
 class="standardForm">
<input type="hidden" name="id" value="" />
<label>Nom d'utilisateur : </label>
<input type="text" name="username" value="" />
<label>Mot de passe : </label><input type="text" name="password" value="" />
<label>Civilité: </label>
<select name="title">
 <option value="Madame">Madame</option>
 <option value="Mademoiselle">Mademoiselle</option>
 <option value="Monsieur">Monsieur</option>
</select>
<label>Nom : </label>
<input type="text" name="name" value="" />
<label>Prénom: </label>
<input type="text" name="subname" value="" />
<label>Email : </label><input type="text" name="mail" value="" />
<label>Fonction : </label>
<input type="text" name="role" value="" />
<input type="submit" name="add_user" value="Enregistrer" />
</form>

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 :

<?php
//Traitement des données du formulaire

//Récupération des variables post
if(isset($_POST['add_user'])){
 $newUser = array(
 'id'=>$_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 '<p>Enregistrement inséré</p>';
}

?>

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'] = '<p>';
 $config['full_tag_close'] = '</p>';

 //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 :

1. 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
2. Exécution de la requête
3. 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

<?php
$this->load->view('crmHeader');
$this->load->view('crmNav');
?>
<h3>Liste des utilisateurs::</h3>
<div>
<?php

//Initialisation des en-tête de notre tableau
echo $this->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();

?>
</div>
<?php
$this->load->view('crmFooter');
?>

Quelques explications :

1. Chargement de notre template
2. Initialisation des en-têtes de notre tableau set_heading()
3. Initialisation du tableau
4. Initialisation de la pagination
5. 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:

<?php
$this->load->view('crmHeader');
$this->load->view('crmNav');
?>
<h3>Liste des utilisateurs::</h3>
<div>
<table>
 <thead>
 <tr>
 <th>ID</th>
 <th>Titre</th>
 <th>Nom</th>
 <th>Prénom</th>
 <th>Mail</th>
 <th>Options</th>
 </tr>
 </thead>
 <tbody>
 <?php
 //Récupération des enregitrements sous forme de tableau
 $rows = $records->result_array();

 //Boucle les enregistrements et création du lien de modification
 foreach($rows as $k => $v){
 echo "<tr>
 <td>$v[id]</td>
 <td>$v[title]</td>
 <td>$v[name]</td>
 <td>$v[subname]</td>
 <td>$v[mail]</td>
 <td><a id=\"$v[id]\" class=\"updateRecord\" href=\"users/update_user/$v[id]\" title=\"Modifier l'enregistrement\">Modifier</a></td>
 </tr>";
 }
 ?>
 </tbody>
 <tfoot>
 <tr>
 <td colspan="6"><?php
 echo $this->pagination->create_links();
 ?></td>
 </tr>
 </tfoot>
</table>
</div>
 <?php

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

<script type="text/javascript">
$("tr:odd").css('background','#f5f5f5');
</script>

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 :

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

<?php
$this->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 :

<a id=\$v[id]\" class=\"updateRecord\" href=\"users/update_user/$v[id]\" title=\"Modifier l'enregistrement\">Modifier</a>

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.

<?php
$this->load->view('crmHeader');
$this->load->view('crmNav');
?>
<h3>Mise à jour d'un utilisateur</h3>
<div><?php
//Récupération de l'ID
$id = $this->uri->segment(3);
echo "Id actif : $id<br/>";
$query = $this->db->get_where('users', array('id' => $id));
$activUser = $query->result_array();
$activUser = $activUser[0];
echo '<pre>'."\n";
print_r($activUser);
echo '</pre>'."\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...<br/>";
 //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);
}
?>
</div>
<?php
$this->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.

<a id=\$v[id]\" class=\"deleteRecord\" href=\"users/delete_user/$v[id]\" title=\"Supprimer l'enregistrement\">Supprimer</a>

Notre vue contiendra simplement notre fonction de suppression :

<?php
$this->load->view('crmHeader');
$this->load->view('crmNav');
?>
<h3>Supression d'un utilisateur : </h3>
<?php
$id = $this->uri->segment(3);
if(isset($_POST['confirm_delete'])){
 $this->db->delete('users', array('id' => $id));
 echo "<p class=\"confirm\">L'enregsitrement N° $id a bien été supprimé ! </p>\n";
}else{
 ?>
 <!-- Formulaire -->
 <form action="" method="post">
 <p>Etes vous sur de vouloir supprimer l'enregistrement N° <?=$id?> de la table utilisateurs ?</p>
 <input type="submit" name="confirm_delete" value="Confirmer"/>
 </form>
 <?php
}
?>
<?php
$this->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/

Aptana IDE est à mon avis le meilleur outil de développement WEB. Il est vrai que je regrette un peu l’époque ou Aptana intégrait son propre module PHP avant d’intégrer celui de Eclipse PDT. Cela étant dit, je n’ai pu me résoudre à changer d’éditeur.

Une des fonctions que j’aime particulièrement est la gestion des « Snippets ». Les « Snippets » sont des templates de codes que vous pouvez intégrer à vos fichier en cliquant dessus (une sorte de copier coller amélioré). Ces « Snippets » vous permettent entre autre d’ajouter des champs de saisie vous permettant d’avoir une trame pour la complétion de vos codes.

je vous propose dans cet article une approche complète de la gestion des « Snippets » dans Aptana. Nous verrons comment les utiliser, les éditer et en créer de nouveau.

Sommaire

1. Les Snippets Aptana : Introduction
2. Utiliser les Snippets
3. Editer les snippets par défaut de Aptana
4. Créer vos propre Snippets

1°) Introduction

Puisqu’un exemple vaut mieux qu’un grand discour, nous allons directement passer à un exemple concret de l’utilisation  de Snippets ; pour ce faire,. vous allez créer un nouveau projet WEB – PHP que nous appellerons « aptana-snippets ».

Une fois ce projet créé, vous allez créer un fichier « index.php » vierge et l’ouvrir.

Personnellement, mon module de Snippets est situé dans un panneau latéral droit de mon IDE mais vous pouvez le mettre ou bon vous semble. Si vous ne voyez pas le module dans votre interface, voici la façon de l’activer :

Dans le menu principal, cliquez sur « Window => Show view => Other » (figure 1.1.1)

Figure 1.1.1 - Menu contextuel Snippets View

Dans la fenêtre qui suit, sélectionnez le module Snippets (figure 1.1.2)

Figure 1.1.2 - Sélection du module Snippets

Vous devriez maintenant pouvoir accéder à ce module qui est constitué de différents dossiers (figure 1.1.3).

Figure 1.1.3 - Snippets View

2°) Utilisation des snippets

Maintenant, placez votre curseur à l’emplacement dans lequel vous souhaitez insérer ce code (supprimez les balises PHP) puis, dans le panneau de snippets, cliquez sur le dossier HTML afin d’en voir le contenu puis « double cliquez » sur « Insert DOCTYPE XHTML 1.0 Strict ». Vous venez d’exécuter un snippet.

3°) Editer un Snippet

Il est possible de modifier un Snippet. Nous allons éditer notre snipet « form » permettant d’intégrer un formulaire HTML au sein de nos scripts. Cliquez droit sur l’élément « Insert <form> » dans le dossier « HTML » puis choisissez « Editer ». Le document est maintenant ouvert dans votre éditeur.

Voici le code standard de ce Snippet :

Code HTML :

<!--
 category: HTML
 name: Insert <form>
 tooltip: Insert a <form> tag

 toolbar: true
 icon: com.aptana.ide.snippets/icons/layout.png
 language: text/html
-->
<form action="" method="" accept-charset="utf-8">
 <p><input type="submit" value="Continue" /></p>
</form>

Voici maintenant le nouveau code, j’ai simplement ajouté une balise « fieldset » et une balise « legend » dans mon document :
Code HTML :

<!--
 category: HTML
 name: Insert <form>
 tooltip: Insert a <form> tag

 toolbar: true
 icon: com.aptana.ide.snippets/icons/layout.png
 language: text/html
-->
<form action="" method="" accept-charset="utf-8">
 <fieldset>
 <legend></legend>
 </fieldset>
 <p><input type="submit" value="Continue" /></p>
</form>

Enregistrez maintenant ce document puis fermez le. Vous pouvez maintenant le tester en double cliquant dessus et en veillant à ce que votre document « index.php » soit actif te que le curseur soit à la position d’insertion souhaitée.

Note : Il est possible que vous ayez à rebooter Aptana Studio.

Votre code est maintenant inséré dans votre document.

4°) Créer vos propre Snippets

Vous avez la possibilité de créer vos propre snippets mais avant de rentrer dans le vif du sujet nous allons voir de quoi est constitué un snippet :

Un snippet est constitué de deux élément principaux :

1. Un en-tête
2. Du code

L’en-tête va vous permettre d’identifier votre Snippet, lui donner un nom, le classer dans une catégorie ou encore créer des boites de dialogue afin d’y renseigner des variables.

Quand au code, c’est du code …

Note : Vous devez obligatoirement avoir un document ouvert (*.htm, *.js, etc.) avant de pouvoir créer un nouveau Snippet.

La première étape consiste à créer un nouveau dossier à la racine de votre projet, vous appellerez ce dossier « snippets » (figure 4.1.1).

Figure 4.1.1 - Nouveau dossier Snippets

Nous allons ensuite créer un document vierge du type de snippet souhaité, c’est à dire HTML si nous souhaitons réaliser un document HTML ou Js si il s’agit d’un document javascript. Je souhaite créer un nouveau snippet de type HTML.

Je souhaite créer un snippet permettant de créer rapidement un formulaire de connexion, je vais donc éditer mon document en conséquence.

La première chose consiste à renseigner l’en-tête du snippet, c’est à dire les informations de ce snippet :

Code HTML

<!--
 category: HTML
 name: Insert a login form
 tooltip: Insert un formulaire de connexion utilisateur
-->

Nous allons maintenant créer un « Prompt » ; un « Prompt » est une fenêtre de saisie vous permettant de renseignez des informations dans des champs. Ces informations seront alors après validation insérer dans notre document à l’emplacement désiré.

 prompt(form_action): Action lors de l'envoi du formulaire
 prompt(fieldset_class): Class pour le fieldset
....
-->

La syntaxe d’un prompt est la suivante :

prompt([nom de la variable] : [Libelle]

Le nom de variable sera repporté dans notre code de la façon suivante :

<input type= »text » name= »${variable} » value= »"/>

Voici le code complet de notre snippet :

<!--
 category: HTML
 name: Insert a login form
 tooltip: Insert un formulaire de connexion utilisateur
 prompt(form_action): Action lors de l'envoi du formulaire
 prompt(fieldset_class): Class pour le fieldset
 prompt(fieldset_legend) : Legende du fieldset
 prompt(login_name) : Nom du champ "login"
 prompt(password_name) : nom du champ "password"
 prompt(submit_name) : Nom du champ "Submit"
 prompt(submit_value) : Valeur du champ "Submit"
-->
<form action="${form_action}" method="post">
 <fieldset>
 <legend>${fieldset_legend}</legend>
 <label>Login : </label>
 <input type="text" name="${login_name}" value=""/>
 <label>Mot de passe : </label>
 <input type="password" name="${password_name}" value=""/>
 <input type="submit" name="${submit_name}" value="${submit_value}"/>
 </fieldset>
</form>

Après avoir enregistré votre snippet, rebooter Aptana et vous devriez avoir un nouveau Snippet dans votre vue « Snippets => HTML » (figur 4.1.2).

Figure 4.1.2 - Ajout d'un nouveau Snippet

Executez pour voir lerésultat (figure 4.1.3).

Figure 4.1.3 - Affichage du prompt

Et voici le résultat après exécution de notre snippet :

Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
</head>
<body>
<form action="" method="post">
 <fieldset>
 <legend>Formulaire de conenxion</legend>
 <label>Login : </label>
 <input type="text" name="login" value=""/>
 <label>Mot de passe : </label>
 <input type="password" name="password" value=""/>
 <input type="submit" name="submit" value="Se connecter"/>
 </fieldset>
</form>
</body>
</html>

Encore plus pratique, il vous est possible d’ajouter des snippets dans votre barre d’outil, simplement en ajoutant le code suivant dans l’en-tête de votre snippet :

<!--
....
  toolbar: true
  icon: strong.png
  language: text/html
....
-->

En ajoutant ce code à votre en-tête, vous aurez un nouveau bouton dans l’éditeur HTML.

L’informatique décisionnelle (en anglais : DSS pour Decision Support System ou encore BI pour Business Intelligence) désigne les moyens, les outils et les méthodes qui permettent de collecter, consolider, modéliser et restituer les données, matérielles ou immatérielles, d’une entreprise en vue d’offrir une aide à la décision et de permettre aux responsables de la stratégie d’entreprise d’avoir une vue d’ensemble de l’activité traitée.

Un  de ces outil est BIRT. BIRT est sans nulle doute une des solutions open source les plus abouties dans le domaine du reporting et de la restitution de données.

Je vais vous présenter à travers cet article / tutoriel ce logiciel à travers une prise en main rapide et un  guide pas à pas pour réaliser votre premier rapport avec BIRT et une base de données SQL.

I – Présentation de BIRT

Birt (Business Intelligence Reporting Tools) est un logiciel open source basé sur eclipse. C’est un outil de reporting et de visualisations de données. Il vous permet de restituer vos données sous forme de graphiques, et de rapports.

Ce logiciel existe en différentes versions, Open source, Professionnelle. Je vous invite à consulter le tableau disponible à l’adresse suivante http://www.birt-exchange.com/be/download/BIRT-Designers-Comparison-Table.pdf et qui vous permettra de connaître les différences entre ces différentes versions.

BIRT integre différents modules (figure 1.1.1).

Figure 1.1.1 - Modules BIRT (Image source sur le site de l'éditeur)

Les diffrénts modules sont les suivants :

• Designer => Ce module permet de concevoir les rapports
• Deploy => Module permettant de déployer les rapports selon différents moyens
• Viewer => Module permettant aux utilisateurs finaux de consulter / voir les rapports générés.

II – Téléchargement & Installation

1°) Prérequis :

• OS Windows ou Linux
• Une base de données (j’utilise MySql)
• Le driver JDBC de votre base de données
• Des connaissances en langages SQL sont un plus

2°) Téléchargement

La première étape consiste à se rendre sur le site de l’éditeur à l’adresse suivante : http://www.birt-exchange.com/be/downloads/ (figure 2.21.1) et de télécharger la version open source. Enregistrez-vous afin de lancer le téléchargement.

Notes : Birt existe également en tant que module eclipse. Vous pouvez installer ce module depuis l’installateur de logiciel. Pour ce faire, allez à l’adresse suivante afin de consulter les adresse de mise à jour Eclipse Birt http://wiki.eclipse.org/BIRT_Update_Site_URL .Birt est disponible en version Windows et Linux. Les deux versions sont identiques et requiert les mêmes éléments. Il est également possible de déployer Birt dans vos développements ; pour cela, vous pouvez télécharger les classes et API’s (JAVA) qui vous permettent de générer et voir du contenu BIRT.

Une fois téléchargé, il ne vous reste plus qu’à extraire le contenu de l’archive ou vous souhaitez et exécuter BIRT.

3°) Interface générale

Pour les utilisateurs d’éclipse, cette interface vous semblera familière, pour les autres, sachez qu’éclipse est un ensemble de bloc modulaires. A la base, Eclipse est un IDE qui a rapidement été utilisé comme base de développement et de distribution de nombreux logiciels.

Après l’execuion de BIRT, il vous est demandé de spécifier l’espace de travail ; cet espace représente l’endroit ou seront enregistré / déployé vos travaux. Il est préférable d’avoir un environnement de travail par projet. Chaque espace de travail peut avoir sa propre configuration. Dans notre cas, j’utiliserai l’espace de travail par défaut (figure 2.3.1).

Figure 2.3.1 - Initialisation de l'espace de travail BIRT

Il se compose d’un menu principal, d’une vue principal et de panneaux (onglets) que vous pouvez placer ou bon vous semble (figure 2.3.2). Il vous est possible d’organiser les onglets comme bon vous semble.

Figure 2.3.2 - Interface de BIRT

IV – Création d’un premier Report avec BIRT

1°) Introduction

Nous allons créer un premier rapport avec BIRT ; ce rapport est réalisée en liaison avec une base de données MySql et deux tables :

• Livres
• Catégories de livres

2°) Initialisation du projet

La première étape consiste à initialiser notre projet. Pour ce faire, cliquez sur « Files => New => Project » (figure 4.2.1).

Figure 4.2.1 - Création d'un nouveau projet Birt

Dans la fenêtre qui suit, sélectionnez « Report project » (figure 4.2.2).

Figure 4.2.2 - Sélection du type de projet

Pour l’étape qui suit, il suffit de donner un nom à votre projet (figure 4.2.3), j’ai choisi d’appeler le mien BiblioBirt.

Figure 4.2.3 - Nom du projet Birt

Cliquez sur terminer et valider le type de vue à utiliser avec BIRT. Cette nouvelle vue est composée de différents éléments :

• Palette => Cette palette permet d’ajouter des éléments graphiques à vos rapport (champs, tableaux, graphiques, etc.)
• Data Explorer => Explorateur de données
• Ressources explorer => Explorateur de ressources
• Navigator => Navigateur de projets

Cliquez droit sur le dossier de votre projet dans l’onglet navigator et dans le menu contextuel, cliquez sur « New =>Report » (figure 4.2.4)

Figure 4.2.4 - Création d'un nouveau rapport Birt

Donnez un nom à votre rapport (figure 4.2.5), pour ma part ce rapport servira simplement à lister les différents auteurs.

Figure 4.2.5 - Nom du nouveau rapport

Cliquez sur « Next » afin de choisir le type de rapport à générer (figure 4.2.6). Il s’agit en fait de templates.

Figure 4.2.6 - Sélection du type de rapport

Cliquez sur « Finish ». Notre vue vient de se mettre à jour et certains éléments sont maintenant accessibles :

Property Editor Report permet d’avoir accès au caractéristiques des élément du rapport sélectionné (figure 4.2.7) .

Figure 4.2.7 - Panneau de propriété du rapport

L’onglet « Data Explore » est maintenant actif et nous pouvons donc passer à l’étape suivante.

3°) Initialisation de la connexion

Birt vous permet d’extraire et de présenter des données provenant de différentes sources (Fichiers ou bases de données). Dans notre cas, j’ai opté pour le traitement de données provenant d’une base MySql. Il est alors nécessaire d’initialiser l’accès à cette source de données. Dans l’onglet « Data Explorer » faites un clic droit pouis cliquez sur « New  Data Source » (figure 4.3.1).

Figure 4.3.1 - Connexion à une source de données

Dans l’écran qui suit, il suffit de sélectionner le type de source de données (figure 4.3.2).

Figure 4.3.2 - Sélection du type de source de données

Sélectionnez ensuite votre base de données dans la liste (figure 4.3.3) puis cliquez sur « Next ».

Figure 4.3.3 - Selection de la base de données

Il est maintenant nécessaire de configurer la connexion ; cette connexion doit s’effectuer par le biais d’un connecteur JDBC (Java Driver). Pour MySql, vous trouverez ce connecteur à l’adresse suivante http://dev.mysql.com/downloads/connector/j/5.0.html . Ce driver se présente sous forme d’un fichier *.jar qui est une archive java. J’ai placé ce driver à la racine de mon projet. Une fois ceci réalisé, il suffit de configurer la connexion. Pour ce faire, cliquez sur le bouton « New Driver Definition » et renseignez l’ensemble des informations (Figure 4.3.4 & Figure 4.3.5)

Figure 4.3.4 - Sélection de la version du driver

Figure 4.3.5 - Sélection du driver (jar file)

Une fois es étapes réalisées, vous pouvez tester votre connexion (figure 4.3.5).

Figure 4.3.6 - Test de la conenxion JDBC Birt

Notes : Un driver JDBC fonctionne sous forme d’URL. Le schéma de cette URL est le suivant : jdbc:[base de données]://[adresse]:[port]/[DB Name]?[Utilisateur]

Notre Data Source est maintenant configuré et apparait dans notre Data Explorer (figure 4.3.7).

Figure 4.3.7 - Data Source après configuration

4°) Initialisation des données

Maintenant que nous avons configuré notre connexion, il est nécessaire de récupérer nos données ; cette étape est réalisable depuis le Data Sets. Il esxiste deux type de data sets :

• Data Sets standard
• Join Data Sets (permettant de lier différentes sources de données)

Nous allons dans un premier temps configurer un data sets standard. Cliquez droit sur Data Sets et dans le menu contextuel, cliquez sur « New Data Sets » (figure 4.4.1).

Figure 4.4.1 - Menu contextuel création du data sets

La prochaine étape consiste à compléter les différentes informations qui vont constituer notre source de données. Dans un premier temps, il faut choisir la connexion (ici il n’y en a qu’une) puis donner un nom à ce data sets (figure 4.4.2)

Figure 4.4.2 - Sélection de la connexion et identification du data sets

Il est ensuite nécessaire de sélectionner les donner en ajoutant une table. Dans cet exemple, je souhaite simplement lister mes livres, je vais donc ajouter la table « livres » (figure 4.4.3) et sélectionner les champs qui m’intéresse (figure 4.4.4). N’oubliez pas de donner des alias à vos champs pour plus de lisibilité.

Figure 4.4.3 - Ajout d'une table au data sets

Figure 4.4.4 - Sélection des champs et personalisation

Notre data sets est maintenant créé, il est accessible depuis le dossier « data sets » de notre onglet « data explorer » (figure 4.4.5).

Figure 4.4.5 - Vue du data sets après configuration

La prochaine étape consiste à glisser / déposer les champs de notre data sets dans notre tableau afin de créer notre rapport (figure 4.4.6).

Figure 4.4.6 - Aperçu du rapport en mode conception

A cette étape, il vous est possible de réaliser un aperçu en cliquant sur l’onglet « preview » de la vue principale. Vous pouvez ainsi voir vos données (figure 4.4.7).

Figure 4.4.7 - Prévisualisation du rapport

Vous venez de réalisez un premier étape (très simple il est vrai) sans aucune utilisation du langage SQL. Notre rapport est certes devant nos yeux mais la mise en page laisse à désirer…

5°) Personnalisation et mise en page

Voyons maintenant comment nous pouvons améliorer notre listing… Lorsque vous cliquez sur un élément du tableau ceci déclenche le panneau de propriété situé en dessous du rapport ; ceci va nous permettre de personnaliser nos champs et notre listing.

A – Formatage global

Commencez par sélectionner l’ensemble du tableau (en cliquant sur une des bordure) puis allez sur la propriété « Border » afin d’ajouter une bordure à notre tableau (figure 4.5.1)

Figure 4.5.1 - Personalisation des bordures de notre tableau BIRT

Je vous laisse mettre en page ce tableau à votre guise, pour ma part, je souhaite simplement ajouter une bordure à mon tableau et à mes cellules.

B – Création d’une feuille de style

Birt nous permet d’appliquer des styles à nos rapports et il existe différentes façons de créer / gérer les styles dans BIRT.

• Création  et importation
• Création directe

Pour l’importation d’une feuille de style, cliquez droit sur un élément vide du rapport afin d’afficher le menu contextuel ; dans ce menu il y a une section « Style ». Une fois sur cet élément du menu, il vous suffit de sélectionner « Import CSS Style » (figure 4.5.2).

Figure 4.5.2 - Importation d'une feuille de style CSS

Il est ensuite nécessaire de sélectionner les éléments de style que vous souhaiter importer dans votre projet (figure 4.5.3). Je vous conseille de créer un dossier réservé à vos éléments de style et d’y placer vos feuilles et images.

Figure 4.5.3 - Sélection des styles à importer dans BIRT - exemple réalisé depuis une feuille de style jQuery UI

La deuxième option est celle de la création à la volée ; pour cela il suffit de sélectionner « New style » dans le menu contextuel et de renseigner les éléments de style (figure 4.5.4).

Figure 4.5.4 - Création de style à la volée

Vous pouvez maintenant sélectionner le style dans la liste déroulant du panneau de propriété (figure 4.5.5).

Figure 4.5.5 - Sélection du style dans le panneau de propriété

C – Formatage des nombres

Notre tableau comporte des nombres devant êtres formatés au format monétaire. Pour formater cet élément, cliquez sur l’élément « [Prix] » puis dans le panneau de propriété, choisissez « Format number » puis dans la liste déroulante choisissez « Currency » et renseignez les informations de formatage (figure 4.5.6).

Figure 4.5.6 - Formatage des unités monétaires

D – Mise en page des textes long

Vous l’aurez remarqué, les textes trop longs sont tronqués, nous allons donc modifier les cellules pour que le texte retourne à la ligne. Cliquez sur l’élément « [Description] » puis dans le panneau de propriété cliquez sur le bouton « Advanced ». Cette vue vous permet d’avoir accès à l’ensemble des propriété d’un élément BIRT. Dans ce panneau, cherchez l’élément « text » puis dans l’arborescence l’élément « whitespace ». Choisissez la propriété normal dans la liste de choix (figure 4.5.7). Votre texte passera à la ligne automatiquement.

Figure 4.5.7 - Propriétés avancées et modification de la propriété White-space

Voici après quelques modifications à quoi ressemble notre listing (figure 4.5.8).

Figure 4.5.8 - Prévisualisation après modifications de style et formatage

Nous venons de terminer notre premier rapport qui n’est en fait qu’un listing. Vous avez déjà en main les bases qui vous permettent de vous connecter à une base de données, récupérer les données et les mettre en page. Nous allons maintenant étudier plus en détail les possibilités de BIRT.

V – Jointures, données croisées et graphiques

Il est temps pour nous de passer à des choses plus intéressantes, nous allons voir ensemble comment réaliser des jointures entre plusieurs tables, réaliser un tableau croisé dynamique et réaliser un graphique.

1°) Initialisation d’un nouvel état.

Nous allons réaliser un nouveau rapport. Suivez les mêmes étapes que pour notre rapport précédent à la différence prêt que nous changerons de nom . Il sera également nécessaire de reprendre notre Data sources ; un simple copier / coller permet de récupérer la connexion.

Créez ensuite un nouveau Data sets (que j’ai appelé « Bibliothèque ») et insérez la table ‘livres’ et la table ‘categories’. Vous disposez maintenant de deux tables. Cliquez sur le champ « livres.categorie_id » et faites le glisser sur le champ « categories.id ». Vous venez de créer une jointure permettant de lier notre table catégories avec les identifiants de la table « categories ». La figure 5.1.1 vous montre l’ensemble de ces éléments.

Figure 5.1.1 - Configuration du data sets et des jointures

Enregistrez ce data sets et réalisez votre rapport (Glisser / Déposer les éléments du data sets dans le tableau) puis mettez le en forme. Vous devriez obtenir un listing affichant les libellés de catégories (figure 5.1.2).

Figure 5.1.2 - Prévisualisation du listing avec jointures

2°) Regroupement de données

Il est possible de regrouper vos données. Cliquez sur le tableau et sélectionnez l’onglet « Groups » puis sur ajouter. Cet interface vous permet de regrouper vos données en fonction de différents critères. Dans l’exemple qui suit, j’ai regroupé mes données par auteur (figure 5.2.1 & figure 5.2.2).

Figure 5.2.1 - regroupement de données

Figure 5.2.2 - Prévisualisation du listing après groupement de données

3°) Compter le nombre d’enregistrements

Il est possible de compter le nombre d’enregistrements ou d’élément. Pour cela, il suffit d’ajouter un champ à notre data sets ; éditez votre data sets (clic droit => Editer) puis ajoutez un champ de type « Computed column » (figure 5.3.1).

Figure 5.3.1 - Ajout d'une colonne calculée

Dans cet exemple, j’ai simplement compté le nombre de livres. L’exemple ci-dessous vous montre comment ajouter un champ qui compte le nombre d’auteurs.

4°) Data cubes

Le data cubes vous permet de réaliser des croisements de données. Imaginons que je souhaite connaître le nombre de livres par catégories…. et bien le data cubes va nous permettre de réaliser cette opération. Pour cela, cliquez droit sur « Data cubes » et dans le menu contextuel cliquez sur « New ». Il vous est demandé deux élément :

• Groups
• Summary fields

Dans « Groups », glissez l’élément de table « Catégorie » ainsi que dans « Summary Fields » (figure 5.4.1).

Figure 5.4.1 - Création d'un data cubes

Cliquez droit sur un espace vide de votre rapport et dans le menu contextuel, cliquez sur « Insert => Cross tab » afin de créer un tableau croisé (figure 5.4.2).

Figure 5.4.2 - Création du tableau croisé

Il ne reste plus qu’à glisser l’élément « Groups => Catégories » dans la case de gauche (celle inscrite ‘Drop Data field’) et glisser l’élément « Summary Field => Nombre de livres » dans les autres cases (figure 5.4.3).

Figure 5.4.3 - Ajout des champs au tableau croisé

Il ne reste plus qu’à visualiser le résultat (figure 5.4.4).

Figure 5.4.4 - Prévisualisation tableau croisé

5°) Intégration d’un graphique

Nous allons maintenant intégrer un graphique. L’opération est simple, il suffit de réaliser un clic droit sur le tableau croisé que nous venons de créer puis dans le menu contextuel « Create Chart View ». Choisissez un graphique de type camembert (Pie chart) puis cliquez sur suivant. L’écran suivant nous permet de sélectionner notre source de données. Les informations sont reprises de notre tableau il n’y a donc rien à faire (figure 5.5.1).

Figure 5.5.1 - Interface de créattion de graphiques

Cliquez sur suivant, puis personnalisez votre graphique (figure 5.5.2)

Figure 5.5.2 - Personnalisation du graphique

VI – Export et génération de documents

Une fois votre ou vos états réalisés, il sera nécessaire de les exporter ; dans le menu principal, cliquez sur « Run » et sélectionnez le type de génération à réaliser (*.pdf, *.html, etc.). Il est également possible d’intégrer les rapports dans d’autres applications avec le traitement des données XML. Vous pouvez également utiliser « Birt Viewer » qui est un outil destiné aux utilisateurs finaux.

Note : Attention, il existe différentes versions de BIRT Viewer dont certaines ne sont pas open source et ne sont disponible qu’après l’achat de licences. Vous pouvez télécharger le document suivant http://www.birt-exchange.com/be/download/Viewer-Product-Comparison-Table.pdf qui donne un aperçu des différentes fonctionnalités des Viewers. Au moment ou je vous parle, je n’ai pas de prix ni de mode de licence à vous communiquer .

VII – Conclusion

Vous venez de voir les grandes lignes de l’utilisation de BIRT. Sans connaissances du langage SQL (ou besoin), vous avez pu extraire des données de votre base, mettre en page ces données. BIRT est sans nul doute un outil performant et intuitif. Cette solution peut facilement remplacer d’autres solutions commerciales sous réserve d’acheter les « Viewers » ou d’avoir les compétences permettant d’intégrer les états générés dans des outils personnels.

Cet article peut évoluer et n’est pas figé, vous pouvez me laisser vos commentaires et remarques afin de compléter des informations ou d’en ajouter.

Introduction à QlikView

I – Introduction

Le décisionnel autrement appelé « Business Intelligenge » prend de plus en plus de place dans les entreprises. Le temps des calculs manuel et du simple Bilan Comptable est révolu. De nombreux outils viennent appuyer les choix décisionnels au sein des entrprises.

J’ai eu l’occasion de tester et travailler sur différentes solutions, entre autre MyReport, Business Object ou encore Chrystal Report.

Il y a peu de temps, j’ai découvert QlikView qui fait l’objet de cet article.

Vous découvrirez le logiciel et réaliserez une première application

Prérequis :

Avant toute chose, veuillez lire les éléments suivant concernant les prerequis technique et connaissances requises ainsi que le context de ce tutoriel.

Prérequis techniques :

• Windows XP, 2000 ou 2003
• Processeur AMD ou Intel
• Au moins 1Go de RAM
• 200 Mo d’espace disque

Connaissances requises :

Des connaissances en langage SQL sont un plus mais non indispensable.

Notes :

La version utilisée et la version personnelle de QlikView qui est gratuite et reservée à un usage personnel. Consultez l’ensemble des informations relatives à cette version à l’adresse suivante => http://community.qlikview.com/gettingstarted/

Afin  de réalisé ce tutoriel, j’ai utilisé une base de données MySql et une table Test ; cette table est complétée avec une liste de livres. Je mets à votre disposition le fichier SQL de cette base de données BDD-test-qlikview.

II – Présentation générale

QlikView est un logiciel de Business Intelligence. Ce logiciel permet de se connecter à différentes sources de données (Bases de données, fichiers textes-cvs-xml,etc.) Il se présente comme un logiciel à part entiere mais peut également se décliner comme Ad-on de solutions informatiques( ERP, CRM).

Vous trouverez de nombreuses informations sur le site de l’éditeur : http://www.qlikview.com/

III – Installation

L’installation ne présente aucune difficulté particulière :
Télécharger => Installer => Utiliser
Rendez-vous à l’adresse suivante afin de télécharger QlikView version personnelle : http://global.qlikview.com/download/

IV – Prise en main générale

Une fois exécuté, vous avez la page de démarrage (figure 4.1) qui vous donne accès à différentes informations :

• Derniers documents ouverts
• Raccourcis
• Explorateur
• Ressources

Figure 4.1 - Page de démarrage QLikView

Je vous laisse le soin de parcourir ces différents onglets

En haut de l’écran, vous avez la barre de menu (figure 4.2) ; je ne vais pas détailler l’ensemble du menu mais nous allons nous arrêté sur le menu Paramètres et plus particulièrement les préférences utilisateur.

Figure 4.2 - Barre de menu

Cliquez sur le menu « Paramètres => Préférences utilisateur » (figure 4.3) afin d’afficher la vue correspondante (figure 4.4). Cette vue vous permet de renseigner différentes informations personnelles ainsi que de gérer certains paramétres tel que la sécurité ou encore vos données personnelles.

Figure 4.3 - Menu préférences utilisateur

Figure 4.4 - Vue préférences utilisateur

Nous aurons l’occasion de revenir sur certains de ses paramètres mais vous pouvez d’ores et déjà configurer vos données de « Messagerie » (figure 4.5).

Figure 4.5 - Paramétrage du compte mail

V – Premier projet QlikView.

Note :
Dans le menu, cliquez sur « Fichier => Nouveau » afin de créer un nouveau projet et enregistrez le tout de suite ; ceci a pour effet de créé un clef unique propre à l’utilisateur et sa machine (figure 5.1).

Figure 5.1 - Enregistrement utilisateur - Clef d'enregistrement

La première chose que nous devons faire et de configurer notre projet et notamment la connexion à notre base de données MySql. Pour se faire, cliquez sur « Fichier => Éditer le script ». Comme expliqué en introduction Qlikview fonctionne essentiellement en langage script ; la fenêtre qui s’affiche correspond au script d’exécution et de paramétrages principal.

Nous allons configure notre connexion ; en bas de cette vue se trouve le module de configuration de connexion aux bases de données. Sélectionnez ODBC puis cliquez sur le bouton « Sélectionner » (figure 5.2).

Figure 5.2 - Configuration de la connexion à la base de données

Renseignez ensuite le nom d’utilisateur et le mot de passe utilisateur pour votre base de données (figure 5.3) et cliquez sur le bouton « Créer une source ODBC ».

Figure 5.3 - Conenxion Base de données étape 2

Une nouvelle fenêtre apparait, cliquez sur l’onglet « Source de données machine » puis sur le bouton nouveau (figure 5.4 ) afin d’en afficher l’assistant (figure 5.5).

Figre 5.4 - Selection de la source de données

Figure 5.5 - Assistant nouvelle source de données

Cliquez sur suivant puis sélectionnez la source ODBC que vous souhaitez utiliser (figure 5.6).

Fiure 5.6 - Selection source ODBC

La fenêtre de connexion de pilote ODBC s’affiche, complétez les informations nécessaires (5.7)

Figure 5.7 - Configuration ODBC MySql

Validez l’ensemble des fenêtre.

Nous venons de configurer notre connexion !

Maintenant, toujours dans la fenêtre de script, cliquez sur « Sélectionner » et dans la fenêtre qui s’affiche, sélectionnez les champs qui vous intéressent. Cochez la case « Avant load » et valider (figure 5.8).

Figure 5.8 - Instruction select

Voilà ce que vous devriez obtenir dans la fenêtre de script (j’ai inclus des instructions ‘as’ afin de rendre mes champs plus lisibles).

Code Qlik :

SET MoneyDecimalSep=',';
SET MoneyFormat='# ##0,00 €;-# ##0,00 €';
SET TimeFormat='hh:mm:ss';
SET DateFormat='DD/MM/YYYY';
SET TimestampFormat='DD/MM/YYYY hh:mm:ss[.fff]';
SET MonthNames='janv.;févr.;mars;avr.;mai;juin;juil.;août;sept.;oct.;nov.;déc.';
SET DayNames='lun.;mar.;mer.;jeu.;ven.;sam.;dim.';
ODBC CONNECT TO [MySql ODBC];
LOAD id as 'ID',
titre as 'Titre',
auteur as 'Auteur',
price as 'Prix',
description as 'Description';
SQL SELECT *
FROM test.livres;

Note : Je ne me suis pas arrêté sur le début du script mais il correspond au style de formatage de vos données. Vous pouvez modifier le formatage si nécessaire.

Nous allons maintenant créer notre premier rapport.

VI – Premier rapport

J’ai créé une nouvelle feuille (conception => ajouter une feuille) que j’ai appelé liste des livres. La première chose à faire est de cliquer sur l’icône « recharger les données ». Une fois cette opération réalisée, faites un clic droit sur la feuille active puis dans le menu contextuel, choisissez « Ajouter des champs ». Sélectionnez les champs que vous souhaitez afficher dans votre rapport (figure 6.1).

Fiure 6.1 - Sélection des champs de la base de données

Vous pouvez maintenant voir apparaître sur la feuille active la liste des champs et données (figure 6.2).

Figure 6.2 - Liste des champs et données

Vous pouvez déplacer et modifier ces listes pour les rendre plus lisibles et accessibles.

Il est possible de personnaliser chaque liste ; pour cela, cliquez droit sur l’un des éléments (figure 6.3) et dans le menu contextuel, cliquez sur « Propriété ». Voici les éléments important que vous pouvez modifier et/ou personnaliser (figure 6.4) :

• Titre de l’élément
• Ordre de tri
• Formatage des nombres
• Apparence

Figure 6.3 - Menu contextuel champ

Figure 6.4 - Propriété des champs

Maintenant, si vous sélectionnez l’un  des éléments (l’auteur par exemple), vous pouvez vous apercevoir que les autres éléments liés à cette sélection se mettent en surbrillance (en blanc) (figure 6.5).

Figure 6.5 - Sélection de données dans la liste

Vous pouvez exécuter des recherches en cliquant sur l’icône loupe de chaque liste (figure 6.6).

Figure 6.6 - Recherche textuel

Nous venons de voir comment il est simple de réaliser un rapport avec QlikView ; Ce rapport est simple, ce n’est en réalité qu’un simple affichage par liste de données MySql. Cela dit, nus pouvons aller beaucoup plus loin dans la manipulation de données QlikView.

Le schéma ci dessous vous donne un aperçu des différents affichages disponibles (figure 6.7)

Exemple de différents objets

VII – QlikView et les jointures

Je vais maintenant vous montrer comment réaliser des jointures entre différentes tables. J’ai créé une nouvelle feuille dans mon projet actif.

Vous trouverez ci-dessous le script Qlik ; j’ai simplement créé une table « catégories » dans ma base de données. Ma table livres quant à elle dispose d’un champ « categorie_id » correspondant aux différentes catégories.

Code Qlik :

SET MoneyThousandSep=' ';
SET MoneyDecimalSep=',';
SET MoneyFormat='# ##0,00 €;-# ##0,00 €';
SET TimeFormat='hh:mm:ss';
SET DateFormat='DD/MM/YYYY';
SET TimestampFormat='DD/MM/YYYY hh:mm:ss[.fff]';
SET MonthNames='janv.;févr.;mars;avr.;mai;juin;juil.;août;sept.;oct.;nov.;déc.';
SET DayNames='lun.;mar.;mer.;jeu.;ven.;sam.;dim.';
ODBC CONNECT TO [MySql ODBC];
//Liste des livres
LOAD id as 'ID',
titre as 'Titre',
auteur as 'Auteur',
price as 'Prix',
categorie_id as 'Catégorie ID',
description as 'Description';
SQL SELECT *
FROM test.livres;
//Catégories de livres
LOAD id as [Catégorie ID],
libelle as [Libellé],
subcategorie as [Sous-catégorie];
SQL SELECT id,
libelle,
subcategorie
FROM test.categories;

Une fois le nouveau script saisi et enregistré, chargez les données à l’aide de l’icone recharger . Ensuite, dans le menu principal, cliquez sur « Fichier => Visionneur de tables » (figure 7.1).

Figure 7.1 - Menu visionneur de tables

Une nouvelle fenêtre s’affiche avec nos deux tables (figure 7.2) ainsi qu’un lien entre notre champ catégorie et id. Ce lien s’execute automatiquement car nous avons donné des alias identiques à nos deux champs.

Figure 7.2 - Fenêtre du visionneur de table QLikView

Nous allons ajouter un objet de type « tableau » (figure 7.3). Cliquez sur appliquer puis valider et vous obtiendrez un tableau avec les champs joints (figure 7.4).

Figure 7.3 - Création d'un tableau de données

Figure 7.4 - Résultat du tableau avec jointure

VIII – Les graphiques

Nous allons ajouter à notre rapport un simple graphique listant le nombre de livre par catégorie.Clique droit sur la feuille puis « Ajouter un objet => Graphique ».Complétez les informations nécessaires (figure 8.1 à 8.3) .

Figure 8.1 - Création d'un graphique - Etape 1

Figure 8.2 - Création d'un graphique - Etape 2

Figure 8.3 - Création d'un graphique - Etape 3

Une fois renseigner l’ensemble des informations, vous pouvez valider. Vous devriez obtenir le résulat suivant (figure 8.4).

Figure 8.4 - Résultat création graphique

Vous pouvez cloner l’objet que nous venons de créer afin de le décliner dans une autre forme ; pour cela, clic droit sur l’objet puis cloner (figure 8.5).

Figure 8.6 - Clonage objet graphique

Modifier l’élément en cliquant sur propriété dans le menu contextuel puis sélectionnez un autre type de graphisme ; Dans l’exemple j’ai choisi un Tableau croisé dynamique (figure 8.6).

Figure 8.6 - Sélection tableau croisé dynamique

Validez afin de visualiser le résultat (figure 8.7).

Figure 8.7 - Résultat tableau croisé dynamique

IX – Conclusion

Vous venez de découvrir en quelques minutes QLikView. Ce logiciel est relativement simple à prendre en main et le rendu est surprenant !

J’aurai l’occasion dans un autre tutoriel en cours de préparation de vous présenter d’autres possibilités qu’offre cette solution.

Le décisionnel devient accessible sans connaissance extrêmes du langage SQL.

Je suis persuadé que lorsque vous développez un site WEB, vous avez un multitude de logiciels ouverts sur votre bureau ; encore aujourd’hui, j’utilise Gimp pour éditer des images aux coins arrondis. Bientôt, avec CSS3, nous allons pouvoir nous passer d’éditer certaines images et gagner un temps précieux dans le développement de nos sites.

Dans cet article, je vais vous montrer certaines techniques CSS3 qui vous permettront de changer vos méthodes de travail.

CSS3? What’s that?! Qu’est-ce que c’est?!

Je suis sûr que vous avez entendu parler de CSS en général. CSS3 n’est pas très différent, en termes de syntaxe, mais la puissance de CSS3 est beaucoup plus grande. Comme vous le verrez dans ces techniques comment il est possible redimensionner dynamiquement des éléments, créer des ombres de texte, et plus encore!

Voici la définition donnée par le W3C de CSS3 :

CSS3 est le petit nouveau dans la famille feuille de style. Il offre de nouvelles possibilités intéressantes pour créer un impact avec vos dessins, vous permet d’utiliser des feuilles de style plus variés pour des effets de style beaucoup plus puissants et variés.

1°) Les coins arrondis en CSS3

Alors qu’auparavant il était nécessaire de créer des coins arrondis avec des images ou encore utiliser javascript il est désormais possible de faire appel à CSS3 ; Voici le code et le résultat (figure 1) que vous obtiendrez avec la propriété ‘border-radius’ :

<style type="text/css">
.box {
 background: #e3e3e3;
 border: 1px solid #000; border-radius : 10px;
 width:150px;
 height:150px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
</style>

<div><!--CONTENT--></div>

Figure 1 - Résultat obtenu avec la propriété corner radius

Vous avez la possibilité de manipuler chacun des coins ; voici un exemple courbant les coins haut gauche et bas droit (figure 2) :

<style type="text/css">
.box_2{
 background: #e3e3e3;
 border: 1px solid #000; border-radius : 10px;
 width:150px;
 height:150px;
 -moz-border-radius-topleft: 10px;
 -webkit-border-top-left-radius: 10px;
 -moz-border-radius-bottomright:10px;
 -webkit-border-bottom-right-radius:10px;
}
</style>
<div><!--CONTENT--></div>

Figure 2 - Coins arrondis sur deux angles

2°) Les ombre sur div en CSS3

Encore une fois CSS3 va nous faire gagner du temps ; fini les DIV superposés et décalés ou encore l’utilisation de javascript pour générer de belles ombres. La propriété ‘box-shadow’ nous permet maintenant de réaliser ce type d’effet (Figure 3)

<style type="text/css">
.box_3 {
 background: #e3e3e3;
 border: 1px solid #000; border-radius : 10px;
 width:150px;
 height:150px;
 box-shadow: 10px 10px 5px #888;
 -moz-box-shadow: 10px 10px 5px #888;
 -webkit-box-shadow: 10px 10px 5px #888;
}
</style>
<div><!--CONTENT--></div>

Figure 3 - Ombre portée sur un DIV

Voici les propriétés de notre élément ‘box-shadow’ :

1. Décalage horizontal : en négatif le décalage sera à gauche en positif, il sera à droite
2. Décalage vertical : négatif il sera vers le haut, positif il sera vers le bas
3. Rayon de flou : par défaut 0, c’est à dire aucun.

3°) Les ombres de texte en CSS3

Voici le code vous pemettant d’implémenter ce nouvel effet CSS3 ; Vous verrez en figure 4 le résultat, la première ligne sert à montrer la différence entre un texte sans ombre et un second avec :

<style type="text/css">
.not-shadowed{
 color:blue;
 font-size:20px;
}
.shadowed{
 color:blue;
 font-size:20px;
 text-shadow: 0 1px 0 #000;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>

Figure 4 - Text shadow

Les propriétés sont les mêmes que pour un DIV.

4°) Les polices de caractères embarquées :

Nous en avons rêvé pendant longtemps, CSS3 l’a fait ! Il est maintenant possible de choisir votre police et de l’utiliser dans vos pages WEB – veillez toutefois à faire attention aux droits d’utilisation, toutes les polices ne sont pas libres de droit. Dans l’exemple suivant, j’ai opté pour la police ‘LIBRE’.

<style type="text/css">
@font-face {
 font-family: 'libre';
 src: url('design/mido_igual.ttf');
}
.font {
 font-family: libre;
 font-size: 30px;
}
</style>

<p>Lorem ipsum dolor sit amet...</p>

Figure 5 - CSS3 et police embarquée

5°) CSS3 et opacité :

Vous pouvez maintenant gérer l’opacité des éléments HTML dans vos feuilles de styles ; Il était déjà possible de réaliser cette opération avec les propriétés CSS ‘opacity’ et ‘filter’. Maintenant la tache est plus facile comme vous pouvez le voir :

<style type="text/css">
.main-box{
 background:red;
 height:200px;
 width:200px;
 border:1px solid #000;
}
.box_4 {
 height:100px;
 width:100px;
 opacity: .6;
 border:1px solid #000;
 background:#C3C3C3;
 float:left;
 margin-left:150px;
 margin-top:50px;
}
</style>
<div>
 <div>
 <!--CONTENT-->
 </div>
</div>

La figure 6 vous montre un carré gris dont l’opacité est fixée à 60% :

Figure 6 - Opacité d'un élément

6°) Taille des « background »

Il est maintenant possible d’utiliser la propriété ‘background-size’ ; cette propriété sert à fixer la tailles des backgrounds ce qui était jusqu’alors impossible.

Voici un exemple avec une image dont la taille initiale est de 400px X 566px et ramenée à 50% d’un div dont les dimensions sont de 200px X 200px :

<style type="text/css">
.box_5 {
 height:200px;
 width:200px;
 border:1px solid #000;
 background:#C3C3C3;
 background: #ccc url(medias/img_400x566.png) no-repeat;
 -moz-background-size: 50%; /* Mozilla */
 -webkit-background-size: 50%; /* Safari */
 -o-background-size: 50%; /* Opera */
 -khtml-background-size: 50%; /* Konqueror */
}
</style>

<div>
 <!--CONTENT-->
</div>

Figure 7 - Propriété Background-size

Attention ! Le résultat ne sera pas le même sur tous les navigateurs ! Pour exemple, Mozilla conserve les proportions de votre image ce qui n’est pas le cas sur Chrome…

7°) Propriétés columns :

Voici une propriété qui vous permet de diviser un DIV en plusieurs colonnes. pour cela, il vous suffit d’en spécifier le nombre.

<style type="text/css">
.columns {
 width:600px;
 -moz-column-count: 2;
 -webkit-column-count: 2;
}
</style>

<div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

Figure 8 - Propriété colonnes

8°) Bordures ‘images’

Euh… Comment dire ? l’utilité de cette nouvelle propriété est contestable mais elle a le mérite d’exister. Donc, vous allez pouvoir créer des bordures à partir d’images.

Je ne vais pas m’étendre sur cette propriété donc passons tout de suite au code et au résultat :

<style type="text/css">
.box_6 {
 height:200px;
 width:200px;
 border-width: 20px;
 -webkit-border-image: url(design/border2.png) 27 round;
 -moz-border-image: url(design/border2.png) 27 round;
 border-image: url(design/border2.png) 27 round;
}
</style>

<div>
 <!--CONTENT-->
</div>

Figure 9 - Image source

Figure 10 - Résultat d'une bordure 'image'

Les sélecteurs CSS3

Je n’ai pas d’exemple imagé, sachez simplement que de nouveaux sélecteurs font leur arrivée dans vos feuilles de style ; Cela signifie que vous pourrez créer des design encore plus puissants et personnalisés.

Je vous renvoi à l’excellent article parru sur le site www.456bereastreet.com

Je réaliserai un post complet à ce sujet dans les jours qui viennent.

Conclusion

Vous venez de consulter quelques techniques CSS qui vous faciliteront le développement de vos interfaces et design WEB. Malheureusement, il faudra encore attendre un peu avant que ceci soit réalisable sur tous les navigateurs… alors pensez utilisateurs et dites vous bien que de nombreuses personnes n’aurons pas accès à toues ces propriétés.

Mallette en cuir réalisée sous The Gimp

Nous allons voir ensemble comment réaliser cette mallette en cuir ; Il s’agit en fait à la base d’une mallette réalisée sous Photoshop et dont j’ai adapté la réalisation sur mon logiciel préféré

Avant de commencer vérifiez que vous avez 1 heure devant vous

Informations sur le tutoriel :

• Logiciels utilisés : The Gimp !
• Difficulté : Avancée
• Durée de réalisation : 1 à 2 heures

Étape 1 – Préparation

1ere chose et pas des moindres, il vous faut le logiciel The Gimp ! , pour ceux qui ne connaissent pas ce logiciel et qui ne le possèdent pas encore, je vous invite à consulter ce Post => Post : The Gimp !

Si vous possédez le logiciel et que ce dernier est installé, il ne vous reste plus qu’à le lancer et créer un nouveau document ; J’ai choisi un document 1000*1000 ce qui vous permettra d’avoir un bon rendu, si vous le souhaitez, vous pouvez réduire cette taille… (voir figure 1)

Figure 1

Étape 2 – Le Patron

Nous allons créer le patron, c’est à dire la forme principale de notre mallette.

Créez un calque que vous appellerez « mallette_bas », sélectionnez l’outil rectangle et dessinez un rectangle avec les propriétés que vous pouvez voir en figure 2.

Figure 2

Remplissez ce rectangle d’une couleur quelconque et vous devriez obtenir le résultat suivant (Figure 3).

Figure 3

Nous allons maintenant créer notre patron haut qui correspond au battant de notre mallette. Pour cela, nous allons utiliser l’outil rectangle et placer cette forme au dessus de notre élément bas ; il faudra veiller à ce que cette forme soit un peu plus grande que notre élément bas

Vous devriez obtenir le resultat suivant (Figure 5)

Figure 5

Une fois cette opération réalisée, vous pouvez réaliser les arrondis à l’aide de l’outil ellipse. Ceci va nous permettre de donner de l’arrondi à notre mallette. Pour ce faire, créez un calque que vous nommerez « tmp_arrondi_haut », puis réalisez un ellipse comme montré ci-dessous (Figure 6).

Figure 6

Dupliquez ce calque et nommez le « tmp_arrondi_bas » et placez le en bas pour obtenir le résultat suivant (Figure 7).

Figure 7

Nous allons réaliser le même type d’opération mais pour les arrondis latéraux. Procédez de même que pour les arrondis bas et haut afin d’obtenir le résultat suivant (Figure 8).

Figure 8

Figure 9

Fusionnez l’ensemble des calques temporaires (tmp_….) avec le calque « patron_haut » puis réalisez un Alpha ver sélection de ce dernier calque et remplissez d’une couleur quelconque. Vous devriez obtenir le résultat suivant (Figure 10).

Figure 10

Étape 3 – Couleur et relief

Nous allons aborder la phase de couleur dans un 1er temps. Dans votre logiciel, sélectionnez l’outil « Dégradé » puis modifiez respectivement la couleur de 1er et 2eme plan comme ceci (Figure 11 et 12)

Figure 11

Figure 12

Créez un nouveau calque (au dessus du patron bas) et nommez le « Mallette_bas ». Faites un Alpha vers sélection de votre patron bas et sélectionnez votre nouveau calque afin de réaliser un dégradé du haut gauche ver bas droit de la sélection active. Vous devriez obtenir le résultat suivant (Figure 13).

Dupliquez ce calque et nommez le nuages_bas ; Sélectionnez ce calque puis réalisez les opérations suivantes :

Clique Droit =>Rendu => Nuages => Nuage par différence

Appliquez les réglages comme indiqué sur la figure 14 (La graine n’a que peu d’importance faites ce que bon vous semble en mode aléatoire) et obtenir le résultat présent en figure 15.

Figure 14

Figure 15

Réglez l’opacité de ce calque sur 10 et fusionnez vers le bas.

Étape 4 – La texture

Maintenant que votre patron est terminé, nous allons passer à la texture. Pour notre exemple, vous pouvez utiliser tout type de texture de type cuir ; Je vous en livre une qui est celle utilisée pour mon tutoriel.

Texture Cuir

Une fois téléchargé, placez cette image sur un nouveau calque (Vous pouvez glisser=>déposer) et dupliquez la. Masquez l’une des textures.

Sélectionnez le calque « Patron_bas » et faites un clic droit pour afficher le menu contextuel puis choisissez « Alpha vers sélection » ; cette action à pour effet de rendre la forme sélectionnée.

Cliquez sur le calque de texture pour l’activer puis inverser la sélection (Sélection=>Inverser) puis faites un Suppr.

Nous allons ajouter un peu de relief à notre mallette, sélectionnez le patron bas puis faite une réduction de la sélection de 4px. Il faut maintenant réaliser un dégradé blanc vers transparent de 50px qui partira de notre sélection vers le cente et ceci dans chacun des coins. Une fois cette opération réalisée, appliquez un flou gaussien de 25 afin de nuancer la lumière.

Réalisez une reduction de la selection de 20px puis réalisez la même opération mais avec un dégradé de noir vers transparent. Ceci va permettre de donner un effet de profondeur. Voici le resultat que vous devriez obtenir (figure ?).

Figure

Vous pouvez réaliser les mêmes opérations pour le patron haut. Je vous laisse faire, voici ce que vous devriez obtenir.

jQuery est sans doute l’un des plus puissant Framework  JavaScript. Une de ses forces réside dans le développement de plug-in facile à intégrer et à développer.

Dans ce tutoriel, nous allons voir comment développer un plug-in jQuery autour d’un simple carrousel pour publier vos images ou réalisations graphiques.

Etape 1 – Préambule

Avant toute chose :

Si vous répondez oui à l’ensemble de ces questions, vous pouvez continuer à suivre ce tutoriel :

• Je connais jQuery et je sais l’intégrer dans une page WEB
• Je sais comment déclencher une action à l’aide de jQuery
• J’ai un éditeur de code HTML / CSS / JAVASCRIPT
• Je sais comment initialiser jQuery

Continuons…

Informations techniques :

J’utilise Aptana IDE comme éditeur

La version jQuery utilisée est la suivante : 1.4.2

Etape 2 – Comprendre

Qu’est-ce qu’un plugin jQuery ?

Un plugin jQuery est un ensemble de fonctions que l’on va rajouter à l’espace de noms de jQuery de manière à enrichir les possibilités du framework. De nombreux plugins existent déjà (la page des plugins jQuery), qu’il s’agisse de créer de nouveaux widgets, de rajouter des fonctions aux opérations de base de jQuery ou de créer de nouveaux comportements. Un plugin est avant tout une fonction qui sera appelable sur un objet jQuery, il sera composé d’une fonction publique et de plusieurs fonctions privées incluses dans la fonction publique.

Dans sa structure, jQuery est fait pour que tout le monde puisse y rajouter facilement des plugins. Un espace de noms est dédié aux plugins : $.fn. Chaque plugin que vous rajouterez est censé se trouver à cet endroit. En créant du contenu dans $.fn.exemple(paramètres), votre plugin sera appelable directement par jQuery.exemple(paramètres). Un plugin sera appliqué sur un objet jQuery, provenant par exemple d’une recherche dans le DOM de la page et possèdera des paramètres, indiqués par le développeur.

Etape 3 – Initialiser

Nous allons commencer par créer un nouveau fichier JavaScript ; dans le cadre de notre tutoriel j’ai décidé d’appeler mon plugIn « sldGal ». Chose important, veillez à ce que le nom de votre plugin soit unique . Il nous faudra également un document de base « index.html ».

Code du fichier index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>slDesign - Tutoriel Plugin jQuery</title>
<link href="design/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/sldGal.js"></script>
</head>
<body>
<!-- Contenu principal -->
</body>
</html>

Code du fichier sldGal.js

/**
 * sldGals.js - jQuery plugin
 */

//initialisation du plugin
(function($) {
 $.fn.sldGal = function(options) {
 //Initialise les options par défaut de notre plugin
 var defaults = {
 title: ""
 //Ajout des options ici...
 };   

 //Récupére les paramètres par défaut si ces paramètres ne sont pas fournis à la fonction.
 var opts = $.extend(defaults, options); 

 //Nous déclancherons notre fonction ici
 return $(this);
 };
})(jQuery);

3- Le code

Cette partie est en cours de refonte… Merci de votre compréhension…