Slapandthink

Web / Dev / Code

Framework front-end : Introduction

- Intégration

Le développement front-end suit une perpétuelle évolution. Toujours un dernier plugin, une dernière librairie javascript, technique CSS3 ou HTML5 à utiliser ou tester dans un projet. On développe avec des plugins en bêtas sans jamais trop savoir si ils conviendront pour le prochain projet et si ils seront maintenus dans le temps. De plus, le besoins de développer des interfaces adaptatives et responsives nécessite d’avoir de bonnes bases et d’effectuer des tests récurrents sur les différents types de résolutions.

Mais depuis quelque temps, les frameworks front-end ont su se trouver une place dans le développement de nos interfaces et webdesign. C’est ainsi que les Twitter Bootstrap, Foundation, Gumby, Skeleton… sont de plus en plus vus et utilisés dans nos projet.

La base

Premièrement, histoire d’enfoncer des portes déjà ouvertes et de mettre toute les choses à plat, le développement front-end est un mix de plusieurs langages et techniques qui permettent de créer le design interactif de chaque site web sur lequel vous naviguez.

Sans entrer dans les détails car ce n’est pas le sujet de ce billet, nous avons 3 grands langages que nous utilisons au quotidiens:

front-end development schema

Le développement front-end regroupe 3 grands langages.

 

  • HTML : langage sémantique permettant de ranger les différentes informations (ou contenus) dans des balises ayant différents niveaux d’importance et différentes significations
  • CSS : permettant d’appliquer une couche graphique à tout cela (couleur, style de boite, dimensions …)
  • Javascript : principalement pour les interactions (malgré le fait que certaines propriétés CSS3 tendent à renverser cet aspect, notamment pour les effets visuels) cotés client, comme le changement de contenu dynamique, la possibilité de trier un tableau à la volée etc…

Explications

Les frameworks front-end permettent de disposer de code et markup déjà testés, stylisés et interactifs. Il en existe plusieurs types. Certains se concentrent sur un système de grilles adaptatives, d’autres sur l’aspect structurel de la page et l’arborescence du projet, d’autres encore, s’occupent de tout cela à la fois avec des éléments d’interface utilisateur déjà développés et testés.

Tout cela créé dans un seul but, augmenter la productivité des développeurs et donc diminuer le temps de développement front-end.

grid system

Le système de grilles adaptatives convient pour toutes les dimensions d’écran.

Les frameworks de grilles

Les systèmes de grilles permettent de disposer son contenu suivant des dimensions précises, une armature en somme.

Les grilles sont constituées de colonnes verticales, séparées par des gouttières permettant de structurer le contenu. Ces colonnes disposent de marges externes (pour les éventuels bords de la fenêtre) et internes (de chaque axe).

C’est une aide autant pour le designer que pour le visiteur, car cela permet d’atteindre un équilibre harmonieux entre l’espacement et l’organisation des différents blocs de contenu.

Ces grilles sont developées pour être adaptatives (en utilisant les medias queries) et suivent en toute logique les dimensions de l’écran qui les affiche. Ainsi, une grille de 12 colonnes par défaut (mode desktop) n’en affichera que 4 en mode tablette et une seule en mode mobile. Les colonnes passent donc les unes sous les autres, changent de largeur ou disparaissent suivant le comportement voulu. Tous ces comportements sont dirigés par les classe CSS du framework. Chaque framework de grille choisit son nombre de colonnes, 12 étant le plus répandus, il y en a avec 16 ou encore 24 colonnes.

responsive-grid-system

Responsive Grid System

Muller Grid System

Muller Grid System

Quantum Framework

Quantum Framework

Golden Grid System

Golden Grid System

1140px CSS Grid System

1140px CSS Grid System

Frameless Grid

Frameless Grid (LESS & SASS)

unsemantic sass

unsemantic (SASS)

Semantic GS

Semantic GS (LESS)

Bourbon Neat (SASS)

Bourbon Neat (SASS)

Profound Grid (SASS)

Profound Grid (SASS)

Ces frameworks de grilles sont pour la plupart développés avec des pré-processeurs CSS comme SASS ou LESS, ce qui permet de modifier les dimensions des colonnes pour son design. Il possèdent aussi les grilles au format PSD pour que les webdesigners puisse créer leurs interfaces aux parfaites dimensions du framework utilisé. Il existe aussi des générateurs en ligne pour personnaliser ses grilles http://bgg.kematzy.com/.

html5boilerplate

HTML5 Boilerplate

