Dossier ISN 2013 – Projet : Site de rencontre – COUPE Mathieu 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 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 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 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 : 10 séances

* travail effectué en même temps que d'autres séances

Dossier ISN 2013 – Projet : Site de rencontre – COUPE Mathieu 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 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 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’est-

ce 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 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 grand-

chose. 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 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 : http://demo.codelab.info/