INDICE

1 LAEMPRESA1.1 ESTUDIODELCLIENTE1.2 PROGRAMADENECESIDADES

2 PLANIFICACIÓN

2.1 METODOLOGIADETRABAJO2.2 PLANINGYFASESDEDESARROLLO

3 ESTUDIOYANALISISFUNCIONAL

3.1 ANALISISDETAREAS

4 ARQUITECTURADELAAPLICACIÓN4.1 MVC4.2 SERVIDORYCONEXIONES4.3 ESTRUCTURADELAAPLICACIÓN

5 MODELO

5.1 CONSULTADEDATOS5.2 BASEDEDATOS

6 VISTA

6.1 FRONT-ENDPUBLICA6.2 FRONT-ENDPRIVADA

7 CONTROLADOR

8 BIBLIOGRAFIAYMATERIALGRÁFICO

1 LAEMPRESA1.1 Estudiodelcliente

Setratadeunaaplicaciónparalagestiónintegraldelaligadef7delRayoMajadahondaCF que se celebra anualmente en las instalaciones municipales de la oliva(Majadahonda)yquecuentaconmásde1.000participantesrepartidosen72equipos.Elcampeonatocuentacon4divisionesy6gruposentotal.El campeonato dura 10meses durante los cuales se celebran 3 torneos diferentes,Apertura,ClausurayCopa.Alfinaldecadacampeonatoserealizanascensosydescensosentrelosdiferentesgrupos.Todoestoseacompañacon2torneosmásadicionalesportemporada,unoanivelcolectivodenominadoTrofeoa laDeportividadyotroanivelindividualqueeselTrofeoPichichi.AlfinalizareltorneoClausurasedisputaelcampeonatodecopaenelcuallos72equiposson repartidosen3gruposydisputanpartidosaeliminatoriadirectahastaque soloqueden3campeones.CadaunorecibeuntrofeoalfinaldeltorneoysoninvitadosauntorneonacionalquesecelebracadaañoenSanSebastiánalqueacudenequiposdetodaEspaña.

1.2Programadenecesidades

ActualmentetodoelcontrolserealizaatravésdeunahojaprogramadadeExcelylaideade la aplicaciónes crearunaplataformaunificadapara la gestiónde la liga yconsultadelosdatosactualizadosporpartedelosparticipantesdelaliga.Lagestióndeestetorneorequieredeunacomplejaaplicaciónparagestionartodaslassituacioneshabitualesquesucedenenlacompetición:controldegoleadores,sanciones,amonestaciones,clasificaciones…Apartedebepoderserconsultadademanerarápiday clara por una gran cantidad de usuarios de diferentes niveles de conocimientosinformáticos.Lasprincipalesfuncionesdebenser:1. Mostrarclasificacionesdecadagrupoactualizadasalaultimajornadadisputada.2. Posibilidaddevisualizarelrankingdegoleadoresdivididosporgrupos3. Mostrarlosjugadoressancionadosparalajornadasiguiente.4. Rankingeneltorneoaladeportividad.5. Un panel de administración desde el cual se pueda gestionar todos los datos

necesariosparaelcorrectofuncionamientodelaliga.

2PLANIFICACIÓN2.1.Metodologíadetrabajolametodologíaqueempleadaparaeldesarrollodelproyectoeseldiseñocentradoenelusuario(DCU).El diseño centrado en el Usuario DCU es unametodología de trabajo de diseño deinterfaces basadas en la investigación y participación de quienes serán los usuariosfinales de la aplicación. El DCU no solo evalúa las soluciones de diseño a partir deusuariosparaquelasinterfacesseadaptenaellos,sinoquetambiénanalizaelvalordelproductoquesepretendecrear,ysucapacidadpararesolvernecesidadesreales.Queeseldiseñocentradoenelusuario?El diseño centrado en el usuario es una aproximación al diseño de productos yaplicacionesquesitúaalusuarioenelcentrodetodoelproceso.AsípodemosentenderelDCUcomounafilosofíacuyapremisaesque,paragarantizareléxitodeunproducto,hay que tener en cuenta al usuario en todas las fases del diseño. Además, tambiénpodemosentenderelDCUcomometodologíadedesarrollo:unaformadeplanificarlosproyectos y un conjunto de métodos que se pueden utilizar en cada una de lasprincipalesfasesdeldesarrollodelaaplicación.2.2Planingyfasesdedesarrollo.Se plantea el desarrollo de la aplicación en dos fases. La primera fase englobaría eldesplieguedelaaplicaciónpublicadeconsultadedatosporpartedelosparticipantesdelcampeonato,asícomosugestióndesdeelpaneldeadministracióndelosdatos.Yun segunda fase en la que se actualizaría la aplicación publica con la posibilidad derealizarlasinscripcionesdenuevosjugadoresylaposibilidaddevisualizarlawebdesdedispositivosmóviles(ResponsiveDesign).Este proyecto corresponde al despliegue de la primera fase descrita en el párrafoanterior.

