Universit De Sousse Institut Suprieur uprieur des Sciences Applique et de Technologie echnologie de Sousse

Rapport

Mini-projet: projet: Intgration Deux Site Web Mashup

Propos par : Dr.Khemaja maja Maha Elabor par : Mr :Shili Shili Mohamed Site N3 Mr :Mohamed Amine Maimoune Site N1 Mr :Aymen Belghithia Site N2 Groupe : 1
re

Master de recherche informatique Date : 24 /02/2014

Site N1 : Site web avec J2EE

I. Application Web de gestion des annonces 1. Introduction Notre projet consiste mettre en place une application Web pour la gestion des Annonces de diffrents types : Immobilier, Vhicule, Emploi, Service et autre. Lutilisateur doit sinscrire dans notre base de donnes pour quil puisse publier une ou plusieurs annonces, comme il peut consulter les toutes les annonces publie sur le site. Pour raliser ce projet en utilise la technologie J2EE et JDBC pour la connexion avec la base de donnes ralise avec MySQL. 2. Objectif Lobjectif de ce travail est de raliser une application web pour mettre en valeur le travail en groupe et les connaissances acquises en matire de J2EE. Ainsi dtre plus professionnalisme. 3. Outils Utiliss Eclipse : pour dveloppement de lapplication. Appache TomCat : serveur de test de lapplication. MySQL : Systme de gestion de Base de donnes. Photoshop : traitement dimages. Flash : pour la ralisation des animations. Architecture : MVC(Modele-Vue-Controleur) 4. LApplication Notre application est un site web dynamique de publication et de consultation des annonces, permet un utilisateur de publier ou consulter a fin de trouver des clients dune manire facile, fiable et moins chre. Dans ce projet on a cr une classe connexion qui permet de faire la connexion avec notre base de donnes. Cette classe permet denregistrer le driver JDBC et la connexion avec la base de donne. Elle est appel au dmarrage du projet par la mthode init() . On a aussi travaill avec la notion de session c..d. Si un utilisateur est fait lauthentification il nest

pas oblig de sauthentifier une autres fois qu sa prochaine connexion sur le site. Sur notre application on a divis les utilisateurs par type, Administrateur et utilisateurs, pour ladministrateur peut faire ce quil veut, mais pour lutilisateur sauf ceux quont inscris sur le site qui peuvent publier, consulter les annonces, consulter et modifier ces profils. Notre application est divise en 6 grandes parties : Partie daccueil. Partie dinscription. Partie de publication des annonces. Partie de Consultation des annonces. Partie de gestion du profil de lutilisateur. Partie dadministration.

a) Partie daccueil
Contient linterface de dmarrage de notre projet. Nimporte qui peut consulter cette page (inscris ou non). Cest une page daccueil qui contient un logo de notre application et un mot de bienvenu plus la barre Menu : Accueil, Inscription, consultation, publication et Administration.

Lutilisateur doit sauthentifier avec un login et un mot de passe pour accder a dautre page de site. Si non il doit sinscrire.

b) Partie dinscription
Cest linterface qui permet un utilisateur de crer son compte avec ses informations personnelle et un mot de passe est un login. Le formulaire donne plusieurs champs qui concernent les informations de chaque utilisateur remplir.

c) Partie de consultation des annonces

Cette partie est consultable que par les utilisateurs inscrits sur le site, cest pour cela si un utilisateur nest pas authentifi a accd cette partie, il reoit un message dautorisation qui saffiche dans la page.

Aprs lAuthentification lutilisateur chaque utilisateur peut consulter les annonces publier par tous les autres utilisateurs selon la catgorie de lannonce choisit.

Par exemple on choisit le type des annonces Immobilier, est concernant laffichage on a prcis que 4 annonces qui saffiche par page.

d) Partie de publication des annonces

Lutilisateur peut publier ses annonces en cliquant sur le bouton Publier la page demande a lutilisateur de choisir la catgorie de son annonce par exemple : Immobilier, vhicule, Service, Emploi et autres. On prend lexemple de lImmobilier. Dans cette page si lutilisateur na pas remplit un champ ncessaire, un message indique quun champ ncessaire est vide.