HTML5 Boilerplate est un template professionnel permettant de disposer d’une architectures de fichiers, des templates et des fichiers de configurations directement utilisable. Il assure une base robuste pour le développement des application en incluant des fichiers de configurations (.htaccess …) activant diverses options propices pour la plupart des projets. Tout cela en respectant les “best practices” de chaque langage.

Il inclut :

  • des librairies javacripts jQuery et Modernizer
  • des codes Google analytics
  • du CSS : Normalize et quelques helpers, des styles de bases et des medias queries

Sa déclinaison pour les emails est aussi disponible : http://htmlemailboilerplate.com/

jquery-ui

Les framework d’interfaces

On retrouve principalement des framework javascript dans cette catégories. Chaque librairie possède ses frameworks d’interfaces. Par exemple, jQuery dispose de jQuery UI et de jQuery Mobile. Ce sont des éléments interactifs complets, complexes et stylisés permettant des réaliser différentes actions particulières. On ne parle pas ici, de faire un menu de navigation ou autre élément UI semblable, mais plus d’actions sensibles et complexes comme le fait d’afficher un calendrier pour sélectionner une date, afficher une popup ou modal, permettre de réorganiser des éléments en “drag’n drop”… Voici par exemple la librairie UI de jQuery et son équivalent mobile.

Il en existe beaucoup, payant ou non, développées avec et pour différentes librairies.

Kendo UI

Kendo UI

Wijmo UI

Wijmo UI

jQWidgets

jQWidgets

Zebra

Zebra

Sencha

Sencha

Sproutcore

Sproutcore

YUI

YUI

XUI

XUI

twitter-bootstrap

Les frameworks complets

Mais le plus intéressant reste quand même les frameworks complets regroupant les systèmes de grilles, les templates et strucures de page ainsi que les éléments d’interfaces utilisateurs.

Ces frameworks sont donc constitués de plusieurs parties et modules pour simplifier la vie du développeur et permettant de se concentrer sur la valeur ajoutée de son application.

Ils sont eux aussi très nombreux et possèdent chacun les particularités qui font leurs qualités comme leurs défauts.

Foundation

Foundation

Kube

Kube

Skeleton

Skeleton

Gumby

Gumby

InuitCSS

InuitCSS

Skeleton

Skeleton

Nous pouvons les découper en plusieurs parties:

HTML

Dans cette partie, nous retrouvons:

  • le système de grilles, permettant de disposer notre contenu efficacement et de manière visuellement confortable
  • les éléments d’interface utilisateur basiques
    • bandeau de navigations
    • boutons
    • éléments de formulaire (inputs, select, radios …)
    • éléments de typographie (styles de titres, citations, adresses …)
    • boite d’alerte
    • barres de progression

Voici un exemple de base avec le framework Twitter Boostrap et avec ses différents composants.

CSS

Dans cette partie, nous retrouvons:

  • l’utilisation de reset CSS ou Normalize pour uniformiser les styles CSS par défaut crossbrowser
  • des helpers: par exemple, des classes basiques pour cacher des éléments suivant une dimension d’écran, des medias quieries prêtent à l’emploi …
  • structure, architecture: Chaque framework et développé suivant un modèle d’organisation et une structure de code qui lui est propre. On retrouve les principes tels que SMACSS, OOCSS, BEM.
  • utilisation d’icônes par l’intermédiaire de font (par exemple : Glyphicons)

Voici un exemple avec le framework Twitter Boostrap

Javascript

Dans cette partie, nous retrouvons:

  • l’insertion de librairie javascript tel que jQuery
  • les éléments d’interface utilisateur plus évolués
    • des modales
    • des tabs
    • des dropdowns
    • des accordéons
    • des styles de galeries
    • des caroussels
    • des tooltips

Voici un exemple, toujours avec le framework Twitter Boostrap

Le principe des classes

Une fois que l’on a choisi le framework de son choix, il vient le moment de l’utiliser. C’est à ce moment précis, où l’on se rend compte du temps que l’on gagne en les utilisant. Une fois le framework prêt, les librairies et leurs dépendances assouvies, tout est une question de classes.

Exemple:

Pour créer un élément de navigation, il nous suffit de nous référer à la documentation du framework, et de respecter les différentes classes indiquées:

<div>
<div>
<a href="#">Title</a>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>
</div>

Le résultat est immédiat:

Barre de navigation

Barre de navigation – Twitter Bootstrap

Il nous reste plus qu’a remplir cet élément de navigation !

La démarche reste identique pour des éléments plus évolués comme des accordéons:

<div id="accordion2">
<div>
  <div>
    <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      Collapsible Group Item #1
    </a>
  </div>
  <div id="collapseOne">
    <div>
      Anim pariatur cliche...
    </div>
  </div>
