Entorns a punt per desenvolupar aplicacions web

En aquest apartat veureu com crear un projecte web amb Netbeans utilitzant Maven, què és un servidor web, com interaccionen els navegadors amb els servidors web, quins tipus de servidors existeixen i quines tecnologies s’executen al servidor i quines al navegador.

Utilitzareu Maven per administrar els projectes que creareu al llarg d’aquest mòdul. Maven és una eina d’administració de projectes que engloba tot el cicle de vida d’una aplicació, des de la seva creació fins als binaris amb el quals distribuir el projecte.

Per crear un nou projecte amb Maven i Netbeans és molt senzill, només heu d’anar a File / New Project / Maven / Web Application (vegeu la figura figura).

Podeu posar com a nom de projecte Hola, Món, i com a identificador de grup cat.xtec.ioc, tal com podeu veure a la figura figura

Finalment, a l’última pantalla escollireu GlassFish com a servidor d’aplicacions.

Un projecte Maven es defineix mitjançant un fitxer anomenat POM (Project Object Model). Aquest fitxer s’utilitza per definir les instruccions per compilar el projecte, les dependències del projecte (llibreria), etc. En Maven, l’execució d’un fitxer POM sempre genera un artefacte. Aquest artefacte pot ser qualsevol cosa: un fitxer jar, un fitxer swf de Flash, un fitxer zip o el mateix fitxer pom.

Un exemple de fitxer POM podeu trobar-lo a la carpeta ProjectFiles:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
 
    <groupId>cat.xtec.ioc</groupId>
    <artifactId>holamon</artifactId>
    <version>1.0</version>
    <packaging>war</packaging>
 
    <name>holamon</name>
 
    <properties>
        <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
 
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
 
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.3</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>2.6</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>copy</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${endorsed.dir}</outputDirectory>
                            <silent>true</silent>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>javax</groupId>
                                    <artifactId>javaee-endorsed-api</artifactId>
                                    <version>7.0</version>
                                    <type>jar</type>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

Les etiquetes més importants del fitxer POM són:

• groupId: és com el paquet del projecte. Normalment es posa el nom de l’empresa, ja que tots els projectes amb un groupId pertanyen a una sola empresa.
• artifactId: és el nom del projecte.
• version: nombre de versió del projecte.
• packaging: tipus de fitxer generat en compilar el projecte Maven.

Una vegada s’ha creat el projecte, veieu que Maven genera un fitxer anomenat index.html dintre de la carpeta Web Pages, semblant a aquest:

<!DOCTYPE html>
<html>
    <head>
        <title>Start Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

Noteu que heu canviat el text “Hello World!” per “Hola, Món”. Aquest últim apareixerà com a contingut de la pàgina HTML.

Quan executeu el projecte anterior apareix en el navegador l’HTML anterior (vegeu la figura figura).

Fixeu-vos en la URL de la pàgina que ha executat el navegador: http://localhost:8080/HolaMon/.

Intenteu contestar a les següents preguntes:

• Què és http:/localhost:8080?
• I Hola, Món què significa, a què fa referència?

Abans de saber la resposta de les preguntes anteriors, cerqueu al vostre PC el fitxer index.html que heu creat anteriorment. Feu la cerca amb l’explorador de fitxers. Hauríeu de trobar-lo dintre de la carpeta NetBeansProject/HolaMon/web (vegeu la figura figura).

Si obriu amb un navegador web el fitxer index.html es veurà correctament? Proveu-ho (vegeu la figura figura).

Observeu que el fitxer s’ha visualitzat exactament igual. No hi ha cap dubte que és la mateixa pàgina web. L’únic que ha canviat respecte a l’execució anterior és la URL del navegador. En aquest cas, es mostra la ruta des de l’arrel del sistema fins al fitxer que es veu en el navegador:

file:///home/alex/NetBeansProjects/HolaMon/web/index.html

Llavors, quina és la diferència entre aquesta execució i l’execució de la figura figura?

Aquesta vegada el navegador ha llegit directament el fitxer, per això a la URL apareix la seva localització exacta. No hi ha cap altra intervenció. Ha obert el fitxer, ho ha interpretat (HTML) i l’ha tancat.

