Pid 00275797

Desenvolupament
i administració
web amb bases de
dades
PID_00275797
Meritxell Figueres Boquera
Temps mínim de dedicació recomanat: 4 hores

© FUOC • PID_00275797 Desenvolupament i administració web amb bases de dades
Meritxell Figueres Boquera
Enginyera en Informàtica per la Uni-

versitat Oberta de Catalunya (UOC).
Ha desenvolupat la seva carrera pro-
fessional en diferents multinacionals
del sector tecnològic. Actualment,
és professora de formació profes-
sional, en els cicles d’Informàtica.
Des de 2011, exerceix com a pro-
fessora col·laboradora als Estudis
d’Informàtica, Multimèdia i Teleco-
municació de la UOC.
L'encàrrec i la creació d'aquest recurs d'aprenentatge UOC han estat coordinats

pel professor: Carles Garrigues Olivella
Primera edició: setembre 2020

© d’aquesta edició, Fundació Universitat Oberta de Catalunya (FUOC)
Av. Tibidabo, 39-43, 08035 Barcelona
Autoria: Meritxell Figueres Boquera
Producció: FUOC
Tots els drets reservats
Cap part d'aquesta publicació, incloent-hi el disseny general i la coberta, no pot ser copiada,
reproduïda, emmagatzemada o transmesa de cap manera ni per cap mitjà, tant si és elèctric com
mecànic, òptic, de gravació, de fotocòpia o per altres mètodes, sense l'autorització prèvia
per escrit del titular dels drets.
Índex
Introducció.................................................................................................. 5
Objectius....................................................................................................... 6
1. Conceptes previs................................................................................. 7
1.1. Plataformes .................................................................................. 8
1.2. Domini ........................................................................................ 9
2. HTML..................................................................................................... 10
2.1. El llenguatge HTML .................................................................... 10
2.2. L’estandardització ........................................................................ 11
2.3. L’estructura HTML ....................................................................... 12
2.4. Les caixes en HTML .................................................................... 16
3. CSS.......................................................................................................... 17
3.1. Introducció al CSS ....................................................................... 17
3.2. Estructura CSS ............................................................................. 17
3.3. Selectors ....................................................................................... 18
3.4. Maquetació bàsica ....................................................................... 20
3.5. Pseudoclasses ............................................................................... 23
3.6. Llistes ........................................................................................... 23
4. JavaScript............................................................................................. 24
4.1. Introducció a JavaScript .............................................................. 24
4.2. Sintaxi bàsica de JavaScript ......................................................... 25
4.3. Exemple de codi JavaScript ......................................................... 25
4.4. Frameworks.................................................................................... 26
5. LAMP...................................................................................................... 28
5.1. Instal·lar LAMP en una Ubuntu 18.04 ....................................... 28
6. PHP......................................................................................................... 34
6.1. El llenguatge PHP ........................................................................ 34
6.2. Sintaxi bàsica ............................................................................... 34
6.2.1. Variables ......................................................................... 35
6.2.2. Estructures de control .................................................... 36
6.2.3. Funcions ......................................................................... 38
6.2.4. Arrays............................................................................... 38
6.2.5. Variables reservades i variables de sessió ....................... 40
6.2.6. Formularis ...................................................................... 42
7. MySQL.................................................................................................... 44
7.1. Introducció al MySQL ................................................................. 44
7.2. Funcions de MySQL .................................................................... 44
Bibliografia................................................................................................. 47
© FUOC • PID_00275797 5 Desenvolupament i administració web amb bases de dades
Introducció
Vivim a l’era digital, una època de grans canvis que afecten en major o menor
mesura tots els aspectes de la nostra vida. Una revolució que ha canviat la
forma de comunicar-nos, treballar, etc. En l’àmbit econòmic i laboral, petites
i grans empreses estan adaptant-se i aprofitant les oportunitats que internet i
els nous entorns els poden aportar. Aquest és el motiu pel qual, en els últims
anys, hem vist com botigues físiques han esdevingut botigues en línia.
També els consumidors han canviat la forma de comprar. Des de comprar amb
facilitat i immediatesa amb solament un «clic» per mitjà d’un dispositiu mòbil
(aplicació o web) en una botiga de tecnologia a comprar mitjançant qualse-
vol ordinador o tauleta en una gran plataforma de comerç electrònic com és
Amazon. Temps, diners, rapidesa, a més de la possibilitat de fer-ho en qualse-
vol moment del dia i des de qualsevol lloc del món són els avantatges més
freqüents que hom identifica en aquesta nova manera de comprar que dema-
na la societat actual.
Serveis i productes de diferent tipus (des de béns de primera necessitat fins

a béns de luxe) són adquirits per persones físiques o jurídiques. Per tal que
tot aquest engranatge funcioni, és important utilitzar sistemes de pagament
segurs i un espai a internet ben organitzat.
Aquest mòdul s’inicia amb la introducció de conceptes previs que cal conèi-
xer abans de començar a implementar una botiga en línia. A continuació, es
veuran les diferents tecnologies i llenguatges, a nivell tècnic, per tal de desen-
volupar-la.
Objectius
En els materials didàctics d’aquest mòdul, l’estudiant trobarà la informació

necessària per assolir els objectius següents:
1. Conèixer els diferents tipus d’allotjaments, plataformes i proveïdors exis-

tents al mercat i el seu funcionament.
2. Familiaritzar-se amb els llenguatges de programació web HTML, CSS i Ja-

vaScript.
3. Instal·lar i configurar les eines tecnològiques necessàries per desenvolupar

una botiga en línia.
4. Aplicar els coneixements adquirits en els llenguatges PHP i MySQL per

interactuar amb la base de dades de l’empresa.
1. Conceptes previs
Quan ens plantegem crear un lloc web, el primer que hem de tenir en compte
és disposar de la infraestructura adequada. Què necessitem? Caldrà tenir una
infraestructura�de�maquinari i una infraestructura�programari.
Una bona planificació, tenint en compte el model de negoci, la possibilitat

d’expansió, els clients, etc. ens permetrà escollir cadascun dels elements adi-
ents per al nostre web. En primer lloc, a nivell maquinari hi ha els tipus
d’allotjaments següents:
• Allotjament� compartit. El servidor web és compartit amb molts webs

d’altres clients. El propietari del web el contracta a un cost relativament
baix i a canvi pot allotjar-hi els seus serveis. L’empresa contractada ha de
garantir la disponibilitat de les dades en tot moment i la seva seguretat.
• Allotjament�dedicat. El propietari del web té a la seva disposició un ser-

vidor únicament per a ell on allotjarà el seu web. Per tant, té l’avantatge de
poder tenir més recursos, per la qual cosa farà incrementar el preu d’aquest
servei.
• Servidor�Privat�Virtual�(VPS). A mig camí entre l’allotjament compartit i

l’allotjament dedicat trobem el VPS, que intenta aprofitar els avantatges de
tots dos. Per tant, pot ser una solució si el que es vol és un allotjament web
més potent que l’allotjament compartit i més barat que un allotjament
dedicat.
Es basa en un servidor virtual per a un únic allotjament amb els recursos
que se li hagin assignat al servidor físic. Poden ser administrats pel prove-
ïdor de l’allotjament o pel client.
• Allotjament�al�núvol. Aquest últim és el més nou de tots. Allotjar un lloc

