EPREUVE E4. Dossier n 1. Projet Carbouffe. Arthur 06/06/1996

Transcription

1 EPREUVE E4 Dossier n 1 Projet Carbouffe Arthur 06/06/1996 Développement d un site web e-commercial. PHP, Html et CSS pour le développement web, des attentes de procédures stockées et triggers, l utilisation de la méthode MVC et de la technologie AJAX

2 Table des matières Contexte...2 Pages Site Web...3 Accueil...3 Produits...5 Compte Contact Données Base de données Procédures stockées Triggers Méthode MVC Technologie AJAX...4 1

3 Contexte CarBouffe, entreprise française, est présente dans la grande distribution dans le monde entier. Cette e t ep ise s est i stall e à la R u io e 1 en créant son premier magasin à Sainte Rose. Depuis, elle s est te due à toute l île, soit e a t d aut es agasi s, soit e a heta t des e seig es concurrentes. Elle souhaite étudier le comportement d'achat de ses clients afin de mieux cibler leurs attentes, et proposer des opérations commerciales moins coûteuses et plus efficaces. L'application devait être développée sous PHP (application WEB) et la base de données sous mysql, à l aide de l i te diai e PHP Ad i. Ci-dessous le contexte général de cette application : «La société CarBouffe souhaite étendre son champ d action en proposant un service de courses à domicile. Pour ce faire, elle souhaite mettre en place une application web permettant à tout habitant de la réunion de faire ses courses sur le site CarBouffeWeb et être ensuite livré.» Ce travail a abouti à plusieurs fonctionnalités : - Réalisation d'un site web commercial pour l'entreprise Carbouffe - Préparation d'un site vitrine, - Dynamisation des pages - Mise en place d'une gestion administrative Technologies mises en œuvre : HTML, CSS, PHP, MVC, Ajax, MySQL L appli atio pe et do à u lie t de s i s i e ou de s authe tifie, et de g e so pa ie en y ajoutant, modifiant ou supprimant des articles. Elle permet également à un Admin d effe tue u t avail de gestio des a ti les et des lie ts, au o e de la base de données. Cette partie du dossier aura pour but de montrer la démarche que nous avons suivi, et permettre de comprendre comment nous avons procédé pour arriver à bien. Nous pourrons ainsi acter les décisions et en dégager les éléments essentiels, connaître les tenants et les aboutissants du travail réalisé lors de la réalisation du projet, et, de plus, il permettra de raviver la mémoire des participants car il servira d'archives écrites sur le travail. Nous allons analyser en premier lieux les g illes d a de l appli atio, tout e les e pli ua t, puis nous analyserons la représentation des données de la base, enfin nous analyserons les procédures stockées et Triggers présents sur la base pour nous pencher sur la méthode MVC et la technologie AJAX ise e œuv e. 2

4 Accueil : Pages Site WEB La page d a ueil edi ige ve s les diff e tes pages du site, à l aide d u e a e de e u, ai si ue de liens. Elle sert de première page et de présentation du contexte, des faits et du site. 3

5 On remarque également la présence de mentions légales et de conditions générales de vente ainsi u u e petite p se tatio de la so i t : 4

6 Produits : La page des produits est gérée dynamiquement, en récupérant les données depuis la base et se rattache à un panier qui permet la gestion des articles. On peut en ajouter, en modifier le nombre, les supprimer ou même vider le panier. Ci-dessus les articles et ci-dessous le panier. 5

7 Le tout est géré par des classes : La classe article permet la gestio des appels des a ticles da s les Co t olle à l aide des fo ctio s. 6

8 La classe A ticles pe et la écupé atio des a ticles e ta t ue liste d a ticles. Elle pe également de trier les articles par catégories. On fait ensuite appel au Co t olle des a ticles, pou pe pa catégo ies et de cha ge le pa ie s il y e a u. et ett e d affiche les a ticles cha gés, t iés 7

9 Les catégories sont affichées par le Controller du panier qui fait appel au modèle de celui-ci, qui récupère les différentes catégories de la base (voir données -> base de données). Cela per et d affi her des produits e fo tio de leurs atégories. 8

10 Par ailleurs, la gestion du panier se fait avec une classe panier, qui permet de créer le panier, de le e ha ge à l aide d u s st e de ookies, d affi he so o te u, de le vide, ais su tout d ajoute, de supp i e ou de odifie la ua tit d a ti les da s le pa ie. 9

11 Ce Controller per et la odifi atio des arti les da s le pa ier si l o e odifie le o re. Ces Controller permettent de créer ou de détruire le panier. 10

12 Compte : U utilisateu à o e possi ilit s de se o e te ou de s i s i e. E faisa t l u de es hoi, il active une commande Ajax qui renvoie, dépendamment du choix, vers un Controller spécifique qui effectuera une action sur la base de données. On constate ue l o e voie les do correspondantes. es e egist es da s le fo ulai e di e te e t au pages php 11

13 La gestio se fait à l aide d u e lasse e e ui o tie t les fo tio s pe etta t la gestio des e es, ave la atio et l i s iptio de ceux-ci, ou qui récupèrent la session en cours en fonction du membre. 12

14 Pour la connexion, on utilise le Controller suivant qui récupère les données et vérifie leurs existence sur la base de données. 13

15 Pou l i s iptio, o les types de champs. up e les do es et on les inscrit dans la base, en effectuant un contrôle sur 14

16 Contact : Le formulaire de contact est une page en Bootstrap récupérée sur internet et adaptée aux besoins du site. 15