Per explicar que succeeix a la figura figura ha arribat el moment de contestar a les preguntes abans formulades:

• Què és http:/localhost:8080?
• I Hola, Món què significa, a què fa referència?

Com podeu suposar, el navegador no està obrint cap fitxer. El navegador, mitjançant el protocol HTTP, ha demanat un recurs a un servidor web. Aquest recurs és un fitxer HTML que ha llegit el servidor web i l’ha enviat al navegador a través de la xarxa fent servir el protocol HTTP.

I el paràmetre :8080? Aquest paràmetre fa referència al port d’escolta del servidor web. Normalment, el paràmetre no el veieu quan accediu a una pàgina web que està allotjada en un servidor públic, perquè s’accedeix a un port d’escolta estàndard (el 80 per a pàgines no segures o el 443 per a pàgines segures). En aquest cas, l’entorn de desenvolupament NetBeans us proporciona un servidor integrat anomenat GlassFish que escolta les peticions pel port 8080. A més a més, com que està funcionant en el mateix PC des d’on s’està executant NetBeans, el nom del servidor és el mateix PC, o en altres paraules, localhost. Podeu veure les propietats si aneu a la finestra Services i després a les propietats del servidor (vegeu la figura figura).

Si us hi fixeu, hi ha un paràmetre del servidor anomenat HTTP Port on s’especifica el port utilitzat per escoltar peticions HTTP, i un altre anomenat HOST on s’especifica que el servidor és el mateix PC (localhost). Recordeu que quan vàreu crear el projecte Hola, Món vàreu configurar-lo perquè utilitzés el servidor web GlassFish, que ve integrat amb NetBeans.

I Hola, Món què significa, a què fa referència?

Hola, Món identifica, dintre del servidor GlassFish, el recurs web que es vol visualitzar. Penseu que GlassFish pot publicar molts projectes alhora i que ha de tenir una manera per identificar cadascun. Una vegada ha estat identificat el projecte, GlassFish mostra la pàgina principal (index.html). Si veieu la figura figura comprovareu on s’especifica el nom d’aquest recurs (context path).

Però perquè mostra la pàgina index.html? Per defecte, els servidors web cerquen aquest fitxer, però podeu canviar aquest comportament creant un arxiu web.xml dintre de la carpeta WEB-INF. Per crear-lo podeu anar a New / Other / Standard Deployment Descriptor, i aquí li podeu dir un altre arxiu d’inici de l’aplicació amb, per exemple:

<welcome-file-list>
    <welcome-file>pagina_principal.html</welcome-file>
</welcome-file-list>

Falta veure com es comunica el navegador amb el servidor web. Com hem dit abans, aquesta comunicació es fa mitjançant el protocol HTTP.

Molt bé, ara activareu la monitorització d’aquest protocol amb el servidor Glassfish. Accediu a les propietats del servidor i activeu la monitorització (vegeu la figura figura).

En activar el monitoratge HTTP s’ha de reiniciar el servidor, i finalment s’ha de compilar el projecte un altre cop (vegeu la figura figura).

Una vegada heu compilat el projecte podeu obrir-lo al navegador i us apareixerà una finestra al Netbeans amb els missatges HTTP intercanviats (vegeu les figures figura i figura).

El propòsit del protocol HTTP és permetre la transferència d’arxius (principalment, en format HTML) entre un navegador (el client) i un servidor web. La comunicació entre el navegador i el servidor es duu a terme en dues etapes:

• El navegador realitza una sol·licitud HTTP.
• El servidor processa la sol·licitud i després envia una resposta HTTP.

Una sol·licitud HTTP és un conjunt de línies que el navegador envia al servidor. Inclou:

• Una línia de sol·licitud: és una línia que especifica el tipus de document sol·licitat, el mètode que s’aplicarà i la versió del protocol utilitzada. La línia està formada per tres elements que han d’estar separats per un espai:
  • el mètode
  • l’adreça URL
  • la versió del protocol utilitzada pel client (en general, HTTP/1.1)
