Playdating by Hanna Isua

RAPPORT Hanna Barrantes Omar Sabik

Sommaire 3

Introduction

Etat de l’art

Designe Graphique

Conception

Architecture

Modèle de données

Ligne graphique Home page Table activité Table enfant Table arent

Langages et choix des outils utilisés HTML/CSS CSS PHP/MySQL BOOTSTRAP

Utilisateur Le site de playdatting est Modules Administrateur

Le modèle conceptuel de données

Scenario d’exécution

Conclusion

Rechercher une activité Publier un Activité Mon profil Mes annonces Mes réservations

Itroduction Au cadre du cours Technologies Web dirigé par les professeurs Samir Chouali et Ahmed Mostefaoui dans le Master 1 de Produits et Services Multimedia, nous avons développé un projet web intitulé Playdating. Ce projet cherche à faire possible le rencontre des enfants via la technologie web, sous l’idée de l’économie collaborative.

des enfants de joue avec des homologues soit satisfaite autant que la nécessité des parents de rendre heureux ses enfants et les occupe. Le concept de « playdate » est largement utilisé aux États Unies, notamment pour les filles ou garçons au-pairs qui s’occupent des enfants pendant la journée, ce système permet aux enfants de s’amuser et jouer avec des autres enfants de son âge et se faire de nouveaux copines, aussi bien que aux parents ou la personne en charge de l’enfant de faire connaissance des autres adultes souvent avec des intérêt similaires autour des enfants.

L’économie collaborative est un modèle dont les échanges des produits et services n’ont comme priorité l’argent, mais plutôt la satisfaction des nécessités, et ces besoins sont accomplies grâce aux ressources d’un particulier et non des grandes entreprises, tel que Airbnb, Uber, Blablacar, Rappi, etc. Donc celui qui prête le service n’a pas comme vocation l’enrichissement avec cette activité mais l’exploitation occasionnel d’une ressource à sa disposition, soit un endroit (Airbnb) un véhicule (Uber, Blablacar) ou son temps (Rappi), dans ce modelé économique la technologie joue un rôle très important, on pourrait même dire que ce grâce à la technologie aussi que l’accès à cela que ce modèle est aujourd’hui possible. Alors comme point de départ nous avons un projet dont l’argent n’est pas le plus important, mais l’échange entre les gens d’une communauté donné. Ainsi on a conçu le site web Playdating, lequel porte sur une plateforme qui permet aux parents de faire des rendez-vous pour que leurs enfants jouent ensemble, de façon que la nécessité 3

Etat de l’art REDROVERAPP : Activités pour bébés, enfants et adolescents. Activités aussi payants. Ça marche juste dans quelques villes des États Unies.

Pour se plonge dans le développent d’un projet quiconque il faut tout d’abord se renseigne sur les projets similaires existent déjà, pour voir d’un côté la réception par du marché et de l’autre pour étudier qu’est qu’on peut faire comme valeur ajouté pour notre projet. Donc un état de l’art est toujours recommandé au moment de commencer un projet, dans notre cas on a fait des recherches sur internet par rapport sites qui puissent en certain façon accomplir le même besoin qui nous cherchons à satisfaire. CMOMGO : Dirigé aux mamans. Réseau sociaux surtout, partage des photos d’enfants. Activités dashboard. « friends ». Les donnes sur la platteforme c’est surtout ceux de parents. Ça marche juste en États Unies. https://vimeo.com/202154211

YELLOWBRCK : C’est plutôt un app calendrier pour faire un planning pour les enfants. Ça marche juste en États Unies. MOM MAPS : Ce ne pas un app pour rendez-vous pour enfants mais pour que les mamans puissent connaitre des autres mamans.Ça marche juste en États Unies. https://www.youtube.com/watch?v=W5_w5_ Z3gj8 4

INSTANT PLAYDATES : Cette applica-

KANGA DO : Sert à organiser les horaires des enfants. Le covoiturage, le babysitting, les régimes alimentaires, etc. Ça marche juste en États Unies.

