Enginyeria del Software II

hotNotes

Autors:

Alejandro Aranguau1054268@campus.udg.edu

Kenneth Alonsou1055776@campus.udg.edu

Jose Antonio Manriqueu1063845@campus.udg.edu

Marc Reniuu1066976@campus.udg.edu

JonathanClarau1067159@campus.udg.edu

18/05/2012

Index

1 Introduccio 2

2 Recursos 32.1 Humans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2.1 Dropbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2.2 OpenOffice . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2.3 LATEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2.4 Visual Paradigm for UML 6.0 . . . . . . . . . . . . . . . . 42.2.5 GanttProject 2.5 . . . . . . . . . . . . . . . . . . . . . . . 42.2.6 Llenguatge, framework i cookies . . . . . . . . . . . . . . 42.2.7 Forum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.3 Temporitzacio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.4 Planificacio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.5 Reunions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.6 Coordinacio del projecte . . . . . . . . . . . . . . . . . . . . . . . 15

3 Requeriments del sistema 183.1 Requeriments funcionals . . . . . . . . . . . . . . . . . . . . . . . 18

3.1.1 Publicacio de documents . . . . . . . . . . . . . . . . . . . 183.1.2 Xarxa social . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.2 Requeriments no funcionals . . . . . . . . . . . . . . . . . . . . . 193.2.1 Idiomes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.2.2 Control d’usuaris . . . . . . . . . . . . . . . . . . . . . . . 193.2.3 Dispositius . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.3 Diagrames de casos d’us . . . . . . . . . . . . . . . . . . . . . . . 203.4 Fitxes de cas d’us . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.4.1 Fitxes de casos d’us model . . . . . . . . . . . . . . . . . 253.4.2 Fitxes de casos d’us vista . . . . . . . . . . . . . . . . . . 34

4 Analisi i disseny del sistema 444.1 Diagrama de classes de la capa de control . . . . . . . . . . . . . 444.2 Base de dades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464.3 Diagrama Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474.4 Estructura conceptual CSS . . . . . . . . . . . . . . . . . . . . . 494.5 Estructura conceptual HTML5 PHP . . . . . . . . . . . . . . . . 504.6 Control i validacio de formularis . . . . . . . . . . . . . . . . . . 504.7 Diagrama de navegacio . . . . . . . . . . . . . . . . . . . . . . . . 524.8 Diagrames de sequencia . . . . . . . . . . . . . . . . . . . . . . . 53

5 Prototipus 64

6 Canvis entre entregues 65

7 Index de figures 67

1

1 Introduccio

Aquest projecte de l’assignatura Enginyeria del Software II contribuira arealitzar una xarxa social per a estudiants universitaris que te com a finalitatprincipal donar un servei d’emmmagatzematge i publicacio de documents deconeixement universitari per poder compartir-los amb els demes usuaris de laxarxa.

En segon terme es proporcionara un espai de comunicacio per poder debatretemes relacionats amb les assignatures, les carreres, les escoles i/o les universi-tats.

El servei es donara a traves de web de manera que la interfıcie grafica esvisualitzara a traves de qualsevol dels navegadors multiplataforma existents.Aixo estalviara haver d’implementar-ho a diferents plataformes i s’orientara elprojecte al maxim numero de public possible.

2

2 Recursos

Per a realitzar aquest projecte seran necessaris una serie de recursos tanthumans com de recursos de software que permetin realitzar ls tasques que s’hande dur a terme.

2.1 Humans

El personal encarregar de la realitzacio d’aquest projecte som els membresdel grup de treball. Cadascun de nosaltres te un rol indicant quin sera el respo-sable dels aspectes associats a aquell rol, pero no sera l’unic que treballara enaquests aspectes, ja que tots els membres participaran en totes les parts.

Aixı doncs, el personal que desenvolupara aquest projecte esta format per:

• Cap de projecte: Alejandro Arangua

• Analista: Kenneth Alonso

• Dissenyador: Marc Reniu

• Documentador: Jose Antonio Manrique

• Consultor: Jonathan Clara

• Assessor extern: Toni Sellares

2.2 Software

En aquest apartat s’esmentaran les eines que s’utilitzaran per a dur a termeaquest projecte. Degut a que els diferents membres del grup utilitzem diversesplataformes i diversos sistemes operatius, s’han hagut de buscar software mul-tiplataforma. A mes de utilitzar programari de caracter lliure per estalviar elscostos addicionals del projecte.

2.2.1 Dropbox

Dropbox es un servei d’allotjament d’arxius multiplataforma en el nuvol. Elservei permet als usuaris emmagatzemar i sincronitzar arxius en lınia entreordinadors i compartir arxius i carpetes amb altres usuaris. S’ha utilitzat per ala comparticio i sincronitzacio d’arxius del projecte.

2.2.2 OpenOffice

3

Aquest software es un editor de textos que permetra crear tota la part de ladocumentacio, aixı com altres documents de text.

2.2.3 LATEX

LATEX es un sistema de composicio de texts, orientat especialment a la creaciode llibres, documents cientıfics i tecnics que continguin formules matematiques.S’ha fet servir per a redactar i maquestar els diversos informes del projecte.

2.2.4 Visual Paradigm for UML 6.0

Programa que permet crear tot tipus de diagrames orientats a l’analisi i dissenydel programari. Des del punt de vista empresarial dona la facilitat de documen-tar, dissenyar i analitzar mitjancant una serie de plantilles i formes que admetenprojectes d’administracio i de processos empresarials.

Aquest software permet crear diagrames per tal de descriure els conceptesmes rapidament i comunicar d’aquesta manera informacio amb major eficiencia.