• Els camps de l’encapçalat de sol·licitud: és un conjunt de línies opcionals que permeten aportar informació addicional sobre la sol·licitud i/o el client (navegador, sistema operatiu, etc.). Cadascuna d’aquestes línies està formada per un nom que descriu el tipus d’encapçalat, seguit de dos punts (:) i el valor de l’encapçalat.
• El cos de la sol·licitud: és un conjunt de línies opcionals que han d’estar separades de les línies precedents per una línia en blanc i, per exemple, permeten que s’enviïn dades per una comanda POST durant la transmissió de dades al servidor utilitzant un formulari.

Per tant, una sol·licitud HTTP posseeix la següent sintaxi:

GET http://ioc.xtec.cat HTTP/1.1
Accept : Text/html 
If-Modified-Since : Friday, 11-December-2015 14:37:11 GMT 
User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

Les comandes HTTP més importants per fer una sol·licitud són:

• GET: s’utilitza per recollir qualsevol tipus d’informació del servidor. S’empra sempre que es prem sobre un enllaç o es tecleja directament a una URL. Com a resultat, el servidor HTTP envia el document corresponent a la URL seleccionada.
• HEAD: sol·licita informació sobre un objecte (fitxer): grandària, tipus, data de modificació… És utilitzat pels gestors de cache (memòria cau) de pàgines o els servidors proxy per conèixer quan és necessari actualitzar la còpia que es manté d’un fitxer.
• POST: serveix per enviar informació al servidor, per exemple les dades contingudes en un formulari. El servidor passarà aquesta informació a un procés encarregat del seu tractament (generalment una aplicació CGI/PHP/ASP…). L’operació que es realitza amb la informació proporcionada depèn de la URL utilitzada. S’utilitza sobretot en els formularis.

Una resposta HTTP és un conjunt de línies que el servidor envia al navegador. Està constituïda per:

• Una línia d’estat: és una línia que especifica la versió del protocol utilitzada i l’estat de la sol·licitud en procés mitjançant un text explicatiu i un codi. La línia està composta de tres elements que han d’estar separats per un espai:
  • la versió del protocol utilitzada
  • el codi d’estat
  • el significat del codi
• Els camps de l’encapçalat de resposta: és un conjunt de línies opcionals que permeten aportar informació addicional sobre la resposta i/o el servidor. Cadascuna d’aquestes línies està composta d’un nom que qualifica el tipus d’encapçalat, seguit de dos punts (:) i del valor de l’encapçalat.
• El cos de la resposta: conté el document sol·licitat.

Exemple de resposta d’una petició GET a un servidor web:

HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0\r\n
Content-Location: http://www.microsoft.com/default.htm\r\n
Date: Fri, 10 Dec 2015 19:33:18 GMT\r\n
Content-Type: text/html\r\n
Accept-Ranges: bytes\r\n
Last-Modified: Thu, 9 Dec 2015 20:27:23 GMT\r\n
Content-Length: 26812\r\n
<html>
....//pàgina html que es veurà en el navegador
</html>

La manera de funcionar que des d’un navegador us permet accedir a la informació que existeix en un servidor es diu arquitectura client-servidor.

Penseu diverses aplicacions que utilitzeu diàriament i fan servir l’arquitectura client-servidor.

A les aplicacions client-servidor, al client se’l coneix amb el terme front-end o interfície d’usuari. La part client té les següents responsabilitats:

• Interaccionar amb l’usuari.
• Manipular les dades que introdueix l’usuari.
• Enviar les peticions del usuari al servidor.
• Rebre el resultat del processament de les dades enviades al servidor.
• Interpretar la resposta del servidor i mostrar-la a l’usuari.

En canvi, el servidor, també anomenat back-end, porta a terme les següents funcions:

• Processar la lògica del programa necessària per donar resposta a la petició del client.
• Realitzar les validacions necessàries a la base de dades.
• Accedir a la base de dades, si fos necessari, per donar una solució als requeriments de la petició enviada pel client.
• Formatar les dades per enviar-les al client.

Per donar a l’usuari una experiència molt més agradable i dinàmica a l’hora d’utilitzar aplicacions client-servidor s’han desenvolupat diferents tecnologies que s’executen o bé al front-end o bé al back-end.