tion sert à faire un schedule des playdates des enfants aux États Unies, à vrai dire ce cela qui se ressemble le plus à ceux qu’on cherche avec notre projet, néanmoins elle ne crée pas une communauté comme notre projet le propose.

On peut déduire d’après la recherche qu’en France il n’existe pas encore un service web qui puisse soulager ce besoin. Donc le site web PLAYDATING que nous développerons au cours du semestre est un projet innovant qui peut avoir un marché en France.

Designe graphique palette couleur

Logo

Police de caractères

Sketch 3D

dating Rhaikane (Cela été modifié) 6

Trebuchet Pour le corps du page on a utilisé Trebuchet

Home Page

Formulaire ActivitĂŠ

Formulaire Enfant

Formulaire parent

Conception Dans cette partie, nous allons détailler les étapes du développement du site, les langages et le choix des outils dans un premier temps, puis un descriptif de la base de données, les étapes de la programmation avec son design, un aperçu du résultat obtenu et enfin les principales difficultés rencontrées.

Java. Ses principaux atouts en font un des langages web le plus utilisé : Une grande communauté de développeurs partageant des centaines de milliers d’exemples de script PHP ; ••La gratuité et la disponibilité du code source ;

Langages et choix des outils utilisés

••La simplicité d’écriture de scripts ; ••La possibilité d’inclure le script PHP au sein d’une page HTML

HTML/CSS Le HTML (« HyperText Mark-Up Language ») est un langage dit de « balisage » ou de « structuration » permettant la conception de pages web avec des balises de formatage. Les balises permettent d’indiquer la façon dont doivent être présentés le document et les liens qu’il établit avec d’autres documents.

••L’intégration au sein de nombreux serveurs web (Apache, Microsoft IIS, etc.). C’est également un langage simple à utiliser avec des bases de données (de nombreux SGBD sont supportés, mais le plus utilisé avec ce langage est MySQL, un SGBD gratuit disponible sur de nombreuses plateformes : Unix, Linux, Windows, MacOs X, …) ;

CSS Le CSS (« Cascading Style Sheets » : feuilles de style en cascade) est un langage informatique complétant le HTML. Alors que le HTML structure la page Web, le CSS va la mettre en forme en y apportant du style.

BOOTSTRAP Bootstrap est un Framework pour vous aider à concevoir des sites Web plus rapidement et plus facilement. Il inclut des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les modaux, les carrousels d’images, etc. Il vous offre également une prise en charge des plugins JavaScript.

PHP/MySQL Le PHP est un langage de script exécuté du côté serveur (comme les scripts CGI, ASP, ...) et non du côté client (un script écrit en JavaScript ou une applet Java s’exécute sur son ordinateur...). La syntaxe du langage provient de celles du langage C, du Perl et de 11

Les avantages à savoir sur bootsrap : 1. Tout d’abord, Bootstrap est l’infrastructure la plus répandue pour la création de présentations. Voici quelques raisons supplémentaires d’utiliser Bootstrap : ••Le code CSS réactif de Bootstrap s’adapte aux téléphones, tablettes et ordinateurs de bureau ••Les styles Mobile-First font partie du framework ••Bootstrap est compatible avec tous les navigateurs modernes (Chrome, Firefox, Internet Explorer, Safari et Opera) 2. Bootstrap est facile à configurer et à créer une présentation fonctionnelle en moins d’une heure. Ils ont un modèle de base disponible sur http://getbootstrap.com/getting-started/#template ainsi qu’un ensemble d’exemples pour différents besoins ( http://getbootstrap.com/getting-started/#examples ). Il faut simplement télécharger le référentiel d’amorçage, aller dans le dossier docs / Example, copier / coller l’exemple dont vous avez besoin et travailler dessus. 4. Vous n’avez pas besoin de bien connaître HTML et CSS pour utiliser Bootstrap, c’est un avantage si vous êtes un développeur backend et que vous devez apporter des modifications à l’interface utilisateur. 5. Il est entièrement personnalisable. Je peux choisir les composants que je souhaite utiliser et utiliser le fichier de variables pour obtenir encore plus de personnalisation de la couleur et du comportement.