2.2.5 GanttProject 2.5

Aquesta eina sera utilitzada per a la realitzacio de la planificacio del projecte, jaque permet crear diagrames on es poden afegir les tasques a realitzar i associar-hiels membres del grup.

2.2.6 Llenguatge, framework i cookies

Sobre el llenguatge a utilitzar i l’eina framework que es vol fer servir s’hadecidir fer servir:

• PHP per a les capes de model (insercio a la base de dades amb els patronsde persistencia) i les capes de control implementant les classes amb els seusatributs i metodes.

4

• PHP barrejat amb HTML per a la capa de vista.

A continuacio s’explicara mes detalladament com s’utilitzara el patro MVC:

• Capa Model: Tindra unes classes PHP dedicades a la manipulacio de labase de dades que disposaran de diversos metodes d’insercio, modificacio,eliminacio i de llistat.

• Capa Control: Tindra les classes del diagrama de classes implementades enPHP que contindran els metodes que necessitem, es a dir, implementarantota la logica de l’aplicacio.

• Capa View: Seran fitxers .php que s’encarregaran de:

– Rebre per parametre els objectes de la capa de control que es ne-cessitin i la capa de control s’encarregaria de recuperar i/o crear elsobjectes necessaris i enviar-los cap a la vista.

– “Pintar” la pagina

– Si la pagina ho requereix, pintar els formularis i emplenar-los amb elque calgui.

Per altra banda, s’ha decidit no usar cap framework de PHP com per exem-ple Symphony, Zend o d’altres ja que aquests ja implementen el patro MVC ino suposaria un gran problema ”traslladar” l’aplicacio a algun d’aquests fra-mewoks. A mes a mes, aquests frameworks farien implementar mes elementsdels que realment es necessiten.

A part del llenguatge en si, tambe s’usaran cookies per a poder guardarestats com per exemple si l’usuari te una sessio iniciada o quin idioma te escollit.

Les cookies en PHP es tracten com una variable glocal $_COOKIE, disponi-ble desde qualsevol fitxer o classe PHP. Es tracta d’una array, on cada posiciorepresenta una cookie diferent i que te un valor associat. Per inicialitzar unacookie nova, nomes cal fer l’assignacio amb el valor que volem que tingui. Perexemple, si volem crear una cookie que es digui hola i que tingui el valor 3 farem:

⇒$_COOKIE[’hola’]=3;

Per a obtenir el valor, es faria com amb un array normal. Per exemple, si esvol que la variable toni tingui el valor que te la cookie hola es fara de la seguentmanera:

⇒$toni=$_COOKIE[’hola’];

Pero cal tenir en compte algunes restriccions:

• No es pot accedir a l’array de cookies per un ındex numeric.

• Nomes es poden modificar cookies abans d’imprimir qualsevol codi htmlper pantalla en el fitxer php actual. Es a dir:Codi valid

5

� �1 <?php23 \${} COOKIE[ ’ time ’ ] = 3 ;45 echo ‘ ‘<h1>Bon dia</h1> ’ ’ ;67 ?> � �

Codi no valid� �1 <?php23 echo ‘ ‘<h1>Hola</h1> ’ ’ ;4 \${} COOKIE[ ’ e r r o r ’ ] = ’ s i ’ ;56 ?> � �

2.2.7 Forum

Per la part de forum es va decidir utilitzar alguna eina ja creada que alliberesdel treball d’haver d’implementar un de zero i, observant el mercat, es va decidiramb vBulletin.

vBulletin es un software que permet crear un forum a la nostra pagina web.Esta implementat en PHP, i necessita una base de dades MySQL.Permet gestionar grups d’usuaris, permisos individuals i dels grups, te un panellde control pels administradors (backend). Permet utilitzar SSL per fer seguresles pagines (com per exemple les de login i logout, pero aixo en principi es faradesde la web).

Es podra modificar el codi per tal de que funcioni amb els usuaris de lapagina web (es a dir, fara servir les mateixes taules de la BdD, cookies, el logines fara des de qualsevol dels llocs i servira per tots dos, etc.).

Es multi-llenguatge, entre els quals s’inclou els 4 d’Espanya i ofereix feedsRSS de cada fil.

Permet altres coses com: codi HTML en els posts, BB (emoticones entre d’al-tres coses), incrustar videos de YouTube i altres, avatars, editor WYSIWYG al’hora de postejar, reputacio dels usuaris (interessant per acoplar-li el nostresistema de reputacio).

Permet canviar i crear templates, per ajustar-lo a com es veu la resta de lapagina (templates en PHP i estils en CSS), permet plugins, i te una versio (jaincorporada) per mobils.

La llicencia estandard costaria 175 $.

6

2.3 Temporitzacio

El projecte esta programat per fer-lo en aproximadament 13 setmanes ambel que s’espera un treball de grup del voltant de les 300 hores. Per tant, cadamembre del grup hauria de dedicar una mitjana de 4 o 5 hores setmanals.

7

2.4 Planificacio

La planificacio del projectes es pot veure en el seguent diagrama de Gantt:

8

2.5 Reunions

A continuacio es mostraran totes les actes de reunio entre els integrants del’equip:

Figura 1: Reunio realitzada el 7 de marc

Figura 2: Reunio realitzada el 14 de marc

9

Figura 3: Reunio realitzada el 15 de marc

Figura 4: Reunio realitzada el 22 de marc

10

Figura 5: Reunio realitzada el 27 de marc

Figura 6: Reunio realitzada el 12 d’abril

11

