Pour suivre, il est indispensable d’utiliser eclipse, car celui-ci possède un mode graphique pour la création de web-service qui va nous faciliter la vie.

Le fonctionnement

Vous savez certainement qu’un Web-Service est un programme qui permet la communication et l’échange de données entre des applications et des systèmes totalement différents.

Pour que le Web-Service puisse communiquer avec n’importe quels systèmes, il faut utiliser un même format de données. Pour nous, ça sera le SOAP(c’est un protocole procédural basé sur du XML). Dans ce format, il faut aussi bien définir les données qui seront reçues et envoyées par le Web-Service.

Ne vous inquiétez pas si cela vous paraît trop abstrait, on va tout expliquer avec un exemple.

Voici une petite illustration du fonctionnement de ce Web-Service :


Première étape :
L’application java va faire appel au web-service en envoyant un message WSDL (en SOAP).

Qui avait dit que c’était compliqué les web-service ?


Fini la théorie passons à la pratique, nous allons faire un Web-Service qui nous donne le jour en fonction de la date que l’on envoie.

Création du wsdl

Nous allons créer un nouveau projet que nous appellerons MonWebService (il n’y a pas plus clair ^^).


On va commencer par faire le format WSDL (fichier soap) de notre web service.

On le nomme monFormat.wsdl

Pour nous aider, Eclipse nous construit automatiquement un format wsdl par défaut, nous allons le reprendre et le paramétrer. Mais avant tout, je vais vous parler rapidement de l’interface.

C’est avec la boîte à gauche que l’on définit l’adresse du serveur du web-service ( c’est là où tout le traitement php va se faire), Dans le champ de saisie, il faudra mettre : http://localhost/MonWebService/serveur.php

Input qui représente les données que va recevoir le Web-Service
Output qui représente les données que va envoyer le Web-Service


Tout le monde suit ?

En entrée, on aura besoin d’une chaine de caractère(string).
Pour se faire, on fait un clique droit sur case la plus à droite de la ligne input, dans le menu contextuel
On clique sur Set Type puis Existing Type et là on sélectionne string.


On réitère cette opération pour le paramètre de sortie.

Du serveur au client

On va s’attaquer à notre serveur, préparez vos doigts ça va coder !

On va le nommer serveur.php
Attention, le chemin de votre fichier doit être le même que celui que vous avez paramétré dans votre web-service.

Ex : http://localhost/MonWebService/serveur.php => C:\wam\www\MonWebService\serveur.php

Voici le code source, les commentaires parlent d’eux-même :

// Pour supprimer le cache du web-service
ini_set('soap.wsdl_cache_enabled', 0);
// Pour définir le temp maximal d'éxecution de notre web-service
ini_set('default_socket_timeout', 180);

// Nom de notre web-service
class Server {
     // Le service QuelJour que l'on a définit dans notre format wsdl
    function QuelJour($parm) {
    	return 'Web-Service ok';
    }
}
// On tente d'instancier la classe soapServer
// Si cela s'avère impossible, on affiche une erreur
try {
    $server = new SoapServer('monFormat.wsdl',  array('trace' => 1,'encoding'	=> 'ISO-8859-1'));
    // On définit la classe qui va gérer les requêtes SOAP (pour nous c'est la class Server)
    $server -> setclass('Server');
    $server->setPersistence(SOAP_PERSISTENCE_REQUEST);
} catch (Exception $e) {
    echo 'erreur'.$e;
}
// Si l'appel provient d'un Web-Service
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
	try {
		$server -> handle();}
	catch (Exception $e) {
    echo 'erreur'.$e;
	}
}
// Facultatif seulement pour montrer les fonctions disponibles par le web-service
else {
    echo '<strong>This SOAP server can handle following functions : </strong>';
    echo '<ul>';
    foreach($server -> getFunctions() as $func) {
        echo '<li>' , $func , '</li>';
    }
    echo '</ul>';
}

Si tout se passe bien et si on se rend sur cette adresse :
http://localhostMonWebService/serveur.php


On devrait voir :



Tout marche ? On est trop fort \o/

// Pour supprimer le cache du web-service
ini_set('soap.wsdl_cache_enabled', 0);

// Nouveau Client SOAP
try {
    // Nouvelle instance de la classe soapClient
   $client = new SoapClient('http://localhost/MonWebService/monFormat.wsdl', array('trace' => 1));
   $parm = date('Y-m-d');
    // Appel de la méthode QuelJour du service web
   try{
    $oReturn =  $client -> __soapCall('QuelJour', array('string' =>$parm));
	} catch (SoapFault $fault) {
    	trigger_error("SOAP Fault: (faultcode: {$fault->faultcode}, faultstring: {$fault->faultstring})", E_USER_ERROR);
	}
        // affiche le résultat
	var_dump($oReturn);
} catch (SoapFault $fault) {
    echo 'erreur : '.$fault;
}

    function QuelJour($parm) {
    	$aJour[1] = 'Lundi';
    	$aJour[2] = 'Mardi';
    	$aJour[3] = 'Mercredi';
    	$aJour[4] = 'Jeudi';
    	$aJour[5] = 'Vendredi';
    	$aJour[6] = 'Samedi';
    	$aJour[0] = 'Dimanche';
    	return $aJour[date("w",strtotime($parm))];
    }