Proveu el següent codi i digueu si s’executa al front-end o al back-end:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="exemple.js" type="text/javascript"></script>
        <link href="estils.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div>HolaMón</div>
        <button onclick="hola();" value="salutació">salutació</button>
    </body>
</html>

Com veieu, en l’HTML anterior utilitzeu dos fitxers addicionals: estils.css i exemple.js. A continuació teniu el contingut del fitxer exemple.js:

function hola(){
    alert("hola");
}

Aquest és el contingut del fitxer “estils.css”:

div{
    color:blue;
}

Una manera que teniu per determinar si el codi Javascript i el codi CSS s’executen al servidor o al navegador és executar el codi sense la intervenció del servidor. Igual que heu fet anteriorment, executeu el codi directament fent doble clic al fitxer. La URL que veureu en el navegador és la localització exacta del fitxer en el disc dur (vegeu la figura figura).

En aquest cas, com podeu comprovar, funciona tot exactament igual que abans. Significa que tant el CSS com el programa en Javascript són tecnologies que s’executen exclusivament en el client. No cal un servidor web perquè funcionin.

Intenteu descobrir quines de les següents tecnologies s’executen al client o al servidor: Java, PHP, CGI, FLASH, JSF, applets, CSS, ASP i Javascript.

Creareu una pàgina nova, però en comptes de ser de tipus HTML la creareu de tipus JSP (Java Server Pages) i l’anomenareu index.jsp. La creareu utilitzant el mateix projecte de l’apartat anterior mitjançant l’opció File / New File / Web / JSP del menú principal (vegeu la figura figura).

Modifiqueu-la amb el següent codi i digueu si s’executa al front-end o al back-end:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Pàgina JSP</title>
        <script src="exemple.js" type="text/javascript"></script>
        <link href="estils.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div>Hola, Món!</div>
         <button onclick="hola();" value="salutació">salutació</button>
        <%
            out.println("La teva IP és: " + request.getRemoteAddr());
        %>
    </body>
</html>

Si l’executeu des del programa NetBeans fent servir el servidor web veieu que s’executa tot el codi correctament, fins i tot el codi que hi ha dintre de les etiquetes ”<%” (vegeu la figura figura).

Però s’ha executat tot en el front-end o hi ha algun tros de codi que s’ha executat en el back-end?

En comptes d’anar directament al fitxer i fer doble clic, us proposo que mireu el codi font HTML que ha interpretat el navegador. Podeu veure-ho fent clic amb el botó esquerre i després seleccionant del menú l’opció Visualitza l’origen de la pàgina, sempre que el ratolí estigui posicionat dintre de la finestra del navegador.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Pàgina JSP</title>
        <script src="exemple.js" type="text/javascript"></script>
        <link href="estils.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div>Hola, Món!</div>
         <button onclick="hola();" value="salutació">salutació</button>
        La teva IP és: 127.0.0.1
 
    </body>
</html>

Noteu que tot el codi que hi havia entre les etiquetes ”<%” i ”%>” no apareix. En el seu lloc apareix el resultat de la seva execució. Quan el servidor ha volgut respondre a la petició HTTP GET del client ha hagut d’executar el codi que hi ha dintre de les etiquetes ”<%” i ha enviat un missatge HTTP Response amb el codi HTML substituint les etiquetes ”<%” pel resultat de l’execució.

És a dir, el navegador no ha tingut l’oportunitat de veure que s’havia d’executar codi perquè ni tan sols l’ha rebut. De fet, el servidor web ha fet alguna cosa més del que feia fins ara. El servidor web s’ha transformat en un servidor d’aplicacions on ha hagut de transformar la pàgina web original.

Com que el servidor ha executat codi JSP, la pàgina HTML ha canviat (l’encerclat per ”<% %>”). Qualsevol usuari que es connecti amb el navegador veurà una pàgina diferent. No totalment diferent però sí parcialment, perquè cadascú visualitzarà la seva IP quan accedeixi a aquesta pàgina.

Servidor d'aplicacions Tomcat