Figura 7: Reunio realitzada el 17 d’abril

Figura 8: Reunio realitzada el 24 d’abril

12

Figura 9: Reunio realitzada el 2 de maig

13

Figura 10: Reunio realitzada el 8 de maig

Figura 11: Reunio realitzada el 16 de maig

14

2.6 Coordinacio del projecte

A continuacio s’explicaran les mesures adoptades per tal de coordinar be lafeina dels membres del projecte. Una de les eines que s’ha fet servir ha sigut elDropbox, pero no s’explicara en aquest apartat ja que s’ha explicat anteriormenten l’apartat d’eines. Aquest cop el que es preten transmetre son els metodespropis que s’han anat adoptant per consens durant el transcurs del projecte.

Per comencar es va acordar des del primer dia, que es farien actes de lesreunions cada cop que el grup es trobes. D’aquesta manera en tot moment elsmembres del grup han tingut nocions de quina feina s’havia de dur a terme cadacop. El grup s’ha donat conta que a mesura que avancava el projecte, s’havia deconcretar aspectes mes particulars de les tasques que s’havien de dur a terme, jaque al ser modificacions puntuals era mes difıcil recordar-se’n d’una trobada al’altra. Pero s’ha de dir que ha sigut una eina senzilla pero necessaria alhora d’e-laborar el projecte. Aquestes actes es poden consultar en l’apartat de Reunions.

Una altre mesura que s’ha adoptat cap al final del proces del projecte hasigut la de consensuar una notacio de fitxers i formats:

• ENTREGA FINAL

– FITXES CAS US

∗ MODEL PNG (FORMAT:MNomMetode.png)

∗ MODEL DOC

∗ VIEW PNG (FORMAT: VNomMetode.png)

∗ VIEW DOC

– DIAGRAMES CAS DUS

∗ PNG (FORMAT: CNom.png)

∗ VPP

– DIAGRAMES CLASSES

∗ PNG (FORMAT: ClassesBDD.png)

∗ VPP

– DIAGRAMES SEQ

∗ PNG (FORMAT: SNomMetode.png)

∗ VPP

– DIAGRAMA ER

∗ PNG (FORMAT: BDD ER.png)

∗ VPP

– DIAGRAMES WEB (CSS, NAVEGACIO, PHP HTML,...)

– GANTT (DiagramaGantt.png)

– LOGOS (FORMAT: ProgramaLogo.png)

– PROTOTIPUS

– REUNIONS (FORMAT: MM-DD-AA.png)

– DOCS

15

Finalment s’ha fet una taula amb totes les fases del projecte per poder tenirnocions del proces iteratiu incremental que s’ha dut a terme. Cada columna esrelaciona amb els diagrames, fitxes i documentacio que s’han elaborat. Cadafila es una tasca diferent sobre una funcionalitat del sistema. Les celes indiquenl’estat en que es troba el diagrama, fitxa o informe d’aquella tasca, i si cal o nofer-ho. D’aquesta manera cada cop que un membre de l’equip ha acabat unatasca, ho pot indicar en la cel·la pertinent, aixı com afegir noves tasques peractualitzar qualsevol funcionalitat. Un cop el membre ha acabat de realitzaruna tasca, posa el nom en una altra columna per tal de deixar constancia dequi ha sigut la ultima persona que ha modificat aquella tasca.

Figura 12: Imatge de la graella de tasques

16

Figura 13: Imatge de la graella de tasques

17

3 Requeriments del sistema

3.1 Requeriments funcionals

El nostre projecte esta format per dues parts ben diferenciades:

3.1.1 Publicacio de documents

La primera orientada a la publicacio de documents.

• Permetra penjar, compartir i modificar apunts.

• Els documents estaran distribuıts per assignatures, carreres i universitats.

• El requeriment mınim per a poder consultar els apunts es compartir-nealgun, a mode de que no hi hagi gent de que no utilitzi la de forma altruista.

• Els tipus de documents que s’hi podran publicar seran:

– Tipus: Apunts, Treballs, Examens, Practiques, Articles, PFC, Pa-pers

– Externs: Links, Youtubes

Sobre la publicacio d’apunts, es permetra la pujada d’arxius amb diferentsextensions:

– Extensions: .doc, .odt, .pdf. que no es podran modificar.

– Crear documents directament a la web que si es podran modificar.

• Totes els documents es podran comentar per donar la opinio directamenta la pagina del document sense entrar al forum per corregir quelcom queels usuaris no estiguin d’acord.

• Valoracions:

– Es permet valorar els documents.

– La valoracio de documents sera la base per diferenciar si son o noutils.

3.1.2 Xarxa social

La segona part estara orientada a debatre:

• Permetra als usuaris fer comentaris sobre els diversos elements de les uni-versitats, escoles, carreres o assignatures.

• Permetra als usuaris crear nous temes i fils de discussio situats dins deOfftopic.

• Valoracions:

– Es permet valorar els comentaris.

– Es permet valorar fils iniciats per usuaris.

En quan a volum d’usuaris permesos, es disposara d’un sistema suficientmentpotent com per gestionar tots els usuaris universitaris a nivell estatal.

18

3.2 Requeriments no funcionals

3.2.1 Idiomes

L’aplicacio estara disponible nomes en quatre idiomes: castella, catala, ga-llec i euskera, ja que es preveu que l’aplicacio estigui disponible exclusivamenten l’ambit estatal per temes de estructuracio d’estudis. Tot i aixo, estara pre-parada per si mes endavant es vol ampliar la seva disponibilitat a altres zonesi/o idiomes.