</div>
<div>
  <div>
    <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
      Collapsible Group Item #2
    </a>
  </div>
  <div id="collapseTwo">
    <div>
      Anim pariatur cliche...
    </div>
  </div>
</div>
</div>
Collapse - Twitter Bootstrap

Collapse – Twitter Bootstrap

Conclusion

Voici pour cette introduction au framework front-end, ce billet n’a fait qu’effleurer le sujet, mais permet de se rendre compte qu’il en existe maintenant une multitude. Qu’ils soient légers, ou complets, chacun possède ses qualités et ses défauts, chacun obéie à une modélisation des données, une structure qui lui est propre. Ils ne peuvent être ignorer et permettent de ne pas réinventer la roue à chaque projet. Ils seront sûrement dans vos prochains projets si ce n’est pas déjà le cas.

HTML5 – Structure sémantique d’une page

- Intégration

Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises.

Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.

Structure d’un document HTML4

Le HTML4 dispose de plusieurs balise permettant la mise en forme sémantique des différents types de contenus, il permet de délimiter les éléments de bases, le corps du document (<body>), les titres (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>). Ces éléments se disposent à l’intérieur d’autres conteneurs, les div. Chaque élément peuvent avoir différents attributs comme des « id », des « class » mais aussi des « role » (utilisé pour la norme d’accessibilité ARIA). Nous pouvons commencer à mettre en forme notre contenu.

Exemples basiques

Ainsi, avec cette structure :

<body>
	<div id="conteneur">
		<div id="section">
			<h1>La neige</h1>
			<p>Voici un petit contenu sur la neige et ses caractéristiques ...</p>
			<h2>Le froid</h2>
			<p>...</p>
			<div id="sous-section">
				<h2>L'eau</h2>
				<p>...</p>
			</div>
		</div>
	</div>
</body>

Sera traduite sémantiquement par :

1. La neige
  1.1. Le froid
  1.2. L'eau
2. La glace

Et avec celle-ci :

<body>
	<div id="conteneur">
		<h1>La neige</h1>
		<p>Voici un petit contenu sur la neige et ses caractéristiques ...</p>
		<h2>Le froid</h2>
		<p>...</p>
		<h2>L'eau</h2>
		<p>...</p>
		<h1>La glace</h1>
	</div>
</body>

Sera traduite sémantiquement sous cette forme :

1. La neige
  1.1. Le froid
  1.2. L'eau
2.La glace

HTML4 vs HTML5

L’algorithme sémantique du HTML4 est donc imprécis, il ne fait pas la différence entre une <div> utilisée pour styler un élément et une autre pour séparer un contenu.

Le HTML5 permet de s’affranchir de ces <div> de séparation sémantique avec une nouvelle balise <section>.

Le HTML5 permet l’inclusion de documents à plusieurs niveaux, vous pouvez donc avoir plusieurs éléments enfants sémantiquement reliés à votre élément parent. De nouvelles balises (<article>, <section>, <nav> et <aside>) sont autant de sections, d’éléments pouvant être imbriqués pour un contenu cohérent.

Le HTML5 introduit le <hgroup> qui va vous permettre de donner une description d’un titre principale ou même un titre secondaire en les liant sémantiquement.

En HTML4, tout les sections présentés sont en rapport direct avec le document. Cette structure est trop limité, il est important de pouvoir afficher un contenu, un section possédant un rapport au document en général et non direct, comme une publicité ou plus d’informations sur un contenu en particulier. Pour cela le HTML5 a introduit la balise <aside> (utilisée typiquement dans les « sidebares »).

Le HTML5 permet maintenant de disposer d’éléments affichant des informations générales sur un site web et non sur le document, ou la page actuellement consultée. Les éléments <footer>, <nav> et <header> sont donc des éléments permettant de décrire des fonctions propres au site web ou à l’application, comme la navigation avec la balise <nav> par exemple.

Le HTML5 permet une mise en forme sémantique du contenu par section, importance et fonctionnalité, tout en assurant les éléments de style. Il est donc une évolution sémantique du HTML4 tournée vers la déduction des éléments et l’expérience utilisateur.

HTML5 mise en forme

Ainsi, si l’on traduit en HTML5 l’exemple plus haut nous arrivons à ce résultat :

<body>
	<section>
		<h1>La neige</h1>
		<p>Voici un petit contenu sur la neige et ses caractèristiques ...</p>
		<section>
			<h1>Le froid</h1>
			<p>...</p>
		</section>
		<section>
			<h1>L'eau'</h1>
			<p>...</p>
		</section>
		<aside>
			bloque de publicité
		</aside>
	</section>
	<section>
		<h1>La glace</h1>
	</section>
	<footer>
		copyright exemple
	</footer>