NetBeans disposa, a més del servidor GlassFish, del servidor d’aplicacions Tomcat. Tomcat és un servidor d’aplicacions d’Apache Software Foundation que executa servlets Java i mostra pàgines web que inclouen la codificació Java Server Page. Tomcat és open source i està disponible en el lloc web d’Apache.

Tomcat implementa un contenidor de servlets i JSP, que és el que la majoria de les aplicacions web necessiten, però no és un motor de Java EE (Java Enterprise Edition). La seva instal·lació i configuració és molt fàcil, i sovint es pot fer en 10-20 minuts. En ser Tomcat simple i fàcil d’usar, no té diverses característiques importants del Java Enterprise.

Tot i que NetBeans inclou el servidor Tomcat, podeu veure com instal·lar-lo en una màquina Ubuntu en aquest enllaç: https://help.ubuntu.com/lts/serverguide/tomcat.html.

Tomcat és només un contenidor de servlets, és a dir, que només implementa l’especificació de servlets i JSP. En canvi, Glassfish és un servidor de Java EE complet (interpretant tecnologies com EJB, JMS…). Amb Glassfish teniu la implementació de tota la pila Java EE (Java EE stack, vegeu la figura figura).

Font: Oracle (public)

Proveu el següent exemple:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Pàgina JSP</title>
        <script src="exemple.js" type="text/javascript"></script>
        <link href="estils.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div>Hola, Món!</div>
         <button onclick="hola();" value="salutació">salutació</button>
         <p>Avui és <%= new java.util.Date() %> </p>
    </body>
</html>

Cada vegada que actualitzeu la pàgina anterior, us retorna la data i l’hora actualitzada. El servidor Glassfish està canviant la pàgina cada vegada que la demanem.

Exemples d’aplicacions dinàmiques són enquestes i votacions, fòrums de suport, llibres de visita, enviament de correus electrònics intel·ligents, reserva de productes, comandes on line, atenció al client personalitzada…

És important no confondre multimèdia i interactivitat amb pàgines dinàmiques. Una pàgina web estàtica pot ser multimèdia (contenir diversos tipus de vídeos, sons, imatges…) i interactiva a través d’enllaços i hipervincles, sense ser dinàmica per aquestes característiques.

A les pàgines dinàmiques, el contingut sol generar-se al moment de visualitzar-se, poden variar, mentre que en les estàtiques el contingut sol estar predeterminat.

L’important d’aquesta classificació entre dinàmiques i estàtiques és que una pàgina web estàtica la podeu emmagatzemar fàcilment, mentre que en una dinàmica no serà així.

Fins a aquest moment heu après a instal·lar l’entorn de desenvolupament NetBeans. Heu creat el vostre primer projecte amb Maven i heu après el funcionament de la tecnologia de comunicacions client-servidor.

També heu de ser capaços de diferenciar entre un servidor web i un servidor d’aplicacions. S’ha fet una primera aproximació al llenguatge JSP i s’ha explicat la diferència entre una pàgina estàtica i una altre de dinàmica.

Per tal de ser més àgils i autònoms a l’hora de programar, és recomanable fer les activitats d’ampliació on s’explica com depurar el codi des del mateix IDE i com veure la comunicació client-servidor amb eines instal·lades en el navegador web.

Resumint, en aquest apartat s’ha après a:

• Instal·lar i configurar l’entorn de desenvolupament NetBeans.
• Crear un projecte amb Maven.
• Comprendre la comunicació client-servidor, és a dir, el protocol HTTP.
• Configurar el servidor Glassfish.
• Diferenciar una pàgina estàtica d’una dinàmica.

Arribats a aquest punt, hauríeu de ser autònoms a l’hora d’utilitzar l’entorn de desenvolupament NetBeans, així com saber preparar un projecte creat amb Maven. Hauríeu de ser capaços de reconèixer els avantatges de la programació de pàgines web dinàmiques en contraposició a les estàtiques. Finalment, hauríeu de ser capaços d’entendre la comunicació client-servidor amb el protocol HTTP.