Pel que fa a l’aplicacio, l’eleccio d’idioma vindra donat per una banderetaque sera un link de la forma:� �

1 <a h r e f = ‘ ‘ index . php? i d i oma t r i a t=f r−FR’ ’><img2 s r c = ‘ ‘ bandera\ {} f r an c e s a . png ’ ’ a l t = ‘ ‘ bandera\ {} f rancesa ’ ’3 name= ‘ ‘ Frances ’ ’ /></a> � �

Llavors, en el fitxer index.php, en algun lloc abans de comencar a escriure resHTML hi haura:

⇒$idioma = $_GET[’idioma_triat’];

⇒$_COOKIE[’idioma’] = $idioma;

⇒$ruta_fitxers_idiomes = ’language/’ . $_COOKIE[’idioma’] .

’/missatges.properties’;

⇒set_locale(ruta_fitxers_idiomes);

⇒echo ’<h1>web.bon_dia</h1>’;

Aixı, a dins de la carpeta language tindrem les carpetes: es-ES, ca-ES, en-GB, fr-FR, etc... A dins de cada carpeta hi haura un fitxer missatges.properties,on hi haura aquest contingut:

⇒web.bon_dia=Buenos dias

⇒web.bon_dia=Bon dia

3.2.2 Control d’usuaris

• Per tal de visualitzar els continguts de la xarxa (les publicacions delsusuaris i les pagines), els usuaris hauran d’estar registrats.

• Nomes es poden registrar usuaris majors de 18 anys.

• En principi, el projecte esta orientada a estudiants universitaris. Tot iaixo, durant el registre no es fa cap control de que el nou usuari siguirealment estudiant d’una universitat, ja que seria massa complicat.

19

• Els usuaris poden visualitzar els documents publicats per altres usuarisnomes si ells han creat o penjat com a mınim un document.

3.2.3 Dispositius

L’aplicacio estara pensada per funcionar principalment en un ordinador, peroexistira la possibilitat de fer servir dispositius mobils, mitjancant un programa.Les funcionalitats de “Apunts” es veuran limitades a consulta, i les de xarxasocial, estaran completes

3.3 Diagrames de casos d’us

Figura 14: Diagrama de cas d’us general de l’Usuari

20

Figura 15: Diagrama de cas d’us de la gestio de conta de l’Usuari

21

Figura 16: Diagrama de cas d’us del tractament de documents de l’Usuari

22

Figura 17: Diagrama de cas d’us del forum

23

Figura 18: Diagrama de cas d’us d’Administrador24

3.4 Fitxes de cas d’us

S’ha decidit dividir les fitxes de cas d’us en model i vista per la gran di-ferencia que hi ha entre tots dos grups. En el cas del model fa referencia a lainteraccio del sistema amb la base de dades (obtenir, inserir, modificar, etc),mentres que les fitxes de la vista es refereixen a les fitxes que estan orientadesa la part grafica (interfıcie grafica, interaccio amb l’usuari, etc).

A mes a mes, tambe s’han dividit algunes fitxes en visio usuari i admi-nistrador per a diferenciar clarament el que faria un usuari normal (que eslogueja i interactua amb la pagina) i el que faria un administrador (feines decrear, modificar i eliminar entrades del sistema).

3.4.1 Fitxes de casos d’us model

En aquest apartat veurem les fitxes de cas d’us del model que, com s’hacomentat abans, fan referencia a la interaccio del sistema amb la base de dades.

Figura 19: Fitxa de cas d’us Registrar-se (Model)

Aquesta fitxa fa referencia a la figura 36 de la Vista

25

Figura 20: Fitxa de cas d’us Donar-se de baixa (Model)

Aquesta fitxa fa referencia a la figura 37 de la Vista

Figura 21: Fitxa de cas d’us Editar dades personals (Model)

Aquesta fitxa fa referencia a la figura 38 de la Vista

26

Figura 22: Fitxa de cas d’us Visualitzar usuari (Model)

Figura 23: Fitxa de cas d’us Subscriure’s (Model)

Aquesta fitxa fa referencia a la figura 40 de la Vista

27

Figura 24: Fitxa de cas d’us Desubscriure’s (Model)

Aquesta fitxa fa referencia a la figura 41 de la Vista

Figura 25: Fitxa de cas d’us Afegir aportacio (Model)

Aquesta fitxa fa referencia a la figura 42 de la Vista

28

Figura 26: Fitxa de cas d’us Modificar aportacio (Model)

Aquesta fitxa fa referencia a la figura 43 de la Vista

Figura 27: Fitxa de cas d’us Visualitzar aportacio (Model)

29

Figura 28: Fitxa de cas d’us Cerca aportacio (Model)

Aquesta fitxa fa referencia a la figura 44 de la Vista

Figura 29: Fitxa de cas d’us Valorar aportacio (Model)

Aquesta fitxa fa referencia a la figura 45 de la Vista

30

Figura 30: Fitxa de cas d’us Afegir comentari (Model)

Aquesta fitxa fa referencia a la figura 46 de la Vista

Figura 31: Fitxa de cas d’us Valorar comentari (Model)

Aquesta fitxa fa referencia a la figura 47 de la Vista

31

Figura 32: Fitxa de cas d’us Eliminar comentari (Model)

Aquesta fitxa fa referencia a la figura 48 de la Vista

Les seguents tres fitxes de cas d’us de Crear, Editar i Eliminar (figures 33, 34i 35) serveixen per: Assignatura, Carrera, Facultat, Universitat, Poblacio, Em-presa, Anunci, Usuari, Aportacio i Comentari