Debugger un web-service

Le debugage d’un web-service est toujours difficile. Le client interprète directement la réponse du web-service et si la réponse n’est pas correctement formaté (qui ne respecte pas le format wsdl du web-service), il affiche une erreur du type :

( ! ) Fatal error: SOAP Fault: (faultcode: Client, faultstring: looks like we got no XML document) in /var/www/MonWebService/client.php on line 17 Call Stack #TimeMemoryFunctionLocation 10.000158584{main}( )../client.php:0 20.002180708trigger_error ( )../client.php:17

Les erreurs :


Pendant le développement de différents de web-services, je suis tombé sur des erreurs de toute part, malheureusement je ne les ai pas tous mémorisé mais voici un début de liste qui pourrait vous aider. Si vous aussi vous êtes embétez un petit commentaire et on pourra certainement vous aider.

Préparation

On va reprendre l’affichage d’une simple carte (celle du tutoriel précédent)

Je vous rappelle le code source :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<!-- source:www.waanser.com -->
	<!-- auteur:roul -->
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Jardin des Tuileries</title>
	<script src="http://maps.google.com/maps?file=api;key=ABQIAAAAzg_ZseRgldxWcy2tNYAEYRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSS7F5U7RNXncIf02uklkFtcG80gw" type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript">
		var map;
	 	function initialize() {
	      if (GBrowserIsCompatible()) {
	        map = new GMap2(document.getElementById("map"));
	        map.setCenter(new GLatLng(48.86175,2.331119), 15);
	        map.setUIToDefault();
	      }
	    }
	 </script>
	<div id="map" style="width: 500px; height: 300px"></div>
	<script type="text/javascript">
		window.onload = function(){initialize()};
	</script>
</body>
</html>

Marqueur

Pour mettre en place des marqueurs, il faut juste donner les coordonnées.
Là, on est en terrain connu, on va créer un point géographique.

Dans cet exemple, on va mettre un point sur la pyramide du Louvre.

var point = new GLatLng(48.860800,2.335800);

Et là, on a plus qu’à mettre le marqueur :

map.addOverlay(new GMarker(point));

Facile, non ?

Bulle info

Maintenant que l’on sait mettre des marqueurs, nous allons voir comment mettre des bulles info dans nos cartes.

C’est avec la commande map.openInfoWindow que nous allons afficher une bulle info avec le message “Demain, rdv ici !”
Voici la syntaxe :

map.openInfoWindow(point géographique,nœud de texte)

Et Voici le code source :

map.openInfoWindow(new GLatLng(48.860800,2.335800),
                   document.createTextNode("Demain, rdv ici !"));

Déplacement

Pour finir, nous allons voir comment nous déplacer dans une carte.

C’est la commande panTo qui va nous permettre de centrer l’utilisateur sur un lieu défini.
Il prend en paramètre un point géographique (un objet GLatLng).

Voici un ensemble d’utilisation, on va centrer la carte sur la place concorde à Paris :

  function animate() {
   	map.panTo(new GLatLng(48.865731,2.32378));
  }

Pour appliquer cet exemple, nous allons créer un bouton.
A l’instant même de cliquer sur ce bouton, le script va se lancer automatiquement.
(Ce qui va normalement centrer la carte sur la place concorde )

<form>
<p>
<input type="button" value="Au concorde !" onclick="animate();" />
</p>
</form>

Eh voilà, le résultat :

Maintenant que vous êtes des As de google map, je vous laisse faire des merveilles avec l’api de google.

Installation

Pour l’installation, nous allons commencer à ouvrir une invite de commande dos.
Et commencer par faire :

set PATH=%PATH%;C:\wamp\php

Normalement dans votre dossier php, vous avez un dossier PEAR, il faut s’y rendre.

Par exemple, pour wamp il faut taper : cd C:\wamp\php\PEAR

Vous trouverez un fichier php go-pear.phar, il suffit de l’exécuter :

php go-pear.phar

Et là, l’installation se lance

installation pear

Si vous voulez que l’installation de pear concerne toutes les sessions d’utilisateurs, il faut mettre system.

Un récapitulatif des chemins de configuration de pear est affiché, vous pouvez laisser la configuration par défaut, elle est très bien.

installation pear

Dernière étape, on accepte de modifier notre fichier php.ini pour qu’il prenne en compte notre bibliothèque PEAR.

pear installation

Eh voilà c’est installé

pear installation

Première utilisation

Nous allons installer la librairie DATE

Dans un premier temps nous allons faire :

set PATH=%PATH%;C:\wamp\php\PEAR

Il faut aller ensuite sur http://pear.php.net/packages.php.

Date and Time -> Date -> Download.

On va récupérer la commande pour le téléchargement :

utilisation pear

Pour moi, il faut taper :