Tot i que en aquest mòdul utilitzarà el llenguatge Java com a llenguatge vehicular al llarg de les diferents unitats, és interessant que vegeu algunes pinzellades del llenguatge PHP (PHP Hypertext Preprocessor), ja que és àmpliament utilitzat en el món empresarial.

En aquest apartat veureu com crear un projecte web PHP amb NetBeans, com instal·lar el programari necessari per posar a punt un servidor PHP i com crear una pàgina molt senzilla.

Utilitzareu una màquina virtual amb Ubuntu Server per emprar-la com a servidor web. En aquesta màquina instal·lareu el servidor PHP i utilitzareu el programa Netbeans per crear pàgines web directament al servidor.

L’IDE NetBeans no té un servidor web PHP instal·lat, heu de crear-vos nosaltres un servidor a part. Teniu dues opcions: la primera és instal·lar en la mateixa màquina on teniu l’IDE el mateix servidor web (amb un XAMPP, per exemple), i la segona és utilitzar una màquina virtual on instal·lar el servidor i fer que l’IDE NetBeans treballi directament amb aquesta.

És molt més real fer-ho de la segona manera. Instal·lareu pas a pas un servidor PHP a una màquina virtual i hi connectareu l’IDE.

En aquest apartat suposeu que teniu instal·lat el programa de màquines virtuals VirtualBox i sabeu com crear una màquina nova i com instal·lar un sistema operatiu.

Utilitzareu el servidor Ubuntu Server LTS 14.04. Podeu descarregar-lo de l’adreça: www.ubuntu.com/download/server.

Creareu una màquina virtual nova amb Virtualbox amb les següents característiques (vegeu la figura figura):

• nom: servidor PHP
• 512 MB de RAM
• 100 GB de disc dur
• xarxa amb adaptador pont

Utilitzeu la ISO que heu descarregat dels servidors d’Ubuntu per instal·lar el sistema operatiu. Poseu-la al CD virtual de la màquina “Servidor PHP” (vegeu la figura figura) i comenceu la instal·lació.

Les característiques per instal·lar el sistema operatiu (vegeu la figura figura) són les característiques per defecte. No cal instal·lar, en aquest punt, res addicional.

En finalitzar aquest punt s’ha de tenir una màquina virtual amb el sistema operatiu Ubuntu Server instal·lat.

Una vegada teniu preparat el sistema operatiu Ubuntu Server heu de convertir-lo en un servidor web. Per fer-ho heu d’instal·lar una sèrie de paquets, i és molt més còmode si us connecteu via SSH a la màquina virtual; per tant, això és el primer que fareu: instal·lareu el servei SSH.

sudo apt-get update
sude apt-get install openssh-server

A continuació us connectareu via SSH a la màquina virtual. Per poder-vos connectar heu de saber quina adreça IP té el servidor. La podeu esbrinar executant la següent comanda directament al servidor:

ifconfig

Una vegada sabeu l’adreça IP del servidor, podeu utilitzar un terminal de la màquina real i continuar instal·lant els paquets. Per fer la connexió SSH des de la màquina real a la màquina virtual executem:

ssh usuari_servidor_linux@ip_servidor_linux
exemple:
ssh alex@192.168.56.101

A continuació instal·lareu el servidor Apache2:

sudo apt-get install apache2

I finalment, instal·lareu el mòdul PHP:

sudo apt-get install php5
sudo apt-get install libapache2-mod-php5

Només queda configurar els permisos perquè el programa NetBeans pugui escriure a una carpeta propietària de root. No configurareu ara els permisos i els usuaris o els grups que tenen permisos per accedir-hi, ja que no és l’objectiu de l’assignatura. Per això, canviareu els permisos perquè tothom pugui entrar a escriure, llegir o executar. En concret, executareu la següent comanda en el terminal d’Ubuntu:

sudo chmod 777 /var/www/html

Una vegada s’ha complert aquest punt ja esteu preparats per crear un nou projecte PHP directament al servidor PHP. Comproveu que ha sortit tot correctament accedint, mitjançant un navegador web des de la màquina real, al servidor PHP. En el vostre cas, per exemple, la IP del servidor és 192.168.56.101 i, com podeu veure a la figura figura, hi podeu accedir via web.

