RÉALISATION D UN SITE DE RENCONTRE

Transcription

1 RÉALISATION D UN SITE DE RENCONTRE Par Mathieu COUPE, Charlène DOUDOU et Stéphanie RANDRIANARIMANA Sous la coordination des professeurs d ISN du lycée Aristide Briand : Jérôme CANTALOUBE, Laurent BERNARD et Yann BERTRAND. Mon CV : Cliquez ici! Dossier ISN 2013 Projet : Site de rencontre COUPE Mathieu 1

2 Sommaire I Pourquoi ce projet? Quelles idées? II Cahier des charges III Répartition et travail collaboratif IV Réalisation personnelle PHP au service du dynamisme Une base de données? HTML et CSS des outils indispensables vers une mise en ligne V Intégration et validation VI Bilan et perspectives I Pourquoi ce projet? Quelles ide es? Avant même de choisir la spécialité ISN, mon intérêt se portait sur l informatique et plus particulièrement par le domaine du «web». Alors quand nous avons eu les différentes propositions de projet mon choix se porta naturellement vers un projet web. Celui du site de rencontre m intéressait particulièrement, car il nécessitait des capacités que j avais déjà développées et de nouvelles qui m intriguaient énormément! Notamment sur le fait de réaliser un site interactif, où les utilisateurs n auront pas une simple page à lire, mais une page sur laquelle ils seront acteurs. Ayant déjà pu réaliser quelques pages web statiques, je prenais la pleine mesure de ce projet qui était pour le moins ambitieux. Avec mes coéquipières, nous nous sommes concertés sur ce que nous attendions de ce projet. Pour nous la réponse était simple, notre objectif sera de réaliser un site sur lequel les utilisateurs pourront s inscrire, avoir accès à un espace membre, rechercher d autres personnes et pouvoir communiquer avec eux, mais aussi avec nous : administrateurs. Une fois notre idée de base définie, nous avons effectué des recherches sur les différents sites de rencontres déjà existants. Ces sites fleurissant avec importance sur la toile, il nous fut aisé de voir beaucoup d exemples, et à la vue d autant de sites de rencontre nous furent confortés dans notre choix, car ils représentent dorénavant une part importante du web et nous pourrons donc nous inscrire dans cette continuité. Ce que nous avons pu remarquer c est que tous ces sites présentent une page d accueil très attrayante et remarquable, sur laquelle il y a une partie d inscription simple et visible : pour pousser le visiteur à s inscrire. Ensuite pour la majorité, ces sites sont payants ce qui nous a limités dans nos recherches. Dossier ISN 2013 Projet : Site de rencontre COUPE Mathieu 2

3 Cependant nous avons pu observer que chaque site offre des possibilités de rencontres adaptées au souhait de l utilisateur. Dès le départ, chaque personne choisit un site en fonction de sa recherche, certains pour trouver des relations amicales, amoureuses ou professionnelles... De plus une fois connecté sur le site, l utilisateur peut modifier son profil en remplissant une grille de champs personnalisés. Cette grille permet facilement de retrouver quelqu un en fonction des champs recherchés à travers d un moyen mettant en relation les profils similaires. Ainsi notre site aura de nombreux objectifs que nous espérons atteindre. II Cahier des charges Organisation du site Premièrement il faut organiser le site. Pour cela nous utiliserons une fonction PHP : include. Celle-ci permet de créer notre site tel un assemblage de brique. Nous pouvons faire chaque partie indépendamment puis l inclure dans une page type. Cela facilitera notre travail. De plus nous essayerons de réaliser un site joli et attrayant. Un site dynamique? En désirant créer un site de rencontre, nous ne pouvions nous permettre de faire un site statique, c'est-à-dire un site avec lequel l utilisateur ne puisse interagir. Pour gérer ce site dynamique, c'est-àdire qui générera les pages en fonction de la demande de l utilisateur nous coderons notre site en langage PHP associé avec du HTML et CSS. Inscription, connexion et déconnexion Afin de réaliser un site de rencontre qui réponde aux critères définis par les autres sites déjà existants, il faudra que nous réalisions un espace membre. Une partie du site visible uniquement pour les personnes inscrites et connectées. Pour cela nous devons définir un module d inscription puis un autre gérant la connexion et la déconnections. Un contact permanent En voulant faire un site dynamique, un point essentiel nous est apparu : la communication! En effet les utilisateurs d un site de rencontre doivent pouvoir échanger entre eux, pour cela nous développerons une messagerie interne. Mais ils devront aussi pouvoir communiquer avec les administrateurs pour cela un formulaire de contact sera mis en place. Profil personnalisé Pour permettre aux différents membres de rencontrer une personne répondant à leurs critères (physiques, mentaux ) nous devrons définir une liste de champs tels que la taille, couleurs des yeux, activités professionnelles, etc Ces champs permettent une personnalisation complète du profil pour mieux définir chaque personne! Dossier ISN 2013 Projet : Site de rencontre COUPE Mathieu 3