web al núvol permet una sèrie de millores respecte als tipus d’allotjaments
anteriors. En primer lloc, el client pot disposar de diversos servidors sem-
pre que els necessiti i, fins i tot, anar-los ampliant. És una solució escala-
ble. En segon lloc, el web no està allotjat únicament en un servidor, per la
qual cosa s’aconsegueix una major fiabilitat en cas d’una possible caiguda.
Finalment, aquest tipus d’allotjament et permet contractar-lo per temps
d’ús. Per tant, només es paga pels recursos consumits a cada moment. En
cas de necessitar ampliar els recursos, l’allotjament al núvol ofereix la fle-
xibilitat d’afegir-ne més a canvi d’un increment en el cost de provisió del
servei.
Aquesta solució és la més cara de totes i, per tant, és la que utilitzen les
empreses grans i mitjanes. Els proveïdors de serveis al núvol més coneguts
són Amazon Web Services, Google Cloud i Azure.
A banda de la contractació de qualsevol dels serveis que acabem de mencionar, Hosting web o allotjament
també hi ha la possibilitat de tenir en propietat tota la infraestructura de ma- web
quinari que necessita el servidor web (de forma privada i sense cap contracte Servei de lloguer d’un lloc en
amb una entitat externa). Aquesta opció és, lògicament, la que té un cost de un servidor web que permet la
publicació d’un espai a inter-
manteniment més alt. net accessible 24/7.
1.1. Plataformes
Un cop decidida la infraestructura de maquinari, s’ha de preveure quin pro-

gramari o plataforma es voldrà utilitzar. En funció de les característiques del
nostre negoci, necessitats o inversió, entre d’altres, podem escollir una de les
següents:
• Plataformes�open�source. La instal·lació i configuració del programari és

realitzada per part del propietari del web. Per aquest motiu ofereixen una
gestió i administració fàcil, per tal que una persona amb coneixements
bàsics pugui fer-ho. Per contra, no dona suport i, en cas de voler portar a
terme certes funcionalitats més complexes, aquestes podrien ser de paga-
ment. Les plataformes open source també poden funcionar com a PaaS, pla-
taforma com a servei, de forma que el proveïdor de serveis ofereix al client
un servei al núvol amb un entorn de desenvolupament i les eines necessà-
ries per al desenvolupament d’aquestes noves aplicacions. Alguns exem-
ples de plataformes gratuïtes són Magento, PrestaShop i WooComerce.
• Plataformes� de� desenvolupament� a� mida. Grans negocis requereixen

aplicacions personalitzades, que són majoritàriament contractades a em-
preses dedicades al desenvolupament web. Aquests llocs webs tenen un
cost diferent en funció de les funcionalitats a implementar i les seves ca-
racterístiques, que prèviament s’haurà acordat entre l’empresa de desen-
volupament i el client. L’empresa que en fa la codificació generalment en
portarà l’administració.
• Software�as�a�service�(SaaS�o�núvol). Es tracta d’aquelles plataformes web

allotjades al núvol. No cal tenir coneixements de disseny ni d’HTML i per-
meten al propietari del web una ràpida i senzilla instal·lació i configuració,
ja que venen preconfigurades. Shopify n’és un exemple.
• Marketplaces. Plataforma web que s’encarrega de distribuir els productes

de negocis en línia i fora de línia. Hi ha marketplaces horitzontals (venen
qualsevol tipus de producte o servei) o verticals (venen un producte de-
terminat). Podem trobar clars exemples de marketplaces horitzontals amb
Amazon o eBay i de marketplaces verticals amb Zalando o Deporvillage,

que es dediquen únicament a la moda.
• Altres�plataformes. Amb la irrupció de les xarxes socials en els últims anys

i el fet de poder fer viral tota la informació, algunes d’aquestes incorporen
aplicacions web, com és el cas de Facebook. D’aquesta manera, les empre-
ses poden arribar a més clients potencials mitjançant una nova font de
negoci.
1.2. Domini
El nom�de�domini pot ser adquirit a una empresa que dona aquest tipus de
serveis o a la mateixa empresa on allotgem el lloc web.
2. HTML
2.1. El llenguatge HTML
A l’hora de dissenyar una pàgina web, hem de tenir clar que el llenguatge per
excel·lència de creació d’aquestes és l’HTML, juntament amb el CSS. En aquest
punt, estudiarem els principis bàsics de l’HTML per tal de poder desenvolu-
par-la dins de qualsevol servidor.
L’HTML no és ben bé un llenguatge de programació en si, és el que s’anomena

un llenguatge de marques que, seguint una estructura prèviament implementa-
da, ens permetrà visualitzar les nostres pàgines als diferents navegadors exis-
tents (Chrome, Opera, Firefox, etc.).
L’element en què es basa la programació HTML són les etiquetes, que conte-
nen instruccions que el navegador interpreta i mostra per pantalla. Una eti-
queta es forma de la manera següent:
<etiqueta>...</etiqueta>
On etiqueta serà substituït per l’etiqueta adient en cada cas.
Els fitxers HTML (.htm o .html) poden ser editats des de qualsevol editor de
text, com per exemple el Notepad++. A continuació, podem veure un llistat
dels editors HTML més coneguts:
Editor HTML a Google

Llenguatge de marques
d’hipertext
Hyper Text Markup Language,

en anglès. Va néixer els anys
noranta de la mà del físic i in-
vestigador del CERN Tim Ber-
ners-Lee.
2.2. L’estandardització
Els orígens de l’HTML es remunten als anys vuitanta quan Tim Berners-Lee va
crear un sistema per compartir documents que permetia accedir a la informa-
ció relacionada amb els documents que es visualitzaven, el qual ha esdevingut
el predecessor dels enllaços de les webs actuals.
Anys més tard, Tim Berners-Lee, juntament amb l’enginyer de sistemes Robert
Cailliau, van presentar el seu sistema a una convocatòria per desenvolupar un
sistema d’hipertext per a internet. La seva proposta anomenada World Wide
Web (W3C) en fou la guanyadora.
D’aquesta forma, el 1991 va sorgir l’HTML i dos anys després es crearien les IETF
bases per tal d’estandarditzar aquest llenguatge per part de l’organisme IETF.
Internet Engineering Task For-
Es van definir les etiquetes per a imatges, taules i formularis, però no seria fins ce (IETF), organització inter-
al 1995 que l’IETF publicaria el seu estàndard oficial amb l’HTML 2.0. A partir nacional de normalització sen-
se ànim de lucre oberta a tot-
de l’any següent, agafaria l’estandardització del llenguatge l’organisme W3C, hom, la qual té per objectiu
contribuir a internet publicant
creant així els successius refinaments del llenguatge HTML (3.0, 4.0, 5.0, 6.0, estàndards.
etc.) que anirien incorporant applets de Java, fulls d’estil CSS, scripts, millores
en accessibilitat, etc.
W3C, World Wide Web Consortium
L’organització d’estandardització W3C defineix l’estructura i la definició dels continguts

(textos, imatges, vídeos, etc.) d’aquest estàndard. Des de la versió 2.0, s’han anat intro-
duint millores per tal de poder desenvolupar pàgines web en diferents navegadors (Chro-
me, Opera, Firefox, etc.), plataformes (ordinadors de sobretaula, portàtils, mòbils, taule-
tes) o sistemes operatius (Windows, Linux, MAC, etc.).
2.3. L’estructura HTML
Tota pàgina HTML comença amb l’etiqueta <html> i acaba amb l’etiqueta </
html>. Al seu interior, hi ha d’haver la capçalera i el cos, <head> i <body>
respectivament, que com en el cas anterior s’han de tancar un cop s’acabi el
codi de les seves parts. La capçalera inclourà el títol i la descripció de la pàgi-
na mentre que en el cos s’han d’incloure els continguts (paràgrafs, imatges,
enllaços, taules, àudio o vídeo, etc.).
Les diferents etiquetes HTML segueixen una estructura jeràrquica i, per tant,
poden acollir altres etiquetes. A més, aquestes poden tenir atributs per conte-
nir informació addicional. Per exemple, si volem modificar el tipus de lletra
d’un paràgraf utilitzarem l’etiqueta <p> aplicant-li l’atribut <i> de la manera
següent:
<p>Paràgraf amb una paraula final en lletra <i>itàlica</i></p>
Enllaç recomanat
Podeu veure totes les etiquetes i atributs disponibles a l’enllaç següent:

www.w3schools.com/tags/ref_byfunc.asp.
En el codi següent, veurem una estructura senzilla en HTML:
<html>
<head>
<title>Botiga UOC</title>
</head>
<body>
<img src="logo_uoc.jpg" width="669" height="173">
<h1>Botiga UOC: Llibres, revistes... i molt més!</h1>
<p>A la nostra botiga hi trobareu informació de <strong>totes les àrees</strong> agrupades
fàcilment per <em>categories</em>.</p>
<h2>Descomptes: Aquest mes tot a un 10%</h2>
<p>Navega i gaudeix d’una gran varietat de continguts.</p>
</body>
</html>
Que es visualitzaria per pantalla de la manera següent:

1)�Enllaços
Els enllaços (també anomenats hipervincles o links) permeten relacionar pàgi-

nes web amb altres pàgines web o imatges, vídeos o documents quan són cli-
cats. Per codificar un hipervincle ho farem de la manera següent:
<a href="http://www.google.es">Google</a>
On href és l’atribut que conté l’URL on es vol enllaçar.
2)�Imatges
Per introduir una imatge a la nostra web necessitarem l’etiqueta:
<img src="nom.jpg">
(1)
On src1 ens indica la ruta i el nom de la imatge a incrustar. L’amplada i l’alçada Source, en anglès.
de la imatge són atributs d’aquesta etiqueta que cal indicar, quedant la sintaxi
de la manera següent:
<img src="nom.jp" width="100" height="250">
Per afegir un enllaç en una imatge, en el codi podríem fer el següent:
<a href="pagina.html">
<img src="smiley.gif" style="width:42px;height:42px;border:0;">
</a>
3)�Llistes
Les llistes serveixen per agrupar elements i en podem trobar de tres tipus:
desordenades, ordenades i de definició.
En les llistes�desordenades és habitual trobar-hi davant un punt o quadrat

per a cada element. Aquest tipus de llistes comencen amb l’etiqueta <ul> i per
a cada element s’utilitza l’etiqueta <li>.
Observem l’exemple següent:
<h1>Menú</h1>
<ul>
<li>Llibres</li>
<li>Revistes</li>
<li>DVD</li>
</ul>
Les llistes� ordenades llisten els diferents elements posant-hi un número o

lletra al davant. Són definides amb l’etiqueta <ol> i per a cada element, igual
que en les llistes desordenades, s’utilitza l’etiqueta <li>. Per tant, en l’exemple
anterior, únicament es canviaria l’etiqueta <ul> per <ol>.
4)�Taules
Les taules estan formades per files i columnes. A més, poden incloure capça-
leres amb els títols i peus de taula, i també subdivisions i elements més com-
plexos.
A continuació, es mostra una codificació de taula senzilla en HTML:
<table>
<tr>
<td><strong>Producte</strong></td>
<td><strong>Preu</strong></td>
<td><strong>Quantitat</strong></td>
</tr>
<tr>
<td>Llibre HTML</td>
<td>30</td>
<td>1</td>
</tr>
<tr>
<td>Revista CSS</td>
<td>5</td>
<td>2</td>
</tr>
</table>
L’etiqueta <table> emmagatzema la taula en si, les files i les columnes. Al

seu interior, els dos tipus d’etiquetes que podem observar de l’estructura de la
taula són <tr> que defineix les diferents files i <td> que defineix les diferents
columnes.
El resultat al navegador seria el següent:
5)�Formularis
El formulari és un dels elements més importants de l’entorn web, ja que per-

met la interacció amb l’usuari. Per mitjà d’un formulari, l’usuari pot introduir
text amb el teclat en els diferents camps que se li mostrin per pantalla. Poste-
riorment, la informació serà processada o emmagatzemada.
Cada camp del formulari emmagatzema una dada específica; per exemple, el
nom o cognoms de l’usuari. És molt útil en el comerç electrònic per introduir
les dades personals, les comandes, etc.
A continuació, podem veure un exemple d’introducció de les dades personals:
<form action="dades.php" method="post">

Nom:<input type="text" name="nom" size="10" maxlength="10"><br/>
Contrasenya:<input type="password" name="contrasenya" size="10" maxlength="10">
<input type="submit" value="Enviar">
</form>
Com podem veure, els formularis estan dins l’etiqueta <form> i a l’etiqueta
d’inici s’indicarà el mètode «GET» o «POST» per tal d’enviar la informació. A
més, han d’incloure l’atribut action on s’indicarà on serà enviada la infor-
mació del formulari. La informació pot ser enviada a una URL o a un fitxer
PHP, Python, etc. per ser processada.
Els controls es creen amb l’etiqueta <input> o <button>. Mentre que la pri-
mera etiqueta només permet incloure text, la segona permet altres elements
HTML com ara imatges.
La imatge següent ens mostra com quedaria al navegador:
2.4. Les caixes en HTML
L’etiqueta <div> ens permet crear divisions o seccions dins una pàgina web i Vegeu també
serveix bàsicament per agrupar elements i aplicar-los-hi un estil. A continua-
Al bloc d’estils CSS, podeu
ció, crearem una estructura en blocs per a una pàgina. veure què són els estils i com
aplicar-los.
Normalment, una pàgina web consta d’un encapçalament, diferents seccions

o menús de navegació al centre i un peu de pàgina. Per a cadascuna d’aquestes
seccions crearem una caixa per tal que li puguem donar diferents estils.
<body>
<div id="contenidor">
<div id="capcalera">

</div>
<div id="navegacio">

</div>
<div id="principal">
Contingut de la pàgina.
</div>
<div id="peu">
</div>
</div>
</body>
3. CSS
3.1. Introducció al CSS
El llenguatge CSS, que fou creat pel World Wide Web Consortium (W3C), neix
junt amb l’HTML 4.0 amb l’objectiu de separar els continguts i la seva presen-
tació dins les pàgines web. Per una banda, amb el llenguatge HTML definim
l’estructura i els diferents elements, i, per l’altra, amb el llenguatge CSS, o tam-
bé anomenat fulls d’estil, podem definir l’aspecte dels continguts com ara el
color, la forma, els marges, etc.
D’aquesta forma, aconseguim que les nostres pàgines web tinguin una major CSS
accessibilitat i reduïm la complexitat del manteniment. A més, permet visua-
CSS, acrònim de Cascade Style
litzar la mateixa pàgina web en diferents dispositius. Sheets. Els fulls d’estil en casca-
da s’apliquen de dalt a baix se-
guint la propietat d’herència.
3.2. Estructura CSS
Els dissenys CSS són habitualment guardats en fitxers .css i contenen una sèrie
de regles. Totes les regles segueixen el mateix format:
h1 { color : black; }
En la primera part de l’exemple, el selector h1 conté dins els claudàtors la de-

claració on hi trobem la propietat color i el valor black. Vegem què signifi-
quen cadascun dels elements:
• Regla: estil CSS que s’aplica sobre un element.

• Selector: element HTML al qual s’aplica la regla.
• Declaració: estil que s’aplicarà a l’element.
• Propietat: aspecte d’una característica de l’element.
• Valor: valor que pren aquesta característica en l’element.
Les regles CSS es poden aplicar:
1)�En�el�mateix�document�HTML: quan s’han de realitzar pocs estils o per

crear estils específics. Per exemple:
<style type="text/css">
h1 { color: blue; font-family: Verdana; }
</style>
2)� En� un� fitxer� extern: és el cas més habitual. El mateix fitxer CSS es pot
incloure a moltes pàgines HTML. S’aplica amb l’etiqueta link. Per exemple:
<link rel="stylesheet" type="text/css" href="style.css"/>
3)�En�els�elements: s’utilitza únicament quan s’ha d’incloure un estil específic

en un element concret. S’aplica amb l’atribut style. Per exemple:
<h1 style="color:blue; font-family:Verdana">Títol de nivell 1</h1>
En el cas de voler utilitzar diferents característiques en un mateix selector, les

regles es poden agrupar, com en el cas anterior on hi posem el color i la font.
A més, per tal de facilitar la lectura posterior del fitxer, cal posar-hi comentaris
amb:
/* Línia de comentaris*/
3.3. Selectors
Els selectors són aquells elements HTML sobre els quals s’apliquen les regles
d’estil i poden contenir moltes regles. Els diferents tipus de selectors existents
són els següents:
1)�Selector�universal: s’aplica a tots els elements de la pàgina i s’indica mit-

