wikiserver - Contribucions de l’usuari [ca]

M7 - Desenvolupament web en entorn servidor

2018-03-14T10:28:43Z

Asalinas: /* UF3: Tècniques d’accés a dades (20h) */

== UF1 : Desenvolupament web en entorn servidor (20h) ==
=== [[NF1 - Llenguatge PHP (35h)]] ===


== UF2: Generació dinàmica de pagines web (30h) ==
=== [[NF1 - Model Vista Controlador (10h)]] ===
=== [[NF2 - Framework PHP (15h)]] ===

=== [[NF2 - Framework PHP Symfony 3 (20h)]] ===



== UF3: Tècniques d’accés a dades (20h) ==
=== <span style="color:blue">NF1 -Tècniques d’accés a dades (30h)</span> ===
[[A1- Accés a BD amb PHP (10h)]]

[[A2- Framework de capes per a DDBB (20h)]]

== UF4: Serveis web. Pàgines dinàmiques interactives. Webs Híbrids (20h) ==

Instal·lació de la versió LTS 2.8 de symfony

2017-03-29T15:49:57Z

Asalinas: /* Instal·lació Composer */

= Instal·lació Symfony 2.8 =
Primer de tot heu de tenir instal·lat apache2 i php5
<pre>
sudo apt-get install apache2 php libapache2-mod-php
</pre>
Instal·lar el programa per baixar-se els paquets anomenat symfony:
<pre>
$ sudo curl -LsS https://symfony.com/installer -o /usr/local/bin/symfony

$ sudo chmod a+x /usr/local/bin/symfony
</pre>

Anar al directori '''/var/www/html''' i instal·lar els paquets de symfony amb aquesta comanda:
<pre>
symfony new nomProjecteSymfony 2.8
</pre>

Canviar els permisos de la carpeta '''app/cache i app/logs''':
<pre>
chmod 777 app/cache
chmod 777 app/logs
</pre>

Corregir els error d'instal·lació. Normalment son aquests tres:
* Set the "date.timezone" setting in php.ini* (like Europe/Paris).
Per corregir aquest error cal anar al fitxer /etc/php5/apache2/php.ini i al fitxer /etc/php5/cli/php.ini i buscar la configuració de la variable '''date.timezone''' i posar el valor: '''Europe/Madrid'''

* Set "xdebug.max_nesting_level" to e.g. "250"
Per corregir aquest error modifiqueu el fitxer/etc/php5/mods-available/xdebug.ini i afegiu la línia: '''xdebug.max_nesting_level = 250 '''

* Install and enable the intl extension
Instal·la la extensió intl:
<pre> sudo apt-get install php5-intl </pre>

* Install PDO drivers (mandatory for Doctrine).
Intal·lació de la BD que s'utilitzarà amb symfony:
<pre>
sudo apt-get install mysql-server
sudo apt-get install phpmyadmin
</pre>

Finalment, comprovar amb aquestes dues comandes que tot funciona correctament:
* des de terminal: '''sudo php nomProjecteSymfony/app/check.php'''
* des de navegador: '''http://localhost/nomProjecteSymfony/web/config.php'''

Les dues opcions ha de dir alguna cosa semblant a:
<pre>
[OK]
Your system is ready to run Symfony2 projects
</pre>
= Instal·lació Composer =
1. Baixar-se fitxer composer.phar seguint les instruccions de la web https://getcomposer.org/download/ o bé:
<source>
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
</source>

2. Moure el fitxer a la carpeta /usr/local/bin amb el nom composer.
Exemple:
<source>
mv composer.phar /usr/local/bin/composer
</source>

Instal·lació de la versió LTS 2.8 de symfony

2017-03-29T15:49:21Z

Asalinas: /* Instal·lació Composer */

= Instal·lació Symfony 2.8 =
Primer de tot heu de tenir instal·lat apache2 i php5
<pre>
sudo apt-get install apache2 php libapache2-mod-php
</pre>
Instal·lar el programa per baixar-se els paquets anomenat symfony:
<pre>
$ sudo curl -LsS https://symfony.com/installer -o /usr/local/bin/symfony

$ sudo chmod a+x /usr/local/bin/symfony
</pre>

Anar al directori '''/var/www/html''' i instal·lar els paquets de symfony amb aquesta comanda:
<pre>
symfony new nomProjecteSymfony 2.8
</pre>

Canviar els permisos de la carpeta '''app/cache i app/logs''':
<pre>
chmod 777 app/cache
chmod 777 app/logs
</pre>

Corregir els error d'instal·lació. Normalment son aquests tres:
* Set the "date.timezone" setting in php.ini* (like Europe/Paris).
Per corregir aquest error cal anar al fitxer /etc/php5/apache2/php.ini i al fitxer /etc/php5/cli/php.ini i buscar la configuració de la variable '''date.timezone''' i posar el valor: '''Europe/Madrid'''

* Set "xdebug.max_nesting_level" to e.g. "250"
Per corregir aquest error modifiqueu el fitxer/etc/php5/mods-available/xdebug.ini i afegiu la línia: '''xdebug.max_nesting_level = 250 '''

* Install and enable the intl extension
Instal·la la extensió intl:
<pre> sudo apt-get install php5-intl </pre>

* Install PDO drivers (mandatory for Doctrine).
Intal·lació de la BD que s'utilitzarà amb symfony:
<pre>
sudo apt-get install mysql-server
sudo apt-get install phpmyadmin
</pre>

Finalment, comprovar amb aquestes dues comandes que tot funciona correctament:
* des de terminal: '''sudo php nomProjecteSymfony/app/check.php'''
* des de navegador: '''http://localhost/nomProjecteSymfony/web/config.php'''

Les dues opcions ha de dir alguna cosa semblant a:
<pre>
[OK]
Your system is ready to run Symfony2 projects
</pre>
= Instal·lació Composer =
1. Baixar-se fitxer composer.phar seguint les instruccions de la web: https://getcomposer.org/download/ o bé:
<source>
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
</source>

2. Moure el fitxer a la carpeta /usr/local/bin amb el nom composer:
exemple:
<source>
mv composer.phar /usr/local/bin/composer
</source>

Instal·lació de la versió LTS 2.8 de symfony

2017-03-29T15:48:14Z

Asalinas: /* Instal·lació Composer */

= Instal·lació Symfony 2.8 =
Primer de tot heu de tenir instal·lat apache2 i php5
<pre>
sudo apt-get install apache2 php libapache2-mod-php
</pre>
Instal·lar el programa per baixar-se els paquets anomenat symfony:
<pre>
$ sudo curl -LsS https://symfony.com/installer -o /usr/local/bin/symfony

$ sudo chmod a+x /usr/local/bin/symfony
</pre>

Anar al directori '''/var/www/html''' i instal·lar els paquets de symfony amb aquesta comanda:
<pre>
symfony new nomProjecteSymfony 2.8
</pre>

Canviar els permisos de la carpeta '''app/cache i app/logs''':
<pre>
chmod 777 app/cache
chmod 777 app/logs
</pre>

Corregir els error d'instal·lació. Normalment son aquests tres:
* Set the "date.timezone" setting in php.ini* (like Europe/Paris).
Per corregir aquest error cal anar al fitxer /etc/php5/apache2/php.ini i al fitxer /etc/php5/cli/php.ini i buscar la configuració de la variable '''date.timezone''' i posar el valor: '''Europe/Madrid'''

* Set "xdebug.max_nesting_level" to e.g. "250"
Per corregir aquest error modifiqueu el fitxer/etc/php5/mods-available/xdebug.ini i afegiu la línia: '''xdebug.max_nesting_level = 250 '''

* Install and enable the intl extension
Instal·la la extensió intl:
<pre> sudo apt-get install php5-intl </pre>

* Install PDO drivers (mandatory for Doctrine).
Intal·lació de la BD que s'utilitzarà amb symfony:
<pre>
sudo apt-get install mysql-server
sudo apt-get install phpmyadmin
</pre>

Finalment, comprovar amb aquestes dues comandes que tot funciona correctament:
* des de terminal: '''sudo php nomProjecteSymfony/app/check.php'''
* des de navegador: '''http://localhost/nomProjecteSymfony/web/config.php'''