3ESTUDIOYANALISISFUNCIONAL3.1análisisdetareasElobjetivoesdefinirdeunaformaclaraysencillalastareasquesevanarealizar,ylosfactoresnecesariosparallevarlasacabo.Lasprincipalestareasquedeberealizarlaaplicaciónsonlossiguientes:

• Carga de resultados de los 36 partidos de cada una de las 11 jornadas queconforman cada uno de los torneos que se celebran (Apertura y Clausura).(privada)

• Asignacióndepuntosconformealosresultadosalmacenados.(privada)• Pintado de las clasificaciones actualizadas conforme a los resultados

introducidos.(publica)• Introduccióndegoleadoresporcadapartidodisputado.(privada)• Pintadodelosrankingdegoleadores.(publica)• Asignacióndesancionadosdecadajornada.(privada)• Pintadodelassancionesindividualesocolectivas(publica)• Introduccióndepuntosporequiposparaeltorneoaladeportividad.• Pintadodelrankingdeltrofeoaladeportividad(publica)

Explicacionesdelasdiferentestareas.Tarea1:Desdeelpaneldeadministraciónsesolicitamedianteunformulariosencillolabúsquedadelospartidosparauntorneoyjornadadeterminada.PormediodeAJAXrecibimoslarespuesta del servlet encargadode atacar la BD con la consulta. Estemismo servletrespondepintandoel listadoen lamismapaginaque realiza la consulta sin volver arecargartodalaweb.Tarea2:Esta tarea arranca a petición del servlet encargado de guardar los resultadosintroducidosenelapartadoanterior.Esta funciónevalúael resultado introducidoencadapartidoyasignapuntuacionesalosdiferentesequipossiguiendolasinstruccionesdadas(ReglamentoDeportivo).Tarea3:Esta tarea es cargada en el momento que el usuario accede a la aplicación web.MedianteunarchivoJSPserealizaunabúsquedaenlabasededatosysemuestraelresultadoordenadoporgrupos,puntos,diferencialdegolesygolesafavor.Estafunciónesautomáticaynorequieredeacciónporelusuario.Seaccededesdelapartepublicadelawebaplication.Tarea4:Estatareaesaccesibledesdeelpaneldeadministración.Elfuncionamientoessimilaraldelaintroducciónderesultadosdescritaenlaprimeratarea.Medianteunformulario