</body>

Cela va être traduit par :

1. La neige
  1.1. Le froid
  1.2. L'eau
2. La glace

Chaque section possède sa propre hiérarchisation de données, ainsi les sections et sous-sections peuvent disposer des <h1>, <h2>, <h3>…

HTML5 mise en forme d’une page

Le HTML5 a introduit de nouveaux éléments dans la définition de nouvelles sections et type de contenu d’un document web :

  • <aside> définit une section qui tout en étant reliée au contenu générale du document, ne fait pas à proprement parler de celui-ci. Cette section apporte un contenu nouveau sur le document ou un publicité dans les cas les plus fréquents.
  • <nav> définit une section contenant des liens de navigation. Il peut y avoir plusieurs de ses sections dans un document.
  • <header> définit la partie du site avec le logo, le nom et le slogan, ainsi que sa barre de navigation.
  • <footer> définit la partie du site contenant le copyright, les informations légales, des liens de navigation.

De nombreuses autres balises ont vu le jour, notamment pour les adresses et les éléments de date, mais ce n’est pas dans l’objet de cet article.

Avec ces bases nous pouvons commencer à apercevoir comment traduire une structure de page basique :

Tous ces structures sont en guise d’exemples, chaque projet, chaque site web doit faire sa propre adaptation de structure.

<body>
	<header>
		<h1>Nom du site</h1>
		<h2>Slogan du site</h2>

		<nav>
			<a href="#">Lien1</a>
			<a href="#">Lien2</a>
			<a href="#">Lien3</a>
		</nav>
	</header>
	<section>
		<h1>Les derniers articles</h1>
		<article>
			<h1>Mon premier article</h1>
			<p>Lorem ipsum dolor ...</p>
		</article>
		<article>
			<h1>Mon deuxième article</h1>
			<p>Lorem ipsum dolor ...</p>
		</article>
		<article>
			<h1>Mon troisième article</h1>
			<p>Lorem ipsum dolor ...</p>
		</article>
	</section>
	<aside>
		Sidebar
	</aside>
	<footer>
		copyright
	</footer>
</body>
html5 structure basique

HTML5 – Structure sémantique basique

Une forme un peu plus complexe :

<body>
	<header>
		<hgroup>
			<h1>Nom du site</h1>
			<h2>Slogan du site</h2>	
		</hgroup>

		<nav>
			<ul>
				<li><a href="#">Lien1</a></li>
				<li><a href="#">Lien2</a></li>
				<li><a href="#">Lien3</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<h1>Les derniers articles</h1>
		<article>
			<header>
				<h1>Mon premier article</h1>
			</header>
			<p>Lorem ipsum dolor ...</p>
			<aside>
				Plus d'informations
			</aside>
			<footer>
				Informations du footer, auteur, catégorie ...
			</footer>
		</article>
		<article>
			<header>
				<h1>Mon premier article</h1>
			</header>
			<p>Lorem ipsum dolor ...</p>
			<aside>
				Plus d'informations
			</aside>
			<footer>
				Informations du footer, auteur, catégorie ...
			</footer>
		</article>
		<article>
			<header>
				<h1>Mon premier article</h1>
			</header>
			<p>Lorem ipsum dolor ...</p>
			<aside>
				Plus d'informations
			</aside>
			<footer>
				Informations du footer, auteur, catégorie ...
			</footer>
		</article>
	</section>
	<aside>
		Sidebar
	</aside>
	<footer>
		copyright
		<nav>
			<ul>
				<li><a href="#">Lien1</a></li>
				<li><a href="#">Lien2</a></li>
				<li><a href="#">Lien3</a></li>
			</ul>
		</nav>
	</footer>
</body>
html5 structure avancée

HTML5 – Structure sémantique avancée

 

 

 

Installation et configuration de Symfony2.1

- Développement

Symfony est un framework de développement php open-source édité et maintenu par Sensio Labs.

Depuis sa version 2.1, Symfony propose une nouvelle méthode d’installation (avec composer) permettant d’automatiser le téléchargement des différentes sources, la mise à jour et de nombreuses autres fonctions.

Il existe donc deux manières de télécharger l’archive du framework Symfony2, l’une en prenant directement l’archive « Symfony2 standard édition » sur le site officiel, la deuxième, en utilisant Composer.

Pourquoi passer par Composer ?

En passant par Composer, vous vous assurez un maintient constant de vos librairies et la faculté, de synchroniser, partager votre travail.

