WAMP I DREAMWEAVERWAMP I DREAMWEAVER EXERCICI 1 Anem a crear la base de dades que ens servirà com a...
50
materials del curs de: WAMP I DREAMWEAVER
Transcript of WAMP I DREAMWEAVERWAMP I DREAMWEAVER EXERCICI 1 Anem a crear la base de dades que ens servirà com a...
materials del curs de:
WAMP I DREAMWEAVER
WAMP I DREAMWEAVER
www.xelu.net
AUTOR:
Xavier Vilardell Bascompte
[email protected] – www.xelu.net
CURS:
2008-2009
ÚLTIMA REVISIÓ:
5 d’abril de 2009
Aquests materials han estat realitzats per donar le s classes al
Centre de Formació Permanent d’Osona Sud.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 1
Anem a crear la base de dades que ens servirà com a exercici comú per poder fer la nostra
primera pàgina web dinàmica. Un cop creada, hi afegirem 2 taules amb els seus respectius
registres per començar a tenir dades amb les quals treballar. Per fer-ho, segueix els
següents passos:
1. Engega el programa Wamp Server. Aquest ha de quedar actiu a la barra de sota a la
part dreta.
2. Anem a buscar l’icona del programa que ha quedat actiu i seleccionem l’opció
phpMyAdmin. Aquest programa és el que ens permetrà crear la base de dades en format
MySQL.
3. El primer pas serà donar-li nom a la base de dades i l’ordenació de la connexió i de la
base de dades. Omple els camps com pots veure en la imatge inferior i prem CREAR.
WAMP I DREAMWEAVER
www.xelu.net
4. Un cop creada la base de dades, el nom d’aquesta apareixerà a la columna de la banda
esquerra. Una base de dades buida no ens serveix de res. Necessitem unes quantes
taules per començar a treballar. La primera taula que crearem serà la de PAISOS.
Omple els camps de la secció CREA UNA NOVA TAULA amb les següents dades i
prem EXECUTAR.
WAMP I DREAMWEAVER
www.xelu.net
5. Ara hem de definir els 4 camps de la taula com es mostra a continuació. Quan acabis,
prem el botó DESAR.:
6. Apareixerà una pantalla amb les instruccions SQL executades per crear la taula i un
resum de l’estructura d’aquesta. Nosaltres ignorem aquesta pantalla i anem a omplir la
nostra nova taula amb dades. Per fer-ho ens ajudarem de la Viquipèdia
(http://ca.viquipedia.org). Buscarem informació sobre 5 països:
a. França
b. Anglaterra
c. Itàlia
d. Holanda
e. Suissa
7. Per introduir les dades d’un país a la nostra taula, premem el nom de la taula
PAISOS a la banda esquerra i després el botó INSEREIX. L’id del país el deixarem
en blanc ja que l’hem definit com un comptador que s’anirà incrementant ell sol. La
descripció del país la traiem de la Viquipèdia. Finalment, la foto la busquem, la
guardem al nostre llapis USB i aquí hi posem el nom de la foto i l’extensió (JPG,
GIF...). Premem EXECUTAR per acabar.
WAMP I DREAMWEAVER
www.xelu.net
8. Repetim l’operació pels diferents països. Quan tinguem els 5 fets ja tindrem aquesta
part acabada.
9. La segona taula que crearem serà la de LLOCS. Seguirem els mateixos passos
descrits anteriorment (a partir del pas 4). L’estructura de la taula en aquest cas ha de
ser la següent:
10. Amb l’ajuda de la Viquipèdia, caldria entrar les dades i buscar les fotos de 3 llocs per
visitar de cada país. La forma d’entrar les dades serà la següent: igual que en el cas
anterior, l’id el deixarem per omplir, en el país hi haurem de posar el nom del país al
que correspon el lloc que inserim, el nom serà el nom del lloc i la resta ja queda prou
clara. Al final, aquesta taula ha de contenir 15 registres (3 llocs x 5 països).
11. Amb totes aquestes dades ja podrem començar a treballar amb Dreamweaver.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 2
Un cop creada la base de dades, el següent pas és configurar el “sitio” de Dreamweaver
correctament per poder aprofitar la tecnologia PHP i MySQL. Abans d’això però, farem unes
quantes coses:
1. Hauríem de comprovar que els continguts del
camp NOM de la taula PAÏSOS coincideix lletra
per lletra (incloent majúscules i minúscules) amb
els del camp PAIS de la taula LLOCS. Si no és
així, caldria arreglar-ho.
2. A dins la carpeta www (aquesta carpeta és on
apunta el nostre servidor LOCALHOST) que
trobarem a C.\WAMP, creem un arbre de
carpetes com es veu a la imatge de la dreta (la
carpeta PAISOS) ha de contenir la resta de
carpetes. Dins de la carpeta LLOCS hi guardem
totes les imatges que hem buscat relatives als
llocs entrats a la base de dades. Haurem de
comprovar que els noms estan igualment escrits
a la base de dades. El mateix passarà amb les
imatges de països.
3. Totes les imatges ja guardades, les hauríem de
tractar amb Photoshop perquè ocupin menys.
Per fer-ho, les obrim amb aquest programa i
anem al menú IMAGEN->TAMANYO DE
IMAGEN i els hi donem a totes una amplada de
750px (l’alçada ha de sortir automàticament).
Les guardem amb l’opció GUARDAR PARA
WEB en format JPG i qualitat alta.
WAMP I DREAMWEAVER
www.xelu.net
Un cop hem fet tot això, estem en disposició de definir el “Sitio” a Dreamweaver. Per fer-ho,
seguim els següents passos:
1. Engeguem el programa Dreamweaver.
2. Anem al menú SITIO -> NUEVO SITIO.
3. Li donem nom al “sitio” a la primera pantalla i premem SIGUIENTE.
4. Escollim com a tecnologia del servidor PHP MySQL i premem SIGUIENTE.
WAMP I DREAMWEAVER
www.xelu.net
5. Escollim la carpeta arrel que conté o contindrà tota la nostra pàgina web (en el
nostre cas la carpeta PAISOS) i premem SIGUIENTE.
6. Escollim Local/Red a la forma de connectar amb el nostre servidor de proves i la
mateixa carpeta que en la finestra anterior en la segona casella del formulari.
Finalment, premem SIGUIENTE.
WAMP I DREAMWEAVER
www.xelu.net
7. Escrivim exactament http://localhost/PAISOS/ a la única casella d’aquesta finestra i
premem SIGUIENTE.
8. Deixem la finestra següent tal com està i premem SIGUIENTE.
9. Hem acabat la configuració del “sitio”. Premem COMPLETAR.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 3
Com que algun dia voldràs treballar amb la base de dades en un ordinador diferent del que
l’has creada, aquest exercici són uns apunts que t’ajudaran a exportar la base de dades i
llavors importar-la en un altre ordinador. Segueix els següents passos.
EXPORTAR LA BASE DE DADES
1. Ja dins del programa PHPMyAdmin, seleccionem la base de dades que volem
exportar i premem el botó EXPORTAR de la barra superior.
2. Ens apareixerà una pantalla on seleccionem “comprimit amb zip” i premem
EXECUTAR.
WAMP I DREAMWEAVER
www.xelu.net
3. Se’ns demana on volem guardar el fitxer de la base de dades. Seleccionem el lloc on
volem guardar-la i premem GUARDAR. La base de dades està en aquests moments
correctament exportada.
IMPORTAR LA BASE DE DADES
1. Un cop engegat el programa PHPMyAdmin, seleccionem la base de dades en la qual
volem fer l’importació i esborrem totes les taules. Amb la base de dades buida,
premem el botó IMPORTAR de la barra superior.
2. Ens apareixerà una finestra on premem el botó NAVEGA per seleccionar el fitxer de
la base de dades prèviament exportada allà on l’haguem guardat.
3. Després, premem el botó EXECUTAR. La base de dades està perfectament
IMPORTADA.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 4
Ara que ja tenim la base de dades amb un parell de taules i amb uns quants registres a cada
una, anem a connectar-la amb el Dreamweaver. Aquesta connexió és la que ens permetrà
fer consultes a la base de dades i mostrar els resultats de diferents formes en la nostra web.
Segueix els següents passos per a realitzar la connexió:
1. Engeguem el programa Wamp Server i el Dreamweaver.
2. En el programa Dreamweaver, busquem el panell lateral APLICACIÓN i seleccionem
la pestanya BASE DE DATOS. Fem un clic al botó + i seleccionem CONNEXIÓN
MySQL.
3. En la finestra que
apareixerà, introduïm les
dades de connexió a la
nostra base de dades que es
troba ubicada en el servidor
local (localhost). El nom de
la connexió pot ser qualsevol
que vulgueu. El servidor MySQL serà localhost. El nom d’usuari root. La contrasenya
la deixarem en blanc. Finalment, la base de dades l’escollirem a través del botó
SELECCIONAR (en aquest cas països). Finalment, premem ACEPTAR i la connexió
quedarà establerta.
WAMP I DREAMWEAVER
www.xelu.net
4. Si observem les carpetes del nostre sitio, veurem que se n’ha creat una de nova amb
el nom de CONNECTIONS, amb un fitxer PHP a dins amb les dades de la connexió
a la base de dades local.
De moment, aquesta forma de funcionar ens anirà bé. Més endavant, haurem d’importar
la base de dades al servidor real i canviar les dades de connexió per les definitives. Però
per això encara ens queda força per aprendre.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 5
Un cop hem fet la connexió amb la nostra base de dades, ja estem en disposició de fer la
primera consulta. Aquesta primera pregunta que farem a la base de dades ens servirà per
obtenir una llista dels països de la taula PAISOS ordenats alfabèticament. Aquest llistat
apareixerà a la pàgina index.php de la nostra web, que serà la porta d’entrada a tots els
continguts. Segueix els següents passos per poder fer la consulta:
1. Ja en el programa Dreamweaver, amb el
sitio PAISOS seleccionat, creem un nou
fitxer PHP i el guardem dins la carpeta
PAISOS amb el nom index.php.
Seguidament, anem a buscar el panell
lateral APLICACIÓN i la pestanya
COMPORTAMIENTOS DEL SERVIDOR.
Premem el botó + i seleccionem JUEGO
DE REGISTROS.
2. Ens apareixerà una finestra on
formularem la consulta. Primer escollirem
un nom per la consulta i una connexió a
la base de dades. Després, seleccionem
la taula de la qual volem extreure les
dades. A sota, ens apareixeran tots els
camps de la taula. Prement
SELECCIONADO només escollirem
aquells que volem com a resultat de la
consulta. Finalment, triem que volem
ordenar alfabèticament el resultat pel
camp nom. Premem ACEPTAR i ja tenim
la consulta feta.
WAMP I DREAMWEAVER
www.xelu.net
3. Observem que a la pestanya
COMPORTAMIENTOS DEL
SERVIDOR ha aparegut un JUEGO DE
REGISTROS (llistat_paisos) que és
precisament la consulta que acabem de
fer. Això ens indica que ho hem fet tot
correctament.
Ara el que hem aconseguit és tenir una consulta feta. El que ens passa és que aquesta
consulta encara no es mostra en cap lloc de la pàgina index.php. Això és el que farem
precisament en el pròxim exercici.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 6
Anem a inserir el resultat de la consulta feta en l’exercici anterior en el nostre index.php. Per
fer-ho, segueix els següents passos:
1. Amb el fitxer index.php obert, prem la pestanya DATOS de la barra INSERTAR.
2. Premem la pestanya del botó per inserir dades dinàmiques i seleccionem TABLA
DINÁMICA.
3. Ens apareixerà una finestra on
triarem l’origen de la nostra taula
dinàmica. En el nostre cas
escollirem com a joc de registres la
consulta llistat_paisos que acabem
de crear en l’exercici anterior. Triem
que volem mostrar tots els registres
i premem ACEPTAR.
4. Això ens farà aparèixer una taula
dinàmica amb els registres actuals
que hi hagin a la base de dades en
referència a la c onsulta
seleccionada (veure imatge de la
dreta).
WAMP I DREAMWEAVER
www.xelu.net
5. Ja tenim la taula dinàmica inserida. Per veure el resultat, cal que guardem i ho
visualitzem al navegador (prement F12). Podem fer un seguit de proves per veure
que tot funciona (afegint, eliminant o modificant registres de la base de dades i
actualitzar la pàgina del navegador, observant que els canvis fets es reflecteixen a la
web).
Ara ens caldria posar-ho tot una mica més maco i començar a enllaçar cada un dels països
amb la seva fitxa corresponent. Però tot això serà en pròxims exercicis i després d’haver
parlat dels paràmetres.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 7
Ara que ja sabem fer una consulta a la base de dades i mostrar-la per pantalla, anem a
dissenyar el nostre índex de veritat de la nostra web de proves, que anomenarem World
Planet. El resultat final hauria de ser més o menys com es mostra en la imatge inferior. Per
fer-ho, segueix els següents passos:
1. Com que els estils ja els heu de saber fer i hem d’anar per feina, jo us dono el fitxer
estils.css fet amb tot el que necessiteu per ara. Per tant, el descarreguem de
www.xelu.net i el guardem a la carpeta css que crearem a l’arrel del sitio.
WAMP I DREAMWEAVER
www.xelu.net
2. Igualment, descarreguem la imatge capcalera.png i la guardem dins d’imatges
en una carpeta nova que anomenarem home .
3. L’arbre de carpetes i fitxers del nostre sitio
hauria de quedar de la següent manera
(atenció, aquest arbre també inclou els fitxers
necessaris per l’exercici 8).
4. Comencem ara a crear de nou el fitxer
index.php . Podríem aprofitar el que havíem
fet en l’exercici anterior, però ens resultarà
més fàcil començar de nou. Per tant,
l’esborrem i tornem a obrir un php nou i el
guardem amb el nom index.php a l’arrel del
nostre sitio.
5. Vinculem el fitxer estils.css mitjançant el
botó de les cadenes de la paleta lateral
d’estils.
6. Creem una taula de 3 columnes i 5 files,
sense determinar-ne l’amplada i amb tot a 0
en quan a la separació entre caselles, el
tamany del contorn i el farcit de la cel·la.
Aquesta taula ens servirà per muntar el
contingut del nostre índex.
7. Col·loquem les imatges, els textos i apliquem
els estils corresponents a cada zona (l’assaig
error us anirà força bé).
8. Ara és l’hora de començar a inserir continguts dinàmics. Crearem dues consultes
a la base de dades. La primer l’anomenarem llistat_ultims_10_paisos i ens
llistarà els països ordenats per id de forma descendent. La segona l’anomenarem
llistat_ultims_10_llocs i ens llistarà els llocs ordenats per id de forma
descendent.
WAMP I DREAMWEAVER
www.xelu.net
9. Tal com vam aprendre en l’exercici 6, inserim dues taules dinàmiques amb les
dades de les dues consultes, una a la fila de sota dels últims països entrats i
l’altre a sota de la últims llocs entrats .
10. Veurem que el Dreamweaver ens genera tot el codi d’una taula i en va repetint el
contingut d’una fila fins que s’esgoten les dades.
11. Hauríem de fer desaparèixer la taula i deixar un codi més net com el que segueix
a continuació:
12. Comprovem que estigui tot ben fet visualitzant el resultat en un navegador (prem
la tecla F12).
13. Veurem que encara tenim caràcters estranys en el text que ens molesten. Per
Arreglar-ho, cal afegir un codi després de cada crida a la base de dades. El
WAMP I DREAMWEAVER
www.xelu.net
problema és que al Dreamweaver no li agrada que ho fem i ens fa desaparèixer
les consultes del panell lateral si ho fem. Podeu provar el codi per veure que
funciona però després seguirem treballant sense ell per més comoditat.
14. Tornem a comprovar el funcionament al navegador.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 8
Anem a preparar la plantilla de països que ens servirà per veure el potencial d’una web
dinàmica i de pas mostrar la informació de tots els països de la base de dades utilitzant un
sol fitxer php. A la imatge de sota veiem com hauria de quedar la plantilla. Per fer-ho,
segueix els següents passos:
WAMP I DREAMWEAVER
www.xelu.net
1. Creem un fitxer php nou i el guardem amb el nom fitxa_paisos.php dins de php en
una carpeta nova anomenada països . Hi vinculem el fitxer d’estils i guardem.
2. Descarreguem el fitxer capcalera.php de www.xelu.net i el guardem dins de la
carpeta amb les fotos del països.
3. Creem una taula de 3 columnes i 6 files que ens servirà de base a la nostra plantilla.
4. Creem una consulta anomenada llistat_paisos que ens servirà per fer un llistat
alfabètic de països. Igual que l’exercici anterior, inserim una taula dinàmica i després
arreglem el codi manualment.
5. Creem una segons consulta que anomenarem pais_seleccionat . La configurem de
la següent manera perquè rebi el país que ha de mostrar per paràmetre:
6. Per inserir els diferents camps resultants de la consulta pais_seleccionat (que són
els que ompliran la plantilla), farem servir el botó inserir text dinàmic :
WAMP I DREAMWEAVER
www.xelu.net
7. Ens situem amb el cursor allà on vulguem inserir el text dinàmic i premem l’opció
d’inserir text dinàmic. La finestra emergent ens mostrarà un llistat de les consultes
que tenim definides. Despleguem utilitzant el [+] els camps de la consulta
pais_seleccionat i seleccionem el camp que volem inserir. Finalment, premem
aceptar .
8. Dreamweaver ens inserirà un codi com el que segueix:
9. Per inserir la foto correctament, el codi que ens hauria de quedar és el següent
(veurem que l’hem de retocar manualment perquè quedi igual):
10. Comprovem el resultat en el navegador i veurem que no es veu correctament.
Perquè? Perquè el navegador no sap quin país mostrar (recordem que la consulta
pais_seleccionat espera un paràmetre (en aquest cas pais_ID ) per saber quin
registre ha de mostrar.
WAMP I DREAMWEAVER
www.xelu.net
11. Per tant, enganyarem al navegador i li passarem el paràmetre. Per fer-ho, la URL de
la crida hauria de ser la següent:
12. Veiem que el paràmetre va després de l’adreça a la que estàvem acostumats. Per
separar l’adreça del primer paràmetre cal posar el símbol ?.
13. Finalment, podem fer més proves variant el valor del paràmetre. Veurem que se’ns
van mostrant els països.
14. Si tot funciona, ja podem passa a enllaçar l’index.php amb la països_fitxa.php. Això,
en el proper exercici.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 9
Ara ja tenim un index.php on hi ha un llistat dels últims 10 països entrats a la base de dades.
Per l’altra banda, tenim un fitxa_paisos.php que és capaç de mostrar la informació d’un país
concret que li passem per paràmetre. Anem a veure com podem enllaçar el primer amb el
segon passant el paràmetre del país corresponent. Segueix els següents passos:
1. Obrim el fitxer index.php
2. Seleccionem el text dinàmic
{llistat_ultims_10_paisos.nom}
que és el que ens servirà d’enllaç
cap a la fitxa de cada país.
3. A sobre del text seleccionat,
premem el botó dret del ratolí i al
menú emergent premem crear
vínculo (tal com es veu a la imatge).
4. A la finestra emergent anem a
buscar el fitxer fitxa_paisos.php i
el seleccionem fent un clic.
5. Seguidament, i a la mateixa
finestra, premem el botó
Parámetros... Aquí és on
definirem el paràmetre que hem de
passar (en aquest cas l’id del
país).
WAMP I DREAMWEAVER
www.xelu.net
6. A la nova finestra emergent que apareix és on es defineixen totes els paràmetres que
acompanyaran l’enllaç. En el nostre cas només en volem 1. Com a nom li donarem
paisos_ID . Seguidament, com a valor, clicarem el botó en forma de llampec i passarem
a la següent finestra, on el podrem triar entre un dels camps d’una consulta ja feta.
7. En aquesta nova finestra, desplegarem els camps de la consulta
llistat_ultims_10_paisos clicant en el [+] i després seleccionarem el camp id .
8. Finalment, premem Aceptar en aquesta finestra, Aceptar en la finestra de paràmetres i
Aceptar en la finestra de selecció d’un arxiu.
9. Ara ja només ens queda guardar i provar l’enllaç en el navegador prement F12.
10. Fes el mateix pel menú lateral esquerra de països de la pàgina fitxa_paisos.php .
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 10
Arribats en aquest punt del curs, no hauries de tenir gaires problemes per desenvolupar les
següents 3 pàgines i fer els enllaços corresponents entre elles. Podeu mirar la web ja
acabada a http://worldplanet.xelu.net
paisos_index.php: índex de la secció països. A partir d’aquesta pàgina accedim a cada una
de les fitxes de països concreta (paisos_fitxa.php).
WAMP I DREAMWEAVER
www.xelu.net
La columna central que és el llistat de països és una consulta a la taula països per mostrar-
nos un llistat de tots els països ordenats alfabèticament. Després, això ho plasmem en forma
de taula dinàmica. El codi hauria de quedar així d’entrada (hem demanat l’id, el nom i la
foto):
En aquest cas, també hem d’arreglar el codi però ens interessa guardar l’estructura de taula
per poder tenir una foto al costat del text. El codi arreglat seria el següent:
WAMP I DREAMWEAVER
www.xelu.net
llocs_fitxa.php: al igual que la fitxa de països, tenim la fitxa dels diferents llocs a visitar de
cada un d’ells.
WAMP I DREAMWEAVER
www.xelu.net
llocs_index.php: índex de la secció llocs. A partir d’aquesta pàgina accedim a cada una de
les fitxes de llocs concreta (llocs_fitxa.php).
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 11
Ha arribat el moment de col·locar la web i la base de dades al servidor. Per fer-ho seguim
els següents passos:
ARXIUS DE LA WEB
1. Suposem que ja disposem d’un servidor i tenim a mà les següents dades:
a. Adreça FTP del servidor
b. Nom d’usuari
c. Password
2. Amb aquestes dades, configurem el programa FileZilla i enviem tots els fitxers i
carpetes involucrats en la nostra pàgina web al servidor menys la carpeta
Connections que té un tractament especial.
BASE DE DADAES
1. Exportem la base de dades des del programa PHPMyAdmin i la guardem en un lloc
que coneguem del nostre disc dur (veure exercici 3 )
2. Suposem que hem contractat un servidor amb base de dades PHP. Accedim al
panell de control del nostre servidor i creem una nova base de dades. El servidor
ens haurà d’informar de les següents dades:
a. Adreça del servidor de la base de dades
b. Nom de la base de dades
c. Nom d’usuari
d. Password
3. Amb aquestes dades, modifiquem el fitxer PHP que hi ha a dins de la carpeta
Connections, el guardem i l’enviem al servidor amb el FileZilla (a sota podeu veure el
WAMP I DREAMWEAVER
www.xelu.net
fitxer que ens crea el Dreamweaver automàticament, amb les dades de connexió al
WampServer local):
4. Ara ja només ens queda importar la base de dades al servidor. Per fer-ho, des del
mateix panell de control del servidor, accedim al programa PHPMyAdmin
corresponent a la nostra base de dades.
5. Un cop dins, importem la base de dades (veure exercici 3 ).
Si ho hem fet tot bé, ja podem accedir a la nostra web a través del navegador.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 12
En aquest exercici implementarem la validació d’usuaris per accedir a la zona restringida.
Aquesta zona restringida ens permetrà gestionar els continguts de la nostra web i només
serà accessible per usuaris autoritzats. Segueix els passos següents per a completar
l’implementació:
1. Accedeix a la base de dades MySQL a través del programa PHPMyAdmin del
WAMP Server.
2. Escull la base de dades de països a la banda esquerra i crea una nova taula que
anomenaràs usuaris i tindrà 3 camps. A continuació pots veure la definició
d’aquesta taula:
3. Per finalitzar la taula prem DESAR.
4. Insereix un usuari a la taula. Poses el nom d’usuari que vulguis i el password que
vulguis.
5. Ja pots tancar el PHPMyAdmin.
6. Ja hem arreglat la part de la base de dades per permetre que es pugui fer la
identificació dels usuaris. Tots els usuaris inserits a la taula usuaris podran
accedir a la zona restringida.
7. Ara passem a muntar els arxius PHP que faran possible aquesta validació. Ves a
www.xelu.net i descarrega els següents 4 fitxers:
a. login.php: fitxer amb un formulari que demana el login i el password.
Aquest fitxer connectarà amb el login_validacio.php que serà el que
contrastarà les dades entrades al login.php amb les dades entrades a la
base de dades.
WAMP I DREAMWEAVER
www.xelu.net
b. login_validacio.php: fitxer que contrasta les dades entrades en el
login.php. Si són correctes envia l’usuari a la pàgina zonavip_index.php.
En cas contrari el porta a la pàgina login_error.php on se l’informa que ha
fracassat el seu intent d’accés a la zona restringida.
c. login_error.php : informa a l’usuari de que s’ha produït un error en el nom
d’usuari o el password.
WAMP I DREAMWEAVER
www.xelu.net
d. zonavip_index.php : pàgina restringida que només és visible si l’usuari
s’ha validat correctament. Si qualsevol persona intentés entrar
directament en aquesta pàgina a través de l’URL del navegador sense
passar per el login.php, seria conduït a aquest per procedir a la seva
validació. L’índex de la zona vip és la porta d’entrada a la resta de la
secció restringida on podrem gestionar els continguts de la nostra web
(inserir, eliminar i editar continguts).
8. Aquests fitxers els pots guardar en una carpeta dins de php amb el nom zonavip.
9. Els fitxers no estan com es mostra en les imatges anteriors. Estan sense estils i
sense arreglar. Concretament, els fitxers login_error.php i zonavip_index.php
veureu que estan buits, tot i que aquest últim té el codi que permet rebutjar els
usuaris no autoritzats:
WAMP I DREAMWEAVER
www.xelu.net
10. Aquests fitxers, per tant, s’hauran d’adaptar a nivell estètic (adjuntant la fulla
d’estils i aplicant aquests allà on convingui) i a nivell de codi. Aquesta segona part
és la més preocupant. Bàsicament, si hem definit la base de dades com es diu al
principi de l’exercici, per aquest cantó no hem de tenir cap problema. El problema
ens pot venir pel nom de la connexió a la base de dades que haguem definit al
Dremaweaver (que correspon amb el nom del fitxer que hi ha dins la carpeta
Connections traient l’extensió .php). En el cas dels fitxers que us proporciono, la
connexió té el nom bbdd_paisos . Si la vostra es diu de manera diferent, haureu
de canviar aquest nom en el codi dels fitxers i posar el vostre. Això s’haurà de fer
en el fitxer login_validacio.php i en el zonavip_index.php .
11. Si s’han seguit els passos correctament, ara només ens restarà crear l’enllaç des
de la pàgina inicial, per exemple, cap a la zona restringida. Per tant, obrim el fitxer
index.php i a la part de sota hi col·loquem un text que digui, per exemple, Accés
a la zona restringida . Aquest text l’enllacem directament a l’arxiu
zonavip_index.php . Aquest comprovarà si l’usuari està validat o no i com que no
serà el cas l’enviarà al fitxer login.php.
12. Guardem tots els fitxers i provem el resultat en el navegador. Des de l’arxiu
index.php provem d’accedir a la zona restringida a través de l’enllaç que acabem
de crear i veurem que ens porta al fitxer login.php. Allà ens identifiquem de
manera correcta per comprovar que anem al zonavip_index.php. Seguidament,
ho tornem a provar però aquest cop donem malament o el nom d’usuari o el
password i hem de comprovar que se’ns deriva cap al fitxer login_error.php.
Si el funcionament és tot correcte, ja estarem preparats per començar a desenvolupar tota
aquesta àrea restringida.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 13
Comencem a ampliar la zona de gestió. En aquest exercici crearem dos documents: el
primer serà el zonavip_paisos_llistat.php que a partir d’un llistat de països ens permetrà
gestionar-los. El segon és el zonavip_paisos_editar.php on a partir del paràmetre passat
des del fitxer anterior ens permetrà editar un país. Anem a veure com ho fem.
1. Crea un document PHP nou i guarda’l amb el nom zonavip_paisos_llistat.php dins
la carpeta zonavip.
2. Adjunta-hi la fulla d’estils.
3. Copia el següent codi que trobaràs a la capçalera del fitxer zonavip_index.php i
posa’l també a la capçalera. Aquest codi ens garanteix que cap usuari pot accedir a
aquest fitxer sense haver passat per la validació.
4. Després crea una consulta per llistar els països. Insereix el resultat d’aquesta
consulta al document mitjançant una taula dinàmica. Arregla el codi perquè quedi
com es mostra a continuació i afegeix al final de cada línia el text editar i eliminar
per poder gestionar en aquest sentit cada un dels països.
WAMP I DREAMWEAVER
www.xelu.net
5. Enllaça el fitxer zonavip_index.php amb el zonavip_paisos_llistat.php. També fes
l’enllaç a l’inversa a través de TORNAR A L’ÍNDEX.
6. Ara anem a crear el fitxer zonavip_paisos_editar.php . Per fer-ho, crea un PHP nou,
guarda’l, adjunta-hi la fulla d’estils i copia el codi de la pàgina anterior a la capçalera
del fitxer.
7. Prepara el fitxer visualment fins que quedi com a la imatge següent:
WAMP I DREAMWEAVER
www.xelu.net
8. Crea una consulta que es digui pais_seleccionat tal com segueix:
9. Situa el cursor sota el text TORNAR A L’ÍNDEX DE PAÏSOS i ves al menú
INSERTAR ->OBJETOS DE DATOS -> ACTUALIZAR REGISTRO -> ASISTENTE
DE FORMULARIO DE ACTUALIZACIÓN DE REGISTROS.
10. Omple el formulari de la finestra emergent com segueix:
WAMP I DREAMWEAVER
www.xelu.net
11. Veurem que al prémer ACEPTAR, el Dreamweaver ens ha inserit un formulari amb
les dades del país seleccionat a la consulta pais_seleccionat i que ens permetrà
editar-lo.
12. Ara ja només ens queda arreglar-lo i que quedi, més o menys, tal com segueix:
WAMP I DREAMWEAVER
www.xelu.net
13. Accedim al codi i traiem una part que no ens fa servei. A la imatge de sota hi ha
marcat una de les línies que s’ha d’arreglar. Això s’ha de fer amb la resta de cops
que apareix el mateix codi en el formulari.
14. Finalment, enllacem el text EDITAR del costat del nom del país de la llista de països
del fitxer zonavip_paisos_llistat.php amb el fitxer zonavip_paisos_editar.php passant
per paràmetre l’id del país.
15. Guarda-ho tot i prova-ho en el navegador.
Treure
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 14
Anem a fer el mateix que en l’exercici anterior, però en aquest cas farem un formulari per
afegir un país a la base de dades. Segueix els següents passos:
1. Crea un fitxer PHP blanc i guarda’l amb el nom zonavip_paisos_afegir.php
2. Adjunta la fulla d’estils.
3. Adjunta el codi per assegurar que el fitxer és restringit a usuaris validats a la
capçalera.
4. Deixa el fitxer preparat visualment com segueix:
5. Situa el cursos sota el botó TORNAR A L’ÍNDEX DE PAÏSOS i ves al menú
INSERTAR ->OBJETOS DE DATOS -> INSERTAR REGISTRO -> ASISTENTE DE
FORMULARIO DE INSERCIÓN DE REGISTROS.
6. Omple el formulari de la finestra emergent com segueix:
WAMP I DREAMWEAVER
www.xelu.net
7. Prem ACEPTAR i el fitxer t’ha de quedar de la següent forma:
WAMP I DREAMWEAVER
www.xelu.net
8. Apliquem estils fins que ens quedi com segueix:
9. Enllaça el text TORNAR A L’ÍNDEX DE PAÏSOS i des de l’índex el text AFEGIR per
poder arribar fins a aquest formulari.
10. Guarda el resultat i prova que tot funcioni en un navegador.
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 15
Ja només ens manca poder eliminar un registre de la nostra base de dades. Seguint la línia
dels dos exercicis anteriors, implementarem el fitxer zonavip_paisos_eliminar.php .
Segueix els següents passos per fer-ho:
1. Crea un fitxer PHP nou i guarda’l amb el nom zonavip_paisos_eliminar.php
2. Ves al menú INSERTAR ->OBJETOS DE DATOS -> ELIMINAR REGISTRO.
3. Omple el formulari de la finestra emergent com segueix:
4. Prem ACEPTAR.
5. Ara només resta enllaçar el text ELIMINAR del fitxer zonavip_paisos_llistat.php amb
aquest nou fitxer que hem creat, passant-li per paràmetre l’ID del país que volem
eliminar.
6. Prova el resultat en un navegador.
Finalment, veuràs com el registre corresponent al país s’elimina, però sense demanar
confirmació. Com podem fer perquè se’ns demani confirmació abans d’eliminar?
WAMP I DREAMWEAVER
www.xelu.net
EXERCICI 16
Per poder acabar sent completament independents del Dreamweaver i el FileZilla, ens
queda només poder pujar fotos/fitxers al servidor des dels nostres formularis de la zona
restringida. Per aconseguir això, segueix els passos següents:
1. Descarrega els fitxer upload.rar guarda’l dins de la carpeta zonavip i
descomprimeix-lo amb l’ajuda del WinRar.
2. A dins hi tenim dos fitxers:
a. zonavip_paisos_fitxer_seleccionar.php : ens permet a través d’un formulari
seleccionar el fitxer que volem enviar al servidor. Aquest fitxer crida al
zonavip_paisos_fitxer_pujar.php i li passa per paràmetre el nom del fitxer
que s’ha de pujar al servidor. Tot seguit en podeu veure el codi:
WAMP I DREAMWEAVER
www.xelu.net
b. zonavip_paisos_fitxer_pujar.php : recull el nom del fitxer que li hem passat
per paràmetre i l’envia al servidor a la carpeta que li indiquem en el codi.
Podeu veure aquest a continuació:
3. Aquests dos fitxers ja us els dono fets i no heu de fer res més. El que si que hem de
fer és integrar el zonavip_paisos_fitxer_seleccionar.php al formulari per crear un
país del fitxer zonavip_paisos_afegir.php . Per fer-ho, obrim aquest últim fitxer i a
sota del nom de la foto i per sobre del botó d’enviar el formulari, inserim una nova fila
i hi integrem un iframe , el codi del qual el podeu veure a continuació:
4. Un cop acabat el procés, el formulari ha de quedar com segueix:
WAMP I DREAMWEAVER
www.xelu.net
5. Ja només ens queda pujar-ho tot al servidor i comprovar que funciona (ja que aquest
procediment que acabem de realitzar no funciona en local).