jançant un asterisc (*) de la forma següent:
*{
….
}
2)�Selector�de�tipus�o�etiqueta: s’aplica a tots els elements de la pàgina en

què l’etiqueta HTML coincideix amb el selector. Si volem aplicar el color blau
en un paràgraf, ho farem de la manera següent:
p{
color: blue;
}
3)�Selector�de�classe: s’aplica a tots els elements de la pàgina en què l’atribut

class coincideixi amb el selector. Permet seleccionar un element d’entre di-
versos del mateix tipus.
El selector es forma amb un «.» seguit de l’atribut class, com per exemple:
.important {
color: red;
text-align: center;
}
Aquest selector s’aplicaria, per exemple, al codi HTML següent:
<h1 class="important">Text exemple 1</h1>

<p class="important">i text exemple 2 de la mateixa classe</p>
4)�Selector�d’id: s’aplica a tots els elements de la pàgina en què l’atribut id

coincideix amb el selector. Només es fa servir quan es vol donar un estil concret
a un únic element. El selector es forma amb una «#» seguit de l’atribut id,
com per exemple:
#important { color: red; }
El codi HTML podria ser el següent:
<p> Primer paràgraf </p>

<p id="important"> IMPORTANT </p>
5)�Selector�d’agrupament: s’aplica quan es vol agrupar diferents selectors amb

els mateixos estils. En el cas de tenir el mateix estil a h2 i p:
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Per tal de no repetir el codi, agrupem els dos selectors separats per una coma,
tal com segueix:
h2, p { text-align: center; color: red }
3.4. Maquetació bàsica
Quan es realitza el disseny d’una pàgina web, tots els elements que formen un
document HTML es representen en caixes rectangulars. Podem definir l’altura,
l’amplada, el marge, etc., d’aquestes caixes.
Algunes de les propietats més habituals són les següents:
• width: amplada d’un element.

• heigth: altura d’un element.
• margin: marges d’un element.
• padding: farciments horitzontals i verticals d’un element.
• border: contorns horitzontals i verticals d’un element.
En CSS podem definir els colors dels diferents elements mitjançant paraules
clau, en sistema RGB o en hexadecimal. Per tant, podríem definir un color de
la manera següent:
color:blue; color:#33FFF3
Pel que fa al fons de la web o de cada caixa, podem definir com el volem Enllaç recomanat
amb la propietat background, sigui un color o una imatge. Ho farem amb
En aquest enllaç, podeu veu-
background-color o amb background-image, respectivament. re els codis de color en for-
mat RGB o hexadecimal:
htmlcolorcodes.com/.
Un altre element important a tenir en compte és la tipografia. En aquest cas, el
CSS permet aplicar diferents estils. Per poder definir la tipografia, les propietats
bàsiques són: font-family, font-size, font-weight i font-style que
defineixen el tipus, la mida, l’amplada de la lletra i l’estil, respectivament.
A més, podem controlar l’alineació del text, l’interlineat, la separació de pa-

raules, etc. amb propietats com text-align, line-height, etc.
A continuació, podem veure un petit exemple CSS d’una classe caixa:

.caixa {
font-family:Arial;
font-size: 20px;
font-weigth: normal;
color:#33FFF3;
background:#33FF52;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}
Per tant, podem dir que la nostra pàgina web estarà formada per una sèrie de
caixes que contenen els diferents elements HTML. És habitual estructurar les
pàgines web seguint el conjunt de blocs següent: capçalera, menú, contingut,
peu de pàgina.
A continuació, definirem una estructura com la que acabem de mencionar.
El contenidor és l’estructura que conté tots els elements, és a dir, la capçalera,

el menú, el contingut i el peu de pàgina.
Per tal que el bloc menú aparegui a l’esquerra, per exemple, hem de conèixer
el concepte de posicionament i indicar-li que estigui a l’esquerra. S’indica amb
la propietat float: left. En cas que el bloc el vulguem a la dreta, el proce-
diment serà similar float: right.
Al bloc del contingut, observem que donem a la propietat float el valor left,
això significa que es posicionarà el més a l’esquerra possible mentre no hi hagi
cap element més, per tant, es posarà al costat del menú.
Finalment, al bloc peu observem la propietat clear que el que fa és admetre

o no elements flotants a esquerra o dreta. En aquest cas, no admet elements
flotants ni a esquerra ni a dreta.
A continuació, exposarem el codi CSS i el codi HTML pertinent.
Codi�CSS
#contenidor {
Width: 800px;
}
#capcalera {
}
#menu {
Float: left;
Width: 150px;
}
#contingut {
Float: left;
Width: 550px;
}
#peu {
Clear: both;
}
Codi�HTML
<body>
<div id="contenidor">
<div id="capcalera">
</div>
<div id="menu">
</div>
<div id="contingut">
</div>
<div id="peu">
</div>
</div>
</body>
3.5. Pseudoclasses
Una pseudoclasse serveix per aplicar un estil a un element segons el seu estat.
Podem trobar quatre estats existents:
• link: s’aplica l’estil quan l’enllaç no ha estat visitat.

• visited: s’aplica l’estil quan l’enllaç ha estat visitat.
• active: s’aplica l’estil quan l’usuari ha seleccionat un element.
• hover: s’aplica l’estil quan l’usuari posa el ratolí sobre un element.
En l’exemple següent, mostrarem l’estil que apliquem a un enllaç a quan hagi

estat visitat.
a: visited { color: green }
3.6. Llistes
Quan definim llistes en CSS podem controlar els estils, la posició, etc. Les
propietats bàsiques per fer-ho són:
• List-style-type: tipus de vinyeta per a una llista.

• List-style-position: posició de la vinyeta de cada element dins la llis-
ta.
• List-style-image: imatge personalitzada.
En l’exemple següent, podem veure com el marcador dels diferents elements

de la llista serà un quadrat.
ul li {
list-style-type: square;
}
4. JavaScript
4.1. Introducció a JavaScript
Fins ara hem vist el llenguatge HTML i CSS per crear pàgines web. Gràcies a
aquests llenguatges podem crear l’estructura, el contingut i el disseny de les
nostres pàgines de forma estàtica. No obstant això, el fet que siguin comple-
tament estàtiques, fa que el contingut i la funcionalitat que podem donar a
les pàgines web sigui limitada. Per això, l’any 1995 sorgeix el llenguatge Ja-
vaScript.
JavaScript fou creat per Brendan Eich, treballador de Netscape, amb el nom
de Mocha. Posteriorment, s’anomenaria Live Script i, finalment, tal com el
coneixem avui en dia: JavaScript. Poc després d’aparèixer el llenguatge JavaS-
cript, es va fer un esforç perquè aquest llenguatge esdevingués un estàndard,
principalment a causa del fet que Microsoft havia desenvolupat un llenguat-
ge quasi equivalent anomenat JScript. Fruit d’aquest esforç, el 1997 va apa-
rèixer l’estàndard ECMAScript, amb el compromís de Netscape i Microsoft de
seguir-lo.
JavaScript és un llenguatge de programació interpretat i, actualment, orientat

a objectes. S’executa en local en la banda del client, és a dir, al navegador
de l’usuari. Permet crear pàgines dinàmiques, la qual cosa fa que es puguin
modificar els continguts en temps real sense tocar el codi de la pàgina.
El funcionament de JavaScript és el següent: el codi JavaScript, juntament amb

l’HTML, s’envia del servidor al navegador del client, i és en aquest navegador
on s’executa. El codi pot estar incrustat dins del mateix fitxer HTML o es pot
codificar en fitxers independents, on després es crida per mitjà de l’HTML.
Els usos més habituals del JavaScript estan relacionats amb el fet de proporci-
onar interacció amb l’usuari. En podem destacar els següents:
• Validació dels valors d’entrada d’un formulari web.