Fareu la connexió de l’IDE NetBeans amb el servidor PHP. Com podeu imaginar, funcionaria igual si el servidor tingués una adreça IP pública i vosaltres volguéssiu modificar o crear alguna pàgina PHP.

En crear un nou projecte de tipus PHP, NetBeans dóna tres opcions (vegeu la figura figura):

• aplicació PHP
• aplicació PHP amb fitxers ja creats
• aplicació PHP des d’un servidor remot

Les dues primeres opcions són vàlides quan el projecte PHP es troba en la mateixa màquina que l’IDE NetBeans. L’única diferència és si es vol crear de zero (primera opció) o ja està creat i es vol afegir o modificar alguna cosa de l’aplicació (segona opció).

L’última opció és la que fareu servir, aplicació PHP des d’un servidor remot. En el vostre cas, el servidor remot és la màquina virtual (servidor PHP). Una vegada heu escollit aquesta opció, us demana la informació típica d’un projecte:

• nom del projecte (per exemple: Hola, Món)
• carpeta amb els fitxers originals
• versió PHP, etc.

A continuació us demana la configuració per a la connexió amb el servidor remot (vegeu la figura figura). Haureu de crear primer la connexió per després configurar la carpeta del servidor que voleu utilitzar per copiar els fitxers creats.

Per crear la connexió anireu a Administrar (Manage). Afegireu una connexió nova de tipus SFTP i li posareu un nom per identificar la connexió, per exemple Servidor PHP (vegeu la figura figura).

Una vegada creada la connexió s’ha de configurar afegint la IP del servidor, així com l’usuari del servidor PHP que té permisos per escriure al disc dur. En aquest cas pot ser l’usuari que vau crear en instal·lar el sistema operatiu (vegeu la figura figura).

Podeu provar la connexió clicant al botó Test Connection. Hauria d’aparèixer una finestra semblant a la de la figura figura.

Penseu que si no heu instal·lat el servei SSH al servidor PHP no funcionarà. El servei SSH també instal·la el servei de transferència segura de fitxers SFTP, necessari per establir la connexió entre NetBeans i el servidor PHP.

Finalment, omplireu la finestra que va sortir abans de configurar la connexió amb les dades adients (vegeu la figura figura):

• URL del projecte: la IP del servidor PHP. Per exemple: http://192.168.56.101.
• Connexió remota: seleccioneu la connexió que acabeu de crear (servidor PHP).
• Directori de pujada: directori del servidor PHP on es pujaran els fitxers creats amb el programa NetBeans. Normalment és el mateix directori que utilitza Apache per servir els fitxers web, per exemple /var/www. Si poseu ”/” ja utilitza aquest directori.

Una vegada heu realitzat tots els passos anteriors, NetBeans detecta que existeix la carpeta HTML i la baixa perquè pugueu crear les pàgines PHP dintre d’aquesta (vegeu la figura figura).

Arribats a aquest punt, ja teniu el projecte preparat per començar a desenvolupar remotament una aplicació PHP.

Creareu un nou arxiu dintre de la carpeta HTML del servidor remot. Aquest arxiu ha de ser de tipus PHP, i utilitzareu el menú de NetBeans per crear-lo. Aneu a File / New File / PHP / PHP Web Page.

El nom del fitxer serà index.php (vegeu la figura figura).

Com veieu, a l’hora de crear un fitxer primer es crea a l’ordinador local, és a dir, on està instal·lat l’entorn de desenvolupament. Si us hi fixeu, s’ha creat una còpia del projecte del servidor dintre de la carpeta de projectes locals amb el mateix nom que al servidor. Podeu saber on es troba veient la configuració del paràmetre Created File de la figura figura.

En tenir una còpia al vostre ordinador heu de saber gestionar correctament les versions del projecte, ja que periòdicament haureu de pujar la nova versió al servidor per veure els resultats de la modificació. Com veureu, Netbeans simplifica l’administració de les versions, permetent pujar o baixar del servidor tot el projecte o una part del mateix.