Pour télécharger Symfony2 avec Composer :

$ php composer.phar create-project symfony/framework-standard-edition chemin/de/votre/dossier/cible 2.1.x-dev

Pour télécharger une version spécifique de Symfony2, précisez-le en remplaçant le numéro de version par celui désiré.

Vérification de la configuration serveur

Pour bien fonctionner, Symfony2 a besoin d’avoir les droits en écriture et lecture sur les dossier « app/logs/ » et « app/cache/ » :

$ sudo chmod 777 app/logs
$ sudo chmod -R 777 app/cache

De plus, certaines extensions PHP sont conseillées afin de tirer les meilleurs performance de Symfony2. Nous allons donc installer (si ce n’est pas déjà fait) les extensions PHP « intl » et « apc ».

Note : L’extension php-intl permet l’internationalisation et la localisation de vos scripts. L’extension php-apc permet la mise en cache et l’optimisation de code.

$ sudo apt-get update
$ sudo apt-get install php5-intl
$ sudo apt-get install php-apc

Une fois que toutes les conseils et indications sont respectés, vous pouvez passer à l’écran suivant en cliquant sur le lien : « Bypass configuration and go to the Welcome page ». Vous voici devant la page de bienvenue de Symfony2.

Symfony – écran d’accueil

Note : Pour utiliser Symfony, et globalement, pour améliorer votre environnement de développement, je vous recommande de créer un virtual host dans votre configuration Apache, pointant dirrectement vers le dossier web de votre projet en court. Ainsi, il vous sera possible de travailler avec une adresse du type : http://sfproject.dev. Un tutoriel est disponible ici: Créer des hôtes virtuels (virtual hosts) avec Apache2

La plus grande partie de l’installation est faite, il ne vous reste plus qu’a créer une base de données MySQL dans votre phpmyadmin.

Configuration de Symfony

Une fois cette base de données créée, pour terminer votre installation, il ne vous reste plus qu’a vous diriger vers la section « configure » et entrer les données spécifiques à votre base de données.

Symfony – écran de configuration

Lorsque les informations sont rentrées, Symfony vous donne une clé de sécurité chiffrée. Gardez la précieusement, elle sera utile lorsque vous travaillerez avec les formulaires. Cette dernière, permet de se protéger des attaques CSRF des formulaires.

Une fois cette dernière étape, vous pouvez commencer votre projet, Symfony est prêt.

 

 

Créer des hôtes virtuels (virtual hosts) avec Apache2

- Développement

Le Serveur Web Apache2 est capable de gérer simultanément plusieurs arborescences Web grâce à la notion d’hôtes Virtuels (Virtual Hosts). Cela nous permet d’utiliser des hôtes virtuels pour séparer, ranger nos différents travaux en cours. En effet, lorsque vous vous retrouvez avec plusieurs projets, il est plus facile et moins contraignant de taper des adresses comme http://monprojet.dev plutôt que http://localhost/projets/nom_deçmon_projet/dev.

La création se fait simplement et en 3 étapes :

  1. Création du nom et redirection dans le fichier hosts
  2. Création de l’hôte virtuel dans la configuration de Apache2
  3. Redémarrer Apache2

Le fichier hosts

Dans un premier temps, nous allons définir les noms DNS pour notre projet dans le fichier hosts dans /etc/hosts

$ sudo gedit /etc/hosts

Rajoutez la ligne suivante concernant les informations sur votre projet (si vous en avez plusieurs, mettez chaque projet sur une adresse IP différente)

120.0.0.10 monprojet.dev

La configuration de Apache2

La deuxième partie se déroule dans le dossier /etc/apache2/sites-available

$ sudo gedit /ets/apache2/sites-available/default

Ajoutez ces lignes à la suite du fichier, en modifiant les données par vos informations (ces lignes correspondent aux instructions minimales requises) :

<VirtualHost *:80>
    DocumentRoot /var/www/chemin/vers/mon/projet
    ServerName monprojet.dev
    ServerAlias monprojet.dev
</VirtualHost>

Redémarrer Apache2

Une fois ces informations rentrées, il vous suffit de sauvegarder, puis de relancer le service Apache2.

$ sudo service apache2 restart

Vous pouvez vous rendre désormais dans votre navigateur web préféré et taper l’adresse http://monprojet.dev, vous avez ainsi accès à votre répertoire contenant votre projet web de manière plus simple et intuitive.

Pour aller plus loin :

Les hôtes virtuels dans Apache2

Installer en masse avec Composer

- Développement

Note : Pour connaître Composer et comment s’en servir, un article y est dédié ici.