Figura 33: Fitxa de cas d’us Crear assignatura (Model)

32

Figura 34: Fitxa de cas d’us Editar assignatura (Model)

Figura 35: Fitxa de cas d’us Eliminar assignatura (Model)

33

3.4.2 Fitxes de casos d’us vista

En aquest apartat veurem les fitxes de cas d’us de la vista.

Figura 36: Fitxa de cas d’us Registrar-se (Vista)

Aquesta fitxa fa referencia a la figura 19 del Model

34

Figura 37: Fitxa de cas d’us Donar-se de baixa (Vista)

Aquesta fitxa fa referencia a la figura 20 del Model

Figura 38: Fitxa de cas d’us Editar dades personals (Vista)

Aquesta fitxa fa referencia a la figura 21 del Model

35

Figura 39: Fitxa de cas d’us Visualitzar ultimes aportacions (Vista)

Figura 40: Fitxa de cas d’us Subscriure’s (Vista)

Aquesta fitxa fa referencia a la figura 23 del Model

36

Figura 41: Fitxa de cas d’us Des-subscriure’s (Vista)

Aquesta fitxa fa referencia a la figura 24 del Model

Figura 42: Fitxa de cas d’us Afegir aportacions (Vista)

Aquesta fitxa fa referencia a la figura 25 del Model

37

Figura 43: Fitxa de cas d’us Editar aportacions (Vista)

Aquesta fitxa fa referencia a la figura 26 del Model

Figura 44: Fitxa de cas d’us Cercar aportacions (Vista)

Aquesta fitxa fa referencia a la figura 28 del Model

38

Figura 45: Fitxa de cas d’us Valorar aportacions (Vista)

Aquesta fitxa fa referencia a la figura 29 del Model

Figura 46: Fitxa de cas d’us Afegir comentari (Vista)

Aquesta fitxa fa referencia a la figura 30 del Model

39

Figura 47: Fitxa de cas d’us Valorar comentari (Vista)

Aquesta fitxa fa referencia a la figura 31 del Model

Figura 48: Fitxa de cas d’us Eliminar comentari (Vista)

Aquesta fitxa fa referencia a la figura 32 del Model

40

Figura 49: Fitxa de cas d’us Loguejar (Vista)

Figura 50: Fitxa de cas d’us Desloguejar (Vista)

41

Figura 51: Fitxa de cas d’us Triar idioma (Vista)

42

Figura 52: Fitxa de cas d’us Contactar Administradors (Vista)

43

4 Analisi i disseny del sistema

4.1 Diagrama de classes de la capa de control

Figura 53: Diagrama de classes de la capa de control

44

Explicacio diagrama de classes:

• Poblacio - Conjunt conjunt de poblacions.Mante un llistat de les universitats presents en aquesta poblacio. PErmetla consulta d’estudiants (usuaris) segons municipi.

• Universitat - Conjunt d’universitats d’una poblacioMante un llistat de les facultats que poseeix.

• Facultat - Conjunt de facultats d’una universitat.Mante un llistat de carreres que imparteix.

• Carrera - Conjunt de carreres d’una facultat.Mante un llistat d’assignatures que imparteix. Permet la consulta d’es-tudians (usuaris) segons la carrera o carreres que hagi impartit o estiguiduent a terme.

• Assignatura - Conjunt d’assignatures.Cada assignatura disposa d’un llistat d’aportacions fetes per usuaris.

• Usuari - Conjunt d’usuaris del sistema.Es disposa de dues categories: user i admin.Un user pot crear aportacions, comentaris i dur a terme una valoraciod’ells.Un admin pot realitzar les mateixes operacions que un user, a mes d’ope-racions d’administracio (crear instancies de poblacio, universitat, facultat,carrera i assignatura). Tambe pot suplantar un user per modificar, elimi-nar aportacions i/o comentaris. Tambe pot eliminar users del sistema.Casa usuari (user o admin) disposa d’un llistat de subscripcions a altresusuaris que lo permet coneixer noves aportacions o comentaris d’aquests.Cada usuari disposa d’una puntuacio segons la valoracio de les seves apor-tacions i comentaris. Mante un llistat amb les seves aportacions al sistema.Cada usuari mante una relacion amb poblacio i carrera.

• Aportacio - Conjunt d’aportacions d’un usuari.Poder ser de diferent tipus: videos, articles, escrits, etc. i estan identificatsamb un idioma, per poder filtrar-los per aquesta caracteristica. Mante unllistat de comentatis i disposa d’una valoracio.

• Comentari - Conjunt de comentaris d’una aportacio.Es guarda en format text i disposa d’una valoracio.

• Empresa - Conjunt d’empreses que s’anuncien al sistema.Mante un llistat d’anuncis que ha col·locat al portal i permet el calcul dela factura segons el conjunt d’anuncis que emet i el preu d’aquests.

• Anunci - Conjunt d’anuncis que ha afegit una empresa.Les dades que s’han de mostrar es guarden segons una URL. Cada anuncidisposa d’un preu que determina la frequencia o la prioritat amb que seraemes al portal. Mante una data inici i una data fi que permet controlarl’emissio d’aquest i realitzar altres operacions.

45

4.2 Base de dades

Figura 54: Diagrama Entitar-Relacio de la base de dades

46

4.3 Diagrama Web

Figura 55: Diagrama Web

47

L’estructura especificada en el diagrama web esta ideada de tal manera que enun principi tot serien fitxers, pero si en un futur s’incorpora un motor web quetambe es basi en php com el Symphony, l’estructura conceptual i la relacio en-tre moduls serien els mateixos, l’unica diferencia es que internament els arxiuss’estructurarien amb els templates i carpetes que exigeix el gestor en concret.