sencillo se cargan los resultados de una jornada en concreto. Una vez cargados esposibleirañadiendolosgoleadorescorrespondientesacadapartido.Laestructuradeesta función si esmás compleja. Cada vez que se asigna un goleador se realiza unbúsquedadelosjugadoresquecomponenelequipoparamostrarundesplegabledondepoder hacer la selección del jugador en cuestión. Disponemos de un espacio paraapuntarlacantidaddegolesdeesejugador.Todoelsistemadeagregargoleadoresestáimplementado con JavaScript yAJAX.Unavez concluida la introduccióndedatosunservletprocesalainformaciónyalmacenalosdatosenuntablacorrespondiente.Tarea5:Estatareaseejecutademaneraautomáticaalahoradeaccederalapartepublica.SerealizaunabúsquedaenlabasededatosysemuestranlosresultadospormediodeunJSP.Estosresultadossemuestranordenadosporgruposyporcantidaddegoles.Tarea6:Estafuncióndelaparteprivadadelawebtieneaccesodesdeelpaneldeadministración.MedianteunformulariosencillousandoAJAXseintroducenlosdatossolicitadosyseprocesaunapeticióndeinserciónenlabasededatoscorrespondientesinnecesidadderefrescarlapaginadeentradadedatos.Tarea7:Al igual que el resto de funciones de la web publica, esta tarea se ejecutaautomáticamentealaccederalapartepublicadelaaplicaciónymuestraseparadaporgrupostodaslassancionesindividuales.EsunsimpleJSPquerealizaunbúsquedaenlabasededatosypintauntablaenlaquesemuestranlosjugadorespendientesdecumplirunasanción.Tarea8:Esta tareapermite la introduccióndepuntosporequipospara realizarel rankingdedeportividad.Elfuncionamientoeselmismoquelatareadeintroducciónderesultadosdescritoen laprimera tareacon laexcepciónqueel servletencargadode recibir losdatosprocesayalmacenalosresultadosensutablacorrespondientedentrodelabasededatos.Tarea9:Estafunción,al igualqueelrestodelastareasdelawebpublicaseiniciademaneraautónomaunavezqueelusuarioaccedemediantesunavegadoralaaplicaciónweb.Elfuncionamientoessimple,muestraelresultadodeunapeticióndebúsquedarealzadaalabasededatosdondemuestraunrankinggeneralylostresprimerosclasificadosdemaneradestacada.

4ARQUITECTURADELAAPLICACION4.1MVC(ModeloVistaControlador)El patrón de arquitectura MVC (modelo) es un patrón que define la organizaciónindependientedelModelo(datosdelaaplicación),laVista(interfazconelusuario)yelControlador(lalógicadecontroldelaaplicación)ElpatrónqueutilizadoparaeldesarrollodeestaaplicaciónesdedeMVC.Yaqueestepatróndearquitecturadesoftwareseparalosdatosylalógicadeunaaplicación,delainterfazdeusuario.Comohecitadoanteriormenteestepatrónnosproponelacreaciónde3componentesdistintosconsusfuncionesmuymarcadas:elmodelo(losdatos),lavista(elFront-Endointerfaz)yelcontrolador(lacapanegocioológicadelaaplicación).Deestaformaestepatrónsebasaenlasideasdereutilizacióndecódigoylaseparacióndeconceptos,característicasquebuscanfacilitarlatareadedesarrollodeaplicacionesysuposteriormantenimiento.Para entender como funcionaestepatrón, sedebeentender la división a travésdelconjuntodeestostreselementosycomoestoscomponentessecomunicanentresi,losunosconlosotrosyconotrosexternosalmoduloprincipal.Portantoesnecesariosaberque el controlados interpreta las entradas que el usuario manda mediante laintroducciónenviandoejecucióndeunaacciónalmodeloyalavistaparaqueprocedanarealizarloscambiosoportunos.4.2Servidoryconexiones.LaaplicaciónestamontadasobreunservidorquepermitetecnologíaJ2EE.ElservidordewebquemontaesApacheTomCat8.Elficheroraízdelaappesunindex.jspelcualeselencargadodeiniciarlaaplicación.Lasconexionesnecesariaspara laaplicaciónseejecutandesdearchivosJSP incluidosdentrodelarchivoraízymedianteservletsincluidosdentrodelmapeadodelaaplicación(web.xml).todasestasconexionessecomunicanconunabasededatosMySQLalojadaenelmismoservidorquecontienetodoslosdatosdelaapp.4.3EstructuradelaaplicaciónLaestructuradelaaplicaciónconstadedospartesdiferenciadas:

• PUBLICA:disponedeunapáginaJSPdiseñadacomounSIMPLEWEBAPLICATIONdondesemuestratodalainformaciónofrecidaalusuariodelaapp.Cargaunaúnicaveztodalainformaciónynavegamosporellasinnecesidadderefrescarlaurl.NosapoyamosenelusodelibreríaspropiasJSPquealivianlacargadecódigodentrodelarchivoindex.jsp

• PRIVADA: compuesta por varias paginas jsp , cada una con sus funcionescorrespondientesyvinculadasconlalógicadelaaplicación.