De fet, el servidor no té encara el fitxer creat. Si aneu a la màquina virtual i llisteu els fitxers que hi ha a la carpeta /var/www/html veureu que només existeix el fitxer index.html que té per defecte el servidor Apache. Podeu veure la figura figura per comprovar-ho.

Llavors heu de pujar aquest fitxer al servidor. Si feu clic amb el botó dret del ratolí damunt del fitxer index.php veureu un menú semblant al de la figura figura. Cliqueu a Upload.

Aquest menú permet executar:

• Upload: per pujar un fitxer o una carpeta al servidor.
• Download: per baixar una carpeta o fitxer del servidor al PC local.
• Synchronize: obre una finestra que us permet escollir si voleu pujar o baixar fitxers del servidor.

Intenteu crear un fitxer nou directament a la màquina virtual i baixeu-lo amb NetBeans utilitzant l’opció Syncronize o Download del menú anterior.

En aquest punt ja heu de tenir el fitxer index.php creat des de NetBeans pujat al servidor PHP. El fitxer index.php ha de ser semblant a aquest:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <?php
        // put your code here
        ?>
    </body>
</html>

De moment, aquest fitxer no té codi PHP. Només s’han creat dues etiquetes específiques de PHP que permeten escriure codi PHP dintre d’aquestes.

PHP és un llenguatge de programació que coexisteix dintre del llenguatge de marques HTML. L’etiqueta <?php és l’etiqueta d’inici d’aquest llenguatge, i l’etiqueta ?> és l’etiqueta de tancament. Tot el codi dintre d’aquestes etiquetes no l’interpreta el servidor web Apache2, sinó que el compila i executa el mòdul PHP que s’ha instal·lat a la màquina.

El resultat de l’execució d’aquestes instruccions és el que es mostrarà en comptes del codi que hi ha entre les etiquetes d’inici i fi del llenguatge PHP.

Per exemple, voleu escriure la frase “Hola, Món” des de PHP i que es vegi a la pàgina HTML. El codi que hauríeu d’afegir seria aquest:

echo "Hola, Món";

També podríeu afegir etiquetes de títol (Heading), per exemple:

echo "<h1>Hola, Món</h1>";

Com podeu observar, per enviar informació des de PHP a la pàgina HTML s’utilitza la instrucció echo, que envia una cadena de text directament a la pàgina HTML en la mateixa posició on es troben les etiquetes PHP dintre de la pàgina.

La pàgina “index.php” resultant, després d’afegir la instrucció anterior, seria:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <?php
            echo "<h1>Hola, Món</h1>";
        ?>
    </body>
</html>

Guardeu el fitxer anterior i pugeu-lo al servidor.

Com veieu en el navegador web el fitxer index.php? Heu d’accedir a l’adreça del servidor PHP i afegir el recurs que voleu obtenir; en aquest cas, el fitxer index.php. Per exemple, en el vostre cas, en el navegador web haureu d’escriure: 192.168.56.101/index.php (vegeu la figura figura).

Ara fixeu-vos en el codi font que us mostra el navegador web (vegeu la figura figura). Veieu que no hi ha cap rastre que indiqui que aquest és un fitxer PHP, no apareixen les etiquetes pròpies d’aquest llenguatge. En el seu lloc, apareix el text que heu posat a la instrucció echo.

Observeu que en comunicar-se el navegador amb el servidor PHP aquest no solament ha enviat el codi HTML de la pàgina index.php, sinó que ha hagut de compilar-la i executar-la tal com vam veure amb les pàgines JSP. En aquest cas, el compilador ha estat el mòdul php5 instal·lat a la màquina virtual.

Heu après que existeixen diferents llenguatges de programació que coexisteixen dintre d’una pàgina web. En aquest cas, heu vist com s’interpreta el llenguatge PHP.

Resumint, heu après a:

• Instal·lar i configurar un servidor PHP.
• Configurar NetBeans per treballar amb un servidor PHP remot.
• Com interacciona un navegador web amb el servidor PHP.
• Crear una pàgina senzilla amb aquest llenguatge.

Ja esteu preparats per començar les activitats proposades en aquest apartat per tal de poder endinsar-vos en el món de la programació amb JSP i PHP.