Per tal d’estructurar i deslligar l’aspecte visual del contingut i poder manipu-lar una cosa independentment de l’altre s’ha fet servir HTML5 i CSS3. El codiPHP roman incrustat sobre el HTML5 que es fa servir com a suport i base delcodi PHP i dels continguts. El XML es fa servir per a continguts estructuratsque requereixin de mes informacio com podrien ser la jerarquia de comentaris.

Els fitxers mostrats en els diagrames que tenen extensio PHP es sobreentenque contenen com a base HTML5, pero com aquest ultim nomes es fa servir coma estructura elemental i de suport no es plasma explıcitament en el diagrama.

La forma en com es relacionen els fitxers php (amb html5 de base) amb elscss3 s’ha organitzat en forma d’arbre. Per aquesta rao conceptualment es potobservar un comportament d’un patro Composite en l’estructuracio dels fitxerscss i php.

Per tal de fer els accessos a la base de dades, s’ha plasmat un fitxer ano-menat “Acces base de dades” que representa la capa de control que s’encarregade traduir els events de la pagina web generats pel php amb la base de dadesque conte el model del projecte. Aquest conceptualment es podria arribar aentendre com un patro Facade.

Per altra banda el JavaScript es podria interpretar tambe conceptualmentcom un patro Observer ja que cada cop que rep una notificacio de canvi d’idio-ma o de refresc d’alguns dels moduls de la web s’encarrega d’actualitzar tot alloque es necessari en resposta a l’event. Per exemple el modul de LastPub quecorrespon als ultims documents que s’han penjat requereix un acces a la basede dades per fer efectiu el llistat.

Tots els arxius son fills de dos arxius base que s’anomenen Main.php i Ge-neral.css com es pot veure en el diagrama web. En la figura 56 es pot observarmes detingudament de quina manera s’estructuren les classes i les IDs de CSS3per tal de repartir les responsabilitats de l’aspecte visual de tal manera que elcodi sigui mınim, reutilitzable i coherent.

Com es pot veure en la figura del diagrama web, s’ha ideat una notacioamb la corresponent llegenda per tal de poder expressar les relacions en l’entornconcret que s’esta utilitzant per al projecte.

48

4.4 Estructura conceptual CSS

Figura 56: Estructura Conceptual CSS

49

4.5 Estructura conceptual HTML5 PHP

Figura 57: Estructura Conceptual HTML5 + PHP

4.6 Control i validacio de formularis

A continuacio s’explicara amb detall del proces a seguir durant el controli validacio dels diferents formularis de l’aplicacio. Estan dividits en formularisjavascript (en la capa de vista) i en formularis PHP (en la capa de model):

• Formulari de registre d’un usuari

– Javascript

∗ Comprovar que el nom d’usuari tingui entre 6 i 20 caracters dellargada.

∗ Comprovar que el nom d’usuari estigui format per lletres (minusculesi majuscules), dıgits, guions baixos i guions normals.

∗ Comprovar que la contrasenya tingui entre 6 i 30 caracters dellargada.

∗ Comprovar que la contrasenya estigui formada per caracters AS-CII, i que no tingui espais.

∗ Comprovar que les dues contrasenyes son iguals.

∗ Data de naixement

50

· Seran tres desplegables que, en funcio del mes que hi hagitriat, es mostraran 28, 30 o 31 dies en el desplegable delsdies, i en funcio del mes i de l’any, es mostraran 29 dies.

· Comprovar que sigui major de 18 anys.

∗ Comprovar que l’email te un format correcte. Fer matching ambl’expressio regular: [a-zA-Z0-9|’.’|’ ’|’-’|’$’]+ ’@’ [a-zA-Z]+ ’.’ [a-zA-Z]+ (funcio de javascript string.regexp(expressio); )

∗ Comprovar que els camps: nom, cognoms, nom d’usuari, email,password, data de naixement i poblacio estan omplerts (de fet,com que nom d’usuari, email i password ja hem comprovat quetinguin una llargada, i data de naixement i poblacio seran menusdesplegables, nomes caldra comprovar el nom i els cognoms).

∗ Comprovar que ha llegit i accepta els termes i condicions.

– PHP

∗ Comprovar que el nom d’usuari no existeixi ja.

∗ Comprovar que l’email no existeixi ja.

• Formulari de login

– Javascript

∗ Comprovar que els camps email i contrasenya estan omplerts.

∗ Comprovar que l’email te un format correcte.

∗ Comprovar que la contrasenya te entre 6 i 30 caracters i estaformada pels caracters permesos.

– PHP

∗ Comprovar que l’email existeixi.

∗ Comprovar que l’email i la contrasenya (codificada) concorden(es a dir, que el mateix registre de la BBDD que te aquest emailtingui aquesta contrasenya).

• Formulari per afegir nova aportacio

– Javascript

∗ Comprovar que els seguents camps s’hagin omplert: nom, tipusd’aportacio (radiobutton), assignatura (menu desplegable).

∗ En cas de que s’hagi seleccionat una aportacio que sigui de tipusdoc, powerpoint, pdf o excel, comprovar que s’ha seleccionat unarxiu per pujar, i que correspon amb l’extensio.

∗ En cas de que s’hagi seleccionat una aportacio de tipus link aweb o link a youtube, comprovar que s’ha omplert el camp “link”amb una URL valida (AJAX: anar-hi i comprovar que retornaun missatge HTTP 200 - OK).

51

4.7 Diagrama de navegacio