• Continguts interactius com ara àudio, vídeo o jocs.
• Elements animats dins la pàgina web.
• Finestres emergents amb avisos per als usuaris.
JavaScript funciona a qualsevol dels navegadors actualment disponibles i té

una gran quantitat de llibreries que el fan molt versàtil i facilita la tasca als
desenvolupadors, els quals poden aplicar funcions avançades a les seves webs
sense haver de codificar-ho tot des de zero.
(2)
Per tal que els diferents elements web tinguin el mateix comportament als Acrònim de Document Object
2 Model.
diferents navegadors, el consorci W3C va definir el DOM. El DOM permet
als programadors utilitzar el codi JavaScript per accedir i manipular les pàgi-
nes HTML de forma dinàmica, com si fossin documents XML. Aquesta és una
utilitat també disponible en molts altres llenguatges, com ara PHP o Java, de
manera que per mitjà del DOM es pot modificar la pàgina web dinàmicament.
4.2. Sintaxi bàsica de JavaScript
Per inserir codi JavaScript en una pàgina web, s’ha d’incloure l’etiqueta
<script> en el header o en el body. En el codi següent, podem veure un exem-
ple:
<script>
Codi JavaScript
</script>
En el cas que vulguem utilitzar un fitxer extern JavaScript, o també anomenat

JS (.js), haurem d’incloure al fitxer html la línia següent:
<script src="fitxer_extern.js"></script>
La sintaxi bàsica de JavaScript és molt similar a C o Java pel que fa a la decla- Enllaç recomanat
ració de variables, assignacions, operadors, instruccions condicionals o itera-
Podeu trobar un bon tutori-
tives. A més, com hem comentat, també és un llenguatge orientat a objectes. al de JavaScript a l’enllaç se-
Alguns objectes estan predefinits pel llenguatge. Per exemple, l’objecte win- güent: javascript.info/.
dow representa la finestra del navegador i té mètodes com window.close()

per tancar la finestra o window.resizeTo() per canviar-ne la mida.
4.3. Exemple de codi JavaScript
Una de les utilitats de JavaScript és la validació�de�dades�introduïdes�pels

usuaris. Un cop l’usuari introdueix les dades, validem mitjançant el JavaScript
que les dades introduïdes són correctes de forma que, si hi ha hagut un error,
se li pot notificar al moment sense necessitat d’enviar informació al servidor
i sobrecarregar-lo.
Quan l’usuari clica sobre el botó d’enviar el formulari, es crida a una funció
que en fa la validació. En aquesta funció, es comprova que es compleixin les
condicions que l’usuari indica a l’aplicació.
El codi JavaScript bàsic per realitzar la comprovació és el següent:

<form action="" method="" id="" name="" onsubmit="return validacio()">

...
</form>
A la funció validacio() s’han de preveure les diferents condicions que s’han

de complir en els diferents camps del formulari. La seqüència d’execució hau-
ria de ser una sèrie d’if/else on al seu interior hauríem de mostrar un mis-
satge d’error en cas que no es compleixi la condició.
La validació es basa en el comportament de l’event onsubmit de JavaScript.

En cas que retorni true, el formulari s’envia correctament; si retorna false,
no s’envia. Per tant, s’han de comprovar els diferents elements del formulari
i, en cas que hi hagi algun false, no s’envia el formulari.
A continuació, mostrem l’exemple del codi per validar un número de telèfon:
function validacio() {
valor = document.getElementById("camp").value;
if( !(/^\d{9}$/.test(valor)) ) {
alert('[ERROR] El camp ha de ser un telèfon');
return false;
}
return true;
}
Si el número no està format per nou xifres seguides retornarà false.
4.4. Frameworks
Els frameworks són entorns de treball que ens ofereixen una sèrie d’eines com
són les classes CSS i les funcions JavaScript perquè les puguem incloure direc-
tament a les nostres pàgines web per desenvolupar la part frontend. Tenen una
àmplia acceptació entre els programadors web, ja que els aporta estructures
predefinides i, per tant, redueix molt el temps de codificació, facilita el mante-
niment entre les diferents persones de l’equip i la seguretat de què ja disposen
aquestes estructures.
Alguns dels frameworks JavaScript més populars per al desenvolupament de

pàgines web són Angular, React o Ionic, tot i que hi ha una gran varietat de
frameworks i, a més, evolucionen molt ràpidament.
Inicialment, els programadors de JavaScript no utilitzaven cap framework o

llibreria. Més endavant, a mesura que van anar sorgint més funcionalitats,
van anar sorgint diferents llibreries o frameworks com el jQuery. jQuery era
una llibreria per facilitar el desenvolupament amb JavaScript. jQuery no és un
framework com a tal, ja que no implementa un patró de disseny.
A mesura que es van anar creant noves funcionalitats i més complexes, va ar-
ribar un punt en què jQuery es va considerar insuficient, i aleshores van sorgir
els frameworks JavaScript. Aquests frameworks incorporaven el patró MVC (mo-
del-vista-controlador). En són alguns exemples: Backbone, Ember o Angular.
Frameworks Descripció
Angular Creat per Google, integra funcionalitats usant Vanilla o Backbone i altres lli-
breries. Disposa de serveis propis per treure dades via AJAX sense necessitat
d’altres llibreries.
NodeJS Sorgeix després d’Angular i permet programar en la part backend, codifi-

cant JavaScript al servidor.
Ionic Llibreria basada en Angular que permet crear aplicacions per a Android i
iOS programant en JavaScript i empaquetant amb Cordoba.
React Llibreria per a la interfície gràfica que ha desenvolupat Facebook i s’utilitza

a Facebook o Instagram.
Phonegap
Webcomponents
L’augment de les aplicacions mòbils, Android o iOS, va fer que alguns frameworks evo-
lucionessin i sorgissin noves eines com ara Phonegap. A causa de les mancances que te- Les últimes tendències pel que
nia Phonegap, pel que fa a l’experiència d’usuari, aquest va evolucionar cap a Cordoba fa a frameworks JavaScript són
els webcomponents, especifica-
i aquest, a Ionic.
ció de la W3C, per reutilitzar
elements. En són alguns exem-
ples: Polymer o React.
5. LAMP
LAMP són les sigles de Linux, Apache, MySQL/MariaDB i Perl/PHP/Python.

Per tant, el programari del qual consta aquest conjunt de diferents programaris
és:
• GNU/Linux: sistema operatiu on instal·larem el conjunt de paquets. Versions LAMP

• Apache: servidor web on publicarem el nostre lloc web.
Hi ha versions equivalents a
• MySQL/MariaDB: gestors de bases de dades. LAMP per a altres sistemes
• Perl,�PHP�o�Python: llenguatges de programació que s’utilitzaran en la operatius, com són: WAMP
(per a Windows), MAMP (per a
part servidora (backend). Windows i MAC) i XAMP (per
a Windows, MAC i Linux).
En els apartats següents, explicarem els passos bàsics per instal·lar el conjunt
LAMP en un sistema GNU/Linux amb distribució Ubuntu 18.04.
Enllaços recomanats
Als enllaços següents, podeu trobar els passos equivalents per a tres de les distribucions
més àmpliament utilitzades: Fedora, OpenSuse i Mint.
Per a altres distribucions, podeu trobar igualment amb el cercador tutorials a internet
fàcils de seguir.
5.1. Instal·lar LAMP en una Ubuntu 18.04
Abans de començar la instal·lació de LAMP, convé tenir actualitzat el sistema.

Per això, des del terminal de comandes, com a usuari administrador, executa-
rem:
$ apt-get update
$ apt-get upgrade
Seguidament, podem anar instal·lant els diferents paquets mencionats.
1)�Instal·lació�del�servidor�web�Apache
$ apt-get install apache2
Per verificar que s’ha instal·lat correctament, obrirem el navegador i posarem

la IP de la màquina o el localhost o 127.0.0.1 si s’ha realitzat una instal·lació
local.
2)�Instal·lació�de�la�base�de�dades�MySQL
$ apt-get install mysql-server
Si ho creiem adient, podem validar que MySQL està correctament instal·lat i