4 Des pages d information Tout bon site se doit d avoir une partie d information. Celles-ci concernant le site en lui-même, le pourquoi du comment en quelque sorte, sa visée et ses origines ; les administrateurs, qui sont-ils ; les conditions générales d utilisation, qu avons-nous le droit de faire en tant qu utilisateurs. Cette dernière partie permettant de travailler sur l aspect légal de la diffusion sur internet. Compatibilité des membres? Une fois la liste des champs personnalisés établis il nous faudra les exploiter. En effet nous aimerions pouvoir mettre en relation les personnes «semblables», qui ont un certain nombre de champs en communs. Pour y parvenir, nous tenterons de développer un algorithme comparant les fiches des membres et les classeras en fonction de leur pourcentage de similitude. Ce programme sera réalisé sous l environnement de travail : Processing. III Re partition et travail collaboratif Tâches Nombre de séances Noms Etat de l'art 1 séance Stéphanie R. Recherche sur les sites dynamiques 1 séance Mathieu C. Structure et organisation du site 5 séances* Mathieu C. et Charlène D. Module inscription 2 séances Mathieu C. Rédaction des CGU 1 séance Charlène.D Formulaire de contact 2 séances Charlène.D Espace membre (connexion et déconnexion ) 2 séances Mathieu C. Pages statiques 2 séances Charlène.D Ébauche de design 1 séance Mathieu C. et Charlène D. Création Base de données 1 séance Mathieu C. Champs de profils personnalisés 2 séances Charlène.D Corrections bugs 1 séance Mathieu C. Intégration des formulaires menus 1 séance Charlène.D Messagerie 1 séance Mathieu C. Révision des formulaires 2 séances Charlène.D Algorithme de compatibilité 9 séances Stéphanie R. Mise en ligne 1 séance Mathieu C. Total : * travail effectué en même temps que d'autres séances 10 séances Dossier ISN 2013 Projet : Site de rencontre COUPE Mathieu 4

5 Pour mettre en commun notre travail, nous avons utilisé différentes méthodes. Régulièrement nous communiquions sur notre avancement personnellement via les réseaux sociaux, comme ça nous pouvions nous aider si nous avions des questions où problèmes. De plus nous avons utilisé la plateforme Github afin de partager nos fichiers en ligne. Pour finir, notre mise en ligne du site permet aussi de récupérer les fichiers et de voir l avancement final du projet. IV Re alisation personnelle Lorsque nous avons réparti les tâches à effectuer, j ai pris les devants en me positionnant sur les parties les plus «techniques». En effet j ai pris la charge de travailler sur la gestion du dynamisme du site, de la base de données et de l intégration générale. Je détaillerais ma réalisation personnelle en trois temps : PHP au service du dynamisme Une base de données? HTML et CSS des outils indispensables vers une mise en ligne PHP au service du dynamisme Pour débuter, il faut comprendre la différence entre les sites statiques et les sites dynamiques. Un site statique fonctionne de manière très simple. D un côté il y a le visiteur qui va demander à voir une certaine page avec son adresse URL, le serveur lit cette demande et lui envoie la page telle qu elle a été demandée par le visiteur. Il n ya aucun traitement d informations. Un site dynamique fonctionne différemment. En effet le visiteur demande à voir une page, le serveur va alors générer une page spécialement pour le visiteur puis lui transmettre en fonction de la demande et du client. Par exemple il affichera telle ou telle page si l utilisateur est connecté ou non. Sur un site statique seul, les langages HTML et CSS sont utilisés au contraire du site dynamique ou un troisième langage est utilisé : le PHP. Ce dernier est langage serveur, c est lui qui va générer la page web. PHP sert à écrire du HTML. Par exemple si j informe le serveur que je suis connecté au site et que je m appelle Mathieu, PHP générera un code qui dira : «Bonjour Mathieu, Bienvenue sur le site.» Dossier ISN 2013 Projet : Site de rencontre COUPE Mathieu 5