Figura 58: Diagrama de navegacio

52

4.8 Diagrames de sequencia

Figura 59: Diagrama de sequencia Registrar-se

53

Figura 60: Diagrama de sequencia Donar-se de baixa

54

Figura 61: Diagrama de sequencia Editar preferencies personals

55

Figura 62: Diagrama de sequencia Loguejar

Figura 63: Diagrama de sequencia Desloguejar

Figura 64: Diagrama de sequencia Visualitzar Usuari

56

Figura 65: Diagrama de sequencia Subscriure’s

Figura 66: Diagrama de sequencia Des-subscriure’s

Figura 67: Diagrama de sequencia Afegir Aportacio

57

Figura 68: Diagrama de sequencia Editar Aportacio

Figura 69: Diagrama de sequencia Eliminar Aportacio

Figura 70: Diagrama de sequencia Valorar Aportacio

58

Figura 71: Diagrama de sequencia Cercar Aportacio

Figura 72: Diagrama de sequencia Visualitzar ultimes aportacions

Figura 73: Diagrama de sequencia Afegir Comentari

59

Figura 74: Diagrama de sequencia Eliminar Comentari

Figura 75: Diagrama de sequencia Eliminar Usuari

Figura 76: Diagrama de sequencia Crear assignatura

60

Figura 77: Diagrama de sequencia Editar assignatura

Figura 78: Diagrama de sequencia Eliminar assignatura

61

Figura 79: Diagrama de sequencia Mostrar pagina principal

Figura 80: Diagrama de sequencia Contactar amb adminitradors

62

Figura 81: Diagrama de sequencia Triar idioma

63

5 Prototipus

Figura 82: Pantalla de login

Figura 83: Prototipus de l’aplicacio

64

6 Canvis entre entregues

Primera entrega - Pla de projecte i analiside requeriments inicials

En aquesta primera entrega (la mes voluminosa) es va afegir:

• Pla de projecte.

• Analisis de requeriments inicials.

• Diagrames de casos d’us.

• Fitxes de casos d’us.

• Primers aproximacions a diagrames de classes i d’Entitat/Relacio.

Segona entrega - Requeriments i analisi

S’ha afegit:

• Explicacio de frameworks emprats i/o estudiats.

• Explicacio detallada de la decisio de subdelegar el forum.

• Nous diagrames (navegacio, CSS conceptual, etc).

S’ha modificat:

• Diagrama de classes per un diagrama mes en una notacio mes personalit-zada i aclaraıdora.

• S’han mostrat totes les imatges com a figures, per un referenciat mes rapidi precıs.

Tercera entrega - Disseny

S’ha afegit:

• Actes de reunions.

• Noves explicacions detallades en l’acta de reunio de la figura 9.

• Explicacio detallada del diagrama de classes.

• Diagrames de sequencia.

S’ha modificat:

• Ordre de les fitxes de cas d’us (primer les de usuari (vista) seguides perles d’informatic (model)).

• Modificacio de diversos diagrames.

Quarta entrega - Final

S’ha afegit:

65

• Diagrames de sequencia

• Diverses explicacions

• Diagrames de casos d’us

• Explicacions de treball en equip

• Manual d’usuari

S’ha modificat:

• Fitxes de casos d’us, tant de model com de vista. Aixi com les relacionsque hi ha entre fitxes d’una part i de l’altra.

• Diversos diagrames

66

7 Index de figures

Index de figures

1 Reunio realitzada el 7 de marc . . . . . . . . . . . . . . . . . . . 92 Reunio realitzada el 14 de marc . . . . . . . . . . . . . . . . . . . 93 Reunio realitzada el 15 de marc . . . . . . . . . . . . . . . . . . . 104 Reunio realitzada el 22 de marc . . . . . . . . . . . . . . . . . . . 105 Reunio realitzada el 27 de marc . . . . . . . . . . . . . . . . . . . 116 Reunio realitzada el 12 d’abril . . . . . . . . . . . . . . . . . . . . 117 Reunio realitzada el 17 d’abril . . . . . . . . . . . . . . . . . . . . 128 Reunio realitzada el 24 d’abril . . . . . . . . . . . . . . . . . . . . 129 Reunio realitzada el 2 de maig . . . . . . . . . . . . . . . . . . . 1310 Reunio realitzada el 8 de maig . . . . . . . . . . . . . . . . . . . 1411 Reunio realitzada el 16 de maig . . . . . . . . . . . . . . . . . . . 1412 Imatge de la graella de tasques . . . . . . . . . . . . . . . . . . . 1613 Imatge de la graella de tasques . . . . . . . . . . . . . . . . . . . 1714 Diagrama de cas d’us general de l’Usuari . . . . . . . . . . . . . . 2015 Diagrama de cas d’us de la gestio de conta de l’Usuari . . . . . . 2116 Diagrama de cas d’us del tractament de documents de l’Usuari . 2217 Diagrama de cas d’us del forum . . . . . . . . . . . . . . . . . . . 2318 Diagrama de cas d’us d’Administrador . . . . . . . . . . . . . . . 2419 Fitxa de cas d’us Registrar-se (Model) . . . . . . . . . . . . . . . 2520 Fitxa de cas d’us Donar-se de baixa (Model) . . . . . . . . . . . 2621 Fitxa de cas d’us Editar dades personals (Model) . . . . . . . . . 2622 Fitxa de cas d’us Visualitzar usuari (Model) . . . . . . . . . . . . 2723 Fitxa de cas d’us Subscriure’s (Model) . . . . . . . . . . . . . . . 2724 Fitxa de cas d’us Desubscriure’s (Model) . . . . . . . . . . . . . . 2825 Fitxa de cas d’us Afegir aportacio (Model) . . . . . . . . . . . . . 2826 Fitxa de cas d’us Modificar aportacio (Model) . . . . . . . . . . . 2927 Fitxa de cas d’us Visualitzar aportacio (Model) . . . . . . . . . . 2928 Fitxa de cas d’us Cerca aportacio (Model) . . . . . . . . . . . . . 3029 Fitxa de cas d’us Valorar aportacio (Model) . . . . . . . . . . . . 3030 Fitxa de cas d’us Afegir comentari (Model) . . . . . . . . . . . . 3131 Fitxa de cas d’us Valorar comentari (Model) . . . . . . . . . . . . 3132 Fitxa de cas d’us Eliminar comentari (Model) . . . . . . . . . . . 3233 Fitxa de cas d’us Crear assignatura (Model) . . . . . . . . . . . . 3234 Fitxa de cas d’us Editar assignatura (Model) . . . . . . . . . . . 3335 Fitxa de cas d’us Eliminar assignatura (Model) . . . . . . . . . . 3336 Fitxa de cas d’us Registrar-se (Vista) . . . . . . . . . . . . . . . 3437 Fitxa de cas d’us Donar-se de baixa (Vista) . . . . . . . . . . . . 3538 Fitxa de cas d’us Editar dades personals (Vista) . . . . . . . . . 3539 Fitxa de cas d’us Visualitzar ultimes aportacions (Vista) . . . . . 3640 Fitxa de cas d’us Subscriure’s (Vista) . . . . . . . . . . . . . . . 3641 Fitxa de cas d’us Des-subscriure’s (Vista) . . . . . . . . . . . . . 3742 Fitxa de cas d’us Afegir aportacions (Vista) . . . . . . . . . . . . 3743 Fitxa de cas d’us Editar aportacions (Vista) . . . . . . . . . . . . 3844 Fitxa de cas d’us Cercar aportacions (Vista) . . . . . . . . . . . . 3845 Fitxa de cas d’us Valorar aportacions (Vista) . . . . . . . . . . . 39