el servei funciona amb la comanda:
$ systemctl status mysql

Seguretat a la base de
dades
Si voleu afegir seguretat

a la base de dades, po-
deu instal·lar el paquet
mysql_secure_installation.
3)�Instal·lació�de�PHP
$ apt-get install php libapache2-mod-php php-mysql php-cli
4)�Instal·lació�de�Phpmyadmin�(opcional)
Phpmyadmin és una eina que ens permetrà administrar de forma gràfica la

base de dades.
$ apt-get install phpmyadmin
Li indicarem que el nostre servidor web instal·lat és l’Apache i anirem accep-

tant els passos de la instal·lació.
Un cop instal·lat, anirem al navegador i posarem l’URL http://local-

host/phpmyadmin.
En aquest punt, hi accedirem amb l’usuari root i la contrasenya que li hem

donat durant el procés d’instal·lació. Un cop autenticat, ens ha d’aparèixer la
pantalla següent:
Si volem crear una base de dades, anirem a la pestanya «Base de Dades» i in-
troduirem el nom de la nostra base de dades, per exemple «Botiga».
Per tal de crear taules dins d’aquesta, es pot fer mitjançant la pestanya «SQL»
introduint les diferents comandes SQL.
Si volem crear un usuari per tal que accedeixi a la nova base de dades o a les
noves taules, podem fer-ho des de la pestanya «Comptes d’usuari». En aquesta
pestanya, podrem veure el llistat d’usuaris existents. Per tal d’afegir un nou
usuari, per exemple «Pep», ho farem anant a «Afegeix un compte d’usuari» tal
com es mostra a continuació.
En aquest cas, a l’usuari Pep li hem donat una contrasenya i només li deixa-
rem fer operacions com «Select», «Insert», «Update», «Delete» i «File» sobre
les taules.
Enllaços recomanats
Si voleu més informació de configuració dels diferents serveis o com testejar-ho tot
adequadament, podeu seguir les instruccions de la web: www.linode.com/docs/web-ser-
vers/lamp/how-to-install-a-lamp-stack-on-ubuntu-18-04/.
A l’enllaç «How To Install and Secure phpMyAdmin on Ubuntu 18.04», podeu trobar in-
formació extra d’instal·lació i configuració del PhpMyAdmin com ara usuaris i permisos,
operacions en taules, etc.
6. PHP
6.1. El llenguatge PHP
El llenguatge PHP és un llenguatge d’script i de codi obert del costat del servi- PHP
dor (backend) que ha esdevingut molt popular per ser especialment adequat
PHP són les sigles d’Hypertext
per al desenvolupament web i per la facilitat de ser incorporat a pàgines HTML. Processor (preprocessador
d’hipertext), que fou originà-
riament dissenyat per al pre-
Nascut l’any 1995 de la mà de Rasmus Lerdorf, ha anat passant per diferents processament de text pla en
UTF-8.
versions i, per tant, de millores. Tot i que les dues primeres versions, PHP 3 i
PHP 4 havien aconseguit una plataforma potent i estable, no és fins a la versió
5 en què s’introdueix la programació orientada a objectes (POO). Finalment,
PHP 7 millora algunes mancances que tenia la versió anterior pel que fa a la
POO. Actualment, podem afirmar que el llenguatge PHP pot ser utilitzat en la
majoria de servidors web, a més de sistemes operatius i plataformes.
Amb una corba d’aprenentatge molt curta, a causa de la gran similitud amb
altres llenguatges com el C, facilita als desenvolupadors la creació de webs di-
nàmiques sense haver d’aprendre noves funcions i permet connexions a ser-
vidors de bases de dades com ara MySQL, Oracle, DB2, MongoDB, etc.
Enllaç recomanat
Web oficial de PHP: www.php.net
En aquesta pàgina web podem trobar-hi tota la documentació referent a PHP, fent especial
èmfasi en l’apartat «Referencia de funciones» de les diferents funcions, on hi podem
veure detallades totes les funcions existents a nivell de sintaxi i petits exemples.
A nivell de funcionament, quan l’usuari introdueix l’URL d’una pàgina amb

PHP al seu navegador, aquest envia una petició al servidor web. El servidor in-
terpreta la pàgina PHP i envia de retorn al navegador de l’usuari un document
compilat en format HTML.
6.2. Sintaxi bàsica
El codi PHP ha d’anar precedit per l’etiqueta d’inici <?php i quan s’acaba per
l’etiqueta final ?>. Aquestes etiquetes delimiten el codi PHP per tal de poder
ser incrustat en codi HTML.
Seguidament, podem veure el codi PHP del nostre primer i més senzill progra-
ma «Hola món».
<?php echo "Hola Món"; ?>

Aquí veiem el codi PHP encastat dins l’HTML.
<html>
<head>
<title>Prova de PHP</title>
</head>
<body>
<?php echo '<p>Hola Món</p>'?>
</body>
</html>
La instrucció echo escriu per pantalla un text o el contingut d’una variable.

Finalment, a la figura següent veiem l’execució en local del nostre script PHP:
Execució en local holamon.php.
6.2.1. Variables
Les variables comencen amb el símbol $ seguit del nom de la variable. El

primer caràcter del nom de la variable ha de ser una lletra o un guió baix.
Per tal d’assignar una variable, s’utilitza l’operador =. És important tenir en

compte que el llenguatge PHP és sensible a majúscules i minúscules, per la
qual cosa no serà el mateix assignar $variable que $Variable.
Vegem diferents valors que pot prendre una variable depenent del seu tipus
de dades. Observeu que no hi ha una definició explícita de tipus.
<?php
$var_enter = 3; //enter
$var_real = 3.1416; //real
$var_cadena = "cad"; //cadena
$var_bool = TRUE; //booleà
$data = date("m.d.y"); //resultat de la funció date
?>
Com en el llenguatge C, els comentaris en PHP poden ser fets amb la doble
barra (//) o amb la barra i asterisc per obertura (/*) i asterisc i barra per tan-
cament (*/).
6.2.2. Estructures de control
En aquest apartat, diferenciarem entre dues estructures de control. En primer

lloc, cal mencionar les dues estructures condicionals: if-else i switch. En
segon lloc, estudiarem les estructures repetitives: while, do-while i for.
La sintaxi d’aquestes estructures és la mateixa que en C i l’exposarem mitjan-

çant exemples en el cas de les estructures condicionals.
Estructures condicionals
1)�Sintaxi�if-else
if (expressió) {
sentencia1;
} else {
Sentencia2;
}
Exemple codi PHP if-else
<?php
$producte=true;
if ($producte == true){
echo 'existeix el producte';
}else{
echo 'no existeix el producte';
}
?>
2)�Sintaxi�switch
switch (expressió){
case valor1:
instrucció1:
break;
case valor2:
intrucció2;
break;
…
default:
instruccions;
break;
}
Exemple codi PHP switch
<?php
$preu=30;
switch ($preu){
case 30:
echo 'article amb descompte';
break;
case 20:
echo 'article sense descompte';
break;
…
default:
echo 'error';
break;
}
?>
Estructures repetitives
1)�Sintaxi�while
<?php
while (condició) {
sentències;
}
?>
2)�Sintaxi�do-while
<?php
do{
sentències;
} while (condició);
?>
3)�Sintaxi�for
<?php
for ($var=val_ini;cond;incr) {
sentències;
}
?>
6.2.3. Funcions
Hi ha dos tipus de funcions: les que crea el programador o les funcions del Enllaç recomanat
llenguatge.
A la web oficial de PHP, po-
deu trobar definides totes les
En les funcions creades pel programador, hem de tenir en compte que el nom funcions del llenguatge: la
seva sintaxi i exemples.
de la funció segueix les mateixes pautes que el nom de les variables. Per tant,
ha de començar amb una lletra o guió baix. És important destacar que el nom
d’aquestes no pot ser una funció nativa de PHP.
Com en la majoria de llenguatges d’alt nivell, a les funcions se’ls poden passar
variables per valor o per referència. Per defecte, s’utilitza el pas per valor com
en l’exemple següent:
//Sintaxi d’una funció amb pas de paràmetres