Depuis quelques mois, un script Composer permet d’installer les principaux framework et CMS utilisés. On retrouve notamment Symfony2.1(natif), CackePHP, Magento, WordPress Drupal, Zend…

Voici la liste non exhaustive :

  • CodeIgniter
  • CakePHP 2+
  • Drupal
  • FuelPHP
  • Joomla
  • Kohana
  • Laravel
  • Lithium
  • Magento
  • Mako
  • MediaWiki
  • phpBB
  • PPI
  • SilverStripe
  • Symfony1
  • WordPress
  • Zend

L’utilisation ne diffère pas de ce que l’on connaît, tout se passe dans le fichier « composer.json ». Le plus important est de définir quel type de paquet est désiré et le chargement de l’installeur.

Par exemple, pour le plugin CackPHP :

{
    "name": "you/ftp",
    "type": "cakephp-plugin",
    "require": {
        "composer/installers": "*"
    }
}

Cela installera le paquet dans le dossier « app/Plugin/Ftp/ » avec la commande :

$ php composer.phar install

Plus d’informations et le téléchargement du script, direction le dépôt GitHub.

Ressource :

https://github.com/composer/installers

 

Namespace: les espaces de nom

- Développement

Les espaces de nom ou Namespaces, sont apparus à partir de la version 5.3 de PHP. Cette implémentation nous permet d’organiser notre code plus efficacement.

Les namespaces ont été implanté pour remédier à l’impossibilité de pouvoir déclarer deux fonctions sous le même nom. En effet, lorsque vous faite cela, sans utiliser les namespaces, vous rencontrer une erreur vous indiquant qu’une fonction, constante ou une classe, porte déjà ce nom et qu’il est impossible de la déclarer à nouveau.

L’utilité des namespaces est donc de pouvoir déclarer plusieurs fonctions, constantes (etc) ou classes sous le même nom.

Qu’est-ce qu’un Namespace

Pour décrire les namespaces, nous pouvons nous les représenter sous la forme de dossiers contenant des fichiers, vos fonctions, constantes ou classes.

Grâce à ces dossiers nous pouvons créer une arborescence et isoler, organiser nos fichiers dans leurs dossiers respectifs. Ainsi, plusieurs fichiers peuvent avoir le même nom, du moment qu’ils ne soient pas dans le même dossier.

Les namespaces sont des dossiers dans lesquels vous glissez vos fonctions, constantes, classes…

Tous ces nouveaux dossiers (namespaces) que vous allez créer, seront placés à l’intérieur d’un dossier racine, le namespace global. Ce dernier est utiliser de manière transparente. En effet, il ne porte aucun nom, mais il permet d’utiliser les fonctions natives de PHP (echo(), mysqli_connect(), strtolower()). De ce fait, vous l’utiliser sans le savoir.

Utiliser les Namespaces

Pour utiliser les namespaces, il existe plusieurs syntaxes et formes pouvant être utiliser. La plus simple étant de placer « namespace » puis le nom qui vous voulez lui donner dès le début de votre fichier.

Vous déclarer le namespace « Projet » ainsi :

<?php
    namespace Projet ;

  //suite du code

 

Vous pouvez aussi déclarer plusieurs namespaces dans un seul fichier :

<?php
    namespace Projet {
        hello_world(){
           ...
        }
    }

    namespace Utilisateur {
        hello_world(){
           ...
        }
    }

 

Si vous voulez revenir dans le namespace global de PHP :

<?php
    namespace {
        …
    }

Vous pouvez déclarer les mêmes namespaces dans des fichiers différents, PHP sait les fusionner lors de leur inclusion. Néanmoins, la bonne pratique veut que l’on ne déclare qu’un seul namespace par fichier, comme nous le faisons pour la définition des classes.

Vous n’êtes pas obliger d’utiliser les namespace, vos scripts PHP fonctionneront aussi bien.

Les Sub-namespaces

Reprenons l’image des dossiers. Avec les sub-namespaces, nous introduisons l’utilisation de sous-dossier. Ainsi ils sont très utiles pour hiérarchiser et organiser au mieux votre code. Si vous utilisez des libraires lors de vos projets, il est préférable de les isoler dans un namespace ou sub-namespace dédié à leur fonction.

PHP utilise le backslash « \ » pour séparer les différents namespace et sub-namespace. Ainsi, si nous voulons créer un namespace « Profil » à l’intérieur de « Utilisateur », nous avons :

<?php 
    namespace Utilisateur\Profil
    hello_world(){
        ...
    }

 

Les namespaces sont utilisés pour éviter les conflits et apportent plus de souplesse et d’organisation dans le code.