67

46 Fitxa de cas d’us Afegir comentari (Vista) . . . . . . . . . . . . . 3947 Fitxa de cas d’us Valorar comentari (Vista) . . . . . . . . . . . . 4048 Fitxa de cas d’us Eliminar comentari (Vista) . . . . . . . . . . . 4049 Fitxa de cas d’us Loguejar (Vista) . . . . . . . . . . . . . . . . . 4150 Fitxa de cas d’us Desloguejar (Vista) . . . . . . . . . . . . . . . . 4151 Fitxa de cas d’us Triar idioma (Vista) . . . . . . . . . . . . . . . 4252 Fitxa de cas d’us Contactar Administradors (Vista) . . . . . . . 4353 Diagrama de classes de la capa de control . . . . . . . . . . . . . 4454 Diagrama Entitar-Relacio de la base de dades . . . . . . . . . . . 4655 Diagrama Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4756 Estructura Conceptual CSS . . . . . . . . . . . . . . . . . . . . . 4957 Estructura Conceptual HTML5 + PHP . . . . . . . . . . . . . . 5058 Diagrama de navegacio . . . . . . . . . . . . . . . . . . . . . . . . 5259 Diagrama de sequencia Registrar-se . . . . . . . . . . . . . . . . . 5360 Diagrama de sequencia Donar-se de baixa . . . . . . . . . . . . . 5461 Diagrama de sequencia Editar preferencies personals . . . . . . . 5562 Diagrama de sequencia Loguejar . . . . . . . . . . . . . . . . . . 5663 Diagrama de sequencia Desloguejar . . . . . . . . . . . . . . . . . 5664 Diagrama de sequencia Visualitzar Usuari . . . . . . . . . . . . . 5665 Diagrama de sequencia Subscriure’s . . . . . . . . . . . . . . . . 5766 Diagrama de sequencia Des-subscriure’s . . . . . . . . . . . . . . 5767 Diagrama de sequencia Afegir Aportacio . . . . . . . . . . . . . . 5768 Diagrama de sequencia Editar Aportacio . . . . . . . . . . . . . . 5869 Diagrama de sequencia Eliminar Aportacio . . . . . . . . . . . . 5870 Diagrama de sequencia Valorar Aportacio . . . . . . . . . . . . . 5871 Diagrama de sequencia Cercar Aportacio . . . . . . . . . . . . . . 5972 Diagrama de sequencia Visualitzar ultimes aportacions . . . . . . 5973 Diagrama de sequencia Afegir Comentari . . . . . . . . . . . . . 5974 Diagrama de sequencia Eliminar Comentari . . . . . . . . . . . . 6075 Diagrama de sequencia Eliminar Usuari . . . . . . . . . . . . . . 6076 Diagrama de sequencia Crear assignatura . . . . . . . . . . . . . 6077 Diagrama de sequencia Editar assignatura . . . . . . . . . . . . . 6178 Diagrama de sequencia Eliminar assignatura . . . . . . . . . . . . 6179 Diagrama de sequencia Mostrar pagina principal . . . . . . . . . 6280 Diagrama de sequencia Contactar amb adminitradors . . . . . . 6281 Diagrama de sequencia Triar idioma . . . . . . . . . . . . . . . . 6382 Pantalla de login . . . . . . . . . . . . . . . . . . . . . . . . . . . 6483 Prototipus de l’aplicacio . . . . . . . . . . . . . . . . . . . . . . . 64

68