6 Le code PHP est toujours compris entre ces balises : <?PHP echo?> À l intérieur de celles-ci peuvent être définies plusieurs fonctions et variables qui sont obligatoires pour le fonctionnement du site. Les différentes variables que nous avons utilisées pour le site sont : string : qui correspond à du texte ; int : qui correspond à un nombre ; et bool : qui revient à un vrai ou faux. Passons maintenant à une fonction essentielle de notre site. Lorsque j ai commencé à penser la structure du site avec Charlène il s est avéré que si nous devions coder deux menus, un entête, un pied de page et le corps de la page en même temps cela nous donnerait un fichier avec un nombre de lignes conséquentes. Pour remédier à cela, nous avons utilisé la fonction include. Celle-ci permet d inclure des portions de pages. Nous pouvons donc gérer chaque bloque du site sur un fichier séparer. Il suffit ensuite d inclure le bloc avec un code de ce type : <?php include("menus.php");?> Ainsi au lieu d avoir un fichier avec des dizaines de lignes de codes nous en avons beaucoup moins. Le PHP va aussi nous servir pour développer l espace membre. À travers d une structure If Else nous vérifierons si l utilisateur est connecté ou pas. Ensuite le site généra la page en fonction du statut du client. Voici un exemple avec la page d accueil. En haut la page générée pour un visiteur lambda et en bas la page pour un membre connecté. De plus le PHP sera utilisé pour inscrire les informations dans la base de données et récupérer ces informations. Pour cela nous avons défini des variables que l utilisateur remplira lors de son inscription ou modification de profil. Cette inscription se fait avec la fonction $_POST. Avec le PHP j ai pu intégrer les différents modules dynamiques du site que sont l inscription, la connexion, la déconnexion, la gestion du profil, la liste des membres et la messagerie. Cependant vu la complexité de notre projet j ai dû m inspirer de codes déjà existants (toujours libres de droits), créer nos propres codes auraient été trop longs et complexe au vu du temps imparti. Dossier ISN 2013 Projet : Site de rencontre COUPE Mathieu 6