Appel de fonctions, constantes et classes

Nous avons plusieurs case de figures pour appeler une fonction, une classe ou une constante. Là encore, comme pour accéder à des fichiers, nous avons une manière relative et une absolue.

Relatif : Vous êtes relatif au namespace courant, c’est à dire que vous allez appeler l’élément depuis le namespace dans lequel vous êtes.

Absolue : Vous allez appeler l’élément depuis le namespace globale de PHP, en listant tous les sub-namespaces où cet élément ce trouve.

<?php
    namespace A\B {
        function hello_world(){
            ...
        }
    }
    namespace A {
        B\hello_world() ; //appel la fonction du namespace B de façon relative.
        \A\B\hello_world() ; //appel la fonction du namespace B de façon absolue
    }

Ici, deux notions sont à rajouter, lorsque vous appelez un élément, il est soit qualifié, soit non qualifié.

L’élément non qualifié est une fonction, une classe ou une constante appelée sans aucune allusion au namespace.

<?php
    namespace Utilisateur ;
    class Foo {
        static function ma_methode(){
            ...
        }
    }
    //classe non qualifiée car présente dans le namespace courant
    Foo:ma_methode();

 

L’élément qualifié est une fonction, une classe ou une constant appelée avec l’indication du namespace dans lequel elle figure.

<?php
    namespace Projet;
    require 'projet/utilisateur/profil.php;
    //classe qualifiée car appelée avec le namespace auquel elle appartient   
    $profil = new Utilisateur\profil();

 

Savoir dans quel namespace on se situe

Pour savoir dans quel namespace nous évoluons, une constant PHP « __NAMESPACE__ » est disponible. Cette dernier renvoie une chaîne de caractères contenant le nom du namespace, très utile lorsque vous commencez à jongler avec plusieurs namespaces.

<?php
    namespace Pojet\Utilisateur
    echo __Namespace__ ; //nous renvoie 'Projet\Utilisateur'

 

Namespace : les alias

Il est possible de définir un alias pour chaque namespace avec lequel nous voulons travailler.

Note : L’utilisation des alias pour les namespace n’a été implanté qu’à partir de la version PHP 5.4.

Pour cela, il vous faudra utiliser la syntaxe suivante :