pear install Date-1.5.0a1

PEAR Fatal error: Allowed memory size of 8388608 bytes exhausted

Il faut modifier votre fichier C:\wamp\php\php.ini, aller dans l’attribut memory_limit = 8M
et remplacer par : memory_limit = 256M

Comme ça, on est tranquille

// on fait appel a notre librairie PEAR
set_include_path(get_include_path() . ";C:\wamp\php\PEAR\pear");

require_once 'DATE.php';
$now = new Date();

//UNIX timestamp:
echo $now->getTime().'<br/>';

//format de date iso
echo $now->getDate();

Et voilà, vous savez utiliser PEAR

Les layouts

Dans cet article, nous allons reprendre le code source du tutoriel précédent.

Pour éviter d’avoir à recopier les mêmes morceaux de code pour chaque page, il est important de bien savoir structurer nos pages (définir une entête,un corps, un pied de page …). Avec Zend cette organisation se fait à travers les layouts.

// setup controller
$frontController = Zend_Controller_Front::getInstance();
$frontController->throwExceptions(true);
$frontController->setControllerDirectory('./application/controllers');
// on définit le chemin des layouts
$aOptions = array(
    'layout'     => 'home',
    'layoutPath' => './application/layouts'
);
Zend_Layout::startMvc($aOptions);

Vous l’aurez compris, nous allons créer un dossier layouts dans notre dossier application où seront stockés nos layouts. Voici notre nouvelle arborescence :

layouts zend

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title><?php echo $this->title; ?></title>
</head>
<body>
<div id="content">
    <h1><?php echo $this->welcome; ?></h1>
    <?php echo $this->layout()->content; ?>
</div>
</body>
</html>

$this->layout()->content; sera le contenu de nos pages.

Nous allons retourner dans notre contrôleur principal.

