BTS SIO 2 SLAM PPE 1 : Site Commercial avec PHPP & SQL Cahier de charges du projet Nom: Bryan Gaudet Titre du TP : Site Commercial PHP & SQL Professeur référent : Mme. Gaddouri Nom du Site : Vintage Club 90 Etablissement : UFIP businesss School, Nice Sommaire I. Présentation et mise en situation du système..2-3 1. Contexte....2 2. Objectifs du site. 2-3 3. Choix technologique....3 II. Les Fonctionnalités..4-15 1. Les fonctionnalités qui marchent.......4-11 2. Les fonctionnalités qui ne marchent pas. 12-13 3. Les améliorations possibles...14 4. Les problèmes rencontrés.. 14 III. La base de données... 15-16 1. Créations des tables..15-16 2. Aspect sécurité......16 1
Présentation et mise en situation du système 1. Contexte Le site E-commerce Vintage Club 90 est un site qui vend toute sorte de produits lié aux domaines musicale, vidéos et artistiques. Ce dernier a pour théme la pop-culture des années 90-2000, on peux retrouver dans la rubrique Catalogue 4 catégories de produits différents : - Les vinyles - Les Cassettes VHS - Les appareils retros (ex : Lecteur vinyles, Walkman ) - Les Artworks Vintage Club 90 sert à commander touts les produits rares issue de la vague underground des années 90-2000 2.Objectifs du site Il s agit d un site e-commerce qui devra côté (Front) permettre à un client de pouvoir : - Choisir le type de produit qu il souhaite parmi 4 choix : (vinyle, cassette VHS, appareil retro ou artwork). - Commander plusieurs produits différents à la suite et la quantité d un même produit et les intégrés dans un système de panier - Modifier la commande depuis la page panier - S inscrire sur le site en souscrivant des informations de client dans les champs suivant : le nom, le prénom, l adresse email, le mot de passe, la confirmation de mot de passe, l adresse, la ville et le code postal. - Se connecter et donc être authentifié pour passer au 2 étapes de la validation de la commande c'est-à-dire «passer la commande» et «confirmer le paiement» Côté (Back), ce site sera lié à une base de données développée avec SQL : - La création de la base de données doit comporter 4 tables : produits, clients, commandes et catégorie (optionnel) - Sur le site où on présentera les articles du catalogue, on devra récupérer les valeurs de la table produits (dont les champs sont déjà remplis ultérieurement) pour qu elle nous les affiches - Lors d une inscription sur le site, les informations du profil devrons être enregistrées dans la table clients 2
- Lors d une validation de commande, les informations de la commande devrons être enregistrées dans la table commandes - L administrateur pourra voir, modifier les tables de la base de données, comme par exemple ajouter un produit avec les informations qui vont avec (photo, prix, description ) ou supprimer un compte client. 3.Choix technologique Le choix technologique proposé est basé sur des technologies Open Source car elles sont suivi en terme de maintenance et/ou de modifications par un autre groupe de développeur => WampServer -WampServer est une plate-forme de développement Web sous Windows pour des applications Web dynamiques à l aide du serveur Apache, du langage de scripts PHP et d une base de données MySQL. -Il possède également PHPMyAdmin pour gérer plus facilement les bases de données. => Apache Apache est un logiciel permettant de créer un serveur HTTP, il est conçu pour prendre en charge de nombreux modules, lui donnant des fonctionnalités supplémentaires : interprétation des langages Perl, Php, Python et Laravel, serveur proxy, réécriture d'url, négociation de contenu, protocoles de communication... => MySQL MySQL est un Système de Gestion de Base de Données (SGBD), qui sera un support de base de données utilisé pour stocker les tables et les informations nécessaires au bo n fonctionnement de l application. => PHP 5.6 - Cette application sera donc programmée sous PHP version 5.6. -PHP est un langage impératif disposant de fonctionnalités de modèle objet complètes. => HTML 5/ CSS 3 - Langage natif des navigateurs internet. - C est le corps d un site internet ou d une application web. - Le CSS est un langage informatique qui décrit la présentation HTML, c est la mise en forme d un site ou d une application. -Qui sert notamment à regrouper les différentes dispositions d une ou des parties d une page internet dans un seul fichier. =>jquery / Javascript - jquery est une bibliothèque Javascript libre qui porte sur l'interaction entre le Javascript (comprenant de l AJAX) et l HTML. =>Template HTML Boilerplate -HTML Boilerplate est un modèle qui permet d avoir un rendu plus graphique plus simple et plus rapide. =>Sublime Text -Sublime Text est un éditeur de code qui supporte plusieurs langages de programmation et qui permet donc de développer diverses applications web/logiciel. 3
1. Les Fonctionnalités qui marchent Fonctionnalité 1 : Visualisation des produits du Catalogue Fonctionnement Description Localisation/ Dépendances Restrictions Etat II. Les Fonctionalités Permet de visualiser les produits en vente pour le site, et une page unique dynamique qui détaille les informations pour un produit lorsqu il est cliqué. Affiche une liste de produits gérer avec un système de pagination (qui limite 10 produits sur une seule page), avec la possibilité de les triés par catégorie (4 : vinyles, K7 VHS, appareils, artworks) Sur la page index.php(visible sur le lien de la rubrique «Catalogue» de la bar de navigation et sur la page de présentation 5 produits sont visibles), Localisation : catalogue.php, produit.php Dépendance : classes/database.php Peut être vu par tous les utilisateurs qui parcourent le site Fonctionnel Page : catalogue.php 4
Page : produit.php Code : produit.php Code : catalogue.php 5
Fonctionnalité 2 : Ajouts et modification des produits dans le panier Fonctionnement Description Localisation/ Dépendances Restrictions Etat Permet d ajouter un ou des produits d une quantité désirable au panier ou de suprimer un produit ou encore diminuer/augmenter une quantité d un produit ou alors vider la totalité d un panier Affiche un tableau des produits ajoutés ultérieurement dans la page panier.phpp avec vers le bas le Total et 2 boutons en dessous «Continuer mes achats» et «Passer la commande» Localisation : panier.php,catalogue.php, produit.php Dépendance : classes/panier.php, ajouterpanier.php classes/database.php Tous les utilisateurs peuvent ajouter un ou des produits dans un panier Fonctionnel Page : produit.php Même action : ajout du panier Code :ajouterpanier.php 6
Page : panier.php Diminuer quantité Supprimerr produit Augmenter quantité Modifier produit Code : panier.php Code :classes/panier.php 7
Fonctionnalité 3 : Création d un compte client Fonctionnement Description Localisation/ Dépendances Restrictions Etat Permet de créer un compte client. Le client devra soumettre certaines informations (comme nom, email, adresse ) au formulaire inscription. A la fin de la soumission son compte sera activé si certaines informations sont valides (email, mot de passe) et alors confirmer des commandes par la suite. Affiche un formulaire d inscription via la page signup.php qui est composé de 8 champs saisissables au clavier (nom, prénom, email, mot de passe, confirmation de mot de passe, adresse, ville et code postal) et avec 1 bouton en bas «S inscrire» Localisation : signup.php, includes/header.php Dépendance : classes/database.php, includes.php Accessibles pour les utilisateurs qui ont une adresse email et qui veulent commander des produits qui les intéressent Fonctionnel Page : signup.php 8
Code : signup.php Suite : signup.php Code : Database.php 9
Fonctionnalité 4 : Authentification d un compte client Fonctionnement Description Localisation/ Dépendances Restrictions Etat Permet de se connecter à un compte client après la prise en charge des informations saisies lors d un formulaire d inscription. Le compte client est donc activé lorsque les champs saisis de l inscription ont été valides, et ces derniers seront donc enregistrer dans la base de données. Affiche un formulaire de connexion via la page login.php qui est composé de 2 champs saisissables au clavier (Email, Mot de passe) et un lien «s incrire» (qui dirige vers signup.php) et 1 bouton en bas «Se connecter» en dessous Localisation : login.php, includes/header.php Dépendance : classes/auth.php, classes/database.php, includes.php Seulement pour les utilisateurs qui ont créer un compte client Fonctionnel Page : login.php 10
Page : index.php Id de la Session du client Code : login.php Code :classes/ Auth.php 11
2. Fonctionnalité qui ne marche pas Fonctionnalité 5 : Confirmation de commande et paiement par paypal Fonctionnement Description Localisation/ Dépendances Restrictions Etat Permet de confirmer une commande de produits et d ensuite payer par un moyen paypal Affiche sur la page commande.php un tableau des produits ajoutés précédemment sur la page panier.php, mais sans les possibilités de modification. 2 boutons sont en dessous du tableau : «Retour au panier» (Redirection panier.php) et «Payer» (Redirection sandbox.paypal.com) Localisation : commande.php, sandbox.paypal.com, Dépendance : classes/panier.php, classes/database.php, includes.php,notif_ipn.php Avoir un compte client et un moyen de paiement paypal Inachevé : Les valeurs de la commande saisies dans la session sandboxpaypal ne sont pas pris en compte dans la base de données et donc pas enregistrées dans la table commandes Page : commande.php 12
Page : sandbox.paypal.com Code : commande.php Suite : commande.php 13
3. Les amélioration possibles Amélioration 1 : Pour la page catalogue, ajouter un filtre qui tri le prix des articles de façon croissante. Amélioration 2 : Créer un espace d administration qui comporterai : - Un dashboard (tableau de bord de vente) - Une gestion des commandes (Editer, Listing des commandes ) - Une gestion des produits (Ajout, Suppression, Edition) - Une gestion de clients (Liste, Suppression, Edition) Amélioration 3 : Créer un tableau de bord pour un profil client qui souhaitera : - Consulter son historique de commandes - Gérer le portefeuille (moyen de paiement) - Suivre son colis - Afficher une rubrique «Informations personnelles» pour les éditées Amélioration 4 : Mettre au point un système de commentaires, pour que les clients donnent un avis et une notation sur un produit. Amélioration 5 : L Activation d un profil client via un envoi de mail sur sa boite de messagerie, qui contiendra au préalable un lien qui finalise la validation de son compte. 4. Les problémes rencontrées L activation d un compte : Lors d une soumission d un formulaire d inscription, les valeurs des champs n étaient pas prises en compte dans la table clients de la base de données, j avais oublié de mettre la valeur de la colonne active à 1 qui permettait de enregistrer les valeurs dans la table. 14
III. La base de données 1. Création des tables La table : produits Colonne Type Attributs Null Défaut Extra Relié à id int(11) Non Aucune auto_increment nom varchar(255) Non Aucune description text Non Aucune prix float Non Aucune qte int(11) Non Aucune photo varchar(11) Non Aucune categorie_id int(11) Non Aucune cate gories La table : categories Colonne Type Attributs Null Défaut Extra Relié à id int(11) Non Aucune auto_increment nom varchar(255) Non Aucune La table : clients Colonne Type Attributs Null Défaut Extra Relié à id int(11) Non Aucune auto_increment nom varchar(50) Non Aucune prenom varchar(50) Non Aucune password varchar(255) Non Aucune email varchar(255) Non Aucune adresse varchar(255) Non Aucune ville varchar(100) Non Aucune codepostal int(5) Non Aucune token varchar(255) Non Aucune active int(1) Oui NULL role varchar(20) Oui NULL confirm_ pass varchar(255) Non Aucune 15
La table : commandes Colonne Type Attributs Null Défaut Extra Relié à id int(11) Non Aucune auto_increment client_id int(11) Non Aucune client montant float Non Aucune created datetime Non Aucune datas text Non Aucune txn_id varchar(255) Non Aucune 2. Aspect sécurité Tous les mots de passe des clients seront stockés dans la base de données, ce qui implique une méthode de cryptage pour la saisie d un mot de passe et d une confirmation de mot de passe, ainsi l administrateur aura seulement dans le phpmyadmin le rendu du mot de passe cryptés des utilisateurs, ce qui renforce la sécurité d accès d un compte. 16