use [nom du namespace] as [nom de l'alias]
<?php
 namespace Projet;

 require 'projet/utilisateur/profil.php';
 use Project\Utilisateur\Profil as MonProfil;
 $profil = new MonProfil();

 use Projet\Utilisateur as MonUtilisateur;
 $utilisateur= new Projet\MonUtilisateur();

 

Conslusion

Les espaces de nom ou namespaces, permettent d’éviter les conflits et apportent plus de flexibilité et d’organisation dans votre code. C’est une fonctionnalité de PHP implanté depuis la version 5.3, il n’y a aucune obligation de l’utiliser, elle n’est là que pour vous faciliter la vie.

 

Ressource:

Namespacing [net.tutsplus.com]

Composer, un gestionnaire de paquets simple et efficace

- Développement

Nous avons tous nos frameworks favoris, ces derniers utilisant pas mal de librairies comme les classes d’abstractions pour la manipulation de base de données (ORM comme Doctrine), l’authentification (monolog), ou d’autres intégrations, il devient assez confus de vouloir passer d’un framework ou d’un projet à un autre.

Lorsque l’on utilise ces technologies, nous sommes tributaire de leurs versions, un vrai casse tête quand il faut tout mettre à jour. Nous simplifier la vie, c’est ce que nous propose Composer en étant le chef d’orchestre de vos dépendances.

Qu’est-ce que Composer ?

Composer est un outils pour la gestion des dépendances en PHP. Il permet de déclarer les librairies dont vous avez besoin pour votre projet et les installe pour vous.

Composer est le chef d’orchestre de vos dépendances.

A l’image d’un chef d’orchestre, il va pouvoir manager vos dépendances, contrôler les versions, aller les chercher et les installer.

Composer répond à ces problèmes :

  1. Vous avez un projet utilisant des librairies.
  2. Certaines de ces librairies dépendent d’autres librairies.
  3. Vous déclarez celle que vous voulez utiliser.
  4. Composer trouve les bonnes versions de chaque paquet nécessaire, puis les installe en les téléchargeant dans votre projet.

Installation

Note : Avant d’installer Composer, vérifiez que la libraire CURL est bien installée et activée. Dans le cas contraire, un rapide « sudo apt-get install curl » et c’est réglé. De plus, Composer utiliser GIT pour rapatrier les paquets, il faut donc qu’il soit installé sur la machine et qu’il face partie de l’environnement de développement, là encore, un simple « sudo apt-get install git » résoudra le problème.

Composer est constitué de deux parties, celle du répertoire contenant les fichiers et autres paquets, et une partie en ligne de commande qui permet de tout mettre en forme. Composer est le chef d’orchestre, qui cherche, télécharge, met à jours et partage.

$ cd /chemin/vers/votre/projet
$ curl -s http://getcomposer.org/installer | php

Vous devriez avoir maintenant un fichier « composer.phar » dans le dossier de votre projet. Pour confirmer, vous pouvez lancer la commande pour afficher les options de Composer.

$ php composer.phar

Configurer Composer : composer.json

Le fichier composer.json est le fichier de configuration de Composer. C’est lui qui va vous permettre de définir les options et les dépendances dont votre projet à besoin.

Pour la version la plus simple, si l’ORM Doctrine est une librairie liée à l’application :

{
    "require": {
        "doctrine/orm": "*"
    }
}

Pour une version spécifique de la libraire (ici Doctrine), il faut préciser le numéro de version :

        "doctrine/orm": "2.2.2"

On peut aussi combiner ces deux syntaxes :

        "doctrine/orm": "2.1.*"

Ainsi, Composer s’occupera de faire les mises à jour automatiquement de version en version mais s’arrêtera avant de passer la 2.2.

Une fois l’information transmise sur les librairies et leurs versions, il ne reste plus qu’à renseigner dans quel dossier télécharger tout cela.

{
    "require": {
        "doctrine/orm": "*"
    },
    "config": {
        "vendor-dir": "packages"
    }
}

Installation / Téléchargement des paquets

Une fois que vous avez configuré le composer.json avec toutes les librairies que vous désirez ainsi que leurs versions. Il ne vous reste plus qu’a entrer :

$ php composer.phar install

Vos fichiers se téléchargeront dans le dossier spécifié.

Le fichier composer.lock est un fichier créé par Composer lors de son installation, dans lequel se trouve toutes les versions des paquets qu’il a déployé. Ce fichier servira de référent lors d’une mise à jour de libraires. Composer saura alors, quelle version est déjà installée et quelle version est à installer.

Le chargement automatique : autoload.php

Lors de son déploiement, Composer a créé de nombreux fichiers, mais plus particulièrement un fichier autoload.php qui permet le chargement automatique de toutes les librairies désirées.

Une seule ligne à insérer dans votre application suffit pour en profiter :

include_once 'vendor/autoload.php';

Conclusion

Comme beaucoup de frameworks utilisent de nombreuses librairies, certains ont déjà emboîté le pas, en utilisant Composer pour leurs gestion. Par exemple, FuelPHP, CodeIgniter et Symfony2 l’utilisent déjà.

Grâce à Composer et sa manière de gérer les dépendances, il permet de nous faire gagner un temps précieux, tout en évitant de travailler avec des versions de librairies dépréciées.

Ressources :

https://github.com/composer/composer

http://getcomposer.org/doc

Changer le nom de domaine d’un blog WordPress

- Développement

Lorsque l’on change de domaine ou même lorsque l’on déplace un site utilisant le CMS WordPress, il faut faire attention à ne pas oublier de modifier tous les liens internes du site.

En effet, WordPress sauvegarde dans sa base de données, toutes les informations concernant les chemins relatifs vers les fichiers que vous avec importés, en l’occurrence vos images. Il procède de la même façon pour le fonctionnement de vos menus personnalisés et de toutes ses options et configurations internes.

Mettre à jour les liens

Pour ne pas se retrouver avec un WordPress à l’agonie après un changement de domaine ou un transfère, le plus simple est de mettre à jour tous ses liens relatifs.

Pour effectuer cette mise à jour, trois requêtes MySQL suffisent :

UPDATE wp_options SET option_value = replace(option_value, 'http://www.ancien-site.com', 'http://www.nouveau-site.com') WHERE option_name = 'home' OR option_name = 'siteurl';

Cette requête MySQL va permettre de remplacer les références de votre ancienne adresse par la nouvelle dans la table wp_option.

UPDATE wp_posts SET guid = replace(guid, 'http://www.ancien-site.com','http://www.nouveau-site.com');

Celle-ci va changer l’adresse relative des postes dans la table wp_posts.

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.ancien-site.com', 'http://www.nouveau-site.com');

Enfin, cette dernière var rechercher toutes les occurrences de l’ancienne adresse dans le contenu de vos postes pour la remplacer par la nouvelle.

Une fois cette manipulation faite, il ne vous reste plus qu’a supprimer vos cookies puis vous connecter à l’interface d’administration.