<?php
function suma ($param1, $param2){
return $param1 + $param2;

}
?>
//Crida a la funció
$param1=2;
$param2=3;
suma ($param1, $param2);
En cas de voler modificar els valors de les variables que es passen per paràmetre,
passarem els valors per referència a la funció amb un &$ davant el nom de la
variable suma (&$param1, &$param2);.
6.2.4. Arrays
Generalment, un array és una estructura de dades que permet emmagatzemar

elements del mateix tipus. En el cas de PHP, un array permet agrupar elements
diferents i ser tractats com si fossin una sola variable.
Comencem per la creació d’un array:
<?php
$array_productes = array('producte1', 2, 3+4.5);
?>
Si volem accedir al producte 2, haurem de fer $array_productes [2] i ens

retornarà 7.5. Aquest tipus d’array és numèric, en el sentit que l’índex que
fem servir per accedir als elements és un nombre.
A més dels arrays�numèrics, hi ha els arrays associatius. En els arrays�associa-

tius, s’assigna un nom a cada posició de l’array, de forma que les dades estaran
formades per una parella de clau=>valor.
<?php
$array_productes = array('nom'=>'llibre HTML', 'descripcio'=>'llibre tecnic', 'preu'=>20);
?>
Per accedir al valor, ho hem de fer amb el nom de la clau. Si volem accedir al
preu, ho farem així: $array_productes['preu'];
També hi ha arrays� multidimensionals, on podríem emmagatzemar, per

exemple, diversos llibres.
<?php
$llibres = array();
$llibres[0]=array('nom'=>'llibre HTML', 'descripcio'=>'llibre tecnic', 'preu'=>20);
$llibres[1]=array('nom'=>'llibre PHP', 'descripcio'>'llibre tecnic', 'preu'=>30);
?>
Per tal de recórrer a un array, utilitzarem la funció foreach. Es pot fer de dues
formes:
foreach ($array as &$valor) {

$valor = $valor * 2;
}
o bé:
foreach ($array as $clave => $valor) {

echo "{$clave} => {$valor} ";
print_r($array);
}
6.2.5. Variables reservades i variables de sessió
Les variables�reservades són aquelles variables que el llenguatge PHP defineix

amb valors en matrius per defecte. No necessiten llibreries i estan tot el temps
disponibles. A més, no es pot modificar el seu contingut. Vegem, a continua-
ció, les més importants:
Variables Descripció
reservades
$_SERVER Informació de l’entorn del servidor i d’execució.
$_GET Variables HTTP GET.
$_POST Variables POST d’HTTP.
$_COOKIE Variable que permet crear, modificar i eliminar una galeta.
$_FILES Variables de pujada de fitxers HTTP.
$_REQUEST Variables HTTP Request. Conté $_GET, $_POST i $_COOKIE.
$_SESSION Variables de sessió.
A tall d’exemple, començarem veient les variables $_GET i $_POST. La varia-

ble $_GET ens retornarà en forma d’array informació enviada mitjançant el
paràmetre HTTP GET. Per tant, serà passada de l’URL al navegador mitjançant
el símbol ?. Per exemple:
prova_get.php?producte=llibre&descripcio=html
El codi PHP encastat dins l’HTML seria el següent (aquest codi imprimeix el
valor de la variable $_GET):
<html>
<head>
<title>Exemple GET</title>
</head>
<body>
<pre>
<?php
print_r($_GET);
?>
</pre>
</body>
</html>
A continuació, vegem l’execució d’aquest codi:
Execució prova_get.php.
En el cas de la variable $_POST, ens retornarà en forma d’array informació de

variables enviades mitjançant el paràmetre HTTP POST.
<html>
<head>
<title>Exemple POST</title>
</head>
<body>
<h2>Exemple variables POST</h2>
<form method="post">
Escriu el teu nom: <input type="text" name="nom" value="<?=@$_POST['nom'];?>"> <br> <br>
Escriu el teu cognom: <input type="text" name="cognom" value="<?=@$_POST['cognom'];?>"> <br> <br>
</form>
<pre>
<?php
if($_POST)
{
print_r($_POST);
}
?>
</pre>
</body>
</html>
A continuació, vegem l’execució d’aquest codi:

Execució prova_post.php.
Finalment, estudiarem les variables� de� sessió ja que són molt útils amb
PHP per tal que la informació d’usuari persisteixi en totes les pàgines
d’un lloc web. S’utilitzen, per exemple, en la implementació de sistemes
segurs d’identificació. Primer de tot, cal iniciar la sessió amb la funció
session_start(). A continuació, ja podrem assignar contingut a les varia-
bles de la sessió. Per exemple, si volem emmagatzemar el nom de l’usuari, el
que haurem de fer és:
<?php
session_start();
$_SESSION["nom"]="Pep";
echo "El teu nom és" . $_SESSION["nom"] . ".<br>";
?>
6.2.6. Formularis
Un formulari serveix per enviar dades, introduïdes per un usuari, a un servi-

dor, per tal de ser processades. Els camps que pot incloure un formulari poden
ser de diferent tipus (caràcters, numèrics, dates, textos, etc.).
En la taula següent, podem observar els tipus de formularis més habituals que
podem trobar.
Tipus de formulari Descripció
input type="text" Caixa de text.
input Caixa de text amb asterisc en lloc de caràcters escrits.

type="password"
input Caixes seleccionables: permet escollir entre diverses opcions.

type="checkbox"
input type="radio" Caixes seleccionables en grups: només permet escollir una opció.
input type="file" Caixes de text i botó: permet pujar arxius.
input type="submit" Botó per enviar el formulari.

Tipus de formulari Descripció
input type="hidden" Element ocult. Útil per a tokens de seguretat.
option Opció possible dins d’un element select.
select S’utilitza per crear una llista desplegable. Cada element de la llista
es defineix amb el tag <option> anterior.
textarea Text multilínia.
En l’exemple següent, mostrem quan l’usuari introdueix el seu nom i cognom

amb el teclat. En el primer codi tenim l’HTML i en el segon, el PHP.
<html>
<body>
<form action="formpost.php" method="post">
Nom:<input type="text" name="nom"><br>
Cognom:<input type="text" name="cognom"><br>
</form>
</body>
</html>
Quan l’usuari cliqui a «Enviar les dades del formulari», aquestes seran enviades
al fitxer formpost.php mitjançant el mètode POST per ser processades. Aques-
tes, un cop rebudes al fitxer PHP, poden ser tractades o emmagatzemades en
una base de dades.
<html>
<body>
El teu nom:<?php echo $_POST["nom"]; ?><br>
El teu cognom:<?php echo $_POST["cognom"]; ?>
</body>
</html>
De vegades, cal validar la informació que s’introdueix per mitjà dels formula-
ris. Aquest procés pot ser realitzat en el mateix codi PHP o per mitjà de JavaS-
cript, que serà més eficient.
7. MySQL
7.1. Introducció al MySQL
MySQL és un sistema gestor de bases de dades relacional (SGBD), multiusuari

i multifil. Considerat com un dels sistemes de gestió de bases de dades més
potents del món, juntament amb SQL Server, Oracle, etc. és capaç de realitzar
les mateixes funcions que aquests, tot i tractar-se de programari lliure.
Creat per MySQL AB, MySQL va ser adquirit per Sun Microsystems el 2008 i,
finalment, comprat per Oracle Corporation dos anys després. El 2009 es va
crear una branca de MySQL anomenada MariaDB.
Podem trobar MySQL amb diferents versions: Community en cas de llicència