Architecture Utilisateur Le schéma ci-dessous résume l’architecture site de playdatting qui est base sur de deux types de connexion

Le site de playdatting est composé de ces module

peuvent s’effectuer suivant des critères précis. Suite à l’affichage des résultats le parent peut choisir parmi les plus « intéressants » pour lui. En cas de changement de plan, un système de notification envers parents est disponible (messagerie), afin d’aviser que cette activité n’est annulée.

Module des inscriptions : Le système doit permettre aux les parents de pouvoir s’inscrire de façon autonome via le site web. Module de gestion des réservations : Le système doit aussi permettre aux parents de rechercher des activites. Des recherches

Module de gestion des comptes : Le système permet à chacun des membres de faire 13

la gestion de son compte. Il sera possible de modifier des informations personnelles ou préférences.

Administrateur Le schéma ci-dessous décrit le fonctionnement de l’espace administrateur. L’administrateur est le seul à avoir accès à l’information complète du système. Il peut faire la gestion globale du système, par exemple suspendre n’importe quel compte.

Les différentes classes d’usagers du système sont comme suit : ••Administrateur : L’administrateur est le seul à avoir accès à l’information complète du système. Il peut faire la gestion globale du système, par exemple créer des comptes de de playdatting. Il lui est aussi possible de suspendre n’importe quel compte. ••Les parents Alpha : Les parents Alfa permettent d’alimenter le système en activités disponibles pour la recherche. En effet, c’est la quantité et qualité des parents qui permettront d’avoir une banque de données intéressante dans le système. Suite à la publication d’une activité, ils sont responsables de vérifier à intervalle régulier s’ils reçoivent des demandes de participation des enfants. Dans un tel cas, ils sont responsables de confirmer les participants du passager à un point donné. De plus, ils peuvent consulter leur historique d’activité. ••Les parents : Les parents sont ceux qui bénéficient le plus du système. Ils peuvent lancer diverses recherches pour trouver des activités qui conviennent à leurs besoins et faire des réservations. Dans le cas où les points de participation conviennent plus ou moins, ils peuvent envoyer une proposition de point de participation au conducteur. De plus, ils peuvent consulter leur historique de réservations.

Modèle de données Pour illustrer la modélisation de la base de données du site web, on va exposer tout d’abord la liste des différentes données dont on a besoin pour le bon fonctionnement du site.

Afin de déterminer quel outil de modélisation de base de données serait le plus intéressant à utiliser dans le cadre de notre projet, on s’est basé sur une description exhaustive des principaux outils de modélisation de base de données qui ont été évalués : ••La facilité d’utilisation ••Les performances (robustesse, richesse fonctionnelle…) ••La taille du logiciel ••La pérennité 15

Le modĂ¨le conceptuel de donnĂŠes

Scenario d’exécution Une fois sur la page ‘index. PHP’, l’utilisateur saisit son nom, prénom, date de naissance, login, mot de passe, ville, numéro de téléphone et l’age. Ce formulaire est contrôlé par PHP et JavaScript, derrière chaque `input` il y a une fonction qui vérifie l’exactitude du format d’insertion :

Dans cette partie seront expliqués les différents mécanismes du fonctionnement technique du site web. La page ‘index.php’ est chargée automatiquement lorsque le DNS ‘playdatting’ est saisi dans la barre d’adresse du navigateur. Sachant qu’il y a une vérification de l’existence d’une session à l’aide de la fonction ‘verif_session_var()’, si l’utilisateur est toujours connecté, donc ‘index.php’ redirige automatiquement l’utilisateur vers la page ‘mon_compte.php’ (espace personnel de l’utilisateur). Si après vérification aucune session n’est détectée, l’utilisateur reste sur la page ‘index.php’.

••verifNom() : vérifie l’insertion et l’exactitude du nom ••verifPrenom() : vérifie l’insertion et l’exactitude du prénom ••verifMail() : vérifie l’insertion et l’exactitude du mail