class IndexController extends Zend_Controller_Action
{
    function indexAction()
    {
    	    $this->view->title = "Mes amis";
    	    $this->view->welcome = "Bienvenue";
    }

Le rendu n’est pas super, mais ça au moins le mérite de montrer que ça marche.

zend layout

La base de données avec Zend_Db

Pour se connecter à la base de données, il faut bien naturellement indiquer les identifiants de connexions.
Avec Zend, on passe par un fichier de configuration ini.

Zend_Loader::registerAutoload();
//on définit un nouvel objet de configuration
$oConfig = new Zend_Config_Ini('./application/config.ini', 'connexion');
// Mise en place de la BDD
$oDb = Zend_Db::factory($oConfig->db);
// on définit notre objet de base de données par défaut
Zend_Db_Table::setDefaultAdapter($oDb);

new Zend_Config_Ini(le chemin de notre fichier ini, la section concerner);

[connexion]
db.adapter = PDO_MYSQL
db.params.host = localhost
db.params.username = root
db.params.password =
db.params.dbname = zendfacile

Nous allons créer la base de donnée, voici la table :

CREATE TABLE ami (
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
nom VARCHAR( 255 ) NOT NULL ,
prenom VARCHAR( 255 ) NOT NULL
)

Les données :

INSERT INTO zendfacile.ami (id ,nom ,prenom)
VALUES (NULL , 'Laporte', 'Jean');

INSERT INTO zendfacile.ami (id ,nom ,prenom)
VALUES (NULL , 'LaPie', 'Marie');

Maintenant que notre base est faite, on va s’attaquer au code

class IndexController extends Zend_Controller_Action
{
    function indexAction()
    {
    	    $this->view->title = "Mes amis";
    	    $this->view->welcome = "Bienvenue";
    	    $oAmi = new Ami();
    	     $this->view->ami = $oAmi->fetchAll();
    }

$oAmi = new Ami();
va faire appel au modéle ami. On l’a pas créé ?
j’allais l’oublier

class Ami extends Zend_Db_Table
{
    protected $_name = 'ami';
}

On a plus qu’à afficher notre résultat :

<table>
<tr>
	<th>Nom</th>
	<th>Prenom</th>
	<th>&amp;amp;amp;amp;amp;nbsp;</th>
</tr>

<?php foreach($this->ami as $ami) : ?>
<tr>
	<td><?php echo $ami->nom;?></td>
	<td><?php echo $ami->prenom;?></td>

</tr>
<?php endforeach; ?>
</table>

C’est pas beau, mais on a ce que l’on a demandé :

Zend_Db

Voilà une première mise en bouche des possibilités de Zend, dans les prochains articles nous irons plus loin dans l’univers de ZEND.

Les demandes d’ajouts

Nous allons commencer par faire les demandes d’ajouts.

api facebook mode bac à sable

Aussi, je vous conseille aussi de créer un deuxième compte plutôt que piquer celui de votre sœur

Nous allons donc créer une page de demande d’ajout.

Voici ce que l’on va mettre, les explications sont juste en-dessous :

<!-- demande d'ajout -->
<fb:fbml>
<fb:request-form action="index.php" method="POST" invite="true" type=" De Malade " content="Je suis sur que je te bats facilement au quizz."
<?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/waanser/\" label=\"J'accepte le défis\"") ?>" >
<fb:multi-friend-selector showborder="false" actiontext="Défie tes amis !">
</fb:request-form>
</fb:fbml>

Voilà ce que ça va donner :

facebook demande d'ajouts

Même si c’est long, on va y aller pas à pas :

action = “index.php”

Une fois le formulaire validé, l’application va nous rediriger vers la page index.php

method = “POST”

Tout comme les formulaires traditionnels, c’est la méthode d’envoie des données (POST ou GET)

invite = “true”

Pour indiquer que le formulaire est une invitation

type = ” De Malade “

C’est le texte qui va s’afficher à la fin de l’entête de l’invitation

content = “Je suis sur …

Le contenu du message

<fb:req-choice

C’est pour créer un bouton

url = “http://apps.facebook.com/waanser/”

L’url que redirige la fenêtre

label = “J’accepte le défis”

Le message sur le bouton

<fb:multi-friend-selector

La fenêtre où l’utilisateur choisit les amis à défier

Eh oui, facebook nous laisse la possibilité de tout paramétrer

Les fils d’actualités

Publier les fils d’actualités, est une des fonction phare de facebook.

Pour créer ces fils d’actualités, il faut dans un premier temps créer et enregistrer les maquettes d’évènements.

Pour enregistrer les maquettes de fils d’actualités c’est par ici.
Vous avez reconnu ? C’est la page boîte à outil que facebook propose pour les développeurs.

api facebook

Vous avez la possibilité de faire 2 types d’actualités :

• les actualités standards
• les actualités sur une ligne

Comment créer une maquette

Vous tombez sur un panneau d’administration, c’est avec ça que l’on va faire notre fameuse maquette.

Là, c’est la structure de votre maquette :

facebook template

On le devine tout seul, cette partie c’est le rendu :

rendu maquette facebook

Et enfin, c’est un exemple de données que l’on va appliquer dans la structure :

maquette facebook

exemple maquette facebook

Pour mieux comprendre, nous allons décomposer le message :

donnée : rouge
structure : vert
Julien maitrise l’histoire à 65%

Il savoir que facebook appel les données dynamiques ; un jeton.

Pour indiquer les données dynamiques, nous allons utiliser cette syntaxe : {*nom du jeton*}
La maquette va ressembler à ça :
{*actor*} maitrise {*theme*} à {*points*} %

erreur prévualsisation maquette

En fait, votre maquette est bonne ! Mais pour que la prévisualisation se passe bien, il faut lui fournir un jeu de données.

Et là Miracle ! ça fonctionne

{*author*} est un jeton par défaut que facebook met d’office pour afficher le nom de l’utilisateur.

L’actualité courte permet d’afficher des médias comme les images :

Pour afficher les images, il faut continuer dans la partie : Exemple de données de modèle

Voici la syntaxe :

{”images”:[{"src":"url de li'mage", "href":"la cible du lien"}

Voici un exemple :

{"images":[{"src":"http://media.waanser.com/2009/05/genie.png", "href":"http://apps.facebook.com/waanser/"}

Créer un lien d'action

Étape très importante, parce que c'est le lien qui va renvoyer l'utilisateur vers notre application.

api facebook lien d'action

URL de lien d’action : l’adresse de redirection du lien.

api facebook lien d'action

Vous avez plus qu’à passer à l’étape suivante, puis à cliquer sur enregistre le lot de modèles.
Facebook va alors vous donner un bundle id

Il faut bien le conserver, vous en aurez bientôt besoin.

Utilisez la maquette dans votre application

Nous allons commencer avec l’exemple le plus simple, celui où il y a qu’une seule ligne.

{”content”: {”feed”: {”template_id”:identifiant de la maquette , “template_data”: {”nom du jeton 1″:”valeur du jeton 1″,”nom du jeton 2″:”valeur du jeton 2″} } }, “method”:”feedStory” }

{”content”: {”feed”: {”template_id”:43745522324, “template_data”: {”points”:”65″,”theme”:”l’histoire”} } }, “method”:”feedStory” }

Le php propose une librairie pour manipuler le json, nous allons en bénéficier pour faire un beau feed json
facilement paramétrable.

$arr = array(
'content' => array(
'feed' => array(
'template_id' => 43745522324,'template_data' => array(
'points' => '65', 'theme' => 'l\'histoire'
)
)
),'method' => 'feedStory'
);

echo json_encode($arr);

Notification

Nous allons voir comment générer des notifications, rassurez-vous, c’est beaucoup plus simple que les fils d’actualités

Voici la syntaxe :

$oFacebook->api_client->notifications_send(DESTINATAIRE, MESSAGE, TYPE);

• app_to_user => L’expéditeur c’est l’application
• app_to_user => L’expéditeur c’est l’utilisateur enregistré r

Voici un exemple d’utilisation :

$oFacebook->api_client->notifications_send($iUid, 'some info', 'user_to_user');
$oFacebook->api_client->notifications_send($iUid, 'some info', 'app_to_user');

Le rendu :

api facebook notification

Et voilà vous avez tous les outils en main pour propager votre application.

Bonne propagation

Inscription

Tout d’abord il va falloir inscrire son site auprès de google sur ce site.

On peut très bien mettre comme adresse 127.0.0.1 ou localhost

api googlemap

Google va vous renvoyer dans une page d’administration. Il vous donnera votre clef, pour faire appel à l’api Google Maps.

Si vous avez pris comme URL localhost vous aurez cette clé : ABQIAAAAzg_ZseRgldxWcy2tNYAEYRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSS7F5U7RNXncIf02uklkFtcG80gw

La carte

Dans la partie head de notre page web nous allons charger la librairie JS de Google Maps

<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;amp;key= VOTRE CLE =true" type="text/javascript"></script>

Là on va créer une fonction javascript qui va charger la carte.

Voici le code, les explications sont juste en-dessous :

<script type="text/javascript">
 function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(48.86175,2.331119), 15);
        map.setUIToDefault();
      }
    }
 </script>

La fonction GBrowserIsCompatible est une fonction de l’api google map qui vérifie que le navigateur est compatible avec l’api Google Maps.

Pour afficher la carte, il faut indiquer à Google Maps un point géographique et un indice de zoom.

Enfin pour définir la carte nous allons utiliser la méthode setCenter de l’objet map
Voici ça syntaxe :
map.setCenter(objet GLatLng, indice de zoom);

La méthode setUIToDefault() sert juste à afficher les boutons de navigations sur la carte.

  <body>
    <div id="map" style="width: 500px; height: 300px"></div>
   	<script type="text/javascript">
		window.onload = function(){initialize()};
	</script>
  </body>

Vous aurez reconnu le jardin des Tuileries :

Astuce pour avoir la géolocalisation

J’ai trouver une méthode vraiment facile pour récupérer les coordonnées d’un lieu voulut. (si vous avez trouvez plus simple n’hésitez pas à partager )

Pour cela il faut aller sur google maps, vous tapez sur le moteur le nom du lieu que vous vous voulez afficher. (on va dire bastille).

Une fois la carte bien centrée, vous cliquez sur le bouton Envoyer

api Google Maps

Une fenêtre apparait et là il suffit de récupérer les bonnes informations :

api Google Maps

note : si vous n’avez pas toutes les informations, il faut naviguer un tout petit peu dans la map et tout devrait s’afficher

Voilà c’est fini pour cet article. Dans les prochains articles nous allons voir plus en détail l’api Google Maps, notamment dans la personnalisation de la carte.

Vous êtes prêt à avoir un regard nouveau sur le javascript ? Alors c’est parti

Prototype

Vous avez jamais entendu parler d’héritage en JS ? C’est normal, puisque nous sommes dans un langage de prototype. Mais nous avons autre chose qui remplace le système d’héritage ; l’ajout de propriété.

Voici une chaine toute simple :

var sMoi = 'Roul';

Nous allons ajouter une fonction à notre chaine. Pour cela nous allons ajouter une propriété à au prototype String. On peux dire que le prototype est la structure de l’entité concerné (String).

Cela va donner :

String.prototype.direBonjour=function(){
	return 'Bonjour ' + this.valueOf();
};

Pour faire appel à cette fonction il suffit de faire :

var sMoi = 'Roul';
alert(sMoi.direBonjour());

Le navigateur affiche :

javascript prototype

Pas mal, non ?

Si vous ne connaissez pas, je vous conseille d’avoir toujours sous la main le site de w3schools qui contient la référence complète du javascript.

Un autre exemple plus complexe :

On va adapter la méthode array_map de php (Applique une fonction sur les éléments d’un tableau) pour
les tableau JS.

Array.prototype.map= function(fx)
{
	if (0 == this.length)
		return undefined;

	for (var index = 0; index < this.length; ++index)
		this[index] = fx(this[index]);
	return this;
}

alert([1, 2, 3, 4, 5].map(function(iNb)
{
	iNb = parseInt (iNb, 10);
	return (iNb * iNb);
}));

Voilà le rendu :

js prototype

Vous êtes toujours là ? On peut passer à la suite.

La variable native : arguments

arguments est une variable locale créer nativement dans une fonction. Les arguments de la fonction y sont stockés. Cela peu être pratique pour certaines fonctions.
Voici un exemple :

function getSum() {
	var iSum =0;
	for (var iCompt = 0; iCompt < arguments.length; ++iCompt)
		iSum += arguments[iCompt];
	return iSum;
}

alert(getSum(1,2,3,4,5,6));

Le résultat :

js prototype

Attention à la portée des variables

Il faut bien faire attention de bien déclarer vos variables, parce que vous risquez d’avoir des surprises.
Voyez l’exemple :

function getCalc(iEntierA)
{
	iEntierA = iEntierA + 2;
	iResultat = iEntierA * 2;
	var EntierB = 3;
	return iResultat;
}

var iResultat = 8;
var iEntierA = 6;
var iEntierB = 4;

document.write('iResultat = ' + iResultat + '<br/>');
document.write('iEntierA = ' + iEntierA + '<br/>');
document.write('iEntierB = ' + iEntierB + '<br/>');
document.write('--------------------------<br/>');
document.write('getCalc(1) = ' + getCalc(1)+ '<br/>');
document.write('--------------------------<br/>');
document.write('iResultat = ' + iResultat + '<br/>');
document.write('iEntierA = ' + iEntierA + '<br/>');
document.write('iEntierB = ' + iEntierB + '<br/>');

Voici le rendu :

On voit clairement que iResultat est modifiée et qu’elle a prit la variable de la fonction.

Mais pourquoi ?

Comme elle n’a pas été déclarée localement dans la fonction (comme EntierB ), Javascript la retrouvée dans les variables globales. Et l’affectation de la nouvelle valeur a touchée la variable global.

Et iEntierA ? Comment ça ce fait qu’elle ne soit pas modifiée ?
Comme elle est en paramètre de la fonction getCalc, la déclaration se fait implicitement.

Les objets anonymes

Les objets anonymes sont des objets très flexibles où l’on peut ajouter toutes sorte de propriétés.

Voici une utilisation utile dans une fonction de ces objets :

function getPresentation(oMe)
{
	undefined === oMe.prenom ? 0 : alert('nom : ' + oMe.prenom);
	undefined === oMe.nom ? 0 : alert('nom : ' + oMe.nom);
	undefined === oMe.age ? 0 : alert('age : ' + oMe.age);
}

getPresentation({prenom: 'Yann', age: 26});
getPresentation({prenom: 'Romain'});

Eh voilà, on a vu quelques notions méconnues de javascript.

Si vous avez des remarques où des interrogations sur le JS, n’hésitez pas à nous le faire partager

Installation

Nous allons télécharger WampServeur, CodeIgniter et Smarty.

Pour WampServeur, suivez les instructions d’installation.
Pour CodeIgniter et Smarty il suffit de dezipper les fichiers.

Dans WampServeur nous allons créer notre dossier de base de notre site
C:/wamp/www/tutorielwaanser

Intégration de Smarty

Dans le fichier index.php ajouter la constante : WEBSITE_PATH

if (strpos($system_folder, '/') === FALSE) {

if (function_exists('realpath') AND @realpath(dirname(__FILE__)) !== FALSE)
{
$system_folder = realpath(dirname(__FILE__)).'/'.$system_folder;
}
} else {
// Swap directory separators to Unix style for consistency
$system_folder = str_replace("\\", "/", $system_folder);
}

define('WEBSITE_PATH', realpath(dirname(__FILE__)).'/'.$application_folder );

Dans le fichier system/application/config/config.php modifier la variable :

$config['subclass_prefix'] = 'WAANSER_';

Créer les arborescences suivantes :
- system/smarty/libs et copier  les dossiers Internals et plugins de Smarty

system/application/smarty/plugins
system/application/smarty/tpl

system/application/tmp/smarty/cache
system/application/tmp/smarty/templates_c

Renommer le fichier Smarty.class.php en Smarty.php
Copier les fichier Smarty.php, Smarty_Compiler.class.php et Config_File.class.php dans le dossier system/libraries

//  ******* Smarty ********
define('DIR_SEP', DIRECTORY_SEPARATOR);
define('SMARTY_DIR', BASEPATH.'smarty'.DIRECTORY_SEPARATOR);
define('SMARTY_CORE_DIR', BASEPATH.'smarty/libs/internals' . DIRECTORY_SEPARATOR);

define('SMARTY_PHP_PASSTHRU',   0);
define('SMARTY_PHP_QUOTE',      1);
define('SMARTY_PHP_REMOVE',     2);
define('SMARTY_PHP_ALLOW',      3);

Ensuite nous devons créer les libraries WAANSER_controller et WAANSER_smarty dans le dossier system\application\libraries

class WAANSER_Controller extends Controller {

/**
* @desc	for template
* @var 	obj smarty
*/
public $oMySmarty = null;

public function Controller() {

parent::Controller();

$this->loadSmarty();
}

public function loadSmarty() {

$this->oMySmarty = &load_class('Smarty');
}

}

Ce fichier va nous permettre d’étendre le contrôleur d’origine, pour récupérer tous le processus de chargement des classes, et nous ajoutons un attribut $oMySmarty qui sera un objet de la classe Smarty.

Avec cet objet on pourra changer de générateur de template.
On peut, même si c’est moche :)  utiliser le générateur de templates par défaut en même temps que le générateur Smarty.

class WAANSER_Smarty extends Smarty {

/**
* @desc	class constructor
* @version	1.0.0
* @date	20090307
*/
public function __construct() {

parent::Smarty();
$this->setParams();
}

/**
* @desc 	initialise les variables pour smarty
* @version 1.0.0
* @date	20090307
*/

public function setParams() {
$this->template_dir = APPPATH.'smarty/tpl';
$this->compile_dir = APPPATH.'tmp/smarty/templates_c';
$this->plugins_dir = array(APPPATH.'smarty/libs/plugins', APPPATH.'smarty/plugins');
}

}

?>

Il nous reste a changer le fichier welcome dans le dossier system\application\controllers, il suffit juste de changer l’appel au fichier parent.

class Welcome extends WAANSER_Controller {

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

function index()
{
$this->oMySmarty->assign('TEST_WAANSER', 'Smarty est OK');
$this->oMySmarty->display('welcome.tpl');
//$this->load->view('welcome_message');
}
}

Et de lui ajouter une variable avec la methode assign et de lui indiquer le template a afficher avec la methode display.

Ensuite ajouter le fichier welcome.tpl dans le dossier system\application\smarty\tpl

<p>{$TEST_WAANSER}</p>

Au prochain Tuto

Installation

Comme tout, il va falloir télécharger Magento, sur le site officiel.
Il faut que vous soyez enregistré pour avoir accès au téléchargement.

Magento vous propose plusieurs types de dossier à télécharger. Je vous conseil de prendre le Downloader :

Pour notre site de e-commerce, nous allons créer un dossier monecom. Nous allons mettre le contenu du dossier décompressé de magento dans ce dossier.

Voilà ce que vous devriez avoir dans votre dossier :

On va se rendre sur notre site : http://localhost/monecom/

Là il faut cliquer sur le bouton Start the download process

Eh là vous voyez que Magento télécharge les dernières librairies. (c’est magique )

Attention il est fort probable que vous voyez ce genre de message :

magento-core/Lib_Varien requires PHP extension “curl”
magento-core/Lib_Varien requires PHP extension “gd”
magento-core/Lib_Varien requires PHP extension “pdo_mysql”
magento-core/Lib_Varien requires PHP extension “mcrypt”

C’est normal, il faut que vous activez les extensions curl, gb, pdo_mysql, mcrypt.

Comment faire ?

Si vous travaillez dans un environnement Windows

Il faut ouvrir votre fichier php.ini.
Il se trouve dans votre répertoire apache2 dans le dossier bin.

Il faut que vous ajoutez :

extension=php_curl.dll
extension=php_gd2.dll
extension=php_mcrypt.dll
extension=php_pdo_mysql.dll
et le tour est joué

On va avoir de besoin de la commande apt.
Pour faire ça proprement, nous allons commencer par faire apt get update pour mettre à jour votre liste de paquets disponibles.
Puis, nous allons demander à notre serveur quels sont les paquets disponibles pour l’extension curl :
apt-cache search php curl

Là, on choisit notre paquet : php5-curl
Et on fait : apt-get install php5-curl

Pour les autres extensions, c’est la même manipulation

Configuration

On va pouvoir configurer magento ^^.
Une fois que vous avez accepté la licence, vous serez dans la partie localization.
Comme moi, vous avez beau sélectionner le pays France, rien n’y veut, Magento garde comme pays les états-unis. C’est normal, on n’a pas installé la librairie pour le pays français. Mais on y reviendra plus tard. (un peu de patience )
On va passer à l’étape suivante, configuration.

Là on est en terrain connu, pas besoin de modifier le host. Pour le nom de la base, il est préférable de le changer, pour une question de sécurité. Pour nous, ça sera eco_mangeto.
Après il faut que vous indiquiez le login et mot de passe pour votre base de données (il y a que vous qui connaissez çà )
Pour le champ Table Prefix nous allons mettre eco_ (toujours pour une question de sécurité).

Le champ Base URL, c’est l’adresse de votre site. (Pour ma part ça sera http://localhost/monecom/ )
Admin Path c’est le chemin que l’on va accéder pour le panneau d’administration, nous allons l’appeler laconf.
(Je sais c’est un peu concon comme nom, mais au moins les éventuels pirates auront du mal à deviner :p ).

Je vous conseille de cocher Use Web Server (Apache) Rewrites. Pour activer la réécriture de vos url. Cela va aider notre référencement naturel.

Pour la sauvegarde des données (Save session data in ), File System est un bon choix. Ça sert à rien de surcharger notre base inutilement.

Attention, il ne faut pas mettre une restriction de mot de passe sur le de fichier htaccess, sinon Magento ne va pas pouvoir continuer l’installation et dira que votre adresse n’est pas correct.

Là, vous n’avez pas besoin de moi pour remplir ce formulaire :).

Juste une précision, le champ Encryption Key, c’est une clé qui va assurer la sécurité de votre site, il est préférable qu’elle soit longue. (Moi j’ai inventé une longue phrase qui veux rien dire ^^).

Bravo ! Votre Magento fonctionne

Magento en français

Pour rendre notre panneau d’administration en français, il faut aller sur ce lien.

Il faut cliquer ensuite sur ce bouton :

Là il va vous donner un lien, pour moi c’est magento-community/Locale_Mage_community_fr_FR.

Nous allons retourner dans la page d’administration de notre site web : http://localhost/monecom/laconf.

Nous allons ensuite dans le dossier sytem, puis dans le sous menu Magento Connect Manager.

Et la vous voyez apparaître :

Vous n’êtes pas perdu ?

Dans le champ Paste extension key to install vous allez mettre le lien que vous avez récupéré (magento-community/Locale_Mage_community_fr_FR).

Un clique sur install et la librairie est prêt à l’emploi.

Pour changer la langue, il faut aller dans System -> Configuration.

Pour le menu General on va dans Options de locale.

Dans le champ Profil local on choisit français.

Bravo ! Votre plateforme Magento est prêt à l’emploi.

Dans les prochains tutoriels nous allons voir les fonctionnalités les plus importantes de magento.

Ce qu’il faut

Si vous le savez pas, il faut php5 et activé le module_rewrite

zend

Et on télécharge la dernière version.

On va créer notre dossier zenfacile où seront enregistrées les pages. Dans ce dossier on va créer un dossier Zend. Dans ce dossier on va mettre la librairie Zend.

Arborescence

L’arborescence de notre site va suivre une structure MVC traditionnel :

Comme on va faire de la réécriture d’url, on va ajouter un fichier .htaccess

# Règles de réécriture pour Zend Framework
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* index.php

# Sécurité : Ne pas autoriser le parcours de répertoires
Options -Indexes

# Configuration PHP
php_flag magic_quotes_gpc off
php_flag register_globals off
php_flag short_open_tag on

voici le fichier .htaccess

Maintenant tout est prêt, on va pouvoir s’attaquer au php.
(eh oui ça va très vite on y va pas avec de la dentelle)

On va commencer par l’index.php

On va pas se précipiter, on va déjà voir si la librairie est bien chargé :

error_reporting(E_ALL|E_STRICT);
ini_set('display_errors', 1);
date_default_timezone_set('Europe/Paris');

// mise en place des répertoires et chargement des classes
set_include_path('.'
    . PATH_SEPARATOR . './library'
    . PATH_SEPARATOR . './application/models/'
    . PATH_SEPARATOR . get_include_path());
include "Zend/Loader.php";

echo 'salut Zend !';

Le message salut Zend ! devrait s’afficher sur cette page :http://localhost/zenfacile

C’est bon ?

Voici ce que l’on va mettre :

<?php

error_reporting(E_ALL|E_STRICT);
ini_set('display_errors', 1);
date_default_timezone_set('Europe/Paris');

// mise en place des répertoires et chargement des classes
set_include_path('.'
    . PATH_SEPARATOR . './library'
    . PATH_SEPARATOR . './application/models/'
    . PATH_SEPARATOR . get_include_path());
include "Zend/Loader.php";

Zend_Loader::registerAutoload();

// setup controller
$frontController = Zend_Controller_Front::getInstance();
$frontController->throwExceptions(true);
$frontController->setControllerDirectory('./application/controllers');

// run!
$frontController->dispatch();
?>

Normalement vous avez une belle fatal erreur :

Pas de panique c’est normal :). Par défaut Zend recherche le contrôleur Index.