pública de GNU o Enterprise (per a les empreses que volen incloure serveis
addicionals, com ara la monitorització o l’assistència tècnica).
Molts són els llenguatges de programació que mitjançant diferents API perme- MySQL
ten accedir a bases de dades MySQL. En aquest sentit i al llarg d’aquest apartat,
El llenguatge que utilitza
estudiarem les diferents funcions de MySQL en PHP, ja que PHP és el llenguat- MySQL és SQL.
ge per excel·lència usat en programació web i que ja s’ha estudiat en l’apartat MySQL està inclòs en els pa-
quets LAMP (Linux) o WAMP
anterior. Com a últim apunt i abans d’entrar en matèria, convé mencionar que (Windows). Pot ser instal·lat en
el paquet o de forma individu-
MySQL és utilitzat per llocs web grans i populars, com ara Google o Facebook. al.
7.2. Funcions de MySQL

Enllaç recomanat
La intenció d’aquest apartat és mostrar el funcionament de les funcions bàsi- Web oficial de MySQL:
ques de MySQL en PHP. Per tant, les funcions que es veuran seran les següents: www.mysql.com
Funció Descripció
mysql_connect() Connectar amb el servidor de bases de dades.
mysql_select_db() Seleccionar una base de dades.
mysql_query() Enviar la consulta SQL a la base de dades.
mysql_num_rows() Obtenir el nombre de files d’un conjunt de resultats.
mysql_fetch_array() Recuperar una fila de resultats.
mysql_close() Tancar una connexió de MySQL.
1)�Connexió�al�servidor
En primer lloc, necessitem establir la connexió al servidor de la base de dades.

En el nostre cas, ho farem al servidor local "localhost". A més, haurem
d’indicar amb quin usuari i password hi accedim. En cas de no poder realitzar
la connexió, convé mostrar un error.
<?php
$usuari = "root";
$password = "";
$servidor = "localhost";
$basededades = "botiga";
$connexio = mysqli_connect( $servidor, $usuari, $password ) or die ("No s’ha pogut connectar
al servidor de la bases de dades");
?>
2)�Selecció�de�la�base�de�dades
Un cop realitzada la connexió correctament, hem de seleccionar la base de

dades que volem.
$db=mysqli_select_db ( $connexio, $basededades ) or die ("No s’ha pogut connectar a la base

de dades");
3)�Execució�de�la�consulta�SQL
Recordem que les operacions de consulta en SQL poden ser de diferent tipus:
• SELECT: consultar elements d’una taula.

• INSERT: inserir elements en una taula.
• UPDATE: actualitzar elements en una taula.
• DELETE: esborrar elements d’una taula.
Amb el codi següent, farem una consulta del contingut de la taula llibres.
$consulta = "select * from llibres limit 1000";

$resultat = mysqli_query( $connexio, $consulta ) or die ("No s’ha pogut fer la consulta");
4)�Mostrar�els�resultats�de�la�consulta
Amb el codi següent, anirem mostrant les diferents files obtingudes com a
resultat de la consulta.
while ($fila = mysqli_fetch_array($resultat)) {

echo '<br>';
echo 'Nom: ', $fila['nom']; echo '<br>';
echo 'Descripcio: ', $fila['descripcio'];
echo '<br>'; echo '<br>';
}
5)�Tancar�la�connexió
Un cop hem realitzat totes les operacions cap a la nostra base de dades, podem
tancar la connexió al servidor.
mysqli_close( $connexio );
6)�Resultat
Si tenim instal·lats el servidor Apache i el MySQL, i hem guardat prèviament

el fitxer PHP a la carpeta /var/www/html amb el codi que hem mostrat més
amunt, podrem observar el resultat al nostre navegador.
Bibliografia
Bibliografia complementària
Welling, L.; Thomson, L. (2018). Desarrollo web con PHP y MySQL (5a. ed.). Madrid: Anaya
Multimedia.
Gauchat, J. D. (2019). El gran libro de HTML 5, CSS3 y JavaScript (3a. ed.). Barcelona: Mar-
combo Ediciones Técnicas.
Webgrafia
AWS
w3schools.com
ecma international
JavaScript.info
Apache
php
MySQL

Pid 00275797

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pid 00275797

Uploaded by

Copyright:

Available Formats

Desenvolupament

Meritxell Figueres Boquera

Temps mínim de dedicació recomanat: 4 hores

Meritxell Figueres Boquera

Enginyera en Informàtica per la Uni-

L'encàrrec i la creació d'aquest recurs d'aprenentatge UOC han estat coordinats

Primera edició: setembre 2020

Serveis i productes de diferent tipus (des de béns de primera necessitat fins

En els materials didàctics d’aquest mòdul, l’estudiant trobarà la informació

1. Conèixer els diferents tipus d’allotjaments, plataformes i proveïdors exis-

2. Familiaritzar-se amb els llenguatges de programació web HTML, CSS i Ja-

3. Instal·lar i configurar les eines tecnològiques necessàries per desenvolupar

4. Aplicar els coneixements adquirits en els llenguatges PHP i MySQL per

Una bona planificació, tenint en compte el model de negoci, la possibilitat

• Allotjament� compartit. El servidor web és compartit amb molts webs

• Allotjament�dedicat. El propietari del web té a la seva disposició un ser-

• Servidor�Privat�Virtual�(VPS). A mig camí entre l’allotjament compartit i

• Allotjament�al�núvol. Aquest últim és el més nou de tots. Allotjar un lloc

Un cop decidida la infraestructura de maquinari, s’ha de preveure quin pro-

• Plataformes�open�source. La instal·lació i configuració del programari és

• Plataformes� de� desenvolupament� a� mida. Grans negocis requereixen

• Software�as�a�service�(SaaS�o�núvol). Es tracta d’aquelles plataformes web

• Marketplaces. Plataforma web que s’encarrega de distribuir els productes

Amazon o eBay i de marketplaces verticals amb Zalando o Deporvillage,

• Altres�plataformes. Amb la irrupció de les xarxes socials en els últims anys

2.1. El llenguatge HTML

L’HTML no és ben bé un llenguatge de programació en si, és el que s’anomena

On etiqueta serà substituït per l’etiqueta adient en cada cas.

Editor HTML a Google

Hyper Text Markup Language,

W3C, World Wide Web Consortium

L’organització d’estandardització W3C defineix l’estructura i la definició dels continguts

2.3. L’estructura HTML

<p>Paràgraf amb una paraula final en lletra <i>itàlica</i></p>

Podeu veure totes les etiquetes i atributs disponibles a l’enllaç següent:

En el codi següent, veurem una estructura senzilla en HTML:

Que es visualitzaria per pantalla de la manera següent:

Els enllaços (també anomenats hipervincles o links) permeten relacionar pàgi-

On href és l’atribut que conté l’URL on es vol enllaçar.

Per introduir una imatge a la nostra web necessitarem l’etiqueta:

<img src="nom.jp" width="100" height="250">

Per afegir un enllaç en una imatge, en el codi podríem fer el següent:

En les llistes�desordenades és habitual trobar-hi davant un punt o quadrat

Observem l’exemple següent:

Les llistes� ordenades llisten els diferents elements posant-hi un número o

A continuació, es mostra una codificació de taula senzilla en HTML:

L’etiqueta <table> emmagatzema la taula en si, les files i les columnes. Al

El resultat al navegador seria el següent:

El formulari és un dels elements més importants de l’entorn web, ja que per-

A continuació, podem veure un exemple d’introducció de les dades personals:

<form action="dades.php" method="post">

La imatge següent ens mostra com quedaria al navegador:

2.4. Les caixes en HTML

Normalment, una pàgina web consta d’un encapçalament, diferents seccions

3.1. Introducció al CSS

En la primera part de l’exemple, el selector h1 conté dins els claudàtors la de-

• Regla: estil CSS que s’aplica sobre un element.

Les regles CSS es poden aplicar:

1)�En�el�mateix�document�HTML: quan s’han de realitzar pocs estils o per

<link rel="stylesheet" type="text/css" href="style.css"/>

3)�En�els�elements: s’utilitza únicament quan s’ha d’incloure un estil específic

<h1 style="color:blue; font-family:Verdana">Títol de nivell 1</h1>

En el cas de voler utilitzar diferents característiques en un mateix selector, les