Techniquement parlant, l’attribution des droits dépend de plusieurs conditions, elles-mêmes dépendent de la vérification de la session en cours.

••mailexist($mail) : vérifie la non-existence du mail dans la base de données ••verificationDuUserName() : fait appel à la fonction mailexist($mail) pour la vérification de la non-existence du mail

L’utilisateur non connecté a la possibilité de consulter les différentes informations situées dans le pied de page (A propos, Vos questions sur le playdatting, Conditions Générales d’utilisation, Les avantages du playdatting, etc.). Sur ces pages il n’y a aucun contrôle de session (accès libre).

••verifPhone() : vérifie l’insertion et l’exactitude du numéro de téléphone ••verifMotDePass() : vérifie que les deux mots passe saisis sont identiques et qu’ils contiennent au moins 8 caractères

Pour pouvoir bénéficier de tous les services offerts par le site de playdatting, l’utilisateur doit se connecter. Si c’est sa première visite du site, il devra d’abord s’inscrire sur le site.

••verifAdress() : vérifie l’insertion et l’exactitude du nom d’une ville ••verifAge() : vérifie l’insertion et l’exactitude du numéro de l’age 17

Rechercher une activité :

••Insertion() : la fonction chargée d’insérer les données saisies dans la base de données ainsi que d’envoyer un mail de confirmation d’inscription contenant un lien d’activation de l’espace membre à l’utilisateur.

La fonction de restriction d’accès aux fonctionnalités de réservation et de contact de le parents Alpha d’une activité est désactivée automatiquement, mais elle vérifie constamment que l’utilisateur est bien connecté, sinon elle l’invite à se connecter. Pour contacter un abonné, le seul moyen est de cliquer sur l’onglet `message` figurant dans la fenêtre affichant les détails d’une annonce (affiché par JavaScript).

Si lors de l’inscription l’utilisateur n’a pas renseigné l’un des champs obligatoires, le formulaire se recharge en gardant les valeurs déjà saisies. En cas d’erreur, la page reste bloquée en signalant par un message clair l’erreur. Concernant le champ login, la fonction ‘mailexist($mail)’ se connecte à la base de données et vérifie l’existence du login indiqué par le parent : si c’est bien le cas, l’utilisateur se tient alors informé.

Si l’annonce ne provient pas de la part d’un passager, l’utilisateur a la possibilité d’effectuer une réservation. Une alerte JavaScript le tient informé du succès de l’opération, et un email récapitulatif est envoyé aux deux parties (parents alpha et parent).

Une fois que le formulaire a bien été rempli, la fonction ‘insertion()’ se charge de créer l’espace personnel de l’utilisateur ainsi que d’envoyer un email contenant un lien d’activation à l’adresse mail indiquée lors de l’inscription.

Une fois la réservation effectuée, le nombre de places d’enfant est automatiquement décrémenté. S’il ne reste plus de places disponibles dans une activité, la fonctionnalité réservation est désactivée et la mention `complet` apparaît sur l’annonce.

Si l’utilisateur essaie de se connecter sans avoir activé son compte, un message clair lui est affiché en l’incitant à activer son compte.

Publier un Activité :

Le formulaire de connexion, contrôlé par PHP, permet d’accéder à l’espace membre. Si les identifiants saisis sont corrects, l’utilisateur passe à la page ‘mon-compte.php’, sinon un message clair l’informe de l’erreur survenue.

Dans cette partie (‘Activite_user_ step_1. php’), l’utilisateur a le choix entre Parent Alpha et Parent. Il est demandé de saisir activité + le lieu, nombre d’enfant, description d’activité. En cliquant sur le bouton « Valider et Passer à l’étape 2 », on récupère la saisie dans des variables de session transportables en pages ‘activite_user_ step_2.php’ et ‘Activite_user_ step_3.php’. Pour chaque valeur saisie par l’utilisateur, il y a des fonctions vérifiant l’exactitude des formats d’insertion des champs :

Dès que l’espace membre a été créé, l’utilisateur peut désormais bénéficier de toutes les fonctionnalités du site.