Et comme il n’existe pas, Zend nous génère une erreur.

Strucuture MVC

On va créer ce controleur :

Le nom de la classe doit forcément ce terminer par Controller

class IndexController extends Zend_Controller_Action
{
    function indexAction()
    {
    	 $this->view->title = "Mon Zend";
    }
}

Il faut savoir que dans chaque controleur il y a des actions (qui est en fait des méthodes de la classe).
Ces méthodes actions doivent se terminer par Action.
Ainsi pour l’action Index la méthode l’appellera indexAction.

L’objet $this->view est l’objet qui manipule la vue.

Comme vous l’avez remarquez notre classe hérite de Zend_Controller_Action.

Comment fait-on pour retrouver cette classe ?

Facile ! On remplace les _ par les / . Et voilà, on a l’arborescence et le nom de la classe.
Pour Zend_Controller_Action la classe se situeras dans :
Zend => Controller =>Action.php

La vue

Pour la vue, il faut aller dans le dossier views créer un dossier scripts.
Un fois ceci fait nous allons créer un dossier qui porte le nom du contrôleur. Le nom de notre vue sera alors index.

Le nom de la vue doit être le nom de l’action, son nom sera alors index.phtml

<html>
<head>
	<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
	<h1><?php echo $this->escape($this->title); ?></h1>
</body>
</html>

et là on rafraichit

on voit le message ! c’est que ça marche \o/

Pour la réécriture d’url zend fait vraiment simple. c’est http://lenomdusite/controleur/action.
On va créer une autre page, une page contact (elle aussi sera toute simple)

    function contactAction()
    {
    	 $this->view->title = "Contact";
    }

Avec une vue identique :

<html>
<head>
	<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
	<h1><?php echo $this->escape($this->title); ?></h1>
</body>
</html>

Pour y accéder ça sera : http://localhost/zenfacile/index/contact

Et voila notre Zend est installé, pour ne pas trop alourdir le tutoriel, j’ai fait l’impasse sur des notions importantes comme le MVC, si vous avez des questions n’hésitez pas à poster un commentaire.

Voici le dossier complet : zenfacile