<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
					xmlns:content="http://purl.org/rss/1.0/modules/content/"
					xmlns:wfw="http://wellformedweb.org/CommentAPI/"
				  >
<channel>
<title><![CDATA[WEB-d - Développement Web]]></title>
<link><![CDATA[http://www.web-d.be/rss.xml]]></link>
<description><![CDATA[WEB-d - Développement Web]]></description>
<item>
<title><![CDATA[Javadoc automatiquement en ligne avec api123.io]]></title>
<link><![CDATA[http://www.web-d.be/post/337/javadoc-automatiquement-en-ligne-avec-api123.io.html]]></link>
<pubDate>Wed, 07 Oct 2015 14:16:30 +0200</pubDate>
<description><![CDATA[<p>Lorsqu'on développe une API Java, on souhaite généralement mettre la documentation javadoc en ligne afin de la rendre facilement accessible aux utilisateurs.</p>
<p>C'est là que le service <a href="http://api123.io">api123.io</a> arrive à la rescousse!</p>
<p>Ce service est capable de:</p>
<ol>
<li>Récupérer votre repository GIT (comme GitHub ou Bitbucket);</li>
<li>Créer la documentation Javadoc de votre code;</li>
<li>Publier la documentation en ligne.</li>
</ol>
<p>De plus, grâce aux hooks, ce processus prend place automatiquement chaque fois que vous poussez (push) des modifications dans le repository GIT.</p>
<p><img src="/data/uploads/96_api123.png" /></p>
<h3>Créer un projet</h3>
<p>Pour créer un projet, il suffit de remplir:</p>
<ul>
<li>le nom du projet,</li>
<li>l'URL du repository GIT (par exemple https://github.com/google/guava.git)</li>
<li>et le dossier dans lequel se trouve le code Java (par exemple guava/src ou alors src/main pour les projets maven)</li>
</ul>
<h3>Créer le hook sur GitHub</h3>
<p>Sur la page du projet api123.io, se trouve le lien à utiliser pour le hook.</p>
<p>Pour ajouter ce hook à votre projet GitHub, il faut aller sur <i>Settings</i> puis <i>Webhooks&nbsp;&amp;&nbsp;services</i></p>
<p>Ensuite cliquer sur <i>Add webhook</i>, et dans le formulaire qui apparaît, indiquer:</p>
<ul>
<li>Payload URL: le lien du hook api123.io</li>
<li>Content type: application/json</li>
<li>Secret: laisser vide</li>
<li>Just the push event.</li>
</ul>
<p><img src="/data/uploads/97_github-add-webhook.png" /></p>
<p>C'est fait! Lors du prochain push votre documentation sera créée automatiquement et mise en ligne. Il ne reste plus qu'à partager le lien sur votre wiki, homepage etc.</p>
]]></description>
</item>
<item>
<title><![CDATA[appserver.io vs Apache en chiffres]]></title>
<link><![CDATA[http://www.web-d.be/post/335/appserver.io-vs-apache-en-chiffres.html]]></link>
<pubDate>Thu, 27 Aug 2015 17:17:27 +0200</pubDate>
<description><![CDATA[<p>appserver.io est un serveur web écrit en PHP, et qui intègre une série de fonctionnalités spécifiques.</p>
<p>Certaines de ces fonctionnalités, telles les servlets, ont clairement pour but de rendre les applications web PHP plus performantes. Cependant, comme le serveur lui-même est écrit en PHP, on peut s'attendre à ce qu'il soit à priori moins performant que d'autres serveurs classiques, comme Apache ou Nginx, qui sont eux écrits en langage C.</p>
<p>Voici, en chiffres, la comparaison entre appserver.io et Apache...</p>
<p>Le but du test est de comparer la réaction de appserver.io et Apache lors d'un test de charge sur une application web simple, <b>et qui n'a pas été optimisée pour appserver.io</b>.</p>
<h3>Setup</h3>
<p>Les tests ont été réalisés sur un serveur virtuel (VPS) single core avec 1GB de RAM. L'OS est Ubuntu 14.04 serveur.</p>
<p>L'application web utilisée pour les tests est un site WordPress avec quelques plugins supplémentaires et une centaine de posts</p>
<p>Les requêtes ont été générées avec Apache JMeter. Celui-ci simule 20 utilisateurs qui effectuent chacun 243 requêtes chaque serveur devra donc, le plus rapidement possible, servir un total de 4860 requêtes.</p>
<h3>Résultats</h3>
<p>Le tableau ci-dessous donne les statistiques du temps de réponse, en ms.</p>
<table>
<tr>
<th></th>
<th>Samples</th>
<th>Average</th>
<th>Median</th>
<th>90%</th>
<th>95%</th>
<th>99%</th>
<th>Max</th>
<th>Error %</th>
<th>Throughput</th>
<th>KB/sec</th>
</tr>
<tr>
<th>Apache2</th>
<td>4860</td>
<td>434</td>
<td>75</td>
<td>964</td>
<td>1897</td>
<td>4603</td>
<td>20899</td>
<td>0.02%</td>
<td>38.8</td>
<td>815.5</td>
</tr>
<tr>
<th>appserver.io</th>
<td>4860</td>
<td>617</td>
<td>133</td>
<td>1320</td>
<td>2805</td>
<td>8269</td>
<td>18423</td>
<td>0.00%</td>
<td>28.7</td>
<td>641.6</td>
</tr>
</table>
<p>On remarque clairement que, sans optimisation particulière, appserver.io est en moyenne 25% plus lent que Apache2.</p>
<p>En l'état actuel, appserver.io ne peut donc pas être considéré comme un remplaçant pour Apache. Par contre, ses autres caractéristiques, comme les persistence containers, les servlets, la file de message (message queue) ou le service timer (semblable à cron) en font un candidat à considérer pour les applications sur mesure.</p>
]]></description>
</item>
<item>
<title><![CDATA[Premiers pas avec appserver.io : Installation, servlets et templates]]></title>
<link><![CDATA[http://www.web-d.be/post/334/premiers-pas-avec-appserver.io-:-installation,-servlets-et-templates.html]]></link>
<pubDate>Fri, 14 Aug 2015 16:23:52 +0200</pubDate>
<description><![CDATA[<p>appserver.io est un serveur web écrit en PHP, et conçu spécifiquement pour les grosses applications web PHP.</p>
<p>Il intègre dans ce but une série de fonctionnalités inédites:</p>
<ul>
<li>Entièrement multi-thread pour plus de performance;</li>
<li>Supporte les servlets;</li>
<li>File de messages (message queue) intégrée;</li>
<li>Service timer (cron) intégré;</li>
<li>"Persistence container" intégré et distribué (typiquement pour stocker les données de session).</li>
</ul>
<h3>Installation</h3>
<p>Sur Ubuntu 14.04:</p>
<p><code><br />
wget&nbsp;https://github.com/appserver-io/appserver/releases/download/1.0.6/appserver-dist_1.0.6-37.deb7_amd64.deb<br />
wget&nbsp;https://github.com/appserver-io/appserver/releases/download/1.0.6/appserver-runtime_1.0.7-74.deb7_amd64.deb<br />
sudo&nbsp;dpkg&nbsp;-i&nbsp;appserver-runtime_1.0.7-74.deb7_amd64.deb<br />
sudo&nbsp;dpkg&nbsp;-i&nbsp;appserver-dist_1.0.6-37.deb7_amd64.deb<br /></code></p>
<p>Et pour installer les éventuelles dépendances:</p>
<p><code><br />
sudo&nbsp;apt-get&nbsp;install&nbsp;-f<br /></code></p>
<p>appserver.io est maintenant installé dans /opt/appserver. La commande suivante permet de configurer le serveur pour le développement:</p>
<p><code><br />
sudo&nbsp;/opt/appserver/server.php&nbsp;-s&nbsp;dev<br />
sudo&nbsp;service&nbsp;appserver&nbsp;restart<br /></code></p>
<p>Le serveur appserver.io est maintenant accessible à l'adresse http://localhost:9080</p>
<h3>Servlets</h3>
<p>L'utilisation des servlets est une fonctionnalité qu'on retrouve généralement dans les serveurs d'applications Java (Tomcat etc.).</p>
<p>Dans la plus-part des serveurs web PHP (Apache mod_php, PHP-FPM,...), l'entièreté du code nécessaire pour construire la page est évalué à chaque requête. Tous les les objets sont donc également instanciés puis détruits à chaque requête. Dans le cas d'applications complexes, cela représente un énorme gaspillage de ressources, et un énorme ralentissement.</p>
<p>Au contraire, dans le cas des servlets, un seul objet est instancié au démarrage du serveur. Lors de chaque requête, la méthode correspondante est appelée (généralement doGet pour les requêtes GET et doPost pour les requêtes POST). Typiquement, lors de l'instanciation de la servlet, on exécute toutes les tâches lourdes de configuration (bootstraping) qui sont communes à toutes les requêtes.</p>
<p>L'inconvénient: comme l'objet servlet est créé uniquement lors du démarrage du serveur, il faut redémarrer celui-ci après chaque modification du servlet.</p>
<p>Pour créer une servlet appserver.io:</p>
<p><code><br />
cd&nbsp;/opt/appserver/webapps/<br />
<br />
#&nbsp;Créer&nbsp;un&nbsp;dossier&nbsp;pour&nbsp;notre&nbsp;application<br />
mkdir&nbsp;myapp<br />
cd&nbsp;myapp<br /></code></p>
<p>Les servlets doivent se trouver dans le dossier <b>WEB-INF/classes</b> et doivent suivre le standard <b>PSR-0</b>:</p>
<p><code><br />
mkdir&nbsp;-p&nbsp;WEB-INF/classes/Me/MyApp<br />
cd&nbsp;WEB-INF/classes/Me/MyApp<br /></code></p>
<p>On peut enfin créer la servlet:</p>
<p><code>nano&nbsp;IndexServlet.php</code> <code class="php"><br />
<span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
<span style="color: #000000; font-weight: bold;">namespace</span> Me\MyApp<span style="color: #339933;">;</span><br />
<span style="color: #666666; font-style: italic;">// Doit correspondre au nom du répertoire !!</span><br />
<br />
<span style="color: #000000; font-weight: bold;">use</span> AppserverIo\Psr\Servlet\Http\HttpServlet<span style="color: #339933;">;</span><br />
<br />
<span style="color: #009933; font-style: italic;">/**<br />
&nbsp;* @Route(name="index", urlPattern={"/index.do", "/index.do*"})<br />
&nbsp;*/</span><br />
<span style="color: #000000; font-weight: bold;">class</span> IndexServlet <span style="color: #000000; font-weight: bold;">extends</span> HttpServlet <span style="color: #009900;">{</span><br />
&nbsp; <span style="color: #666666; font-style: italic;">// Le nom de la classe doit correspondre au nom du fichier!</span><br />
<br />
&nbsp; <span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000088;">$value</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> init<span style="color: #009900;">(</span>ServletConfig <span style="color: #000088;">$config</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; parent<span style="color: #339933;">::</span><span style="color: #004000;">init</span><span style="color: #009900;">(</span><span style="color: #000088;">$config</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;">// Et ici, on initialise tout ce qui doit l'être</span><br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;">// Spécialement si c'est lourd à calculer!!</span><br />
&nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">value</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">"Hello"</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">}</span><br />
<br />
<br />
&nbsp; <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> doGet<span style="color: #009900;">(</span><span style="color: #000088;">$servletRequest</span><span style="color: #339933;">,</span> <span style="color: #000088;">$servletResponse</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; <span style="color: #000088;">$servletResponse</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">appendBodyStream</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"Ceci était long à calculer "</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">value</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span><br />
&nbsp;</code></p>
<p>Après avoir redémarré le serveur, la servlet sera visible à l'adresse</p>
<p><a href="http://localhost:8090/myapp/index.do">http://localhost:8090/myapp/index.do</a></p>
<p>Attention, en réalité ce n'est pas la même instance du servlet qui est utilisée à chaque requête, mais bien une copie. Les servlets ne peuvent donc pas être utilisées pour la communication entre les requêtes. L'exemple ci-dessous ne fonctionnera donc pas:</p>
<p><code class="php"><br />
<span style="color: #000000; font-weight: bold;">namespace</span> Me\MyApp<span style="color: #339933;">;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">use</span> AppserverIo\Psr\Servlet\Http\HttpServlet<span style="color: #339933;">;</span><br />
<br />
<span style="color: #009933; font-style: italic;">/**<br />
&nbsp;* @Route(name="index", urlPattern={"/index.do", "/index.do*"})<br />
&nbsp;*/</span><br />
<span style="color: #000000; font-weight: bold;">class</span> IndexServlet <span style="color: #000000; font-weight: bold;">extends</span> HttpServlet <span style="color: #009900;">{</span><br />
<br />
&nbsp; <span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000088;">$value</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span><br />
<br />
<br />
&nbsp; <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> doGet<span style="color: #009900;">(</span><span style="color: #000088;">$servletRequest</span><span style="color: #339933;">,</span> <span style="color: #000088;">$servletResponse</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; <span style="color: #000088;">$servletResponse</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">appendBodyStream</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"Nombre de visites: "</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">value</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">value</span><span style="color: #339933;">++;</span><br />
&nbsp; <span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span><br />
&nbsp;</code></p>
<p>Lors de chaque requête $this-&gt;value vaudra 0 car c'est une copie du servlet original qui est utilisée...</p>
<h3>Templates</h3>
<p>Les servlets sont donc extrêmement puissants pour le bootstrapping de l'application. Pour générer la page elle-même, mieux vaut utiliser des templates. Pour comparer avec le modèle MVC, la servlet sert alors de controller, et le template est la vue.</p>
<p><code class="php"><br />
<span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
<br />
<span style="color: #000000; font-weight: bold;">namespace</span> Me\MyApp<span style="color: #339933;">;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">use</span> AppserverIo\Psr\Servlet\Http\HttpServlet<span style="color: #339933;">;</span><br />
<br />
<span style="color: #009933; font-style: italic;">/**<br />
&nbsp;* @Route(name="index", urlPattern={"/index.do", "/index.do*"})<br />
&nbsp;*/</span><br />
<span style="color: #000000; font-weight: bold;">class</span> IndexServlet <span style="color: #000000; font-weight: bold;">extends</span> HttpServlet<br />
<span style="color: #009900;">{</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> doGet<span style="color: #009900;">(</span><span style="color: #000088;">$servletRequest</span><span style="color: #339933;">,</span> <span style="color: #000088;">$servletResponse</span><span style="color: #009900;">)</span><br />
&nbsp; &nbsp; <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;">// récupérer les valeurs à afficher</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$servletRequest</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getContext</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">setAttribute</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"NAMES"</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #990000;">array</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"Harry"</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"Hermione"</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"Ron"</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;">// calculer le chemin complet vers le template</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$template</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">"templates/index.phtml"</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$webappPath</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$servletRequest</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getContext</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getWebappPath</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$pathToTemplate</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$webappPath</span> <span style="color: #339933;">.</span> <span style="color: #009900; font-weight: bold;">DIRECTORY_SEPARATOR</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$template</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span><span style="color: #339933;">!</span><span style="color: #990000;">file_exists</span><span style="color: #009900;">(</span><span style="color: #000088;">$pathToTemplate</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">throw</span> <span style="color: #000000; font-weight: bold;">new</span> \Exception<span style="color: #009900;">(</span><span style="color: #0000ff;">'Requested template not found: '</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$pathToTemplate</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">}</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;">// créer la page</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #990000;">ob_start</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">require</span> <span style="color: #000088;">$pathToTemplate</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$servletResponse</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">appendBodyStream</span><span style="color: #009900;">(</span><span style="color: #990000;">ob_get_clean</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span><br />
&nbsp;</code></p>
<p>Et créer le template:</p>
<p><code>nano&nbsp;/opt/appserver/webapps/myapp/templates/index.phtml</code> <code class="html"><br />
<span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"en"</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>appserver.io exemple<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>Example app<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">table</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"table table-hover"</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Name<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;?php foreach <span style="color: #66cc66;">(</span>$servletRequest-&gt;</span>getContext()-&gt;getAttribute("NAMES") as $name): ?&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;?php echo $name ?&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;?php endforeach; ?&gt;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">table</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
&nbsp;</code></p>
]]></description>
</item>
<item>
<title><![CDATA[Définir une classe Javascript]]></title>
<link><![CDATA[http://www.web-d.be/post/333/définir-une-classe-javascript.html]]></link>
<pubDate>Fri, 14 Aug 2015 11:49:38 +0200</pubDate>
<description><![CDATA[<p>Javascript possède un modèle orienté objet mais, contrairement à des langages comme Java ou PHP, il n'existe pas de syntaxe permettant de définir une classe.</p>
<p>Lorsqu'on souhaite instancier un objet, on doit en réalité appeler une fonction qui construit l'entièreté de l'objet:</p>
<p><code class="javascript"><br />
<span style="color: #000066; font-weight: bold;">function</span> Animal<span style="color: #009900;">(</span>nom<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">nom</span> <span style="color: #339933;">=</span> nom<span style="color: #339933;">;</span><br />
<br />
&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">toString</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">"Je m'appelle "</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">nom</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">"!"</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span><br />
<br />
<span style="color: #000066; font-weight: bold;">var</span> chat <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> Animal<span style="color: #009900;">(</span><span style="color: #3366CC;">'Tigrou'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
alert<span style="color: #009900;">(</span>chat.<span style="color: #660066;">toString</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp;</code></p>
<p>Cette méthode est cependant très gourmande en mémoire RAM: chaque instance de la classe Animal contient la valeur de chaque attribut (normal), mais également la définition de chaque méthode, alors que celles-ci sont les mêmes pour chaque instance!</p>
<p>Pour éviter ce gaspillage, il faut recourir aux prototypes. Les prototypes sont similaires au mot clé <i>static</i> en Java ou PHP: ils indiquent à Javascript que cette définition est commune à tous les objets (de cette "classe").</p>
<p><code class="javascript"><br />
<span style="color: #000066; font-weight: bold;">function</span> Animal<span style="color: #009900;">(</span>nom<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">nom</span> <span style="color: #339933;">=</span> nom<span style="color: #339933;">;</span><br />
<span style="color: #009900;">}</span><br />
<br />
Animal.<span style="color: #000066; font-weight: bold;">prototype</span>.<span style="color: #660066;">toString</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">"Je m'appelle "</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">nom</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">"!"</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">}</span><br />
<br />
<span style="color: #000066; font-weight: bold;">var</span> chat <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> Animal<span style="color: #009900;">(</span><span style="color: #3366CC;">'Tigrou'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
alert<span style="color: #009900;">(</span>chat.<span style="color: #660066;">toString</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp;</code></p>
<p>Cette fois-ci, l'inconvénient est que la définition de la classe est complètement séparée entre le constructeur qui définit les attributs de l'objet, et les prototypes pour chaque méthode. La plus-part des frameworks javascript proposent donc une méthode pour définir une classe. Dans le cas de jQuery, il s'agit de Class.create():</p>
<p><code class="javascript"><br />
<span style="color: #000066; font-weight: bold;">var</span> Animal <span style="color: #339933;">=</span> Class.<span style="color: #660066;">create</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><br />
&nbsp; init<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span>nom<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">nom</span> <span style="color: #339933;">=</span> nom<span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">}</span><span style="color: #339933;">,</span><br />
<br />
&nbsp; toString<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">"Je m'appele "</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">nom</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">"!"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #000066; font-weight: bold;">var</span> chat <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> Animal<span style="color: #009900;">(</span><span style="color: #3366CC;">'Tigrou'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
alert<span style="color: #009900;">(</span>cat.<span style="color: #660066;">toString</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp;</code></p>
]]></description>
</item>
<item>
<title><![CDATA[Requêtes JSON-RPC avec jQuery]]></title>
<link><![CDATA[http://www.web-d.be/post/332/requêtes-json-rpc-avec-jquery.html]]></link>
<pubDate>Fri, 14 Aug 2015 11:21:20 +0200</pubDate>
<description><![CDATA[<p>Le protocole JSON-RPC facilite fortement la communication entre un client et un serveur.</p>
<p>Pour l'essentiel, une requête JSON-RPC est très semblable à une requête AJAX: elles sont toutes les deux transmises en utilisant le protocole HTTP. Cependant, <a href="http://www.jsonrpc.org/specification">la spécification JSON-RPC 2.0</a> ajoute quelques contraintes. Par exemple, la requête doit comporter un champ <i>jsonrpc</i> et un champ <i>id</i>.</p>
<p>Si un client jQuery doit accéder à un serveur JSON-RPC, le code à utiliser est donc le suivant:</p>
<p><code class="javascript"><br />
<span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span><br />
<span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span><br />
&nbsp; &nbsp; $<span style="color: #009900;">(</span>document<span style="color: #009900;">)</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; $.<span style="color: #660066;">ajax</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url<span style="color: #339933;">:</span> <span style="color: #3366CC;">'http://localhost:8080/RPC2'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data<span style="color: #339933;">:</span> JSON.<span style="color: #660066;">stringify</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jsonrpc<span style="color: #339933;">:</span> <span style="color: #3366CC;">'2.0'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method<span style="color: #339933;">:</span> <span style="color: #3366CC;">'add'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; params<span style="color: #339933;">:</span> <span style="color: #009900;">[</span><span style="color: #CC0000;">1400</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2100</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span style="color: #339933;">:</span> <span style="color: #3366CC;">"jsonrpc"</span><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span style="color: #339933;">:</span> <span style="color: #3366CC;">"POST"</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType<span style="color: #339933;">:</span> <span style="color: #3366CC;">"json"</span><span style="color: #339933;">,</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span>data<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert<span style="color: #009900;">(</span><span style="color: #3366CC;">"Résultat : "</span> <span style="color: #339933;">+</span> data.<span style="color: #660066;">result</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">}</span><span style="color: #339933;">,</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span>err<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert<span style="color: #009900;">(</span><span style="color: #3366CC;">"Erreur: "</span> <span style="color: #339933;">+</span> err<span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">}</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span><br />
&nbsp;</code></p>
]]></description>
</item>
</channel>
</rss>