••ChercheractiviteBdd($Activité) : sélectionne toutes les activités dans la table.

A ce stade, les variables de session correspondant au dépôt d’un Activité sont vidées pour permettre une nouvelle proposition d’Activité.

••VerificationGenerale () : la fonction qui vérifie la présence de l’activité saisie dans la base de données en faisant appel à la fonction ‘chercherActiviteBdd($Activité)’. Elle vérifie aussi le format de saisie du nom de l’activité ainsi que des lieux et la date. En cas d’erreur de saisie, un message clair informe l’utilisateur.

Mon profil : Dans cette partie du site (‘profil.php’), il y a 2 fonctionnalités pour le moment : Mes informations générales (‘index.php’).: l’utilisateur peut modifier son nom, prénom, date de naissance et son numéro de téléphone (tous les champs sauf son login) qui sont sous les mêmes vérifications que les champs du formulaire d’inscription de la page ‘Form_inscription’ . Après validation les champs dont les valeurs ont été modifiées sont mises à jour dans la base de données à l’aide de la fonction ‘modfication()’.

••Dans la page ‘Activite_user_ step_2.php’, si l’utilisateur ne passe pas par la page ‘Activite_user_ step_1.php’, une redirection automatique le renvoie à l’étape précédente (vérification des variables de session). Il y a deux cas de figure possibles : ••Parents Alpha : il est donne de renseigner la date de l’activité, l’heure , le nombre de places d’enfants ainsi que les préférences du Activité. La fonction ‘vérification()’ s’assure de la bonne saisie, sinon en cas d’erreur un message clair est affiché demandant de bien renseigner les champs concernés.

Mes annonces : Cette page (‘annonces.php’) affiche l’historique des annonces sous forme de tableau: type d’annonce (Parent Alpha/parent), activite, lieu, date, heure, nombre de places réservées . Tout cela grâce à une fonction récupérant à partir d’une requête SQL les informations ci-dessus. Si l’utilisateur n’a publié aucune annonce, « aucune annonce » est affiché.

••Parents : il est demandé de renseigner juste la date de l’activité et l’heure de commencement. La fonction ‘vérification()’ s’assure de la bonne saisie, sinon en cas d’erreur un message clair est affiché demandant de bien renseigner les champs concernés.

Mes réservations : Cette page (‘reservation.php’) affiche l’historique des annonces sous forme de tableau : Nom _activité, lieu, date, heure, nom du parent Alpha. Tout cela grâce à une fonction récupérant à partir d’une requête SQL les informations ci-dessus. Et si l’utilisateur n’a effectué aucune réservation, « aucune réservation » est affiché.

Si tout va bien, une redirection vers la page ‘Activite_user_ step_3.php’ est effectuée après avoir cliqué sur le bouton ‘Valider et passer à l’étape 3’. Dans la page ‘Activite_ user_ step_3.php’, si l’utilisateur ne passe pas par ‘Activite_user_ step_2.php’, une redirection automatique le renvoie à l’étape précédente (vérification des variables de session). 19

Conclusion L’objectif de notre projet était de créer une application web dynamique dans le cadre de premier semestre sur web technologie, ce site offrant un ensemble de services autant qu’un site de rencontre à travers les activités des enfants, la consultation des plannings de réservation. L’application offre aussi un service collaboratif, permettant une interactivité entre les différentes activités. Plusieurs technologies ont été nécessaires pour la réalisation de notre projet, on citera donc le langage HTML, le langage PHP pour la partie dynamique, SQL pour l’élaboration des requêtes d’interrogation de la base de données, Sublime text 2 pour l’écriture du code et enfin Bootstrap pour le design et l’attractivité. Après le passage par les différentes étapes de développement, application ne pas aboutie a 100 % ils nous restent plus retouche et création au niveau développement et design, pour avoir à un site fonctionnel qui répond globalement aux critères imposés dans ce domaine. Le présent travail nous a permis d’acquérir des connaissances dans le domaine de la programmation web, et de conforter nos connaissances en conception site internet.