7 Une base de données? Pour exploiter tout le potentiel du PHP celui doit être utilisé avec une base de données. Mais qu estce qu une base de données. C est un peu comme un tableur informatique dans lequel il y a des entêtes et dans lequel nous inscrivons des informations. L avantage d une base de données c est que celle-ci va en permanence trier les informations. J ai fait le choix d utiliser un système de gestion de base de donnée libre et gratuit et qui soit aussi le plus simple à utiliser, c est pour ça que nous avons utilisé MySQL. Pour utiliser correctement la base de données, on utilise un autre langage le SQL, celui-ci ne sert exclusivement aux bases de données. Il permet de la gérer de manière simple. Comme dit précédemment PHP est utilisé pour inscrire les données dans la base de données. Il sert alors de lien entre le serveur et MySQL. Une BDD (raccourci pour base de données) est toujours très bien organisée, à l intérieur de celle-ci il y a des tables et à l intérieur de ces tables sont rangées les informations en fonction de champ préalablement défini. La BDD est administrée via phpmyadmin, c est une interface PHP qui permet de gérer avec facilité notre BDD, soit à travers d une console où on utilise le SQL pour effectuer notre requête soit en parcourant les tables manuellement. Pour notre site j ai défini deux tables simple, mais efficace. Une première : «users», celle-ci permet de gérer l inscription, la connexion/déconnexion, la modification du profil. Dans tous ces modules, c est toujours la même table qui est reprise avec les mêmes champs. Il n y a qu au niveau du code PHP qu il y a des différences pour justement opérer la bonne action avec la BDD, si on veut par exemple inscrire un nouveau pseudo ou changer son mot de passe. La seconde table «pm»(pour personal messenger» sert à gérer la messagerie. Elle reprend le même principe que la table users mais avec des champs différents. HTML et CSS des outils indispensables pour une mise en ligne Bien que mon travail soit essentiellement basé sur l intégration du PHP au sein du site et de l utilisation de la base de données je me suis consacré aussi à la mise en forme du site et à ça mis en ligne. Pour mettre en forme le site, j ai mis en place une feuille de style CSS pour faciliter les modifications. Celle-ci permet de modifier une partie du design sans pour autant tout changer. Par exemple on peut changer la couleur du fond sans changer la position de menus. Sur cette image on voit la répartition du site et le style qui y est appliqué. On observe la différentiation entre les blocs : «body» ; les div avec id : «#corps» ; et les classes «.menut». Cette méthode permet une classification simplifié du style à travers les différentes mises en formes telles ques «height»(hauteur), «border»(bordure) Il en existe une pour chaque chose que l on souhaite modifier. Dossier ISN 2013 Projet : Site de rencontre COUPE Mathieu 7

8 Ici un aperçu du site. On peut aisément remarquer les différentes parties du site et le design que nous avons choisi pour correspondre aux critères des différents sites de rencontres. Par soucis de temps, nous avons utilisé des générateurs de menus, que nous avons ensuite modifiés nous-mêmes pour correspondre à notre design. Le HTML quant à lui permet de faire tout le reste qui n a pas besoin d être généré par PHP. Si nous n utilisions pas ces deux langages, notre site aurait quand même pu fonctionner, mais celui-ci aurait été alors peu ergonomique et totalement inesthétique. Et ceci ne pouvait être envisageable pour une diffusion grand public sur internet. Lors de la dernière séance grâce à la mise en ligne d un serveur dédié par monsieur Bernard et d une base de données nous avons pu mettre notre site en ligne. Pour faire cela, j ai utilisé un protocole FTP. C est un protocole de transfert de données de fichiers sécurisés. Avec le logiciel FileZila j ai pu envoyer les fichiers directement sur le serveur après une identification, car le serveur est protégé par un login et un mot de passe. Ensuite manuellement on envoie les fichiers sur le serveur. Celui est accompagné d une base de données permet le fonctionnement de l intégralité du site, comme expliqué dans les parties précédentes. V Inte gration et validation Mon travail représentait donc une part importante de notre projet. Non pas que celles de Charlène et Stéphanie le soit moins, mais la mienne est un peu comme la colonne vertébrale du squelette ou le tronc d un arbre. Et c est sur celle-ci que tout le reste est venu s attacher ou aussi le compléter. En effet si le site était uniquement doté d une inscription les utilisateurs ne pourraient pas faire grandchose. C est en ajoutant les champs de profils personnalisés, les menus, les formulaires que le site gagne tout son interactivité. De plus derrière tout cela les utilisateurs souhaitent faire des rencontres et c est pour cela que l algorithme de compatibilité est essentiel. À la base nous avons travaillé en local sur les ordinateurs du lycée et sur mon portable avec le logiciel Wamp. Grâce à notre travail en collaboration, c est moi qui intégrais au fur et à mesure les différentes parties du projet. Mais il fallait aussi un retour. En effet je devais aussi, une fois que chaque étape était finie, intégrer mes résultats au reste. Pour valider notre projet, nous avons dû attendre la mise en ligne du site. Une fois celle-ci effectuée nous avons créé des utilisateurs puis tester la connexion, la modification de profil et la messagerie. Je vérifiai ensuite que ces données étaient bien inscrites dans la base de données et si nous retrouvions bien les informations partout, notamment la liste des membres. Dossier ISN 2013 Projet : Site de rencontre COUPE Mathieu 8

9 On observe ici que deux utilisateurs sont enregistrés sur le site. Ceci permet de valider que le site fonctionne, tout du moins en partie. Car par manque de temps nous n avons pas puis créer une table pour les champs personnalisés et les enregistrés dans la base de données. VI Bilan et perspectives Après ces 10 séances de travail nous avons un site qui est «fonctionnel», enfin tout du moins dont les fonctions primaires sont actives. Il est encore incomplet et ne permet pas toutes les fonctionnalités que nous avions imaginées au début. Ceci prouve donc que nous avions choisi un projet compliqué et que nous ne nous sommes pas simplifié la tâche en ayant des ambitions hautes. Néanmoins sans ces ambitions je ne pense pas que nous serions arrivés à ce stade d avancement. Car malgré les difficultés que nous avons eues nous avons toujours réussi à avancer. Pour ma part ce fut un projet enrichissant, car au début j arrivais avec davantage de connaissances que Stéphanie et Charlène j ai donc joué un rôle de mentor en quelque sorte, leur montrant ce que j avais déjà fait et expliquant les bases que j avais déjà acquises. Mais cette avance fut de courte de durée, car m étant orienté vers le PHP et la BDD je me suis vite retrouvé bloqué ayant besoin de l aide précieuse d internet de monsieur Bernard qui m aida pour notamment accéder à la BDD et pour la mise en ligne. Charlène et Stéphanie ont quant à elle eu une vision plus terre à terre des choses recadrant le projet quand il le fallait et avec une autre approche que la mienne qui était plus technique, elles avaient des idées que je n avais pas, surtout pour le design Concernant les perspectives d avenir pour notre projet, elles sont nombreuses. Tout d abord finir d héberger les pages faites par mes coéquipières en intégrant leur style à la feuille CSS. Puis de mieux gérer le menu membre (à gauche) qui n apparait pas sur toutes les pages comme je le souhaiterais. Ensuite il faudrait gérer les champs personnalisés dans la BDD pour que l algorithme puisse classer les membres Enfin plus personnellement j aurais voulu mieux gérer la messagerie qui est un peu obsolète et pouvoir permettre aux utilisateurs de «rester connectés». Peux être qu un jour l envie nous prendra de continuer ce site et ainsi nous pourrons fignoler tous ces détails. Notre site est disponible à cette adresse : Dossier ISN 2013 Projet : Site de rencontre COUPE Mathieu 9