5MODELOelmodeloeslarepresentacióndelainformaciónconlacualelsistemaopera,portantogestionatodoslosaccesosadichainformación,tantoconsultascomoactualizaciones,implementando también los privilegios de acceso que se hayan descrito en lasespecificacionesde laaplicación(datosde laapp).Envíaa lavistaaquellapartede lainformaciónqueencadamomentoselesolicitaparaqueseamostrada(típicamenteaunusuario).Laspeticionesdeaccesoomanipulación lleganalmodeloa travésdeelcontrolador.5.1.ConsultadelosdatosTodaslasconsultasdedatosserealizanmedianteficherosJSPySERVLETSqueatacanlabasededatosMySQLobteniendolosdatosnecesarios.Una vez tenemos los datos, los propios archivos JSP y Servlets pintan en la vista lainformaciónsolicitada.5.2BasededatosEstructuradelaBasedeDatos:

6VISTAPresenta el modelo (información y datos de la app) en un formato adecuado parainteractuar,portantorequierededichomodelolainformaciónquedeberepresentarcomosalida.Esdecir,es lapresentacióndelmodelo.Puedeaccederalmodeloperonuncacambiarsuestado.6.1FRONT-ENDpública(interfazpública)

6.2FRONT-ENDprivada(interfazprivada)

7CONTROLADORRespondeaeventos(usualmenteaccionesdelusuario)einvocaalmodelocuandosehace alguna solicitud sobre la información (por ejemplo, editar un documento o unregistroenunabasededatos).Tambiénpuedeenviarcomandoasuvistaasociadasisesolicitauncambioenlaformaenquesepresentasumodelo,portantosepodríadecirqueelcontroladorhacedeintermediarioentrelavistayelmodelo.8.1tecnologíasutilizadaslastecnologíasutilizadasenesteproyectoson:

• HTML5,CSS3,yjavascript• LibreríajQuery• MySQL• AJAX• JAVAEE• JSPyServlets

HTML5,CSS3yJAVASCRIPTHTML:utilizadoparatodalaestructuradelaaplicaciónCSS3:todalaaparienciadelaaplicaciónJavaScript:motorsecundariodelaaplicación.Solicitaaccionesa losservletoejecutafuncionespropiasdelalibreríajQueryyAJAX.MySQL:basededatosdelaaplicación,libre,seguraysoportadaporelservidordondesehospedalaaplicación.JAVAEE:esel lenguajeutilizadoportoda laaplicación.SoportadoporelservidordeaplicacionesyelservidorwebquemontaelServerdondesehospedalaaplicación.JSPyServlets:eslatecnologíautilizadaquegestionaladinámicadelaaplicación.Eselencargadodehacertodaslaspeticionesalabasededatosdelaaplicación,trabajandoenlapartedelservidor,manejaycontrolatodaslasfuncionesdelaaplicación.

8BIBLIOGRAFIAYMATERIALGRÁFICOElescudoutilizadoespropiedaddelRayoMajadahondaClubdeFutbolytengopermisoexpresodelpresidentedelaentidadD.EnriqueVediaPesqueraparautilizarloenesteproyecto.Losdatosfacilitadosenlabasededatospertenecenapersonasrealesqueparticipanenlacompetición.NoseincluyeningúndatomásamparándoseenlaLeydeProteccióndeDatos.Todoelmaterialgráficoesdelibreusoconpropósitosnocomerciales.Comoelproyectotratadoesunproyectodocenteynoexisteanimodelucronoencuentroimpedimento.Paraelfront-endpúblicosehautilizadounplugingratuitobasadoenjQueryllamadohero-sliderpropiedaddeClaudiaRomano(https://codyhouse.co/gem/hero-slider)Referenciasdeprocedenciadelasimágenesutilizadas:http://insider.ticketmaster.comhttp://fifa.comhttp://w3schools.comhttp://jquery.comhttp://kuler.adobe.com/es/create/color-wheelhttp://f7majadahonda.orghttp://tomcat.apache.orghttps://docs.oracle.com/javase/7/docs/apihttps://commons.apache.org