Les dues opcions ha de dir alguna cosa semblant a:
<pre>
[OK]
Your system is ready to run Symfony2 projects
</pre>
= Instal·lació Composer =
1. Baixar-se fitxer composer.phar seguint les [instruccions | https://getcomposer.org/download/]:
<source>
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
</source>

2. Moure el fitxer a la carpeta /usr/local/bin amb el nom composer:
exemple:
<source>
mv composer.phar /usr/local/bin/composer
</source>

Instal·lació de la versió LTS 2.8 de symfony

2017-03-29T15:47:34Z

Asalinas: /* Instal·lació Symfony 2.8 */

= Instal·lació Symfony 2.8 =
Primer de tot heu de tenir instal·lat apache2 i php5
<pre>
sudo apt-get install apache2 php libapache2-mod-php
</pre>
Instal·lar el programa per baixar-se els paquets anomenat symfony:
<pre>
$ sudo curl -LsS https://symfony.com/installer -o /usr/local/bin/symfony

$ sudo chmod a+x /usr/local/bin/symfony
</pre>

Anar al directori '''/var/www/html''' i instal·lar els paquets de symfony amb aquesta comanda:
<pre>
symfony new nomProjecteSymfony 2.8
</pre>

Canviar els permisos de la carpeta '''app/cache i app/logs''':
<pre>
chmod 777 app/cache
chmod 777 app/logs
</pre>

Corregir els error d'instal·lació. Normalment son aquests tres:
* Set the "date.timezone" setting in php.ini* (like Europe/Paris).
Per corregir aquest error cal anar al fitxer /etc/php5/apache2/php.ini i al fitxer /etc/php5/cli/php.ini i buscar la configuració de la variable '''date.timezone''' i posar el valor: '''Europe/Madrid'''

* Set "xdebug.max_nesting_level" to e.g. "250"
Per corregir aquest error modifiqueu el fitxer/etc/php5/mods-available/xdebug.ini i afegiu la línia: '''xdebug.max_nesting_level = 250 '''

* Install and enable the intl extension
Instal·la la extensió intl:
<pre> sudo apt-get install php5-intl </pre>

* Install PDO drivers (mandatory for Doctrine).
Intal·lació de la BD que s'utilitzarà amb symfony:
<pre>
sudo apt-get install mysql-server
sudo apt-get install phpmyadmin
</pre>

Finalment, comprovar amb aquestes dues comandes que tot funciona correctament:
* des de terminal: '''sudo php nomProjecteSymfony/app/check.php'''
* des de navegador: '''http://localhost/nomProjecteSymfony/web/config.php'''

Les dues opcions ha de dir alguna cosa semblant a:
<pre>
[OK]
Your system is ready to run Symfony2 projects
</pre>
= Instal·lació Composer =
1. Baixar-se fitxer composer.phar seguint les instruccions:
<source>
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
</source>

2. Moure el fitxer a la carpeta /usr/local/bin amb el nom composer:
exemple:
<source>
mv composer.phar /usr/local/bin/composer
</source>

Instal·lació de la versió LTS 2.8 de symfony

2017-03-29T14:49:30Z

Asalinas: /* Instal·lació Symfony 2.8 */

2016-05-09T11:52:36Z

Asalinas: /* Mashups */

=Què són els Serveis Web?=
Els '''serveis web són aplicacions client i servidor''' que es comuniquen sobre (WWW) Protocol de transferència d'hipertext de la World Wide Web (HTTP). Segons el descrit pel World Wide Web Consortium (W3C), serveis web '''proporcionen un mitjà estàndard d'interoperabilitat entre aplicacions de programari que s'executen en una varietat de plataformes i marcs'''.
Els serveis web es caracteritzen per la seva gran interoperabilitat i extensibilitat, així com les seves descripcions processable per màquina, gràcies a la utilització de XML. Els serveis web es poden combinar d'una manera precisa per aconseguir operacions complexes.

=Tipus de Serveis Web=
En el pla conceptual, un servei és un component de programari que es proporciona de la xarxa.

A nivell tècnic, els serveis web es poden implementar de diverses maneres. Els dos tipus de serveis web analitzats en aquesta secció es poden distingir com a '''Big Web Services''' i '''serveis web RESTful'''.

'''Big Web Services'''
En Java EE 6, '''JAX-WS '''proporciona la funcionalitat de '''Big Web Services'''. Serveis web Grans utilitzen missatges '''XML''' que segueixen el protocol d'accés a objectes estàndard ('''SOAP'''), un llenguatge XML que defineix una arquitectura de missatges i formats de missatges. Aquests sistemes sovint contenen una descripció llegible per les màquines de les operacions que ofereix el servei, escrit en la Web Services Description Language (WSDL), un llenguatge XML per a definir sintàcticament interfícies.

El format del missatge SOAP i WSDL llenguatge de definició d'interfície han guanyat l'adopció generalitzada. Moltes de les eines de desenvolupament, com NetBeans IDE, poden reduir la complexitat del desenvolupament d'aplicacions de serveis web.

[[Fitxer:soap-message.png|center]]

'''Serveis Web REST'''
En Java EE 6, '''JAX-RS''' proporciona la funcionalitat per a la Transferència d'estat representacional (REST Web Services). REST és molt adequat per a escenaris bàsics. Serveis web RESTful sovint estan millor integrats amb HTTP que els serveis basats en SOAP ja que no requereixen de missatges XML o definicions servei API WSDL.

Projecte Jersey és la implementació de referència de l'especificació JAX-RS. Jersei implementa suport per a les anotacions definides en l'especificació JAX-RS, el que facilita als desenvolupadors crear serveis web RESTful amb Java i la màquina virtual de Java (JVM).

== SOAP Web Services ==
Simple Object Access Protocol (SOAP)és un protocol estàndard per l'intercanvi de missatges XML. La comunicació entre el client i el servei succeeix utilitzant missatges XML.

'''Què és el WSDL?'''

WSDL: Web Service Description Language. És un arxiu XML que descriu els detalls tècnics de com s'implementa un servei web, més específicament la URI, port, nom dels mètodes, els paràmetres i els tipus de dades. Llegint el WSDL poden veure:
*Ports / EndPoint - URL del servei web
*Format del missatge d'entrada
*Format del missatge de sortida
*Protocol de seguretat que s'ha de seguir
*El protocol de servei web utilitzat

Exemple:
<source lang="xml">
<?xml version='1.0' encoding='UTF-8'?><definitions xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd" xmlns:wsp="http://www.w3.org/ns/ws-policy" xmlns:wsp1_2="http://schemas.xmlsoap.org/ws/2004/09/policy" xmlns:wsam="http://www.w3.org/2007/05/addressing/metadata" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:tns="http://ws/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.xmlsoap.org/wsdl/" targetNamespace="http://ws/" name="Hola">
<wsp:Policy wsu:Id="HolaPortBindingPolicy" />
<types>
<xsd:schema>
<xsd:import namespace="http://ws/" schemaLocation="http://localhost:8084/webServiceProject/Hola?xsd=1" />
</xsd:schema>
</types>
<message name="hello">
<part name="parameters" element="tns:hello" />
</message>
<message name="helloResponse">
<part name="parameters" element="tns:helloResponse" />
</message>
<message name="adeu">
<part name="parameters" element="tns:adeu" />
</message>
<message name="adeuResponse">
<part name="parameters" element="tns:adeuResponse" />
</message>
<portType name="Hola">
<operation name="hello">
<input wsam:Action="http://ws/Hola/helloRequest" message="tns:hello" />
<output wsam:Action="http://ws/Hola/helloResponse" message="tns:helloResponse" />
</operation>
<operation name="adeu">
<input wsam:Action="http://ws/Hola/adeuRequest" message="tns:adeu" />
<output wsam:Action="http://ws/Hola/adeuResponse" message="tns:adeuResponse" />
</operation>
</portType>
<binding name="HolaPortBinding" type="tns:Hola">
<wsp:PolicyReference URI="#HolaPortBindingPolicy" />
<soap:binding transport="http://schemas.xmlsoap.org/soap/http" style="document" />
<operation name="hello">
<soap:operation soapAction="" />
<input>
<soap:body use="literal" />
</input>
<output>
<soap:body use="literal" />
</output>
</operation>
<operation name="adeu">
<soap:operation soapAction="" />
<input>
<soap:body use="literal" />
</input>
<output>
<soap:body use="literal" />
</output>
</operation>
</binding>
<service name="Hola">
<port name="HolaPort" binding="tns:HolaPortBinding">
<soap:address location="http://localhost:8084/webServiceProject/Hola" />
</port>
</service>
</definitions>
</source>
Existeixen dues maneres per accedir a un servei web:
*'''El proveïdor de serveis web coneix al client''':El proveïdor de serveis web proporcionarà el '''WSDL'' al client i el client podrà accedir als serveis web.
*'''El proveïdor de serveis registri la WSDL com a UDDI'''. UUID (Universal Description, Discover and Integration). Els WSDL es poden convertir a un UDDI i així, poden estar disponibles mitjançant un directori de serveis per a la seva utilització.
=== SOAP Message ===
SOAP està basat en XML i, per això, està considerat llegible per alguns éssers humans, però està basat en un esquema XSD específic que se li ha d'afegir. Veiem un petit missatge SOAP treient tota la informació i agafant només les etiquetes que fan que sigui un missatge SOAP:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Header>
...
</soap:Header>
<soap:Body>
...
<soap:Fault>
...
</soap:Fault>
</soap:Body>
</soap:Envelope>
</source>
Sembla només un altre arxiu XML però, el que fa que sigui un missatge SOAP és l'element ''root'' anomenat ''Envelope'' que té l'espai de noms soap a http://www.w3.org/2001/12/soap-envelope. L'atribut '''soap:encodingStyle''' determina el tipus de dades que s'utilitza en el fitxer per que SOAP no té una codificació per defecte.

L'element '''soap:Envelope''' és obligatori però l'elemenmt següent '''soap:Header''' és opcional i normalment conté informació rellevant a l'autenticació i la sessió. El protocol SOAP no ofereix autenticació però ofereix als desenvolupadors aquesta etiqueta per a incloure-ho.

El següent element es tracta de '''soap:Body''' que és obligatori. Conté el missatge RPC (Remote Procedure Call) on s'inclou els mètodes i si és un missatge de resposta, també el valor retornat pel mètode. L'etiqueta '''soap:Fault''' és opcional. Si està present al missatge conté els erros i el missatges dels errors.

Donem un cop d'ull a un missatge SOAP de petició:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body xmlns:m="http://www.yourwebroot.com/stock">
<m:GetStockPrice>
<m:StockName>IBM</m:StockName>
</m:GetStockPrice>
</soap:Body>
</soap:Envelope>
</source>

El missatge anterior és una petició per obtenir el preu d'estoc d'una empresa en concret. Dintre de l'etiqueta '''soap:Body''' veuràs l'element ''GetStockPrice'' que No correspon a SOAP, si no, que aquest element fa referència a un mètode particular de l'aplicació de servidor que es cridarà al rebre aquest missatge. L'element ''StockName'' també és específic de l'aplicació servidora i correspon a un paràmetre de la funció anterior.

El missatge de resposta és molt semblant:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body xmlns:m="http://www.yourwebroot.com/stock">
<m:GetStockPriceResponse>
<m:Price>183.08</m:Price>
</m:GetStockPriceResponse>
</soap:Body>
</soap:Envelope>
</source>

Dintre de l'element '''soap:Body''' veuràs l'element ''GetStockPriceRespomse'' que conté l'element ''Price'' amb la dada de resposta. Ambdós elements son específics de l'aplicació de servidor.

=== NuSOAP server ===
És molt senzill crear un servei web utilitzant la llibreria NuSOAP de PHP. Pots descarregar-la des d'aquest [https://sourceforge.net/projects/nusoap/ | enllaç]. Baixa't-ho i descomprimeix-lo en el directori principal de l'aplicació. Per utilitzar-ho només has d'incloure la llibreria '''nusoap.php''' en el codi de l'aplicació.

Veiem un exemple d'utilització de la llibreria '''nusoap''' per crear un servei web.
<source lang="php">
<?php
require_once "nusoap.php";

function getProd($category) {
if ($category == "books") {
return join(",", array(
"The WordPress Anthology",
"PHP Master: Write Cutting Edge Code",
"Build Your Own Website the Right Way"));
}
else {
return "No products listed under that category";
}
}

$server = new soap_server();
$server->register("getProd");
$server->service($HTTP_RAW_POST_DATA);
</source>

Primer s'inclou el fitxer '''nusoap.php'' per poder accedir a la llibreria NuSOAP. Després es defineix la funció '''getProd()''' i s'instancia un objecte de la classe ''soap_server''. Immediatament després s'utilitza el mètode '''register'' per afegir la funció ''getProd'' al servidor sopa i poder accedir a ella des de un client. És a dir, convertim la funció ''getProd'' en un servei web.

Segurament, en un escenari real, la funció ''getProd'' hauria de cercar en una Base de Dades la informació que s'ha d'enviar a l'usuari. Ara mateix, no volem complicar el codi en coses externes a SOAP.

Es poden registrar funcions addicionals en el servidor per per donar més funcionalitats a l'aplicació. El procés seria idèntic del descrit anteriorment.

=== NuSOAP Client ===

Crearem una pàgina php que utilitzarà el servei web anterior:
<source lang="php">
<?php
require_once "nusoap.php";
$client = new nusoap_client("http://localhost/nusoap/productlist.php");

$error = $client->getError();
if ($error) {
echo "<h2>Constructor error</h2><pre>" . $error . "</pre>";
}

$result = $client->call("getProd", array("category" => "books"));

if ($client->fault) {
echo "<h2>Fault</h2><pre>";
print_r($result);
echo "</pre>";
}
else {
$error = $client->getError();
if ($error) {
echo "<h2>Error</h2><pre>" . $error . "</pre>";
}
else {
echo "<h2>Books</h2><pre>";
echo $result;
echo "</pre>";
}
}
</source>

Com va passar en el servidor, primer s'ha d'incloure la llibreria ''nusoap.php'' amb la directiva ''required_once''. Seguidament, es crea un nova instància d'un client soap amb la classe: '''nusoap_client'''. El constructor necessita la localització del servidor soap al que s'ha de connectar. És a dir, del fitxer on es troba la creació del soap_server amb les funcions registrades.

La funció '''getError''' comprova si el client SOAP s'ha creat correctament i si no ha estat així, mostra un missatge d'error.

El mètode '''call()''' genera i envia un missatge SOAP de tipus petició (Request) a la funció o el mètode definit com a primer paràmetre. El segon paràmetre de la funció ''call()'' és un array associatiu del paràmetres que necessita el mètode servidor.

La propietat '''fault''' i el mètode '''getError()''' son utilitzat per comprovar i mostrar cualsevol error produït en la comunicació.

=== Creació d'un arxiu WSDL ===

Escriure un fitxer WSDL a mà pot ser de bojos. Una utilitat molt interessant de '''nusoap''' és que pot crear un fitxer WSDL automàticament. Veurem un exemple modificant una mica l'exemple anterior:
<source lang="php">
<?php
require_once "nusoap.php";

function getProd($category) {
if ($category == "books") {
return join(",", array(
"The WordPress Anthology",
"PHP Master: Write Cutting Edge Code",
"Build Your Own Website the Right Way"));
}
else {
return "No products listed under that category";
}
}

$server = new soap_server();
$server->configureWSDL("productlist", "urn:productlist");

$server->register("getProd",
array("category" => "xsd:string"),
array("return" => "xsd:string"),
"urn:productlist",
"urn:productlist#getProd",
"rpc",
"encoded",
"Get a listing of products by category");

$server->service($HTTP_RAW_POST_DATA);
</source>
Bàsicament és el mateix codi amb quatre canvis. El primer canvi que s'ha afegit és la crida a la funció '''configureWSDL()'''. Aquest mètode prepara al servidor per a que pugui generar un fitxer WSDL dels nostres serveis registrats. El primer paràmetre d'aquesta funció, és el nom del servei i el segon correspon a l'espai de noms del servei.

El segon canvi afegeix informació addicional al mètode '''register'''. Veiem-ho:
* '''getProd:''' correspon al nom de la funció
* '''array("category"=>"xsd:string")''' correspon a la descripció dels paràmetres que necessita la funció '''getProd''', veieu que cada paràmetre té associat un tipus de dades.
* '''array("return"=>"xsd:string")''' correspon al valor de retorn de la funció ''getProd''. S'ha d'especificar el tipus de dades a retornar.
* '''urn:productlist''' defineix l'espai de noms
* '''urn:productlist#getProd''' defineix l'acció SOAP
* '''rpc''' defineix el tipus de crida. Aquesta pot ser ''rpc'' o ''document''
* '''encoded''' definexi el valor de l'atribut ''use''. Pot ser ''encoded'' o ''literal''
* L'últim paràmetre és un string de documentació que descriu el mètode ''getProd''.

Per veure el fitxer wsdl només hem d'afegir a la url '''?wsdl''' al final. Exemple: http://yourwebroot/productlist.php?wsdl
Una vegada vegis el WSDL ja es pots copiar en un fitxer i depositar-lo en el directori web.

Al tenir el WSDL generat en un fitxer en el servidor web podem aprofitar-lo per crear un client soap que el llegeixi. Per fer-ho només s'ha de canviar aquesta línia del client soap:
<source lang="php">
$client = new nusoap_client("http://localhost/nusoap/productlist.php");
</source>
per aquesta altre:
<source lang="php">
$client = new nusoap_client("products.wsdl", true);
</source>
Veieu que ara es crea el client SOAP utilitzant el fitxer '''products.wsdl''' que es troba en el mateix directory del servidor que l'aplicació client. El següent paràmetre és un booleà que indica que accepti aquest fitxer WSDL.
==Client Java Swing d'un servei Web ==
Es farà una implementació d'un servei web client utilitzant JAVA SWING. Segueix aquests passos:
*Crea un nou projecte de tipus Java Application.
[[Fitxer:wsclient-java1.png|500px]]

*Crea un formulari SWING per afegir els camps elements necessaris (buttons, labels, text fields, etc)
[[Fitxer:wsclient-java2.png|500px]]
[[Fitxer:wsclient-java3.png|500px]]

*Una vegada tinguis el formulari, afegeix la funcionalitat de web-service client
[[Fitxer:wsclient-java4.png|500px]]

*Omple el camp wsdl a l'hora de configurar el client. Deixa en blanc el camp package:
[[Fitxer:wsclient-java5.png|500px]]

*Una vegada generat, ja es pot utilitzar el client del WS des del formulari Swing. Per tal d'utilitzar-lo, genera el codi necessari insertant-lo des del netbeans:
[[Fitxer:wsclient-java6.png|500px]]
[[Fitxer:wsclient-java7.png|500px]]
[[Fitxer:wsclient-java8.png|300px]]

*Podem veure el codi generat. Él nom de la funció generada correspon al nom del servei web:
[[Fitxer:wsclient-java9.png|700px]]

*Ja podem utilitzar la crida al servei web associant-la al click d'un botó. El resultat de la execució del servei web es mostrarà en un Dialog.
[[Fitxer:wsclient-java10.png|700px]]

*Resultat de l'execució:
[[Fitxer:wsclient-java11.png|300px]][[Fitxer:wsclient-java12.png|300px]]

= XML =
En aquest apartat es veurà com utilitzar XML per guardar dades des de un servidor PHP.
Exemple de XML:
<source lang="xml">
Fitxer aules.xml:
<aules>
<aula>
<nom>205</nom>
<subxarxa>172.16.205.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>filtra</estatactual>
</aula>
<aula>
<nom>206</nom>
<subxarxa>172.16.206.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>denega</estatactual>
</aula>
</aules>
</source>
Per representar aquest fitxer com a un arbre i poder-lo recòrrer s'utilitza la llibreria DOMDocument de PHP.

== Creació del Arbre XML ==
Per crear una representació del fitxer anterior, primer s'ha de crear l'objecte DOMDocument i a continuació llegir el fitxer:
<source lang="php">
$file = "files/aules.xml";
$xmldom = new DOMDocument();
$xmldom->load($file);
</source>

== Obtenir un element del arbre ==
Es pot utilitzar la funció ''getElementsByTagName''. Exemple:
<source lang="php">
$aules = $xmldom->getElementsByTagName("aula");
</source>

== Recòrrer tots els elemens ==
Podem recòrrer tots els element amb un foreach:
<source lang="php">
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
$net = $aula->getElementsByTagName("subxarxa")->item(0)->nodeValue;
$mask = $aula->getElementsByTagName("mascara")->item(0)->nodeValue;
}
</source>

== Afegir un nou element ==
Per afegir un nou elment s'ha de crear un node nou i afegir tos els fills que es necessiti per crear el XML correcte.
Exemple:
<source lang="php">
$auladom = $xmldom->createElement("aula");
//creamos el nodo NOM con su valor $classroomname
$aulanomdom = $xmldom->createElement("nom");
$domnode = $xmldom->createTextNode(strtolower($classroomName));
$aulanomdom->appendChild($domnode);
$auladom->appendChild($aulanomdom);

//creamos el nodo NETWORK con su valor $network
$aulanetwork = $xmldom->createElement(XARXA_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($network));
$aulanetwork->appendChild($domnode);
$auladom->appendChild($aulanetwork);

//creamos el nodo MASK con su valor $mask
$aulamask = $xmldom->createElement(MASK_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($mask));
$aulamask->appendChild($domnode);
$auladom->appendChild($aulamask);

//creamos el nodo initial status con su valor $initialstatus
$aulastatus = $xmldom->createElement(INIT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulastatus->appendChild($domnode);
$auladom->appendChild($aulastatus);

//creamos el nodo current status con su valor $initialstatus
$aulacurrentstatus = $xmldom->createElement(CURRENT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulacurrentstatus->appendChild($domnode);
$auladom->appendChild($aulacurrentstatus);

//afegim el node aula a la llista de nodes
$root = $xmldom->documentElement;
$root->appendChild($auladom);

//guardem
$xmldom->save($filename);
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Esborrar un element ==
Per esborrar un element, primer s'ha de cercar, després dir-li al pare que ens volem eliminar. Però també hem d'esborrar els fills!.
<source lang="php">
//funció que esborra un node i els seus fills
function deleteNode($node) {
deleteChildren($node);
$parent = $node->parentNode;
$oldnode = $parent->removeChild($node);
}

//funció que esborra els fills d'un node
function deleteChildren($node) {
while (isset($node->firstChild)) {
deleteChildren($node->firstChild);
$node->removeChild($node->firstChild);
}
}

//funció que cerca al XML un node amb el nom=$classroomname
function delete($classroomName){
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
deleteNode($aula);
$xmldom->save($this->filename);
}
}
}
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Modificar un valor ==
Per modificar un valor, primer es cerca i després es mira quin dels atributs es vol modificar:
<source lang="php">
function setNewClassroomAttr($classroomName, $attr, $value)
{
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
$aula->getElementsByTagName($attr)->item(0)->nodeValue = strtolower($value);
$this->xmldom->save($this->filename);
}
}

}
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

Podeu trobar més informació a http://www.php.net/manual/en/class.domdocument.php
=Mashups=

Una remescla, també coneguda pel terme anglès '''mashup''', és una aplicació web híbrida que utilitza contingut d'altres aplicacions web per a crear un nou contingut complet, consumint serveis directament sempre a través del protocol http.

El contingut d'un mashup normalment prové de llocs web de tercers a través d'una interfície pública o utilitzant una API. Altres mètodes que constitueixen l'origen de les seves dades inclouen: sindicació web (RSS o Atom), screen scraping, etc.

Els mashup estan revolucionant el desenvolupament web de la mateixa manera que els weblogs han revolucionat la publicació en línia. Permeten que qualsevol combini, de forma innovadora, dades que existeixen en diferents pàgines web. Requereixen pocs coneixements tècnics, les API existents són senzilles i potents i els mashup són relativament fàcils de dissenyar. Els creadors de mashups són generalment gent innovadora que vol combinar de formes noves i creatives dades disponibles públicament.

==API de Google Maps==
A continuació trobareu un llistat amb les funcions més interesant de la API de Googlem maps que podeu utilitzar per realitzar mashups.

Primer heu d'afegir la llibreria de google Maps:
<source lang="html">

<script src="http://maps.googleapis.com/maps/api/js"></script>

</source>

Després heu de un contenidor per al mapa.

<source lang="html">
<div id="googleMap" style="width:500px;height:380px;"></div>
</source>

Una vegada teniu el contenidor heu de crear el mapa. Per crea-lo necessiteu informar a l'API de google maps unes quantes propietats:
* '''center''': Indica on ha de centrar el mapa. S'ha de donar les coordenades de latitud i longitud.
* '''zoom''': Indica el nivel de ZOOM del mapa. Zomm = 0 mostra la terra sencera.
* '''mapTypeId''': Indica el tipus de Mapa a mostrar. Existeixen els següents tipus de mapa: ROADMAP, SATELLITE, HYBRID, TERRAIN.

Exemple de les propietats:
<source lang="php">
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</source>

Una vegada s'ha definit les propietats ja es pot crear el mapa i un listener:
<source lang="javascript">
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
google.maps.event.addDomListener(window, 'load', initialize);
</source>

Exemple de mapa centrat a londres:
<source lang="html">
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>
</source>

Bé, ja tenim creat el mapa. Potser ens interessa afegir alguna marca dintre del mapa. Aquestes marques s'anomenen '''overlays''' i poden ser de diferents tipus:
* '''Marker''' - Localitzacions úniques del mapa. Poden tenir icones personalitzats.
* '''Polyline''' - Series de línies rectes en el mapa
* '''Polygon''' - Series de línies rectes en el mapa pero la forma resultant ha d'estar tancada.
* '''Circle and Rectangle'''
* '''Info Windows''' - Mostra contingut dintre de popups.
* '''marques personalitzades'''

Exemples:
<source lang="javascript">
//basic:
var marker=new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);

//Amb animació:
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});

marker.setMap(map);

//amb una icona
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});

marker.setMap(map);

//amb un poligon
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

//amb un cercle
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

//amb una finestra d'informacio
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

infowindow.open(map,marker);
</source>

També podem afegir un listener a un marker per, per exemple, obrir un infowindow quan es faci click en ell:
<source lnag="javascript">
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
</source>

Exemple de posicionament d'un marker on l'usuari fa click i a més a més afegeix un infowindow:
<source lang="javascript">
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});

function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
</source>

Podeu trobar la referència complerta de la API de google maps [http://www.w3schools.com/googleapi/google_maps_ref.asp | aqui].

== Com trobar les coordenades d'una ciutat ==
Podeu utilitzar l'API de google per trobar les coordenades d'una ciutat. Pots fer-ho de dues maneres:
Exemple1:
<source lang="php">
$address = 'india';
$details_url = "http://maps.googleapis.com/maps/api/geocode/json?address=".$address."&sensor=falsecurl_init();
curl_setopt($ch, CURLOPT_URL, $details_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = json_decode(curl_exec($ch), true);

// If Status Code is ZERO_RESULTS, OVER_QUERY_LIMIT, REQUEST_DENIED or INVALID_REQUEST
if ($response['status'] != 'OK') {
return null;
}

//print_r($response);
//print_r($response['results'][0]['geometry']['location']);

$latLng = $response['results'][0]['geometry']['location'];

$lat = $latLng['lat'];
$lng = $latLng['lng'];
</source>

Exemple2:
<source lang="php">
$geocode_stats = file_get_contents("http://maps.googleapis.com/maps/api/geocode/json?address=india&sensor=false");

$output_deals = json_decode($geocode_stats);

$latLng = $output_deals->results[0]->geometry->location;

$lat = $latLng->lat;
$lng = $latLng->lng;
</source>

Serveis Web i Mashups a PHP

2016-05-09T11:37:58Z

Asalinas: /* API de Google Maps */

2016-05-09T11:24:49Z

Asalinas: /* API de Google Maps */

Serveis Web i Mashups a PHP

2016-05-09T11:12:33Z

Asalinas: /* API de Google Maps */

=Què són els Serveis Web?=
Els '''serveis web són aplicacions client i servidor''' que es comuniquen sobre (WWW) Protocol de transferència d'hipertext de la World Wide Web (HTTP). Segons el descrit pel World Wide Web Consortium (W3C), serveis web '''proporcionen un mitjà estàndard d'interoperabilitat entre aplicacions de programari que s'executen en una varietat de plataformes i marcs'''.
Els serveis web es caracteritzen per la seva gran interoperabilitat i extensibilitat, així com les seves descripcions processable per màquina, gràcies a la utilització de XML. Els serveis web es poden combinar d'una manera precisa per aconseguir operacions complexes.

=Tipus de Serveis Web=
En el pla conceptual, un servei és un component de programari que es proporciona de la xarxa.

A nivell tècnic, els serveis web es poden implementar de diverses maneres. Els dos tipus de serveis web analitzats en aquesta secció es poden distingir com a '''Big Web Services''' i '''serveis web RESTful'''.

'''Big Web Services'''
En Java EE 6, '''JAX-WS '''proporciona la funcionalitat de '''Big Web Services'''. Serveis web Grans utilitzen missatges '''XML''' que segueixen el protocol d'accés a objectes estàndard ('''SOAP'''), un llenguatge XML que defineix una arquitectura de missatges i formats de missatges. Aquests sistemes sovint contenen una descripció llegible per les màquines de les operacions que ofereix el servei, escrit en la Web Services Description Language (WSDL), un llenguatge XML per a definir sintàcticament interfícies.

El format del missatge SOAP i WSDL llenguatge de definició d'interfície han guanyat l'adopció generalitzada. Moltes de les eines de desenvolupament, com NetBeans IDE, poden reduir la complexitat del desenvolupament d'aplicacions de serveis web.

[[Fitxer:soap-message.png|center]]

'''Serveis Web REST'''
En Java EE 6, '''JAX-RS''' proporciona la funcionalitat per a la Transferència d'estat representacional (REST Web Services). REST és molt adequat per a escenaris bàsics. Serveis web RESTful sovint estan millor integrats amb HTTP que els serveis basats en SOAP ja que no requereixen de missatges XML o definicions servei API WSDL.

Projecte Jersey és la implementació de referència de l'especificació JAX-RS. Jersei implementa suport per a les anotacions definides en l'especificació JAX-RS, el que facilita als desenvolupadors crear serveis web RESTful amb Java i la màquina virtual de Java (JVM).

== SOAP Web Services ==
Simple Object Access Protocol (SOAP)és un protocol estàndard per l'intercanvi de missatges XML. La comunicació entre el client i el servei succeeix utilitzant missatges XML.

'''Què és el WSDL?'''

WSDL: Web Service Description Language. És un arxiu XML que descriu els detalls tècnics de com s'implementa un servei web, més específicament la URI, port, nom dels mètodes, els paràmetres i els tipus de dades. Llegint el WSDL poden veure:
*Ports / EndPoint - URL del servei web
*Format del missatge d'entrada
*Format del missatge de sortida
*Protocol de seguretat que s'ha de seguir
*El protocol de servei web utilitzat

Exemple:
<source lang="xml">
<?xml version='1.0' encoding='UTF-8'?><definitions xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd" xmlns:wsp="http://www.w3.org/ns/ws-policy" xmlns:wsp1_2="http://schemas.xmlsoap.org/ws/2004/09/policy" xmlns:wsam="http://www.w3.org/2007/05/addressing/metadata" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:tns="http://ws/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.xmlsoap.org/wsdl/" targetNamespace="http://ws/" name="Hola">
<wsp:Policy wsu:Id="HolaPortBindingPolicy" />
<types>
<xsd:schema>
<xsd:import namespace="http://ws/" schemaLocation="http://localhost:8084/webServiceProject/Hola?xsd=1" />
</xsd:schema>
</types>
<message name="hello">
<part name="parameters" element="tns:hello" />
</message>
<message name="helloResponse">
<part name="parameters" element="tns:helloResponse" />
</message>
<message name="adeu">
<part name="parameters" element="tns:adeu" />
</message>
<message name="adeuResponse">
<part name="parameters" element="tns:adeuResponse" />
</message>
<portType name="Hola">
<operation name="hello">
<input wsam:Action="http://ws/Hola/helloRequest" message="tns:hello" />
<output wsam:Action="http://ws/Hola/helloResponse" message="tns:helloResponse" />
</operation>
<operation name="adeu">
<input wsam:Action="http://ws/Hola/adeuRequest" message="tns:adeu" />
<output wsam:Action="http://ws/Hola/adeuResponse" message="tns:adeuResponse" />
</operation>
</portType>
<binding name="HolaPortBinding" type="tns:Hola">
<wsp:PolicyReference URI="#HolaPortBindingPolicy" />
<soap:binding transport="http://schemas.xmlsoap.org/soap/http" style="document" />
<operation name="hello">
<soap:operation soapAction="" />
<input>
<soap:body use="literal" />
</input>
<output>
<soap:body use="literal" />
</output>
</operation>
<operation name="adeu">
<soap:operation soapAction="" />
<input>
<soap:body use="literal" />
</input>
<output>
<soap:body use="literal" />
</output>
</operation>
</binding>
<service name="Hola">
<port name="HolaPort" binding="tns:HolaPortBinding">
<soap:address location="http://localhost:8084/webServiceProject/Hola" />
</port>
</service>
</definitions>
</source>
Existeixen dues maneres per accedir a un servei web:
*'''El proveïdor de serveis web coneix al client''':El proveïdor de serveis web proporcionarà el '''WSDL'' al client i el client podrà accedir als serveis web.
*'''El proveïdor de serveis registri la WSDL com a UDDI'''. UUID (Universal Description, Discover and Integration). Els WSDL es poden convertir a un UDDI i així, poden estar disponibles mitjançant un directori de serveis per a la seva utilització.
=== SOAP Message ===
SOAP està basat en XML i, per això, està considerat llegible per alguns éssers humans, però està basat en un esquema XSD específic que se li ha d'afegir. Veiem un petit missatge SOAP treient tota la informació i agafant només les etiquetes que fan que sigui un missatge SOAP:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Header>
...
</soap:Header>
<soap:Body>
...
<soap:Fault>
...
</soap:Fault>
</soap:Body>
</soap:Envelope>
</source>
Sembla només un altre arxiu XML però, el que fa que sigui un missatge SOAP és l'element ''root'' anomenat ''Envelope'' que té l'espai de noms soap a http://www.w3.org/2001/12/soap-envelope. L'atribut '''soap:encodingStyle''' determina el tipus de dades que s'utilitza en el fitxer per que SOAP no té una codificació per defecte.

L'element '''soap:Envelope''' és obligatori però l'elemenmt següent '''soap:Header''' és opcional i normalment conté informació rellevant a l'autenticació i la sessió. El protocol SOAP no ofereix autenticació però ofereix als desenvolupadors aquesta etiqueta per a incloure-ho.

El següent element es tracta de '''soap:Body''' que és obligatori. Conté el missatge RPC (Remote Procedure Call) on s'inclou els mètodes i si és un missatge de resposta, també el valor retornat pel mètode. L'etiqueta '''soap:Fault''' és opcional. Si està present al missatge conté els erros i el missatges dels errors.

Donem un cop d'ull a un missatge SOAP de petició:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body xmlns:m="http://www.yourwebroot.com/stock">
<m:GetStockPrice>
<m:StockName>IBM</m:StockName>
</m:GetStockPrice>
</soap:Body>
</soap:Envelope>
</source>

El missatge anterior és una petició per obtenir el preu d'estoc d'una empresa en concret. Dintre de l'etiqueta '''soap:Body''' veuràs l'element ''GetStockPrice'' que No correspon a SOAP, si no, que aquest element fa referència a un mètode particular de l'aplicació de servidor que es cridarà al rebre aquest missatge. L'element ''StockName'' també és específic de l'aplicació servidora i correspon a un paràmetre de la funció anterior.

El missatge de resposta és molt semblant:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body xmlns:m="http://www.yourwebroot.com/stock">
<m:GetStockPriceResponse>
<m:Price>183.08</m:Price>
</m:GetStockPriceResponse>
</soap:Body>
</soap:Envelope>
</source>

Dintre de l'element '''soap:Body''' veuràs l'element ''GetStockPriceRespomse'' que conté l'element ''Price'' amb la dada de resposta. Ambdós elements son específics de l'aplicació de servidor.

=== NuSOAP server ===
És molt senzill crear un servei web utilitzant la llibreria NuSOAP de PHP. Pots descarregar-la des d'aquest [https://sourceforge.net/projects/nusoap/ | enllaç]. Baixa't-ho i descomprimeix-lo en el directori principal de l'aplicació. Per utilitzar-ho només has d'incloure la llibreria '''nusoap.php''' en el codi de l'aplicació.

Veiem un exemple d'utilització de la llibreria '''nusoap''' per crear un servei web.
<source lang="php">
<?php
require_once "nusoap.php";

function getProd($category) {
if ($category == "books") {
return join(",", array(
"The WordPress Anthology",
"PHP Master: Write Cutting Edge Code",
"Build Your Own Website the Right Way"));
}
else {
return "No products listed under that category";
}
}

$server = new soap_server();
$server->register("getProd");
$server->service($HTTP_RAW_POST_DATA);
</source>

Primer s'inclou el fitxer '''nusoap.php'' per poder accedir a la llibreria NuSOAP. Després es defineix la funció '''getProd()''' i s'instancia un objecte de la classe ''soap_server''. Immediatament després s'utilitza el mètode '''register'' per afegir la funció ''getProd'' al servidor sopa i poder accedir a ella des de un client. És a dir, convertim la funció ''getProd'' en un servei web.

Segurament, en un escenari real, la funció ''getProd'' hauria de cercar en una Base de Dades la informació que s'ha d'enviar a l'usuari. Ara mateix, no volem complicar el codi en coses externes a SOAP.

Es poden registrar funcions addicionals en el servidor per per donar més funcionalitats a l'aplicació. El procés seria idèntic del descrit anteriorment.

=== NuSOAP Client ===

Crearem una pàgina php que utilitzarà el servei web anterior:
<source lang="php">
<?php
require_once "nusoap.php";
$client = new nusoap_client("http://localhost/nusoap/productlist.php");

$error = $client->getError();
if ($error) {
echo "<h2>Constructor error</h2><pre>" . $error . "</pre>";
}

$result = $client->call("getProd", array("category" => "books"));

if ($client->fault) {
echo "<h2>Fault</h2><pre>";
print_r($result);
echo "</pre>";
}
else {
$error = $client->getError();
if ($error) {
echo "<h2>Error</h2><pre>" . $error . "</pre>";
}
else {
echo "<h2>Books</h2><pre>";
echo $result;
echo "</pre>";
}
}
</source>

Com va passar en el servidor, primer s'ha d'incloure la llibreria ''nusoap.php'' amb la directiva ''required_once''. Seguidament, es crea un nova instància d'un client soap amb la classe: '''nusoap_client'''. El constructor necessita la localització del servidor soap al que s'ha de connectar. És a dir, del fitxer on es troba la creació del soap_server amb les funcions registrades.

La funció '''getError''' comprova si el client SOAP s'ha creat correctament i si no ha estat així, mostra un missatge d'error.

El mètode '''call()''' genera i envia un missatge SOAP de tipus petició (Request) a la funció o el mètode definit com a primer paràmetre. El segon paràmetre de la funció ''call()'' és un array associatiu del paràmetres que necessita el mètode servidor.

La propietat '''fault''' i el mètode '''getError()''' son utilitzat per comprovar i mostrar cualsevol error produït en la comunicació.

=== Creació d'un arxiu WSDL ===

Escriure un fitxer WSDL a mà pot ser de bojos. Una utilitat molt interessant de '''nusoap''' és que pot crear un fitxer WSDL automàticament. Veurem un exemple modificant una mica l'exemple anterior:
<source lang="php">
<?php
require_once "nusoap.php";

function getProd($category) {
if ($category == "books") {
return join(",", array(
"The WordPress Anthology",
"PHP Master: Write Cutting Edge Code",
"Build Your Own Website the Right Way"));
}
else {
return "No products listed under that category";
}
}

$server = new soap_server();
$server->configureWSDL("productlist", "urn:productlist");

$server->register("getProd",
array("category" => "xsd:string"),
array("return" => "xsd:string"),
"urn:productlist",
"urn:productlist#getProd",
"rpc",
"encoded",
"Get a listing of products by category");

$server->service($HTTP_RAW_POST_DATA);
</source>
Bàsicament és el mateix codi amb quatre canvis. El primer canvi que s'ha afegit és la crida a la funció '''configureWSDL()'''. Aquest mètode prepara al servidor per a que pugui generar un fitxer WSDL dels nostres serveis registrats. El primer paràmetre d'aquesta funció, és el nom del servei i el segon correspon a l'espai de noms del servei.

El segon canvi afegeix informació addicional al mètode '''register'''. Veiem-ho:
* '''getProd:''' correspon al nom de la funció
* '''array("category"=>"xsd:string")''' correspon a la descripció dels paràmetres que necessita la funció '''getProd''', veieu que cada paràmetre té associat un tipus de dades.
* '''array("return"=>"xsd:string")''' correspon al valor de retorn de la funció ''getProd''. S'ha d'especificar el tipus de dades a retornar.
* '''urn:productlist''' defineix l'espai de noms
* '''urn:productlist#getProd''' defineix l'acció SOAP
* '''rpc''' defineix el tipus de crida. Aquesta pot ser ''rpc'' o ''document''
* '''encoded''' definexi el valor de l'atribut ''use''. Pot ser ''encoded'' o ''literal''
* L'últim paràmetre és un string de documentació que descriu el mètode ''getProd''.

Per veure el fitxer wsdl només hem d'afegir a la url '''?wsdl''' al final. Exemple: http://yourwebroot/productlist.php?wsdl
Una vegada vegis el WSDL ja es pots copiar en un fitxer i depositar-lo en el directori web.

Al tenir el WSDL generat en un fitxer en el servidor web podem aprofitar-lo per crear un client soap que el llegeixi. Per fer-ho només s'ha de canviar aquesta línia del client soap:
<source lang="php">
$client = new nusoap_client("http://localhost/nusoap/productlist.php");
</source>
per aquesta altre:
<source lang="php">
$client = new nusoap_client("products.wsdl", true);
</source>
Veieu que ara es crea el client SOAP utilitzant el fitxer '''products.wsdl''' que es troba en el mateix directory del servidor que l'aplicació client. El següent paràmetre és un booleà que indica que accepti aquest fitxer WSDL.
==Client Java Swing d'un servei Web ==
Es farà una implementació d'un servei web client utilitzant JAVA SWING. Segueix aquests passos:
*Crea un nou projecte de tipus Java Application.
[[Fitxer:wsclient-java1.png|500px]]

*Crea un formulari SWING per afegir els camps elements necessaris (buttons, labels, text fields, etc)
[[Fitxer:wsclient-java2.png|500px]]
[[Fitxer:wsclient-java3.png|500px]]

*Una vegada tinguis el formulari, afegeix la funcionalitat de web-service client
[[Fitxer:wsclient-java4.png|500px]]

*Omple el camp wsdl a l'hora de configurar el client. Deixa en blanc el camp package:
[[Fitxer:wsclient-java5.png|500px]]

*Una vegada generat, ja es pot utilitzar el client del WS des del formulari Swing. Per tal d'utilitzar-lo, genera el codi necessari insertant-lo des del netbeans:
[[Fitxer:wsclient-java6.png|500px]]
[[Fitxer:wsclient-java7.png|500px]]
[[Fitxer:wsclient-java8.png|300px]]

*Podem veure el codi generat. Él nom de la funció generada correspon al nom del servei web:
[[Fitxer:wsclient-java9.png|700px]]

*Ja podem utilitzar la crida al servei web associant-la al click d'un botó. El resultat de la execució del servei web es mostrarà en un Dialog.
[[Fitxer:wsclient-java10.png|700px]]

*Resultat de l'execució:
[[Fitxer:wsclient-java11.png|300px]][[Fitxer:wsclient-java12.png|300px]]

= XML =
En aquest apartat es veurà com utilitzar XML per guardar dades des de un servidor PHP.
Exemple de XML:
<source lang="xml">
Fitxer aules.xml:
<aules>
<aula>
<nom>205</nom>
<subxarxa>172.16.205.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>filtra</estatactual>
</aula>
<aula>
<nom>206</nom>
<subxarxa>172.16.206.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>denega</estatactual>
</aula>
</aules>
</source>
Per representar aquest fitxer com a un arbre i poder-lo recòrrer s'utilitza la llibreria DOMDocument de PHP.

== Creació del Arbre XML ==
Per crear una representació del fitxer anterior, primer s'ha de crear l'objecte DOMDocument i a continuació llegir el fitxer:
<source lang="php">
$file = "files/aules.xml";
$xmldom = new DOMDocument();
$xmldom->load($file);
</source>

== Obtenir un element del arbre ==
Es pot utilitzar la funció ''getElementsByTagName''. Exemple:
<source lang="php">
$aules = $xmldom->getElementsByTagName("aula");
</source>

== Recòrrer tots els elemens ==
Podem recòrrer tots els element amb un foreach:
<source lang="php">
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
$net = $aula->getElementsByTagName("subxarxa")->item(0)->nodeValue;
$mask = $aula->getElementsByTagName("mascara")->item(0)->nodeValue;
}
</source>

== Afegir un nou element ==
Per afegir un nou elment s'ha de crear un node nou i afegir tos els fills que es necessiti per crear el XML correcte.
Exemple:
<source lang="php">
$auladom = $xmldom->createElement("aula");
//creamos el nodo NOM con su valor $classroomname
$aulanomdom = $xmldom->createElement("nom");
$domnode = $xmldom->createTextNode(strtolower($classroomName));
$aulanomdom->appendChild($domnode);
$auladom->appendChild($aulanomdom);

//creamos el nodo NETWORK con su valor $network
$aulanetwork = $xmldom->createElement(XARXA_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($network));
$aulanetwork->appendChild($domnode);
$auladom->appendChild($aulanetwork);

//creamos el nodo MASK con su valor $mask
$aulamask = $xmldom->createElement(MASK_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($mask));
$aulamask->appendChild($domnode);
$auladom->appendChild($aulamask);

//creamos el nodo initial status con su valor $initialstatus
$aulastatus = $xmldom->createElement(INIT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulastatus->appendChild($domnode);
$auladom->appendChild($aulastatus);

//creamos el nodo current status con su valor $initialstatus
$aulacurrentstatus = $xmldom->createElement(CURRENT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulacurrentstatus->appendChild($domnode);
$auladom->appendChild($aulacurrentstatus);

//afegim el node aula a la llista de nodes
$root = $xmldom->documentElement;
$root->appendChild($auladom);

//guardem
$xmldom->save($filename);
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Esborrar un element ==
Per esborrar un element, primer s'ha de cercar, després dir-li al pare que ens volem eliminar. Però també hem d'esborrar els fills!.
<source lang="php">
//funció que esborra un node i els seus fills
function deleteNode($node) {
deleteChildren($node);
$parent = $node->parentNode;
$oldnode = $parent->removeChild($node);
}

//funció que esborra els fills d'un node
function deleteChildren($node) {
while (isset($node->firstChild)) {
deleteChildren($node->firstChild);
$node->removeChild($node->firstChild);
}
}

//funció que cerca al XML un node amb el nom=$classroomname
function delete($classroomName){
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
deleteNode($aula);
$xmldom->save($this->filename);
}
}
}
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Modificar un valor ==
Per modificar un valor, primer es cerca i després es mira quin dels atributs es vol modificar:
<source lang="php">
function setNewClassroomAttr($classroomName, $attr, $value)
{
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
$aula->getElementsByTagName($attr)->item(0)->nodeValue = strtolower($value);
$this->xmldom->save($this->filename);
}
}

}
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

Podeu trobar més informació a http://www.php.net/manual/en/class.domdocument.php
=Mashups=

Una remescla, també coneguda pel terme anglès '''mashup''', és una aplicació web híbrida que utilitza contingut d'altres aplicacions web per a crear un nou contingut complet, consumint serveis directament sempre a través del protocol http.

El contingut d'un mashup normalment prové de llocs web de tercers a través d'una interfície pública o utilitzant una API. Altres mètodes que constitueixen l'origen de les seves dades inclouen: sindicació web (RSS o Atom), screen scraping, etc.

Els mashup estan revolucionant el desenvolupament web de la mateixa manera que els weblogs han revolucionat la publicació en línia. Permeten que qualsevol combini, de forma innovadora, dades que existeixen en diferents pàgines web. Requereixen pocs coneixements tècnics, les API existents són senzilles i potents i els mashup són relativament fàcils de dissenyar. Els creadors de mashups són generalment gent innovadora que vol combinar de formes noves i creatives dades disponibles públicament.

==API de Google Maps==
A continuació trobareu un llistat amb les funcions més interesant de la API de Googlem maps que podeu utilitzar per realitzar mashups.

Primer heu d'afegir la llibreria de google Maps:
<source lang="HTML">

<script src="http://maps.googleapis.com/maps/api/js"></script>

</source>

Després heu de un contenidor per al mapa.

<source lang="html">
<div id="googleMap" style="width:500px;height:380px;"></div>
</source>

Una vegada teniu el contenidor heu de crear el mapa. Per crea-lo necessiteu informar a l'API de google maps unes quantes propietats:
* '''center''': Indica on ha de centrar el mapa. S'ha de donar les coordenades de latitud i longitud.
* '''zoom''': Indica el nivel de ZOOM del mapa. Zomm = 0 mostra la terra sencera.
* '''mapTypeId''': Indica el tipus de Mapa a mostrar. Existeixen els següents tipus de mapa: ROADMAP, SATELLITE, HYBRID, TERRAIN.

Exemple de les propietats:
<source lang="php">
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</source>

Exemple de mapa centrat a londres:
<source lang="html">
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>
</source>

Serveis Web i Mashups a PHP

2016-05-09T11:12:07Z

Asalinas: /* API de Google Maps */

=Què són els Serveis Web?=
Els '''serveis web són aplicacions client i servidor''' que es comuniquen sobre (WWW) Protocol de transferència d'hipertext de la World Wide Web (HTTP). Segons el descrit pel World Wide Web Consortium (W3C), serveis web '''proporcionen un mitjà estàndard d'interoperabilitat entre aplicacions de programari que s'executen en una varietat de plataformes i marcs'''.
Els serveis web es caracteritzen per la seva gran interoperabilitat i extensibilitat, així com les seves descripcions processable per màquina, gràcies a la utilització de XML. Els serveis web es poden combinar d'una manera precisa per aconseguir operacions complexes.

=Tipus de Serveis Web=
En el pla conceptual, un servei és un component de programari que es proporciona de la xarxa.

A nivell tècnic, els serveis web es poden implementar de diverses maneres. Els dos tipus de serveis web analitzats en aquesta secció es poden distingir com a '''Big Web Services''' i '''serveis web RESTful'''.

'''Big Web Services'''
En Java EE 6, '''JAX-WS '''proporciona la funcionalitat de '''Big Web Services'''. Serveis web Grans utilitzen missatges '''XML''' que segueixen el protocol d'accés a objectes estàndard ('''SOAP'''), un llenguatge XML que defineix una arquitectura de missatges i formats de missatges. Aquests sistemes sovint contenen una descripció llegible per les màquines de les operacions que ofereix el servei, escrit en la Web Services Description Language (WSDL), un llenguatge XML per a definir sintàcticament interfícies.

El format del missatge SOAP i WSDL llenguatge de definició d'interfície han guanyat l'adopció generalitzada. Moltes de les eines de desenvolupament, com NetBeans IDE, poden reduir la complexitat del desenvolupament d'aplicacions de serveis web.

[[Fitxer:soap-message.png|center]]

'''Serveis Web REST'''
En Java EE 6, '''JAX-RS''' proporciona la funcionalitat per a la Transferència d'estat representacional (REST Web Services). REST és molt adequat per a escenaris bàsics. Serveis web RESTful sovint estan millor integrats amb HTTP que els serveis basats en SOAP ja que no requereixen de missatges XML o definicions servei API WSDL.

Projecte Jersey és la implementació de referència de l'especificació JAX-RS. Jersei implementa suport per a les anotacions definides en l'especificació JAX-RS, el que facilita als desenvolupadors crear serveis web RESTful amb Java i la màquina virtual de Java (JVM).

== SOAP Web Services ==
Simple Object Access Protocol (SOAP)és un protocol estàndard per l'intercanvi de missatges XML. La comunicació entre el client i el servei succeeix utilitzant missatges XML.

'''Què és el WSDL?'''

WSDL: Web Service Description Language. És un arxiu XML que descriu els detalls tècnics de com s'implementa un servei web, més específicament la URI, port, nom dels mètodes, els paràmetres i els tipus de dades. Llegint el WSDL poden veure:
*Ports / EndPoint - URL del servei web
*Format del missatge d'entrada
*Format del missatge de sortida
*Protocol de seguretat que s'ha de seguir
*El protocol de servei web utilitzat

Exemple:
<source lang="xml">
<?xml version='1.0' encoding='UTF-8'?><definitions xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd" xmlns:wsp="http://www.w3.org/ns/ws-policy" xmlns:wsp1_2="http://schemas.xmlsoap.org/ws/2004/09/policy" xmlns:wsam="http://www.w3.org/2007/05/addressing/metadata" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:tns="http://ws/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.xmlsoap.org/wsdl/" targetNamespace="http://ws/" name="Hola">
<wsp:Policy wsu:Id="HolaPortBindingPolicy" />
<types>
<xsd:schema>
<xsd:import namespace="http://ws/" schemaLocation="http://localhost:8084/webServiceProject/Hola?xsd=1" />
</xsd:schema>
</types>
<message name="hello">
<part name="parameters" element="tns:hello" />
</message>
<message name="helloResponse">
<part name="parameters" element="tns:helloResponse" />
</message>
<message name="adeu">
<part name="parameters" element="tns:adeu" />
</message>
<message name="adeuResponse">
<part name="parameters" element="tns:adeuResponse" />
</message>
<portType name="Hola">
<operation name="hello">
<input wsam:Action="http://ws/Hola/helloRequest" message="tns:hello" />
<output wsam:Action="http://ws/Hola/helloResponse" message="tns:helloResponse" />
</operation>
<operation name="adeu">
<input wsam:Action="http://ws/Hola/adeuRequest" message="tns:adeu" />
<output wsam:Action="http://ws/Hola/adeuResponse" message="tns:adeuResponse" />
</operation>
</portType>
<binding name="HolaPortBinding" type="tns:Hola">
<wsp:PolicyReference URI="#HolaPortBindingPolicy" />
<soap:binding transport="http://schemas.xmlsoap.org/soap/http" style="document" />
<operation name="hello">
<soap:operation soapAction="" />
<input>
<soap:body use="literal" />
</input>
<output>
<soap:body use="literal" />
</output>
</operation>
<operation name="adeu">
<soap:operation soapAction="" />
<input>
<soap:body use="literal" />
</input>
<output>
<soap:body use="literal" />
</output>
</operation>
</binding>
<service name="Hola">
<port name="HolaPort" binding="tns:HolaPortBinding">
<soap:address location="http://localhost:8084/webServiceProject/Hola" />
</port>
</service>
</definitions>
</source>
Existeixen dues maneres per accedir a un servei web:
*'''El proveïdor de serveis web coneix al client''':El proveïdor de serveis web proporcionarà el '''WSDL'' al client i el client podrà accedir als serveis web.
*'''El proveïdor de serveis registri la WSDL com a UDDI'''. UUID (Universal Description, Discover and Integration). Els WSDL es poden convertir a un UDDI i així, poden estar disponibles mitjançant un directori de serveis per a la seva utilització.
=== SOAP Message ===
SOAP està basat en XML i, per això, està considerat llegible per alguns éssers humans, però està basat en un esquema XSD específic que se li ha d'afegir. Veiem un petit missatge SOAP treient tota la informació i agafant només les etiquetes que fan que sigui un missatge SOAP:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Header>
...
</soap:Header>
<soap:Body>
...
<soap:Fault>
...
</soap:Fault>
</soap:Body>
</soap:Envelope>
</source>
Sembla només un altre arxiu XML però, el que fa que sigui un missatge SOAP és l'element ''root'' anomenat ''Envelope'' que té l'espai de noms soap a http://www.w3.org/2001/12/soap-envelope. L'atribut '''soap:encodingStyle''' determina el tipus de dades que s'utilitza en el fitxer per que SOAP no té una codificació per defecte.

L'element '''soap:Envelope''' és obligatori però l'elemenmt següent '''soap:Header''' és opcional i normalment conté informació rellevant a l'autenticació i la sessió. El protocol SOAP no ofereix autenticació però ofereix als desenvolupadors aquesta etiqueta per a incloure-ho.

El següent element es tracta de '''soap:Body''' que és obligatori. Conté el missatge RPC (Remote Procedure Call) on s'inclou els mètodes i si és un missatge de resposta, també el valor retornat pel mètode. L'etiqueta '''soap:Fault''' és opcional. Si està present al missatge conté els erros i el missatges dels errors.

Donem un cop d'ull a un missatge SOAP de petició:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body xmlns:m="http://www.yourwebroot.com/stock">
<m:GetStockPrice>
<m:StockName>IBM</m:StockName>
</m:GetStockPrice>
</soap:Body>
</soap:Envelope>
</source>

El missatge anterior és una petició per obtenir el preu d'estoc d'una empresa en concret. Dintre de l'etiqueta '''soap:Body''' veuràs l'element ''GetStockPrice'' que No correspon a SOAP, si no, que aquest element fa referència a un mètode particular de l'aplicació de servidor que es cridarà al rebre aquest missatge. L'element ''StockName'' també és específic de l'aplicació servidora i correspon a un paràmetre de la funció anterior.

El missatge de resposta és molt semblant:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body xmlns:m="http://www.yourwebroot.com/stock">
<m:GetStockPriceResponse>
<m:Price>183.08</m:Price>
</m:GetStockPriceResponse>
</soap:Body>
</soap:Envelope>
</source>

Dintre de l'element '''soap:Body''' veuràs l'element ''GetStockPriceRespomse'' que conté l'element ''Price'' amb la dada de resposta. Ambdós elements son específics de l'aplicació de servidor.

=== NuSOAP server ===
És molt senzill crear un servei web utilitzant la llibreria NuSOAP de PHP. Pots descarregar-la des d'aquest [https://sourceforge.net/projects/nusoap/ | enllaç]. Baixa't-ho i descomprimeix-lo en el directori principal de l'aplicació. Per utilitzar-ho només has d'incloure la llibreria '''nusoap.php''' en el codi de l'aplicació.

Veiem un exemple d'utilització de la llibreria '''nusoap''' per crear un servei web.
<source lang="php">
<?php
require_once "nusoap.php";

function getProd($category) {
if ($category == "books") {
return join(",", array(
"The WordPress Anthology",
"PHP Master: Write Cutting Edge Code",
"Build Your Own Website the Right Way"));
}
else {
return "No products listed under that category";
}
}

$server = new soap_server();
$server->register("getProd");
$server->service($HTTP_RAW_POST_DATA);
</source>

Primer s'inclou el fitxer '''nusoap.php'' per poder accedir a la llibreria NuSOAP. Després es defineix la funció '''getProd()''' i s'instancia un objecte de la classe ''soap_server''. Immediatament després s'utilitza el mètode '''register'' per afegir la funció ''getProd'' al servidor sopa i poder accedir a ella des de un client. És a dir, convertim la funció ''getProd'' en un servei web.

Segurament, en un escenari real, la funció ''getProd'' hauria de cercar en una Base de Dades la informació que s'ha d'enviar a l'usuari. Ara mateix, no volem complicar el codi en coses externes a SOAP.

Es poden registrar funcions addicionals en el servidor per per donar més funcionalitats a l'aplicació. El procés seria idèntic del descrit anteriorment.

=== NuSOAP Client ===

Crearem una pàgina php que utilitzarà el servei web anterior:
<source lang="php">
<?php
require_once "nusoap.php";
$client = new nusoap_client("http://localhost/nusoap/productlist.php");

$error = $client->getError();
if ($error) {
echo "<h2>Constructor error</h2><pre>" . $error . "</pre>";
}

$result = $client->call("getProd", array("category" => "books"));

if ($client->fault) {
echo "<h2>Fault</h2><pre>";
print_r($result);
echo "</pre>";
}
else {
$error = $client->getError();
if ($error) {
echo "<h2>Error</h2><pre>" . $error . "</pre>";
}
else {
echo "<h2>Books</h2><pre>";
echo $result;
echo "</pre>";
}
}
</source>

Com va passar en el servidor, primer s'ha d'incloure la llibreria ''nusoap.php'' amb la directiva ''required_once''. Seguidament, es crea un nova instància d'un client soap amb la classe: '''nusoap_client'''. El constructor necessita la localització del servidor soap al que s'ha de connectar. És a dir, del fitxer on es troba la creació del soap_server amb les funcions registrades.

La funció '''getError''' comprova si el client SOAP s'ha creat correctament i si no ha estat així, mostra un missatge d'error.

El mètode '''call()''' genera i envia un missatge SOAP de tipus petició (Request) a la funció o el mètode definit com a primer paràmetre. El segon paràmetre de la funció ''call()'' és un array associatiu del paràmetres que necessita el mètode servidor.

La propietat '''fault''' i el mètode '''getError()''' son utilitzat per comprovar i mostrar cualsevol error produït en la comunicació.

=== Creació d'un arxiu WSDL ===

Escriure un fitxer WSDL a mà pot ser de bojos. Una utilitat molt interessant de '''nusoap''' és que pot crear un fitxer WSDL automàticament. Veurem un exemple modificant una mica l'exemple anterior:
<source lang="php">
<?php
require_once "nusoap.php";

function getProd($category) {
if ($category == "books") {
return join(",", array(
"The WordPress Anthology",
"PHP Master: Write Cutting Edge Code",
"Build Your Own Website the Right Way"));
}
else {
return "No products listed under that category";
}
}

$server = new soap_server();
$server->configureWSDL("productlist", "urn:productlist");

$server->register("getProd",
array("category" => "xsd:string"),
array("return" => "xsd:string"),
"urn:productlist",
"urn:productlist#getProd",
"rpc",
"encoded",
"Get a listing of products by category");

$server->service($HTTP_RAW_POST_DATA);
</source>
Bàsicament és el mateix codi amb quatre canvis. El primer canvi que s'ha afegit és la crida a la funció '''configureWSDL()'''. Aquest mètode prepara al servidor per a que pugui generar un fitxer WSDL dels nostres serveis registrats. El primer paràmetre d'aquesta funció, és el nom del servei i el segon correspon a l'espai de noms del servei.

El segon canvi afegeix informació addicional al mètode '''register'''. Veiem-ho:
* '''getProd:''' correspon al nom de la funció
* '''array("category"=>"xsd:string")''' correspon a la descripció dels paràmetres que necessita la funció '''getProd''', veieu que cada paràmetre té associat un tipus de dades.
* '''array("return"=>"xsd:string")''' correspon al valor de retorn de la funció ''getProd''. S'ha d'especificar el tipus de dades a retornar.
* '''urn:productlist''' defineix l'espai de noms
* '''urn:productlist#getProd''' defineix l'acció SOAP
* '''rpc''' defineix el tipus de crida. Aquesta pot ser ''rpc'' o ''document''
* '''encoded''' definexi el valor de l'atribut ''use''. Pot ser ''encoded'' o ''literal''
* L'últim paràmetre és un string de documentació que descriu el mètode ''getProd''.

Per veure el fitxer wsdl només hem d'afegir a la url '''?wsdl''' al final. Exemple: http://yourwebroot/productlist.php?wsdl
Una vegada vegis el WSDL ja es pots copiar en un fitxer i depositar-lo en el directori web.

Al tenir el WSDL generat en un fitxer en el servidor web podem aprofitar-lo per crear un client soap que el llegeixi. Per fer-ho només s'ha de canviar aquesta línia del client soap:
<source lang="php">
$client = new nusoap_client("http://localhost/nusoap/productlist.php");
</source>
per aquesta altre:
<source lang="php">
$client = new nusoap_client("products.wsdl", true);
</source>
Veieu que ara es crea el client SOAP utilitzant el fitxer '''products.wsdl''' que es troba en el mateix directory del servidor que l'aplicació client. El següent paràmetre és un booleà que indica que accepti aquest fitxer WSDL.
==Client Java Swing d'un servei Web ==
Es farà una implementació d'un servei web client utilitzant JAVA SWING. Segueix aquests passos:
*Crea un nou projecte de tipus Java Application.
[[Fitxer:wsclient-java1.png|500px]]

*Crea un formulari SWING per afegir els camps elements necessaris (buttons, labels, text fields, etc)
[[Fitxer:wsclient-java2.png|500px]]
[[Fitxer:wsclient-java3.png|500px]]

*Una vegada tinguis el formulari, afegeix la funcionalitat de web-service client
[[Fitxer:wsclient-java4.png|500px]]

*Omple el camp wsdl a l'hora de configurar el client. Deixa en blanc el camp package:
[[Fitxer:wsclient-java5.png|500px]]

*Una vegada generat, ja es pot utilitzar el client del WS des del formulari Swing. Per tal d'utilitzar-lo, genera el codi necessari insertant-lo des del netbeans:
[[Fitxer:wsclient-java6.png|500px]]
[[Fitxer:wsclient-java7.png|500px]]
[[Fitxer:wsclient-java8.png|300px]]

*Podem veure el codi generat. Él nom de la funció generada correspon al nom del servei web:
[[Fitxer:wsclient-java9.png|700px]]

*Ja podem utilitzar la crida al servei web associant-la al click d'un botó. El resultat de la execució del servei web es mostrarà en un Dialog.
[[Fitxer:wsclient-java10.png|700px]]

*Resultat de l'execució:
[[Fitxer:wsclient-java11.png|300px]][[Fitxer:wsclient-java12.png|300px]]

= XML =
En aquest apartat es veurà com utilitzar XML per guardar dades des de un servidor PHP.
Exemple de XML:
<source lang="xml">
Fitxer aules.xml:
<aules>
<aula>
<nom>205</nom>
<subxarxa>172.16.205.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>filtra</estatactual>
</aula>
<aula>
<nom>206</nom>
<subxarxa>172.16.206.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>denega</estatactual>
</aula>
</aules>
</source>
Per representar aquest fitxer com a un arbre i poder-lo recòrrer s'utilitza la llibreria DOMDocument de PHP.

== Creació del Arbre XML ==
Per crear una representació del fitxer anterior, primer s'ha de crear l'objecte DOMDocument i a continuació llegir el fitxer:
<source lang="php">
$file = "files/aules.xml";
$xmldom = new DOMDocument();
$xmldom->load($file);
</source>

== Obtenir un element del arbre ==
Es pot utilitzar la funció ''getElementsByTagName''. Exemple:
<source lang="php">
$aules = $xmldom->getElementsByTagName("aula");
</source>

== Recòrrer tots els elemens ==
Podem recòrrer tots els element amb un foreach:
<source lang="php">
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
$net = $aula->getElementsByTagName("subxarxa")->item(0)->nodeValue;
$mask = $aula->getElementsByTagName("mascara")->item(0)->nodeValue;
}
</source>

== Afegir un nou element ==
Per afegir un nou elment s'ha de crear un node nou i afegir tos els fills que es necessiti per crear el XML correcte.
Exemple:
<source lang="php">
$auladom = $xmldom->createElement("aula");
//creamos el nodo NOM con su valor $classroomname
$aulanomdom = $xmldom->createElement("nom");
$domnode = $xmldom->createTextNode(strtolower($classroomName));
$aulanomdom->appendChild($domnode);
$auladom->appendChild($aulanomdom);

//creamos el nodo NETWORK con su valor $network
$aulanetwork = $xmldom->createElement(XARXA_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($network));
$aulanetwork->appendChild($domnode);
$auladom->appendChild($aulanetwork);

//creamos el nodo MASK con su valor $mask
$aulamask = $xmldom->createElement(MASK_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($mask));
$aulamask->appendChild($domnode);
$auladom->appendChild($aulamask);

//creamos el nodo initial status con su valor $initialstatus
$aulastatus = $xmldom->createElement(INIT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulastatus->appendChild($domnode);
$auladom->appendChild($aulastatus);

//creamos el nodo current status con su valor $initialstatus
$aulacurrentstatus = $xmldom->createElement(CURRENT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulacurrentstatus->appendChild($domnode);
$auladom->appendChild($aulacurrentstatus);

//afegim el node aula a la llista de nodes
$root = $xmldom->documentElement;
$root->appendChild($auladom);

//guardem
$xmldom->save($filename);
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Esborrar un element ==
Per esborrar un element, primer s'ha de cercar, després dir-li al pare que ens volem eliminar. Però també hem d'esborrar els fills!.
<source lang="php">
//funció que esborra un node i els seus fills
function deleteNode($node) {
deleteChildren($node);
$parent = $node->parentNode;
$oldnode = $parent->removeChild($node);
}

//funció que esborra els fills d'un node
function deleteChildren($node) {
while (isset($node->firstChild)) {
deleteChildren($node->firstChild);
$node->removeChild($node->firstChild);
}
}

//funció que cerca al XML un node amb el nom=$classroomname
function delete($classroomName){
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
deleteNode($aula);
$xmldom->save($this->filename);
}
}
}
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Modificar un valor ==
Per modificar un valor, primer es cerca i després es mira quin dels atributs es vol modificar:
<source lang="php">
function setNewClassroomAttr($classroomName, $attr, $value)
{
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
$aula->getElementsByTagName($attr)->item(0)->nodeValue = strtolower($value);
$this->xmldom->save($this->filename);
}
}

}
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

Podeu trobar més informació a http://www.php.net/manual/en/class.domdocument.php
=Mashups=

Una remescla, també coneguda pel terme anglès '''mashup''', és una aplicació web híbrida que utilitza contingut d'altres aplicacions web per a crear un nou contingut complet, consumint serveis directament sempre a través del protocol http.

El contingut d'un mashup normalment prové de llocs web de tercers a través d'una interfície pública o utilitzant una API. Altres mètodes que constitueixen l'origen de les seves dades inclouen: sindicació web (RSS o Atom), screen scraping, etc.

Els mashup estan revolucionant el desenvolupament web de la mateixa manera que els weblogs han revolucionat la publicació en línia. Permeten que qualsevol combini, de forma innovadora, dades que existeixen en diferents pàgines web. Requereixen pocs coneixements tècnics, les API existents són senzilles i potents i els mashup són relativament fàcils de dissenyar. Els creadors de mashups són generalment gent innovadora que vol combinar de formes noves i creatives dades disponibles públicament.

==API de Google Maps==
A continuació trobareu un llistat amb les funcions més interesant de la API de Googlem maps que podeu utilitzar per realitzar mashups.

Primer heu d'afegir la llibreria de google Maps:
<source lang="HTML">

<script src="http://maps.googleapis.com/maps/api/js"></script>

</source>

Després heu de un contenidor per al mapa.

<source lang="html">
<div id="googleMap" style="width:500px;height:380px;"></div>
</source>

Una vegada teniu el contenidor heu de crear el mapa. Per crea-lo necessiteu informar a l'API de google maps unes quantes propietats:
* '''center''': Indica on ha de centrar el mapa. S'ha de donar les coordenades de latitud i longitud.
* '''zoom''': Indica el nivel de ZOOM del mapa. Zomm = 0 mostra la terra sencera.
* '''mapTypeId''': Indica el tipus de Mapa a mostrar. Existeixen els següents tipus de mapa: ROADMAP, SATELLITE, HYBRID, TERRAIN.

Exemple de les propietats:
<source lang="php">
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</source>

Exemple de mapa centrat a londres:
<source lang="html">
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>
</source>

2016-05-06T16:01:23Z

Asalinas: /* Obtenir un element del arbre */

Serveis Web i Mashups a PHP

2016-05-06T16:01:09Z

Asalinas:

=Què són els Serveis Web?=
Els '''serveis web són aplicacions client i servidor''' que es comuniquen sobre (WWW) Protocol de transferència d'hipertext de la World Wide Web (HTTP). Segons el descrit pel World Wide Web Consortium (W3C), serveis web '''proporcionen un mitjà estàndard d'interoperabilitat entre aplicacions de programari que s'executen en una varietat de plataformes i marcs'''.
Els serveis web es caracteritzen per la seva gran interoperabilitat i extensibilitat, així com les seves descripcions processable per màquina, gràcies a la utilització de XML. Els serveis web es poden combinar d'una manera precisa per aconseguir operacions complexes.

=Tipus de Serveis Web=
En el pla conceptual, un servei és un component de programari que es proporciona de la xarxa.

A nivell tècnic, els serveis web es poden implementar de diverses maneres. Els dos tipus de serveis web analitzats en aquesta secció es poden distingir com a '''Big Web Services''' i '''serveis web RESTful'''.

'''Big Web Services'''
En Java EE 6, '''JAX-WS '''proporciona la funcionalitat de '''Big Web Services'''. Serveis web Grans utilitzen missatges '''XML''' que segueixen el protocol d'accés a objectes estàndard ('''SOAP'''), un llenguatge XML que defineix una arquitectura de missatges i formats de missatges. Aquests sistemes sovint contenen una descripció llegible per les màquines de les operacions que ofereix el servei, escrit en la Web Services Description Language (WSDL), un llenguatge XML per a definir sintàcticament interfícies.

El format del missatge SOAP i WSDL llenguatge de definició d'interfície han guanyat l'adopció generalitzada. Moltes de les eines de desenvolupament, com NetBeans IDE, poden reduir la complexitat del desenvolupament d'aplicacions de serveis web.

[[Fitxer:soap-message.png|center]]

'''Serveis Web REST'''
En Java EE 6, '''JAX-RS''' proporciona la funcionalitat per a la Transferència d'estat representacional (REST Web Services). REST és molt adequat per a escenaris bàsics. Serveis web RESTful sovint estan millor integrats amb HTTP que els serveis basats en SOAP ja que no requereixen de missatges XML o definicions servei API WSDL.

Projecte Jersey és la implementació de referència de l'especificació JAX-RS. Jersei implementa suport per a les anotacions definides en l'especificació JAX-RS, el que facilita als desenvolupadors crear serveis web RESTful amb Java i la màquina virtual de Java (JVM).

== SOAP Web Services ==
Simple Object Access Protocol (SOAP)és un protocol estàndard per l'intercanvi de missatges XML. La comunicació entre el client i el servei succeeix utilitzant missatges XML.

'''Què és el WSDL?'''

WSDL: Web Service Description Language. És un arxiu XML que descriu els detalls tècnics de com s'implementa un servei web, més específicament la URI, port, nom dels mètodes, els paràmetres i els tipus de dades. Llegint el WSDL poden veure:
*Ports / EndPoint - URL del servei web
*Format del missatge d'entrada
*Format del missatge de sortida
*Protocol de seguretat que s'ha de seguir
*El protocol de servei web utilitzat

Exemple:
<source lang="xml">
<?xml version='1.0' encoding='UTF-8'?><definitions xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd" xmlns:wsp="http://www.w3.org/ns/ws-policy" xmlns:wsp1_2="http://schemas.xmlsoap.org/ws/2004/09/policy" xmlns:wsam="http://www.w3.org/2007/05/addressing/metadata" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:tns="http://ws/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.xmlsoap.org/wsdl/" targetNamespace="http://ws/" name="Hola">
<wsp:Policy wsu:Id="HolaPortBindingPolicy" />
<types>
<xsd:schema>
<xsd:import namespace="http://ws/" schemaLocation="http://localhost:8084/webServiceProject/Hola?xsd=1" />
</xsd:schema>
</types>
<message name="hello">
<part name="parameters" element="tns:hello" />
</message>
<message name="helloResponse">
<part name="parameters" element="tns:helloResponse" />
</message>
<message name="adeu">
<part name="parameters" element="tns:adeu" />
</message>
<message name="adeuResponse">
<part name="parameters" element="tns:adeuResponse" />
</message>
<portType name="Hola">
<operation name="hello">
<input wsam:Action="http://ws/Hola/helloRequest" message="tns:hello" />
<output wsam:Action="http://ws/Hola/helloResponse" message="tns:helloResponse" />
</operation>
<operation name="adeu">
<input wsam:Action="http://ws/Hola/adeuRequest" message="tns:adeu" />
<output wsam:Action="http://ws/Hola/adeuResponse" message="tns:adeuResponse" />
</operation>
</portType>
<binding name="HolaPortBinding" type="tns:Hola">
<wsp:PolicyReference URI="#HolaPortBindingPolicy" />
<soap:binding transport="http://schemas.xmlsoap.org/soap/http" style="document" />
<operation name="hello">
<soap:operation soapAction="" />
<input>
<soap:body use="literal" />
</input>
<output>
<soap:body use="literal" />
</output>
</operation>
<operation name="adeu">
<soap:operation soapAction="" />
<input>
<soap:body use="literal" />
</input>
<output>
<soap:body use="literal" />
</output>
</operation>
</binding>
<service name="Hola">
<port name="HolaPort" binding="tns:HolaPortBinding">
<soap:address location="http://localhost:8084/webServiceProject/Hola" />
</port>
</service>
</definitions>
</source>
Existeixen dues maneres per accedir a un servei web:
*'''El proveïdor de serveis web coneix al client''':El proveïdor de serveis web proporcionarà el '''WSDL'' al client i el client podrà accedir als serveis web.
*'''El proveïdor de serveis registri la WSDL com a UDDI'''. UUID (Universal Description, Discover and Integration). Els WSDL es poden convertir a un UDDI i així, poden estar disponibles mitjançant un directori de serveis per a la seva utilització.
=== SOAP Message ===
SOAP està basat en XML i, per això, està considerat llegible per alguns éssers humans, però està basat en un esquema XSD específic que se li ha d'afegir. Veiem un petit missatge SOAP treient tota la informació i agafant només les etiquetes que fan que sigui un missatge SOAP:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Header>
...
</soap:Header>
<soap:Body>
...
<soap:Fault>
...
</soap:Fault>
</soap:Body>
</soap:Envelope>
</source>
Sembla només un altre arxiu XML però, el que fa que sigui un missatge SOAP és l'element ''root'' anomenat ''Envelope'' que té l'espai de noms soap a http://www.w3.org/2001/12/soap-envelope. L'atribut '''soap:encodingStyle''' determina el tipus de dades que s'utilitza en el fitxer per que SOAP no té una codificació per defecte.

L'element '''soap:Envelope''' és obligatori però l'elemenmt següent '''soap:Header''' és opcional i normalment conté informació rellevant a l'autenticació i la sessió. El protocol SOAP no ofereix autenticació però ofereix als desenvolupadors aquesta etiqueta per a incloure-ho.

El següent element es tracta de '''soap:Body''' que és obligatori. Conté el missatge RPC (Remote Procedure Call) on s'inclou els mètodes i si és un missatge de resposta, també el valor retornat pel mètode. L'etiqueta '''soap:Fault''' és opcional. Si està present al missatge conté els erros i el missatges dels errors.

Donem un cop d'ull a un missatge SOAP de petició:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body xmlns:m="http://www.yourwebroot.com/stock">
<m:GetStockPrice>
<m:StockName>IBM</m:StockName>
</m:GetStockPrice>
</soap:Body>
</soap:Envelope>
</source>

El missatge anterior és una petició per obtenir el preu d'estoc d'una empresa en concret. Dintre de l'etiqueta '''soap:Body''' veuràs l'element ''GetStockPrice'' que No correspon a SOAP, si no, que aquest element fa referència a un mètode particular de l'aplicació de servidor que es cridarà al rebre aquest missatge. L'element ''StockName'' també és específic de l'aplicació servidora i correspon a un paràmetre de la funció anterior.

El missatge de resposta és molt semblant:
<source lang="xml">
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body xmlns:m="http://www.yourwebroot.com/stock">
<m:GetStockPriceResponse>
<m:Price>183.08</m:Price>
</m:GetStockPriceResponse>
</soap:Body>
</soap:Envelope>
</source>

Dintre de l'element '''soap:Body''' veuràs l'element ''GetStockPriceRespomse'' que conté l'element ''Price'' amb la dada de resposta. Ambdós elements son específics de l'aplicació de servidor.

=== NuSOAP server ===
És molt senzill crear un servei web utilitzant la llibreria NuSOAP de PHP. Pots descarregar-la des d'aquest [https://sourceforge.net/projects/nusoap/ | enllaç]. Baixa't-ho i descomprimeix-lo en el directori principal de l'aplicació. Per utilitzar-ho només has d'incloure la llibreria '''nusoap.php''' en el codi de l'aplicació.

Veiem un exemple d'utilització de la llibreria '''nusoap''' per crear un servei web.
<source lang="php">
<?php
require_once "nusoap.php";

function getProd($category) {
if ($category == "books") {
return join(",", array(
"The WordPress Anthology",
"PHP Master: Write Cutting Edge Code",
"Build Your Own Website the Right Way"));
}
else {
return "No products listed under that category";
}
}

$server = new soap_server();
$server->register("getProd");
$server->service($HTTP_RAW_POST_DATA);
</source>

Primer s'inclou el fitxer '''nusoap.php'' per poder accedir a la llibreria NuSOAP. Després es defineix la funció '''getProd()''' i s'instancia un objecte de la classe ''soap_server''. Immediatament després s'utilitza el mètode '''register'' per afegir la funció ''getProd'' al servidor sopa i poder accedir a ella des de un client. És a dir, convertim la funció ''getProd'' en un servei web.

Segurament, en un escenari real, la funció ''getProd'' hauria de cercar en una Base de Dades la informació que s'ha d'enviar a l'usuari. Ara mateix, no volem complicar el codi en coses externes a SOAP.

Es poden registrar funcions addicionals en el servidor per per donar més funcionalitats a l'aplicació. El procés seria idèntic del descrit anteriorment.

=== NuSOAP Client ===

Crearem una pàgina php que utilitzarà el servei web anterior:
<source lang="php">
<?php
require_once "nusoap.php";
$client = new nusoap_client("http://localhost/nusoap/productlist.php");

$error = $client->getError();
if ($error) {
echo "<h2>Constructor error</h2><pre>" . $error . "</pre>";
}

$result = $client->call("getProd", array("category" => "books"));

if ($client->fault) {
echo "<h2>Fault</h2><pre>";
print_r($result);
echo "</pre>";
}
else {
$error = $client->getError();
if ($error) {
echo "<h2>Error</h2><pre>" . $error . "</pre>";
}
else {
echo "<h2>Books</h2><pre>";
echo $result;
echo "</pre>";
}
}
</source>

Com va passar en el servidor, primer s'ha d'incloure la llibreria ''nusoap.php'' amb la directiva ''required_once''. Seguidament, es crea un nova instància d'un client soap amb la classe: '''nusoap_client'''. El constructor necessita la localització del servidor soap al que s'ha de connectar. És a dir, del fitxer on es troba la creació del soap_server amb les funcions registrades.

La funció '''getError''' comprova si el client SOAP s'ha creat correctament i si no ha estat així, mostra un missatge d'error.

El mètode '''call()''' genera i envia un missatge SOAP de tipus petició (Request) a la funció o el mètode definit com a primer paràmetre. El segon paràmetre de la funció ''call()'' és un array associatiu del paràmetres que necessita el mètode servidor.

La propietat '''fault''' i el mètode '''getError()''' son utilitzat per comprovar i mostrar cualsevol error produït en la comunicació.

=== Creació d'un arxiu WSDL ===

Escriure un fitxer WSDL a mà pot ser de bojos. Una utilitat molt interessant de '''nusoap''' és que pot crear un fitxer WSDL automàticament. Veurem un exemple modificant una mica l'exemple anterior:
<source lang="php">
<?php
require_once "nusoap.php";

function getProd($category) {
if ($category == "books") {
return join(",", array(
"The WordPress Anthology",
"PHP Master: Write Cutting Edge Code",
"Build Your Own Website the Right Way"));
}
else {
return "No products listed under that category";
}
}

$server = new soap_server();
$server->configureWSDL("productlist", "urn:productlist");

$server->register("getProd",
array("category" => "xsd:string"),
array("return" => "xsd:string"),
"urn:productlist",
"urn:productlist#getProd",
"rpc",
"encoded",
"Get a listing of products by category");

$server->service($HTTP_RAW_POST_DATA);
</source>
Bàsicament és el mateix codi amb quatre canvis. El primer canvi que s'ha afegit és la crida a la funció '''configureWSDL()'''. Aquest mètode prepara al servidor per a que pugui generar un fitxer WSDL dels nostres serveis registrats. El primer paràmetre d'aquesta funció, és el nom del servei i el segon correspon a l'espai de noms del servei.

El segon canvi afegeix informació addicional al mètode '''register'''. Veiem-ho:
* '''getProd:''' correspon al nom de la funció
* '''array("category"=>"xsd:string")''' correspon a la descripció dels paràmetres que necessita la funció '''getProd''', veieu que cada paràmetre té associat un tipus de dades.
* '''array("return"=>"xsd:string")''' correspon al valor de retorn de la funció ''getProd''. S'ha d'especificar el tipus de dades a retornar.
* '''urn:productlist''' defineix l'espai de noms
* '''urn:productlist#getProd''' defineix l'acció SOAP
* '''rpc''' defineix el tipus de crida. Aquesta pot ser ''rpc'' o ''document''
* '''encoded''' definexi el valor de l'atribut ''use''. Pot ser ''encoded'' o ''literal''
* L'últim paràmetre és un string de documentació que descriu el mètode ''getProd''.

Per veure el fitxer wsdl només hem d'afegir a la url '''?wsdl''' al final. Exemple: http://yourwebroot/productlist.php?wsdl
Una vegada vegis el WSDL ja es pots copiar en un fitxer i depositar-lo en el directori web.

Al tenir el WSDL generat en un fitxer en el servidor web podem aprofitar-lo per crear un client soap que el llegeixi. Per fer-ho només s'ha de canviar aquesta línia del client soap:
<source lang="php">
$client = new nusoap_client("http://localhost/nusoap/productlist.php");
</source>
per aquesta altre:
<source lang="php">
$client = new nusoap_client("products.wsdl", true);
</source>
Veieu que ara es crea el client SOAP utilitzant el fitxer '''products.wsdl''' que es troba en el mateix directory del servidor que l'aplicació client. El següent paràmetre és un booleà que indica que accepti aquest fitxer WSDL.
==Client Java Swing d'un servei Web ==
Es farà una implementació d'un servei web client utilitzant JAVA SWING. Segueix aquests passos:
*Crea un nou projecte de tipus Java Application.
[[Fitxer:wsclient-java1.png|500px]]

*Crea un formulari SWING per afegir els camps elements necessaris (buttons, labels, text fields, etc)
[[Fitxer:wsclient-java2.png|500px]]
[[Fitxer:wsclient-java3.png|500px]]

*Una vegada tinguis el formulari, afegeix la funcionalitat de web-service client
[[Fitxer:wsclient-java4.png|500px]]

*Omple el camp wsdl a l'hora de configurar el client. Deixa en blanc el camp package:
[[Fitxer:wsclient-java5.png|500px]]

*Una vegada generat, ja es pot utilitzar el client del WS des del formulari Swing. Per tal d'utilitzar-lo, genera el codi necessari insertant-lo des del netbeans:
[[Fitxer:wsclient-java6.png|500px]]
[[Fitxer:wsclient-java7.png|500px]]
[[Fitxer:wsclient-java8.png|300px]]

*Podem veure el codi generat. Él nom de la funció generada correspon al nom del servei web:
[[Fitxer:wsclient-java9.png|700px]]

*Ja podem utilitzar la crida al servei web associant-la al click d'un botó. El resultat de la execució del servei web es mostrarà en un Dialog.
[[Fitxer:wsclient-java10.png|700px]]

*Resultat de l'execució:
[[Fitxer:wsclient-java11.png|300px]][[Fitxer:wsclient-java12.png|300px]]

= XML =
En aquest apartat es veurà com utilitzar XML per guardar dades des de un servidor PHP.
Exemple de XML:
<source lang="xml">
Fitxer aules.xml:
<aules>
<aula>
<nom>205</nom>
<subxarxa>172.16.205.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>filtra</estatactual>
</aula>
<aula>
<nom>206</nom>
<subxarxa>172.16.206.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>denega</estatactual>
</aula>
</aules>
</source>
Per representar aquest fitxer com a un arbre i poder-lo recòrrer s'utilitza la llibreria DOMDocument de PHP.

== Creació del Arbre XML ==
Per crear una representació del fitxer anterior, primer s'ha de crear l'objecte DOMDocument i a continuació llegir el fitxer:
<source lang="php">
$file = "files/aules.xml";
$xmldom = new DOMDocument();
$xmldom->load($file);
</source>

== Obtenir un element del arbre ==
Es pot utilitzar la funció ''getElementsByTagName''. Exemple:
<pre>
$aules = $xmldom->getElementsByTagName("aula");
</pre>

== Recòrrer tots els elemens ==
Podem recòrrer tots els element amb un foreach:
<source lang="php">
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
$net = $aula->getElementsByTagName("subxarxa")->item(0)->nodeValue;
$mask = $aula->getElementsByTagName("mascara")->item(0)->nodeValue;
}
</source>

== Afegir un nou element ==
Per afegir un nou elment s'ha de crear un node nou i afegir tos els fills que es necessiti per crear el XML correcte.
Exemple:
<source lang="php">
$auladom = $xmldom->createElement("aula");
//creamos el nodo NOM con su valor $classroomname
$aulanomdom = $xmldom->createElement("nom");
$domnode = $xmldom->createTextNode(strtolower($classroomName));
$aulanomdom->appendChild($domnode);
$auladom->appendChild($aulanomdom);

//creamos el nodo NETWORK con su valor $network
$aulanetwork = $xmldom->createElement(XARXA_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($network));
$aulanetwork->appendChild($domnode);
$auladom->appendChild($aulanetwork);

//creamos el nodo MASK con su valor $mask
$aulamask = $xmldom->createElement(MASK_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($mask));
$aulamask->appendChild($domnode);
$auladom->appendChild($aulamask);

//creamos el nodo initial status con su valor $initialstatus
$aulastatus = $xmldom->createElement(INIT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulastatus->appendChild($domnode);
$auladom->appendChild($aulastatus);

//creamos el nodo current status con su valor $initialstatus
$aulacurrentstatus = $xmldom->createElement(CURRENT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulacurrentstatus->appendChild($domnode);
$auladom->appendChild($aulacurrentstatus);

//afegim el node aula a la llista de nodes
$root = $xmldom->documentElement;
$root->appendChild($auladom);

//guardem
$xmldom->save($filename);
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Esborrar un element ==
Per esborrar un element, primer s'ha de cercar, després dir-li al pare que ens volem eliminar. Però també hem d'esborrar els fills!.
<source lang="php">
//funció que esborra un node i els seus fills
function deleteNode($node) {
deleteChildren($node);
$parent = $node->parentNode;
$oldnode = $parent->removeChild($node);
}

//funció que esborra els fills d'un node
function deleteChildren($node) {
while (isset($node->firstChild)) {
deleteChildren($node->firstChild);
$node->removeChild($node->firstChild);
}
}

//funció que cerca al XML un node amb el nom=$classroomname
function delete($classroomName){
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
deleteNode($aula);
$xmldom->save($this->filename);
}
}
}
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Modificar un valor ==
Per modificar un valor, primer es cerca i després es mira quin dels atributs es vol modificar:
<source lang="php">
function setNewClassroomAttr($classroomName, $attr, $value)
{
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
$aula->getElementsByTagName($attr)->item(0)->nodeValue = strtolower($value);
$this->xmldom->save($this->filename);
}
}

}
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

Podeu trobar més informació a http://www.php.net/manual/en/class.domdocument.php

M7 - Desenvolupament web en entorn servidor

2016-05-04T10:39:59Z

2016-05-04T08:25:50Z

Asalinas: /* UF4: Serveis web. Pàgines dinàmiques interactives. Webs Híbrids (45h) */

== UF1 : Desenvolupament web en entorn servidor (50h) ==
=== [[NF1 - Llenguatge PHP (35h)]] ===
=== [[NF2 - Llenguatge JSP (15h)]] ===

== UF2: Generació dinàmica de pagines web (40h) ==
=== [[NF1 - Model Vista Controlador (10h)]] ===
=== [[NF2 - Framework PHP (15h)]] ===
=== [[NF3 - Framework JSP (15h)]] ===

== UF3: Tècniques d’accés a dades (30h) ==
=== <span style="color:blue">NF1 -Tècniques d’accés a dades (30h)</span> ===
[[A1- Accés a BD amb PHP (10h)]]

[[A2- Framework de capes per a DDBB (20h)]]

== UF4: Serveis web. Pàgines dinàmiques interactives. Webs Híbrids (45h) ==
=== [[NF1 - Web Services (30h)]] ===
=== [[Serveis Web i Mashups a PHP]] ===

M7 - Planificació i administració de Xarxes

2016-04-18T08:38:08Z

Asalinas:

== UF2: Administració Avançada de Xarxes ==
=== [[NF1 - Configuració i administració de commutadors]] ===
=== [[NF2 - Configuració i administració de routers ]] ===


== UF3: Administració Avançada de Xarxes ==
=== [[NF1 - Configuració de Xarxes Virtuals ]] ===

=== [[NF2 - Configuració i administració de protocols dinàmics ]] ===
=== [[NF3 - Configuració de l'accés a Internet des d'una LAN ]] ===

NF2 - Framework PHP (15h)

2016-03-09T12:32:27Z

Asalinas: /* Formularis */

=Introducció a Symfony=
<div width="100%" style="clear:both; ">
<div style="float:left; width:30%;">
[[fitxer:symfony.jpg]]

</div>
<div style="float:left; width:70%;">
Un framework simplifica el desenvolupament de les aplicacions, ja que automatitza molts dels patrons utilitzats per resoldre les tasques comunes. A més, un framework proporciona estructura al codi font, forçant al desenvolupador a crear codi més llegible i més fàcil de mantenir. Finalment, un framework facilita la programació d'aplicacions, ja que encapsula operacions complexes en instruccions senzilles.

Symfony és un complet framework dissenyat per optimitzar, gràcies a les seves característiques, el desenvolupament de les aplicacions web. Per començar, separa la lògica de negoci, la lògica de servidor i la presentació de l'aplicació web. Proporciona diverses eines i classes encaminades a reduir el temps de desenvolupament d'una aplicació web complexa. A més, automatitza les tasques més comunes, permetent al desenvolupador dedicar-se per complet als aspectes específics de cada aplicació. El resultat de tots aquests avantatges és que no s'ha de reinventar la roda cada vegada que es crea una nova aplicació web.

Symfony està desenvolupat completament amb PHP i ha estat provat amb èxit en llocs com Yahoo! Answers, delicious, DailyMotion i molts altres llocs web de primer nivell. Symfony és compatible amb la majoria de gestors de bases de dades, com MySQL, PostgreSQL, Oracle i SQL Server de Microsoft. Es pot executar tant en plataformes Unix (Unix, Linux, etc.) com en plataformes Windows. A continuació es mostren algunes de les seves característiques.
</div>
</div>
<p> </p> <p> </p>
=Característiques=
Symfony es va dissenyar perquè s'ajustés als següents requisits:

*Fàcil d'instal·lar i configurar en la majoria de plataformes (i amb la garantia que funciona correctament en els sistemes Windows i *nix estàndards)
*Independent del sistema gestor de bases de dades
*Senzill d'usar en la majoria de casos, però prou flexible com per adaptar-se als casos més complexos
*Basat en la premissa de "convenir en comptes de configurar", en la qual el desenvolupador solament ha de configurar allò que no és convencional
*Segueix la majoria de millors pràctiques i patrons de disseny per a la web
*Preparat per a aplicacions empresarials i adaptable a les polítiques i arquitectures pròpies de cada empresa, a més de ser prou estable com per desenvolupar aplicacions a llarg termini
*Codi fàcil de llegir que inclou comentaris de phpDocumentor i que permet un manteniment molt senzill
*Fàcil d'estendre, la qual cosa permet la seva integració amb llibreries desenvolupades per tercers

Symfony pot ser completament personalitzat per complir amb els requisits de les empreses que disposen de les seves pròpies polítiques i regles per a la gestió de projectes i la programació d'aplicacions. Per defecte incorpora diversos entorns de desenvolupament diferents i inclou diverses eines que permeten automatitzar les tasques més comunes de l'enginyeria del programari:

Les eines que generen automàticament codi han estat dissenyades per fer prototips d'aplicacions i per crear fàcilment la part de gestió de les aplicacions.
*El framework de desenvolupament de proves unitàries i funcionals proporciona les eines ideals per al desenvolupament basat en proves "test-driven development").
*La barra de depuració web simplifica la depuració de les aplicacions, ja que mostra tota la informació que els programadors necessiten sobre la pàgina en la qual estan treballant.
*La interfície de línia de comandos automatitza la instal·lació de les aplicacions entre servidors.
*És possible realitzar canvis "en calent" de la configuració (sense necessitat de reiniciar el servidor).
*El complet sistema de log permet als administradors accedir fins a l'últim detall de les activitats que realitza l'aplicació.

=Desenvolupament ràpid d'aplicacions (RAD)=

Durant molt temps, la programació d'aplicacions web va ser un tasca tediosa i molt lenta. Seguint els cicles habituals de l'enginyeria del programari (com els proposats pel Procés Racional Unificat o Rational Unified Process) el desenvolupament d'una aplicació web no pot començar fins que s'han establert per escrit una sèrie de requisits, s'han creat els diagrames UML Unified Modeling Language) i s'ha produït abundant documentació sobre el projecte. Aquest model es veia afavorit per la baixa velocitat de desenvolupament, la falta de versatilitat dels llenguatges de programació (abans d'executar el programa s'ha de construir, compilar i reiniciar) i sobretot pel fet que els clients no estaven disposats a adaptar-se a altres metodologies.

Avui dia, les empreses reaccionen més ràpidament i els clients canvien d'opinió constantment durant el desenvolupament dels projectes. D'aquesta manera, els equips de desenvolupament han d'adaptar-se a aquestes necessitats i han de poder canviar l'estructura d'una aplicació de forma ràpida. Afortunadament, l'ús de llenguatges de script com Python, Ruby i PHP permeten seguir altres estratègies de programació, com RAD (desenvolupament ràpid d'aplicacions) i el desenvolupament àgil de programari.

Una de les idees centrals d'aquesta metodologia és que el desenvolupament comença al més aviat possible perquè el client pugui revisar un prototip que funciona i pugui indicar el camí a seguir. A partir d'aquí, l'aplicació es desenvolupa de forma iterativa, en la qual cada nova versió incorpora noves funcionalitats i es desenvolupa en un breu espai de temps.

Les conseqüències d'aquestes metodologies per al desenvolupador són nombroses. El programador no ha de pensar sobre les versions futures en incloure una nova funcionalitat. Els mètodes utilitzats han de ser el més senzills i directes possibles. Aquestes idees es resumeixen en el principi denominat ''KISS'': Fes-ho senzill, idiota!''Keep It Simple, Stupid''

Quan es modifiquen els requisits o quan s'afegeix una nova funcionalitat, normalment s'ha de reescriure part del codi existent. Aquest procés es diu refactorización i succeeix sovint durant el desenvolupament d'una aplicació web. El codi sol moure's a altres llocs en funció de la seva naturalesa. Els blocs de codi repetits es refactorizan en un únic lloc, aplicant el principi ''DRY'': No et repeteixis ''Don't Repeat Yourself''.

Per assegurar que l'aplicació segueix funcionant correctament malgrat els canvis constants, es necessita una sèrie de proves unitàries que puguin ser automatitzades. Si estan ben escrites, les proves unitàries permeten assegurar que gens ha deixat de funcionar després d'haver-hi refactorizado part del codi de l'aplicació. Algunes metodologies de desenvolupament d'aplicacions obliguen a escriure les proves abans que el propi codi, la qual cosa es coneix com TDD: desenvolupament basat en proves ''test-driven development.''

Symfony és l'eina ideal pel RAD. De fet, el framework ha estat desenvolupat per una empresa que aplica el RAD als seus propis projectes. Per aquest motiu, aprendre a utilitzar Symfony no és com aprendre un nou llenguatge de programació, sinó que consite a aprendre a prendre les decisions correctes per desenvolupar les aplicacions de forma més efectiva.

=La implementació del MVC que realitza Symfony=
*La capa del Modelo
**Abstracció de la base de dades
**Accés a les dades
*La capa de la Vista
**Vista
**Plantilla
**Layout
*La capa del Controlador
**Controlador frontal
**Acció

En total són set scripts, la qual cosa semblen molts arxius per obrir i modificar cada vegada que es crea una pàgina. Afortunadament, Symfony simplifica aquest procés. Symfony pren el millor de l'arquitectura MVC i la implementa de manera que el desenvolupament d'aplicacions sigui ràpid i senzill.

En primer lloc, el controlador frontal i el layout són comuns per a totes les accions de l'aplicació. Es poden tenir diversos controladors i diversos layouts, però solament és obligatori tenir un de cada. El controlador frontal és un component que només té codi relatiu al MVC, per la qual cosa no és necessari crear un, ja que Symfony ho genera de forma automàtica.

L'altra bona notícia és que les classes de la capa del model també es generen automàticament, en funció de l'estructura de dades de l'aplicació. El ORM s'encarrega de crear l'esquelet o estructura bàsica de les classes i genera automàticament tot el codi necessari. Quan el ORM troba restriccions de claus foranes (o externes) o quan troba dades de tipus data, crea mètodes especials per accedir i modificar aquestes dades, per la qual cosa la manipulació de dades es converteix en un joc de nens. L'abstracció de la base de dades és completament transparent per al programador, ja que es realitza de forma nativa mitjançant PDO PHP Data Objects). Així, si es canvia el sistema gestor de bases de dades a qualsevol moment, no s'ha de reescriure ni una línia de codi, ja que tan sols és necessari modificar un paràmetre en un arxiu de configuració.

Finalment, la lògica de la vista es pot transformar en un arxiu de configuració senzill, sense necessitat de programar-la.

[[fitxer:mvc-symfony.png]]

=Instal·lació de Symfony=
Utilitzarem la versió de symfony 2.4.

[[Instal·lació de la versió 2.4 de symfony ]] (antic)

[[Instal·lació de la versió LTS 2.8 de symfony ]]

[http://symfony.com/doc/current/index.html Llibre gratuït de symfony2].

Accedeix a la URL:
http://localhost/m7/web/app.php

'''nota:''' m7 és, en aquest cas, el nomProjecteSymfony utilitzat en la creació del projecte symfony.

Hauries de veure una pàgina com aquesta:

[[Fitxer:symfony2.8_inici.png | 400px]]

==Creació de la primera pàgina:==
Una vegada executis la línia següent anirà preguntant opcions. Tot per defecte. Al nom del bundle podeu posar: HolaMonBundle
<pre>
php app/console generate:bundle --namespace=m7/HolaMon --format=yml

</pre>

==Iniciar el servidor ==
Symfony pot ser instal·lat dintre d'un servidor apache2 però per entorns de desenvolupament porta un servidor web integrat. Per executar el servidor i poder provar les aplicacions podeu iniciar-lo amb la comanda de terminal:
<pre>
php app/console server:run
</pre>
Si heu engegat el servidor integrat podeu provar la pàgina creada en el punt anterior utilitzant aquesta [http://localhost:8000/ url]

Si teniu apache2 instal·lat, podeu provar la pàgina utilitzant aquesta [http://localhost/m7/web/app.php/ url_apache_m7]
== Si hi ha un error accedint a la pàgina!!==
Amb apache2, si en algun moment deixa de funcionar heu de provar de fer:
<pre>
sudo php app/console cache:clear --env=prod && sudo php app/console cache:warmup --env=prod
</pre>
i donar-li permisos (una altre vegada) a la carpeta principal (dintre de /var/www/html):
<pre>
chmod 777 nomprojecte/ -R
</pre>

===Exercici [opcional]:===
Utilitzant el servidor web apache2 creeu un virtualhost per poder utilitzar symfony2 directament posant: http://localhost/

=Estructura del projecte: Aplicacions, Mòduls i Accions=
Symfony considera un projecte com '''un conjunt de serveis i operacions disponibles sota un determinat nom de domini i que comparteixen el mateix model d'objectes'''.

Dins d'un projecte, les operacions s'agrupen de forma lògica en aplicacions. Normalment, una aplicació s'executa de forma independent respecte d'altres aplicacions del mateix projecte. L'habitual és que un projecte contingui dues aplicacions: una per a la part pública i una altra per a la part de gestió, compartint ambdues la mateixa base de dades. També és possible definir projectes que estiguin formats per diversos llocs web petits, cadascun d'ells considerat com una aplicació. En aquest cas, és important tenir en compte que els enllaços entre aplicacions s'han d'indicar de forma absoluta.

Cada aplicació està formada per un o més mòduls. Un mòdul normalment representa
*a una pàgina web o
*a un grup de pàgines amb un propòsit relacionat.
Per exemple, una aplicació podria tenir mòduls com home, articulos, ajuda, carritoCompra, compte, etc.

Els mòduls emmagatzemen les accions, que representen cadascuna de les operacions que es pot realitzar en un mòdul. Per exemple el mòdul ''carretCompra'' pot definir accions com ''afegir'', mostrar i actualitzar. Normalment les accions es descriuen mitjançant verbs. Treballar amb accions és molt similar a treballar amb les pàgines d'una aplicació web tradicional, encara que en aquest cas dues accions diferents poden acabar mostrant la mateixa pàgina (com per exemple l'acció d'afegir un comentari a una entrada d'un blog, que acaba tornant a mostrar la pàgina de l'entrada amb el nou comentari).
=Estructura de l'arbre de arxius=
Normalment, tots els projectes web comparteixen el mateix tipus de continguts, com per exemple:

Una base de dades, com MySQL o PostgreSQL
*Arxiu estàtics (HTML, imatges, arxius de Javascript, fulles d'estils, etc.)
*Arxius pujats al lloc web per part dels usuaris o els administradors
*Classes i llibreries PHP
*Llibreries externes (scripts desenvolupats per tercers)
*Arxius que s'executen per lots batch files) que normalment són scripts que s'executen via línia de comandos o mitjançant cron
*Arxius de log (les traces que generen les aplicacions i/o el servidor)
*Arxius de configuració

Symfony proporciona una estructura en forma d'arbre d'arxius per organitzar de forma lògica tots aquests continguts, a més de ser consistent amb l'arquitectura MVC utilitzada i amb l'agrupació projecto / aplicació / mòdul. Cada vegada que es crea un nou projecte, aplicació o mòdul, es genera de forma automàtica la part corresponent d'aquesta estructura. A més, l'estructura es pot personalitzar completament, per reorganitzar els arxius i directoris o per complir amb les exigències d'organització d'un client.

Encara que es pot canviar, per defecte totes les aplicacions Symfony tenen la mateixa estructura de directoris senzilla (i recomanada):

*'''app/''': conté la configuració de l'aplicació.
*'''src/''': aquí es troba tot el codi PHP de l'aplicació.
*'''vendor/''': per convenció aquí es guarden totes les llibreries creades per tercers.
*'''web/''': est és el directori web arrel i conté tots els arxius que es poden accedir públicament.
==El directori web==
El directori web arrel és el lloc on es troben tots els arxius públics i estàtics tals com a imatges, fulles d'estil i arxius Javascript. També és el lloc on es defineixen tots els controladors frontals, com per exemple el següent:
<source lang="php">
// web/app.php
require_once __DIR__.'/../app/bootstrap.php.cache';
require_once __DIR__.'/../app/AppKernel.php';

use Symfony\Component\HttpFoundation\Request;

$kernel = new AppKernel('prod', false);
$kernel->loadClassCache();
$kernel->handle(Request::createFromGlobals())->send();
</source>
L'arxiu del controlador frontal ('''app.php''' en aquest exemple) és l'arxiu PHP que realment s'executa quan utilitzes una aplicació Symfony2 i el seu treball consisteix a arrencar l'aplicació utilitzant una classe del nucli ('''AppKernel''').

Tenir un controlador frontal significa que s'utilitzen URL diferents i més flexibles que les d'una aplicació PHP típica. Quan es disposa d'un controlador frontal, les URL es formaten de la següent manera:
<pre>
http://localhost/app.php/hello/Ryan
</pre>
El controlador frontal, '''app.php''', s'executa i la URL interna: ''/hello/Ryan'' es dirigeix internament segons la configuració d'encaminament.

Si a més utilitzes el mòdul '''mod_rewrite''' d'Apache, pots forçar l'execució de l'arxiu '''app.php''' sense necessitat d'incloure-ho en la URL, per la qual cosa així les URL són encara més netes:
<pre>
http://localhost/hello/Ryan
</pre>
==El directori de l'aplicació (app)==
La classe '''AppKernel''' és el punt d'entrada principal de l'aplicació i és la responsable de tota la configuració. Com a tal, s'emmagatzema en el directori '''app/'''.

Aquesta classe ha d'implementar dos mètodes que defineixen tot el que Symfony necessita saber sobre la teva aplicació. Ni tan sols has de preocupar-te d'aquests mètodes durant l'arrencada — Symfony els emplena per tu amb paràmetres predeterminats.

*'''registerBundles()''': retorna un array amb tots els bundles necessaris per executar l'aplicació.
*'''registerContainerConfiguration()''': carrega l'arxiu de configuració de recursos de l'aplicació (consulta la secció Configurant l'aplicació).
Durant el desenvolupament d'una aplicació, normalment el directori '''app/''' solament els utilitzes per modificar la configuració i els arxius d'encaminament en el directori '''app/config/'''.

Aquest directori també conté el directori '''caché''' de l'aplicació (app/cache), un directori de '''logs''' (app/logs) i un directori per a arxius de '''recursos globals''', tals com a plantilles (app/Resources).

'''Carga automàtica'''
En arrencar Symfony, s'inclou un arxiu especial anomenat ''vendor/autoload.php''. Aquest arxiu, creat per ''Composer'', s'encarrega de configurar el carregador automàtic de classes, que al seu torn '''carrega automàticament tots els arxius''' de la teva aplicació que es trobin '''en el directori src/''' i '''totes les llibreries externes''' configurades en l'arxiu '''composer.json'''.

Gràcies al carregador automàtic, '''mai hauràs de preocupar-te d'usar declaracions include o require'''. Això és possible perquè Composer utilitza namespace o espai de noms d'una classe per determinar la seva ubicació i així '''inclou automàticament l'arxiu en l'instant en què necessites una classe'''.

El carregador automàtic '''ja està configurat per buscar qualsevol de les teves classes PHP en el directori src/'''. Perquè funcioni la càrrega automàtica, el nom de la classe i la ruta de l'arxiu '''han de seguir el mateix patró''':
<pre>
Nom de la classe: Acme\HelloBundle\Controller\HelloController
Ruta física de l'arxiu: src/Acme/HelloBundle/Controller/HelloController.php
</pre>
== Configuració de l'aplicació ==
Segons el lloc web oficial de YAML (http://www.yaml.org/), YAML és "un estàndard per serializar dades en qualsevol llenguatge de programació i amb un format fàcil de llegir per part de les persones". Dit d'una altra forma, YAML és un llenguatge molt senzill que permet descriure les dades com en XML, però amb una sintaxi molt més senzilla. YAML és un format especialment útil per descriure dades que poden ser transformats en arrays simples i associatius, com per exemple:
<source lang="php">
$casa = array(
'familia' => array(
'apellido' => 'García',
'padres' => array('Antonio', 'María'),
'hijos' => array('Jose', 'Manuel', 'Carmen')
),
'direccion' => array(
'numero' => 34,
'calle' => 'Gran Vía',
'ciudad' => 'Cualquiera',
'codigopostal' => '12345'
)
);

//format yml:
casa:
familia:
apellido: García
padres:
- Antonio
- María
hijos:
- Jose
- Manuel
- Carmen
direccion:
numero: 34
calle: Gran Vía
ciudad: Cualquiera
codigopostal: "12345"
</source>
YAML és l'acrònim de "YAML Ain't Markup Language" ("YAML No és un Llenguatge de Marcat") i es pronuncia "yamel". El format es porta utilitzant des de 2001 i existeixen utilitats per processar YAML en una gran varietat de llenguatges de programació.

YAML és molt més ràpid d'escriure que XML (ja que no fan falta les etiquetes de tancament i l'ús continu de les cometes) i és molt més poderós que els tradicionals arxius .ini (ja que aquests últims no suporten l'herència i les estructures complexes). Per aquest motiu, Symfony utilitza el format YAML com el llenguatge preferit per emmagatzemar la seva configuració.

Per saber més sobre aquest format pots consultar la [http://symfony.com/legacy/doc/reference/1_4/en/02-YAML següent] pàgina web.
==El directori font (src)==
El directori '''src/''' conté tot el codi real (codi PHP, plantilles, arxius de configuració, estils, etc.) que pertany a la teva aplicació. De fet, en programar una aplicació Symfony, la major part del teu treball es durà a terme dins d'un o més''' bundles '''creats en aquest directori.

=Els Bundles=
[[Els bundles a symfony 2.]]

=Entorn de desenvolupament i entorn de producció=
Una aplicació pot funcionar en diversos entorns. Els diferents entorns comparteixen el mateix codi PHP (solament és diferent el controlador frontal), però usen una configuració diferent. Per exemple, un entorn de desenvolupament '''dev''' guarda els advertiments i errors, mentre que un entorn de producció '''prod''' només registra els errors. Alguns arxius es tornen a generar en cada petició en l'entorn '''dev''' (para major comoditat dels desenvolupadors), però s'escorcollen en l'entorn '''prod'''. Tots els entorns es troben en la mateixa màquina i executen la mateixa aplicació.

Un projecte Symfony2 '''normalment comença amb tres entorns (dev, test i prod)''', encara que resulta senzill crear nous entorns.''' Pots veure la teva aplicació en diferents entorn''' amb només '''canviar el controlador frontal'''en el teu navegador. Per veure l'aplicació en l'entorn '''dev''', accedeix a l'aplicació a través del controlador frontal de desenvolupament:
<pre>
http://localhost/app_dev.php/hola
</pre>
Si desitges veure com es comportarà la teva aplicació a l'entorn de producció, utilitza en el seu lloc el controlador frontal '''prod''':
<pre>
http://localhost/app.php/hola
</pre>
Si fas qualsevol canvi en les plantilles, no ho veuràs en l'entorn prod tret que esborris la cache de l'aplicació i així forcis a Symfony a tornar a compilar les plantilles. Per esborrar la cache de l'entorn de producció, executa la següent comanda de consola:
<pre>
sudo php app/console cache:clear --env=prod && sudo php app/console cache:warmup --env=prod
i donar-li permísos:
chmod 777 nomprojecte/ -R
</pre>

=El controlador=
Un controlador és una funció PHP creada per tu i que s'encarrega d'obtenir la informació de la petició HTTP i de generar i retornar la resposta HTTP (en forma d'objecte de tipus Response de Symfony2).
La resposta pot ser:
*una pàgina HTML,
*un document XML,
*un array JSON serializado,
*una imatge,
*una redirecció a una altra pàgina,
*un error de tipus 404
*o qualsevol altra cosa que se t'ocorri.
El controlador conté tota la lògica que la teva aplicació necessita per generar el contingut de la pàgina. L'objectiu d'un controlador sempre és el mateix: crear i retornar un objecte '''Response'''.
==Cicle de vida d'una petició==
* 1.Cada petició és tractada per un únic arxiu: el controlador frontal (per exemple, '''app.php''' o '''app_dev.php''') el qual és responsable d'iniciar l'aplicació.
* 2. El sistema d'encaminament (classe Routing) llegeix la informació de la petició (per exemple, la URI), troba una ruta que coincideixi amb aquesta informació, i llegeix el paràmetre '''_controller''' de la ruta.
* 3. S'executa el controlador assignat a la ruta i aquest controlador crea i retorna un objecte '''Response'''.
* 4. Les capçaleres HTTP i el contingut de l'objecte Response s'envien de tornada al client.

Exemple de controlador:
<source lang="php">
// src/Acme/HelloBundle/Controller/HelloController.php

namespace Acme\HelloBundle\Controller;
use Symfony\Component\HttpFoundation\Response;

class HelloController
{
public function indexAction()
{
return new Response('<html><body>Hello world!</body></html>');
}
}
</source>

==Associant una URI a un controlador==
El nou controlador retorna una pàgina HTML simple. Per poder provar realment aquesta pàgina en el teu navegador, has de crear una ruta que el seu path sigui la URI que vols associar al controlador al fitxer '''routing.yml''':
<source lang="yml">
hello:
path: /hello
defaults: { _controller: AcmeHelloBundle:Hello:index }
</source>
Observa la sintaxi utilitzada per referir-se al controlador: '''AcmeHelloBundle:Hello:index'''. Symfony2 utilitza aquesta notació curta per referir-se als controladors. Es tracta de la '''sintaxi recomanada''' i li diu a Symfony2 que busqui una '''classe controlador anomenada HelloController''' dins d'un '''paquet''' anomenat''' AcmeHelloBundle '''i que després '''executi el mètode indexAction()'''.

'''Passar arguments al mètode del controlador'''
Exemple de controlador amb un argument en un dels seus mètodes:
<source lang="php">
<?php
// src/Acme/HelloBundle/Controller/HelloController.php

namespace Acme\HelloBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class HelloController extends Controller
{
public function indexAction($name)
{
// ...
}
}
</source>
El controlador anterior té un sol argument, anomenat '''$name''', el valor del qual correspon al paràmetre '''{name}''' de la ruta associada. De fet, quan executes el teu controlador, Symfony2 associa cada argument del controlador amb un paràmetre de la ruta.
L'arxiu d'enrutament hauria de ser aquest:
<source lang="yml">
hello:
path: /hello
defaults: { _controller: AcmeHelloBundle:Hello:index }
</source>

Considera el següent exemple:

<source lang="yml">
# app/config/routing.yml
hello:
path: /hello/{firstName}/{lastName}
defaults: { _controller: AcmeHelloBundle:Hello:index, color: green }
</source>
<source lang="php">
public function indexAction($firstName, $lastName, $color)
{
// ...
}
</source>
Les variables '''{firstName}''' i '''{lastName}''' de la ruta es diuen '''placeholders''', ja que "guarden el lloc" perquè qualsevol valor substitueixi aquesta variable. D'altra banda, la variable '''color''' és una variable de '''tipus default''', ja que el seu valor sempre '''està definit per a totes les rutes'''.
Existeixen regles amb els arguments (paràmetres):
*Cada argument obligatori del controlador ha de tenir associat un paràmetre en la ruta
*No tots els paràmetres de la ruta han de ser arguments en el teu controlador
*és perfectament vàlid fer que l'argument sigui opcional.

El següent exemple no llançarà una excepció:
<source lang="php">
public function indexAction($firstName, $lastName, $color, $foo = 'bar')
{
// ...
}
</source>
==objecte Request com a argument del controlador==
Sol ser molt útil disposar en el controlador de l'objecte '''Request''' associat a la petició de l'usuari, especialment quan treballes amb formularis. Per fer que Symfony passi aquest objecte automàticament com a argument del controlador, utilitza el següent codi:
<source lang="php">
use Symfony\Component\HttpFoundation\Request;

public function updateAction(Request $request)
{
$form = $this->createForm(...);

$form->handleRequest($request);

// ...
}
</source>

== Generador de controladors==
Si el que volem és generar un nou controlador a la nostra aplicació podem automatitzar el procés utilitzant la següent comanda:
<pre>
php app/console generate:controller
</pre>
Aquesta comanda et demanarà tota la informació necessaria per crear el controlador i els '''actions''' (mètodes) necessaris que podràs utilitzar en el fitxer de rutes. Tant si utilitzes la comanda com si no la utilitzes, sempre podràs canviar la classe generada com tu prefereixis.
= Encaminament =
Una ruta és una associació entre un patró d'URL i un controlador. Suposem per exemple que desitges associar URL de tipus ''/blog/el meu-post'' o ''/blog/tot-sobre-symfony'' amb un controlador que sigui capaç de buscar i mostrar l'article sol·licitat.
<source lang="yml">
# app/config/routing.yml
blog_show:
path: /blog/{slug}
defaults: { _controller: AcmeBlogBundle:Blog:show }
</source>
Codi PHP del controlador associat a aquesta ruta:
<source lang="php">
// src/Acme/BlogBundle/Controller/BlogController.php

namespace Acme\BlogBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class BlogController extends Controller
{
public function showAction($slug)
{
$blog = // usa la variable $slug para consultar la base de datos

return $this->render('AcmeBlogBundle:Blog:show.html.twig', array(
'blog' => $blog,
));
}
}
</source>

Aquest és l'objectiu del encaminador de Symfony2: associar la URL d'una petició a un controlador

== Funcionament ==
L'objectiu del sistema d'encaminament de Symfony2 és analitzar aquesta URL i determinar què controlador s'ha d'executar. El procés complet consta dels següents passos:
*La petició es processa en el controlador frontal de Symfony2 (per exemple, en l'arxiu''' app.php''').
*El nucli de Symfony2 (conegut com kernel) sol·licita al enrutador que examini la petició.
*El enrutador busca què patró de les rutes de l'aplicació coincideix amb la URL entrant i retorna informació sobre la ruta, incloent el controlador que s'ha d'executar.
*El nucli de Symfony2 executa el controlador, que en última instància, retorna un objecte '''Response'''.

[[Fitxer:funcionament-routing.png]]

== Prefix a les rutes ==

Resulta habitual haver d'afegir un prefix a totes les rutes importades des d'un arxiu extern. Si vols per exemple que el patró de la ruta '''acme_hello''' sigui '''/admin/hello/{name}''' en comptes de''' /hello/{name}''', afegeix l'opció prefix en importar les rutes:
<source lang="yml">
# app/config/routing.yml
acme_hello:
resource: "@AcmeHelloBundle/Resources/config/routing.yml"
prefix: /admin
</source>
El valor indicat en l'opció prefix (en aquest cas '''/admin''') s'afegeix per davant de tots els patrons de les rutes importades des de l'arxiu extern.

= Sessions a Symfony2=

Symfony2 inclou un objecte de sessió que permet emmagatzemar informació persistent sobre l'usuari, és a dir, informació que es guarda d'una petició a una altra. Per defecte Symfony2 emmagatzema la informació en una cookie usant les sessions natives de PHP.

<source lang="php">
use Symfony\Component\HttpFoundation\Request;

public function indexAction(Request $request)
{
$session = $request->getSession();

// guarda un atributo para reutilizarlo durante una
// petición posterior del usuario
$session->set('foo', 'bar');

// obtener el valor de un atributo de la sesión
$foo = $session->get('foo');

// utilizar un valor por defecto si el atributo no existe
$filters = $session->get('filters', array());
}
</source>

=Plantilles TWIG=
Una plantilla és un arxiu de text que pot generar qualsevol altre format basat en text (HTML, XML, CSV, LaTeX, etc.). Les plantilles PHP són les més populars, com la qual mostra el següent exemple:
<source lang="html">
<!DOCTYPE html>
<html>
<head>
<title>¡Bienvenido a Symfony!</title>
</head>
<body>
<h1><?php echo $page_title ?></h1>

<ul id="navigation">
<?php foreach ($navigation as $item): ?>
<li>
<a href="<?php echo $item->getHref() ?>">
<?php echo $item->getCaption() ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</body>
</html>
</source>
Symfony2 inclou un llenguatge de plantilles anomenat '''Twig''' que és molt més potent i elegant que PHP. Gràcies a Twig pots crear plantilles molt concises i fàcils de llegir, per la qual cosa a més són fàcils d'entendre per part dels dissenyadors web. Observa el mateix exemple anterior definit com a plantilla Twig:
<source lang="html">
<!DOCTYPE html>
<html>
<head>
<title>¡Bienvenido a Symfony!</title>
</head>
<body>
<h1>{{ page_title }}</h1>

<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
</body>
</html>
</source>
Twig es basa en dues etiquetes especials:

*'''{ { ... } }''': serveix per mostrar el contingut d'una variable o el resultat de realitzar alguna operació o processar alguna expressió. En PHP la construcció equivalent és ''echo'' o ''print''.
*'''{% ... %}''': serveix per definir la lògica de la plantilla, és a dir, la part de programació que controla com es mostren els continguts de la plantilla. Entre uns altres, aquesta etiqueta s'empra per a les instruccions ''if'' i per als bucles ''for''.

==Herència de plantilles i layout==
Normalment les plantilles d'un mateix projecte comparteixen molts elements comuns, com per exemple la capçalera, el peu de pàgina, una barra lateral, etc. Symfony2 resol aquest problema de forma molt senzilla: una plantilla pot decorar el contingut d'una altra plantilla.

La idea és exactament la mateixa que l'herència de classes PHP: l'herència de plantilles et permet crear una plantilla basi cridada layout i que conté tots els elements comuns del lloc definits com a blocs. Després, les plantilles filla hereten del layout i emplenen o modifiquen aquests blocs.

En primer lloc, crea un arxiu amb el teu disseny base:
<source lang="html">

# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
{% endblock %}
</div>

<div id="contenido">
{% block body %}{% endblock %}
</div>
</body>
</html>

</source>
Aquesta plantilla defineix l'esquelet d'una pàgina HTML simple de dues columnes. En aquest exemple, '''es defineixen tres blocs amb l'etiqueta {% block %} (title, sidebar i body)'''. Les '''plantilles filla''' poden '''modificar''' els continguts de cadascun dels '''blocs'' o deixar-los tal com estan en la plantilla base.

El següent exemple mostra l'aspecte d'una plantilla filla:
<source lang="php">
{# src/Acme/BlogBundle/Resources/views/Blog/index.html.twig #}
{% extends '::base.html.twig' %}

{% block title %}My cool blog posts{% endblock %}

{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}

</source>

La clau de l'herència de plantilles és l'etiqueta '''{% extends %}'''. D'aquesta forma el motor de plantilles sap que primer ha de processar la plantilla base, que defineix el disseny de la pàgina i crea diversos blocs de continguts. Després es renderitza la plantilla filla, que reemplaça el contingut dels blocs '''title''' i '''body''' del pare.

Quan treballis amb l'herència de plantilles, tingues en compte:
*Si inclous l'etiqueta '''{% extends %}''' en una plantilla, aquesta ha de ser la primera etiqueta d'aquesta plantilla.
*Quantes més etiquetes '''{% block %}''' tinguis en la teva plantilla basi, millor. Recorda que les plantilles filla no tenen l'obligació d'emplenar tots els blocs dels pares, per la qual cosa pots definir tants blocs com vulguis i assignar a cadascun un valor per defecte que sigui lògic per a la major part de les pàgines del lloc. Quants més blocs defineixi el layout, més flexible serà el seu disseny.
*Si còpies i pegues algun contingut en diverses plantilles, segurament serà millor que moguis aquest contingut a algun bloc del layout. En altres casos el millor és col·locar aquest contingut en alguna altra plantilla i incloure-la amb l'etiqueta '''include''' sempre que sigui necessari.
*Si vols obtenir el contingut d'algun bloc de la plantilla pare, utilitza la funció''' { { parent() } }'''. Això és molt útil quan vols afegir continguts propis a qualsevol altre contingut que el pare pugui haver definit per a aquest bloc:
<source lang="php">
{% block sidebar %}
<h3>Table of Contents</h3>

{# ... #}

{{ parent() }}
{% endblock %}
</source>

==Localització de les plantilles==
Les plantilles es troben en dos llocs diferents:

*'''app/Resources/views/''': el directori on s'emmagatzemen les plantilles globals de l'aplicació, com per exemple la plantilla del layout i les plantilles utilitzades per redefinir les plantilles incloses en els bundles de Symfony2.
*'''ruta/fins a/el/bundle/Resources/views/''': els bundles emmagatzemen les seves pròpies plantilles en el directori '''Resources/views/''' de cada bundle. La immensa majoria de les plantilles s'emmagatzemen dins d'algun bundle.
Symfony2 identifica a cada plantilla amb la sintaxi especial '''bundle:controlador:plantilla'''. Això permet definir diferents tipus de plantilla, cadascuna emmagatzemada en un lloc diferent:

'''AcmeBlogBundle:Blog:index.html.twig''': indica la plantilla d'una pàgina específica. Est és el significat de cadascuna de les tres parts de la cadena:
*'''AcmeBlogBundle''': (bundle) la plantilla es troba dins del bundle '''AcmeBlogBundle''' (per exemple, ''src/Acme/BlogBundle'').
*'''Blog''': (controlador) indica que la plantilla s'emmagatzema en el subdirectori Blog de '''Resources/views'''.
*'''index.html.twig''': (plantilla) el nom de l'arxiu que guarda la plantilla és '''index.html.twig'''. Suposant que '''AcmeBlogBundle''' es trobi en '''src/Acme/BlogBundle''', la ruta completa de la plantilla seria '''src/Acme/BlogBundle/Resources/views/Blog/index.html.twig'''.

*'''AcmeBlogBundle::layout.html.twig''': indica que és una plantilla global del bundle indicat. Com a falta la part central que es refereix al controlador, aquesta plantilla '''no es troba''' dins de cap subdirectori de '''Resources/views/'''. En altres paraules, '''la ruta '''completa de la plantilla és '''Resources/views/layout.html.twig''' dins del bundle AcmeBlogBundle.
*'''::base.html.twig''': indica que és una plantilla global de l'aplicació. Observa que la cadena comença amb dos parells de dos punts '''(::)''', per la qual cosa falta la part del bundle i la del controlador. En altres paraules, aquesta plantilla no es troba en cap bundle sinó directament dins de '''app/Resources/views/'''.

== Etiquetes Twig==
===Incloent unes altres plantilles===
Resulta habitual voler incloure la mateixa plantilla o fragment de codi a diverses pàgines diferents. Si l'aplicació té per exemple un llistat d'articles, el codi de la plantilla que mostra un article es pot utilitzar a la pàgina de detall de l'article, en una pàgina que mostra els articles més populars, o en una llista dels articles més recents.

En PHP, quan necessites reutilitzar un tros de codi, normalment mous el codi a una nova classe o funció. En les plantilles s'aplica la mateixa idea:
<source lang="html">
{# src/Acme/ArticleBundle/Resources/views/Article/articleDetails.html.twig #}
<h2>{{ article.title }}</h2>
<h3 class="byline">by {{ article.authorName }}</h3>

<p>
{{ article.body }}
</p>
</source>
Ara ja pots incloure fàcilment aquesta plantilla en qualsevol una altra:

<source lang="html">
{# src/Acme/ArticleBundle/Resources/views/Article/list.html.twig #}
{% extends 'AcmeArticleBundle::layout.html.twig' %}

{% block body %}
<h1>Recent Articles<h1>

{% for article in articles %}
{{ include(
'AcmeArticleBundle:Article:articleDetails.html.twig',
{'article': article}
) }}
{% endfor %}
{% endblock %}
</source>

==Renderitzant plantilles enviant-li dades des de el controlador==
Imagina que en el teu lloc web tens una barra lateral que mostra els tres articles més recents. Per obtenir aquests tres articles és necessari realitzar una consulta a la base de dades o alguna altra operació similar que no es pot incloure en la pròpia plantilla.

La solució consisteix a inserir en la plantilla el resultat retornat per un controlador de l'aplicació. En primer lloc, crea un controlador que renderitzi el llistat dels articles recents:
<source lang="php">
// src/Acme/ArticleBundle/Controller/ArticleController.php
class ArticleController extends Controller
{
public function recentArticlesAction($max = 3)
{
// hace una llamada a la base de datos u otra lógica
// para obtener los "$max" artículos más recientes
$articles = ...;

return $this->render(
'AcmeArticleBundle:Article:recentList.html.twig',
array('articles' => $articles)
);
}
}
</source>
i a la plantilla es pot utilitzar les dades del array enviat des del controlador directament:
<source lang="html">
{# src/Acme/ArticleBundle/Resources/views/Article/recentList.html.twig #}
{% for article in articles %}
<a href="/article/{{ article.slug }}">
{{ article.title }}
</a>
{% endfor %}
</source>

Per mostrar en qualsevol plantilla el resultat d'executar un controlador, utilitza la funció render i identifica al controlador utilitzant la notació especial '''bundle:controlador:acció''':
<source lang="html">
{# app/Resources/views/base.html.twig #}

{# ... #}
<div id="sidebar">
{{ render(controller('AcmeArticleBundle:Article:recentArticles', {
'max': 3
})) }}
</div>
</source>
==Enllaçant pàgines==
Crear enllaços a altres pàgines de l'aplicació és una de les tasques més comunes d'una plantilla. En lloc de generar a mà les URL dins de la plantilla, utilitza la funció path de Twig (o el helper router en PHP) per generar les URL utilitzant la configuració del sistema de encaminament. D'aquesta manera, si més endavant vols canviar l'aspecte de qualsevol URL, només has d'actualitzar un arxiu de configuració i totes les URL de les plantilles s'actualitzaran instantàniament.
<source lang="html">
<a href="{{ path('_welcome') }}">Home</a>
</source>
On '''_welcome''' està definit al fitxer de routes:
<source lang="html">
_welcome:
path: /
defaults: { _controller: AcmeDemoBundle:Welcome:index }
</source>

==Enllaçant arxius web (css, javascript)==
Les plantilles de les aplicacions web solen enllaçar amb els web '''assets'' o arxius web, tals com a imatges, fulles d'estil CSS, arxius Javascript, etc.

A la versió 2.8 ja no s'instal·la '''assetic''' per defecte i s'ha d'instal·lar utilitzant aquesta guia:
http://symfony.com/doc/current/cookbook/assetic/asset_management.html

De nou no és aconsellable generar a mà les URL d'aquest tipus d'arxius, ja que Symfony2 ofereix una solució millor i molt més flexible mitjançant la funció '''asset''' de Twig:
<source lang="html">
<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />

<link href="{{ asset('css/blog.css') }}" rel="stylesheet" type="text/css" />
</source>

La gestió dels arxius CSS i dels arxius Javascript es realitza mitjançant la herència de plantilles. A la plantilla para es pot incloure els arxius que s'utilitzarà a tota la aplicació i després, a les plantilles filles, es poden incloure fitxers específics per aquella part de la web:
Plantilla pare:
<source lang="html">
{# app/Resources/views/base.html.twig #}
<html>
<head>
{# ... #}

{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
{# ... #}

{% block javascripts %}
<script src="{{ asset('js/main.js') }}" type="text/javascript"></script>
{% endblock %}
</body>
</html>

</source>
i les plantilles filles redefineixen els blocs tot utilitzant la configuració que hi ha en la plantilla pare:
<source lang="html">
{# src/Acme/DemoBundle/Resources/views/Contact/contact.html.twig #}
{% extends '::base.html.twig' %}

{% block stylesheets %}
{{ parent() }}

<link href="{{ asset('css/contact.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}

{# ... #}
</source>
Les plantilles també poden enllaçar arxius que es trobin en el directori Resources/public de qualsevol bundle. Per fer que aquests arxius estiguin disponibles en l'aplicació, executa la comanda:
<pre>
php app/console assets:install directorio [--symlink]
</pre>

===Si al utilitzar ''assets'' en producció no funciona:===
http://symfony.com/doc/current/cookbook/assetic/asset_management.html#cookbook-assetic-dumping

== Variables globals que es poden utilitzar directament a les plantilles ==
*'''app.security''' - el context de seguretat.
*'''app.user''' - l'objecte qeu representa a l'usuari que està visitant l'aplicació.
*'''app.request''' - l'objecte Request que conté tota la informació de la petició.
*'''app.session''' - l'objecte Session relacionat amb l'usuari.
*'''app.environment''' - l'entorn en el qual s'està executant l'aplicació (dev, prod, etc.)
*'''app.debug''' - val true si l'aplicació s'està executant en la manera de depuració i false en un altre cas.
=Formularis=
Guia Symfony per crear i utilitzar formularis:
http://symfony.com/doc/2.8/book/forms.html

Symfony incorpora unes llibreries que permeten utilitzar els formularis associant-los amb clases PHP. Exemple:
Classe Tasca:
<source lang="php">
// src/Acme/TaskBundle/Entity/Task.php
namespace Acme\TaskBundle\Entity;

class Task
{
// descripción de la tarea
protected $task;

// fecha en la que debe estar completada
protected $dueDate;

public function getTask()
{
return $this->task;
}
public function setTask($task)
{
$this->task = $task;
}

public function getDueDate()
{
return $this->dueDate;
}

public function setDueDate(\DateTime $dueDate = null)
{
$this->dueDate = $dueDate;
}
}
</source>
Per crear el formulari on demanem totes, o algunes, de les dades que necessitem per crear la tasca anterior fariem el següent:
<source lang="php">
// src/Acme/TaskBundle/Controller/DefaultController.php
namespace Acme\TaskBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Acme\TaskBundle\Entity\Task;
use Symfony\Component\HttpFoundation\Request;

class DefaultController extends Controller
{
public function newAction(Request $request)
{
// crea una task y le asigna algunos datos ficticios para este ejemplo
$task = new Task();
$task->setTask('Write a blog post');
$task->setDueDate(new \DateTime('tomorrow'));

$form = $this->createFormBuilder($task)
->add('task', 'text')
->add('dueDate', 'date')
->add('save', 'submit')
->getForm();

return $this->render('AcmeTaskBundle:Default:new.html.twig', array(
'formulari' => $form->createView(),
));
}
}
</source>

Utilitzant el formulari en una plantilla TWIG:
<source lang="html">
{# src/Acme/TaskBundle/Resources/views/Default/new.html.twig #}

{{ form(formulari) }}
</source>
==Processant l'enviament del formulari==
Exemple del controlador que envia i reb les dades d'un formulari:
<source lang="php">
public function newAction(Request $request)
{
// crear un objeto $task nuevo (borra los datos de prueba)
$task = new Task();

$form = $this->createFormBuilder($task)
->setAction($this->generateUrl('target_route'))
->setMethod('GET')
->add('task', 'text')
->add('dueDate', 'date')
->add('save', 'submit')
->getForm();

$form->handleRequest($request);

if ($form->isValid()) {
// guardar la tarea en la base de datos

return $this->redirect($this->generateUrl('task_success'));
}

// ...
}
</source>
*Quan es carrega per primera vegada la pàgina associada a aquest controlador, es crea i renderiza el formulari. El mètode '''handleRequest() ''' detecta que el formulari no s'ha enviat i per tant, no fa gens.El mètode '''isValid()''' retorna false si el formulari no s'ha enviat.
*Quan l'usuari envia el formulari, el mètode '''handleRequest()''' ho detecta i guarda immediatament les dades enviades en les propietats '''task i dueDate''' de l'objecte''' $task.''' Després es valida aquest objecte. Si no és vàlid, el mètode '''isValid()''' retorna '''false''' una altra vegada, per la qual cosa es torna a mostrar el formulari, aquesta vegada amb els missatges d'error corresponents. Si solament vols comprovar si el formulari s'ha enviat, independentment de si és vàlid o no, utilitza el mètode '''isSubmitted()'''.
*Quan l'usuari envia el formulari amb dades vàlides, les dades enviades es guarden de nou en el formulari, però aquesta vegada el mètode '''isValid()''' retorna '''true'''. En aquest moment ja pots treballar amb l'objecte '''$task''' (per exemple guardant-ho en una base de dades) abans de redirigir a l'usuari a una altra pàgina (per exemple a la pàgina d'agraïment o a la qual mostra un missatge determinat).

=Seguretat=
És un procés de dues etapes que el seu objectiu és evitar que un usuari accedeixi a un recurs pel qual no hauria de tenir accés.

En el primer pas del procés, el sistema de seguretat identifica qui és l'usuari obligant-ho a enviar algun tipus d'identificació. Això es diu autenticació, i significa que el sistema està tractant d'esbrinar qui ets.

Una vegada que el sistema sap qui ets, el següent pas és decidir si hauries de tenir accés a un determinat recurs. Aquesta part del procés es diu autorització, i significa que el sistema està comprovant si tens suficients privilegis per realitzar una determinada acció.

[[Fitxer:seguretat-symfony.png]]

==Firewalls (autenticació)==

El sistema de seguretat de Symfony s'activa quan un usuari fa una petició a una URL que està protegida per un '''firewall''' o tallafocs. El treball del firewall ''consisteix a determinar si l'usuari necessita estar autenticat'', i si ho necessita, enviar una resposta a l'usuari per iniciar el procés d'autenticació.

Un ''firewall s'activa quan la URL d'una petició entrant concorda amb el valor de la seva opció de configuració '''pattern'''''. En aquest exemple el valor de pattern''' (^/)''' concorda amb qualsevol petició entrant. No obstant això, el fet que el firewall estigui activat no significa que el navegador mostra la caixa de login+contrasenya per a totes les URL. Els usuaris poden accedir per exemple a /foo sense que l'aplicació els demani que s'autentiquin.

[[Fitxer:firewall-symfony.png]]

Exemple:
<source lang="html">
# app/config/security.yml
security:
firewalls:
secured_area:
pattern: ^/
anonymous: ~
http_basic:
realm: "Secured Demo Area"

access_control:
- { path: ^/admin, roles: ROLE_ADMIN }
# Descomenta la siguiente línea para proteger también
# la propia URL /admin
# - { path: ^/admin$, roles: ROLE_ADMIN }

providers:
in_memory:
memory:
users:
ryan: { password: ryanpass, roles: 'ROLE_USER' }
admin: { password: kitten, roles: 'ROLE_ADMIN' }

encoders:
Symfony\Component\Security\Core\User\User: plaintext
</source>

Aquest funcionament és possible en primer lloc perquè el firewall permet l'accés als usuaris anònims a causa de l'opció de configuració anonymous. En altres paraules, el firewall no exigeix que tots els usuaris s'autentiquin res més accedir a l'aplicació. I com en la configuració de la secció access_control no s'indica que els usuaris hagin de tenir cap role especial per accedir a /foo la petició es processa sense requerir a l'usuari que s'autentiqui.

Si elimines l'opció anonymous, l'efecte és que ara el firewall demana autenticació a qualsevol recurs.

Seguint amb el mateix exemple, si un usuari sol·licita '''/admin/foo''', l'aplicació es comporta de manera diferent. Això és a causa de la configuració de la secció '''access_control''', que indica que qualsevol URL que coincideixi amb l'expressió regular '''^/admin''' (és a dir, la URL '''/admin''' o qualsevol altra URL que coincideixi amb /admin/) requereix el rol''' ROLE_ADMIN'''. Els rols són la clau del sistema d'autorització: l'usuari pot accedir a '''/admin/foo''' només si compta amb el rol'''ROLE_ADMIN'''.

[[Fitxer:access-symfony.png ]]

La capa de control d'accés denega l'accés a l'usuari (perquè els usuaris anònims no compten amb el rol ROLE_ADMIN), el firewall pren el control de l'aplicació i inicia el procés d'autenticació.

==Utilitzant el típic formulari de accés==
En primer lloc, afegeix l'opció form_login en la configuració del firewall:
<source lang="html">
# app/config/security.yml
security:
firewalls:
secured_area:
pattern: ^/
anonymous: ~
form_login:
login_path: login
check_path: login_check
</source>

El sistema de seguretat inicia el procés d'autenticació, es redirigeix a l'usuari a la ruta que mostra el formulari d'accés (per defecte '''/login'''). El'' formulari has de crear-ho tu mateix a mà, ja que Symfony no ho proporciona''. Primer crea les dues noves rutes utilitzades en la configuració de la seguretat: la ruta '''login''' mostra el formulari (es correspon amb la URL''' /login''') i '''login_check''' que processa l'enviament del formulari (es correspon amb la URL '''/login_check)''':

<source lang="html">
# app/config/routing.yml
login:
pattern: /login
defaults: { _controller: AcmeSecurityBundle:Security:login }
login_check:
pattern: /login_check
</source>

Observa que el nom de la ruta '''login''' coincideix amb el valor de l'opció '''login_path''', ja que és on el sistema de seguretat redirigeix als usuaris que necessiten autenticar-se.

A continuació, crea el controlador que mostra el formulari de accés:
<source lang="php">
// src/Acme/SecurityBundle/Controller/SecurityController.php;
namespace Acme\SecurityBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Security\Core\SecurityContext;

class SecurityController extends Controller
{
public function loginAction(Request $request)
{
$session = $request->getSession();

// get the login error if there is one
if ($request->attributes->has(SecurityContext::AUTHENTICATION_ERROR)) {
$error = $request->attributes->get(
SecurityContext::AUTHENTICATION_ERROR
);
} else {
$error = $session->get(SecurityContext::AUTHENTICATION_ERROR);
$session->remove(SecurityContext::AUTHENTICATION_ERROR);
}

return $this->render(
'AcmeSecurityBundle:Security:login.html.twig',
array(
// last username entered by the user
'last_username' => $session->get(SecurityContext::LAST_USERNAME),
'error' => $error,
)
);
}
}
</source>
Si l'usuari envia un nom d'usuari o contrasenya no vàlids, aquest controlador obté el missatge d'error del sistema de seguretat i ho mostra a l'usuari.
Tu t'encarregues de mostrar el formulari a l'usuari i els errors que puguin haver ocorregut, però ''el propi sistema de seguretat s'encarrega de verificar el nom d'usuari i contrasenya i l'autenticació de l'usuari''.
Plantilla del formulari:
<source lang="html">
{# src/Acme/SecurityBundle/Resources/views/Security/login.html.twig #}
{% if error %}
<div>{{ error.message }}</div>
{% endif %}

<form action="{{ path('login_check') }}" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" />

<label for="password">Password:</label>
<input type="password" id="password" name="_password" />

{#
añade lo siguiente si quieres redirigir al usuario a una
URL concreta después del login (explicado más adelante)
<input type="hidden" name="_target_path" value="/account" />
#}

<button type="submit">login</button>
</form>
</source>
=Webgrafia=
Els llibres sobre symfony utilitzats per elaborar un resum de les funcionalitats més importants els podeu trobar a : [http://librosweb.es/libros/ http://librosweb.es/libros/]

També s'ha utilitzat el llibre oficial que podeu trobar a la web:[http://symfony.com/doc/current/book/index.html http://symfony.com/]