Conclusion :
Le but de notre projet et de raliser une application Web dynamique qui gre les annonces de dfrentes types, on utilisant la technologie Java EE base de larchitecture MVC

Site N2 : Site web php avec API Google Maps

Ajoute Enterprise

Lis ste des Enterprise dans le maps

Ajoute type dEnterprise

Consulter les types

Liste des Enterprise

Itinraire
10

Exemple Itinraire

11

Site N3: Mashup

I.

Notion de base sur les Mashups

1. Introduction Le Web2.0 permet de faciliter la cration, l'utilisation, la recherche, le partage, et la rutilisation des ressources web. A base de ces concepts plusieurs technologies ont t dveloppes (e.g. les blogs, les rseaux sociaux,..). Dans le web2.0 les fournisseurs de services qui exposent leurs applications soit travers des API web tels que Googlemap, Amazone.com,.., soit l'aide de flux de donnes comme RSS et ATOM. Toutes ces formes d'applications utilisent les services et/ou les fonctionnalits comme composants (ou ingrdients) qui peuvent tre rutiliss et combins pour crer des nouvelles applications. En guise les objectifs du web2.0, le Mashup apparait comme solution incontournable. Il constitue une nouvelle approche de dveloppement et qui permet l'utilisateur d'agrger plusieurs services pour crer un seul service qui rpond son objectif. Contrairement la composition des services web dans la quelle on fait la composition seulement avec des services. Le Mashup va plus loin en offrant plus de fonctionnalits qui permettent la combinaison de plusieurs ressources htrognes (REST, SOAP, JS, RSS,..). 2. Dfinitions 1. Dfinition 1 On parle de Mashup dans le cadre d'une superposition de deux images provenant de sources diffrentes ou bien une superposition de donnes visuelles et sonores diffrentes dans le but de crer une nouvelle exprience [Koschmider and al 2009] . 2. Dfinition 1 Un Mashup ou application composite dsigne un site Web combinant plusieurs applications Web pour crer un nouveau service. Il s'agit ainsi par exemple d'agrger des contenus provenant d'autres sites. Ces applications tierces sont mises disposition par le biais d'API, interfaces de programmation, autorisant l'extraction et le traitement d'informations.

12

3. Architecture des Mashups :

Bien qu'il existe plusieurs types d'interfaces utilisateur et des sources de donnes utiliss par les diffrents Mashups, nous pouvons encore tirer des patterns architecturaux communs et partags rtags par tous les Mashups. Par exemple, tous les Mashups sont de la nature REST (qu'ils soient conformes aux principes de REST-Representational REST Representational State Transfer) [Larry and al,2008]. La figure2.4 montre une architecture d'un Mashup typique. L'architecture d'une application Mashup est constitue d'un ensemble de composants, savoir les donnes, les flux RSS, les services Web, les services plateformes, les applications de Mashups enfin les applications de client.

4. Mise en uvre

Yahoo! Pipes

Yahoo! Pipes est une application Web de Yahoo! qui offre un environnement graphique de dveloppement et d'hbergement de scripts de traitement de donnes du web. Cette application permet aux internautes de crer gratuitement un flux unique qui agrge des flux de contenus provenant de diffrents sites internet.

13

 Interface principale

14

 Un seul site

Intgrer deux sites

15

Conclusion
Avec le dveloppement rapide des technologies de l'information, l'intgration et l'interoprabilit est de nos jours une problmatique centrale des systmes d'information distribus. Ce domaine de recherche est favoris par l'adoption de l'architecture oriente service puis par le Mashup comme modle de dveloppement. Les Mashups ont permis une avance significative dans l'automatisation des interactions entre les applications et ressources Web. Notamment, la combinaison des APIs Web (REST, SOAP, RSS, JS,. .) est considre comme un point fort, qui permet de rpondre des besoins complexes en combinant les fonctionnalits et les donnes de plusieurs services au sein d'une seule application Mashup.

16