17 Base de données : Donnees La base de données se présente de la manière suivante : On utilise une classe, databasemanager, pour se connecter et manipuler la base de données. 16

18 On remarque les fonctions de connexion à la base de données, que ce soit du côté machine, ou du côté utilisateur. 17

19 O e a ue gale e t la p se e d u e p pa atio de e u tes, uestio de s u it, pou éviter les injections SQL. 18

20 Ci-dessus la table des articles, ci-dessous celle des catégories. Ci-dessous la table des membres. 19

21 Procédures stockées et Triggers : Cette p o du e se fait su l ajout d u en faire partie. e Ce T igge d t uit l ad i ist ateu asso i à u e da s la ase, et l ajoute o e e supp i e ad i si elui-ci doit. 20

22 Methode MVC Le pattern MVC permet de bien organiser son code source. Le but de MVC est justement de séparer la logique du code en trois parties que l'on retrouve dans des fichiers distincts : Modèle : cette partie gère les données de votre site. Son rôle est d'aller récupérer les informations «brutes» dans la base de données, de les organiser et de les assembler pour qu'elles puissent ensuite être traitées par le contrôleur. On y trouve donc les requêtes SQL. Vue : cette partie se concentre sur l'affichage. Elle ne fait presque aucun calcul et se contente de récupérer des variables pour savoir ce qu'elle doit afficher. On y trouve essentiellement du code HTML mais aussi quelques boucles et conditions PHP très simples, pour afficher par exemple la liste des messages des forums. Contrôleur : cette partie gère la logique du code qui prend des décisions. C'est en quelque sorte l'intermédiaire entre le modèle et la vue : le contrôleur va demander au modèle les données, les analyser, prendre des décisions et renvoyer le texte à afficher à la vue. Le contrôleur contient exclusivement du PHP. C'est notamment lui qui détermine si le visiteur a le droit de voir la page ou non (gestion des droits d'accès). L a hite tu e du site se p se te de ette faço : 21

23 L i de p i ipal fait appel à la vue pa d fault. L appel d u o t olle et d u fonctionnalité particulière. odel est pas essai e su la p e i e page a il a pas de 22

24 Technologie AJAX 23

25 Cette partie renvoie le code html d'un bouton pour ajouter au panier, en précisant l'id de l'article "numarticle", l'action du bouton ("ajouter" ou "enlever") et un style optionnel (des classes css) La deuxième ligne permet de gérer le cas où l on ne renseigne pas de style (si indéfini, le style par défaut est "icon") Ensuite, si l'action est «ajouter», on utilise data-action = "ajouter" Les champs data-action et data-article sont créés pour les besoins du fonctionnement, et la classe ajax_modif_panier est ajoutée systématiquement, puisque c'est cette partie que jquery "surveille". Pour la deuxième partie, est l'endroit ou jquery "surveille" les boutons. La première ligne se traduit par "lors du clic d'un bouton avec la classe ajax_modif_panier, faire..." On récupère dans les variables action et id les donnes data-action et data-a ti le, ue l on met par la suite dans data. Ensuite viens le bloc Ajax : on envoie une requête a la page controller/modif_panier.php avec comme données l'array data (avec dedans l'id article, et l'action) En cas de succès, on exécute la fonction qui est définie après succès (on affiche la réponse dans la console du navigateur pour debugger, on appelle charger_article pour rafraichir l'affichage des articles et idem pour rafraichir le panier) 24

26 Pour charger_catégories, même principe. Ici on envoie une array "options" à categories.php et on attend une réponse au format json. En cas de succès, on va construire le html à partir des données renvoyées sur la page php (data). La variable «c» sert à compter le nombre de catégories ue l on affiche ; Ainsi à chaque tour de bouche foreach, on connait notre position. Si le compteur vaut, à un moment, la valeur "actif", alors on rajoute le style actif dans le html de l'élément de menu. La ligne «classe = c == actif? 'active' : '';» est une version condensée de «si c == actif alors classe = 'active' sinon classe = chaine vide» La variable actif est déterminée en lisant le fragment de l'url appelé hash (qui commence par un hash #), on s'en sert comme indicateur de la catégorie active. Ainsi, pour catégorie_active, la fonction renvoie le nom de la catégorie active, puisque dans l'url c'est un nombre peu utile à première vue. Pour cela, on récupère la hash comme précédemment, puis avec jquery on sélectionne l'élément du menu catégorie en position x ou x est le hash (selecteur :nth-child) On renvoie alors l'attribut data-categorie de la catégorie. 25

27 Pour la première partie, on(hashchange) «surveille» les changements du hash. Si il y a des changements, il change, on enlève le style actif de tous les éléments de menu, puis comme précédemment on sélectionne l'élément actif actuel à l'aide du hash et on lui ajoute la classe active. Enfin on rafraichit les articles en prenant comme argument la catégorie que l'on souhaite afficher. Pour la suite, toujours pareil, une requête Ajax, on fournit des options ici une array. On peut également fournir, comme précédemment, catégorie ou bien page. Voir (controller/articles.php) pour la liste des options possibles (vu plus haut). Pour la construction du html, on itère simplement avec le foreach 26

28 Fonctions similaires aux précédentes. Elles permettent de charger un panier ou de le vider. Dans ce genre de code Ajax, on termine par $(...).html(html) qui met la var "html" dans l'élément html sélectionné via $(...). Les deux premières lignes permettent à une barre de recherche de trier les articles en fonction des lettres qui ont été tapées. La dernière fonction est appelée au chargement de la page: on charge les catégories, les articles de la catégorie active, le panier 27