Introduction. * voir définition des mots clés et techniques 1

Introduction Après l'analyse du projet en première année, nous nous concentrons maintenant sur la phase de création et de fabrication de notre site internet pour la vision et l'écoute de vidéos et musiques, avec une option de téléchargements. Entre ces deux années, notre groupe a subi quelques changements. En effet, deux personnes ont quitté le groupe à la fin de la première année pour cause de redoublement et de changement de groupe de projet. Suite à cela, nous avons tout de même complété notre équipe avec deux personnes venant d'un autre projet. Pour cette réalisation, notre groupe se compose donc de Thomas Guillaumin, Thomas Lenoir, Samuel Ramarosaona, Sitraka Ramanampisoa et Quentin Viel. Notre commanditaire est Monsieur Vassili RIVRON, tandis que nous avons eu un changement également au niveau de nos tuteurs. En effet, Monsieur Levilly fut remplacé par Monsieur Porcq. Le binôme de tuteurs est complété par Monsieur Delhoumi. Durant cette année, nous nous focalisons sur l'intégration de notre base de données externe, des modes de paiement et la réalisation du lecteur de musique et de vidéos (player) sur notre site web. * voir définition des mots clés et techniques 1

Partie I : Présentation 1 Les changements du cahier des charges Lors de notre première année, nous avons soumis une étude de l'existant à notre commanditaire et écrit un cahier des charges. Nous allons vous proposer un rappel des tâches que nous avions décidé en première année puis les changements apportés au début de cette seconde année. a) Rappel de première année Ce rappel des tâches de première année est nécessaire afin de pouvoir savoir quelles tâches ils nous restent à effectuer lors de cette deuxième année. Notre commanditaire avait posé au début de la première année des objectifs principaux : Le site doit pouvoir informer, promouvoir et vendre. Le lecteur de musiques et de vidéos (player)* doit avoir une bonne portabilité sur des ordinateurs qui ne possèdent pas toujours les mises à jour nécessaires et doit pouvoir se lancer dans la fenêtre parent et non en pop-up*. Les modes de paiement doivent pouvoir s'adapter à l'afrique. Suite à l'élaboration du cahier des charges, nous avons réfléchi aux différents moyens d'établir ces tâches : Notre première recherche s'est basée sur la mise en place du site en général de façon à répondre aux différents critères du commanditaire. Ce site devait pouvoir fonctionner sur des systèmes d'exploitation intégrés dans Windows 95 par exemple. Nous avons alors décidé de coder le lecteur en JAVA pour éviter le FLASH qui nécessite le plus souvent des mises à jour de la part de l'utilisateur sur son propre ordinateur. Ensuite, nous nous sommes basés sur le fait de pouvoir utiliser un système de gestion de contenu (CMS)* et nous avons donc choisi JOOMLA!. En ce qui concerne les différents modes de paiement, nous avions choisi en première année de faire payer les clients à l'aide de Paypal* et de SMS. Dernièrement, nous avions décidé de faire une base de données qui puissent optimiser au maximum la liaison entre les différents éléments du site. * voir définition des mots clés et techniques 2

b) Changements évoqués en début de seconde année Au début de notre seconde année, le commanditaire a changé quelques données : recentrage sur un seul artiste Sally Nyolo, positionnement sur le marché mondiale et non sur le continent africain essentiellement. Cela a donc provoqué quelques changements au niveau de la réalisation : L'arborescence de navigation du site a donc changé, le commanditaire souhaite se concentrer sur la promotion de Sally Nyolo et de ses musiques. Le site internet ne se concentrant plus sur le continent africain, le besoin de vétusté des ordinateurs n'est plus d'actualité. Ce qui nous permet d'enlever une contrainte qui nous semblait assez complexe. Le point précédant nous permet également de pouvoir nous recentrer vers un player en FLASH en cas de problèmes trop importants avec le player JAVA. Nous gardons tout de même le player JAVA en priorité. L'élargissement des segments de la population devenant mondiale, les modes de paiement se sont élargis également. Nous avons donc choisi au début de l'année de rajouter aux modes de paiement décidés en première année la carte bancaire (CB). Pour conclure, nous avons dû faire face à ces différents bouleversements au niveau de l'organisation et établir une nouvelle analyse des besoins suite aux nouvelles contraintes du commanditaire. 2 La répartition des tâches Lors de notre seconde année, nous avons effectué deux répartitions (voir Annexe I Diagramme de Gantt). Nous avons donc commencé à nous répartir trois tâches qui nous semblaient importantes pour bien commencer : la base de données a été étudié par deux d'entre nous, Thomas G. et Samuel R., deux autres Thomas L. et Quentin V. se sont occupés de trouver un player en JAVA pour l'intégrer ultérieurement à notre site, puis dernièrement Sitraka R. s'est occupé d'étudier le fonctionnement globale de notre système de gestion de contenu (CMS) JOOMLA!. Dans la deuxième partie de l'année, nous avons redistribué les tâches restantes et nous nous sommes recentrés sur des points plus importants à ce moment-là. Thomas G. et Thomas L. se sont concentrés sur les différents modes de paiement, tandis que Sitraka R. et Samuel R. se sont concentrés sur les spécificités de JOOMLA!. Quentin V. est quant à lui resté sur le player mais ayant abandonné le player JAVA, il a fallu qu'il recherche un module permettant de s'intégrer au CMS sans problème de version. Ce module est bien entendu en FLASH. * voir définition des mots clés et techniques 3

Partie II : Base de données et hébergement 1 Base de données Au début de la phase de création, nous avons montré notre modèle conceptuel de données (MCD)* à notre tuteur Monsieur Porcq, quelques problèmes sont apparus. Tout d'abord, notre MCD n'avait pas été vérifié par un professionnel l'année dernière, donc nous avons perdu du temps à le corriger et à le faire vérifier. Quand le MCD (Annexe II-1 MCD) fut validé, il fallut générer le Modèle Logique de Données (MLD)* (Annexe II-1 MLD) et commencer la base de données. Or, nous ne savions pas que Win'design 9.0 permettait la création d'un script SQL pour la base de données donc nous avons perdu du temps à intégrer chacune des tables à la main. Nous ne savions pas comment fonctionner PhpMyAdmin* et nous n'avons pu mettre en place les différentes clés étrangères et contraintes. Nous avons donc dû tout effacer et intégrer le script SQL de Win'design 9.0. Après avoir réalisé la base de données sur PhpMyAdmin, nos tuteurs nous ont demandé de la remplir avec des données fictives et de la tester à l'aide de scénarios pour voir si tout s'enchaîner parfaitement. Ensuite, nous avons dû connaître un minimum le système de gestion de contenu que nous avions choisi c'est-à-dire JOOMLA!. Or, lors de notre apprentissage sur ce CMS, nous avons remarqué qu'il ne pouvait pas être connecté à deux bases de données simultanément. C'est pourquoi, nous avons recherché sur différents forums des réponses à cette question importante qui se posait devant nous mais en vain. En conséquence, nous nous sommes rabattus sur le choix d'abandonner la base de données externe pour l'instant et de nous concentrer à JOOMLA! vu le temps perdu lors de ses recherches. Nous avions dans l'idée de trouver dans les fonctionnalités de JOOMLA! les modules*, les composants* et les plug-ins* qui nous permettraient de faire la même chose que si nous gardions notre base de données externe. 2 Hébergement En ce qui concerne l'hébergement*, le commanditaire souhaitait un hébergeur* peu coûteux mais qui était fiable. De plus, il fallait trouver celui qui allait supporter notre CMS JOOMLA! et avait un espace disque important pour contenir les différentes chansons et leurs extraits ainsi que des vidéos. C'est pourquoi le choix du commanditaire s'est tourné vers OVH et plus précisément l'offre OVH Pro (Annexe II-2 OVH). Nous avons rencontré un problème lors de la pose du nom de domaine (sallynyolo.com). En effet, un ami du commanditaire avait réservé ce nom de domaine sur un autre hébergeur 1&1, et nous devions avoir son accord pour transférer le site sous ce nom de domaine. Actuellement, nous avons les informations et les autorisations nous permettant de transférer le site sous l'hébergeur mais nous préférons pourvoir finir un maximum de choses (ex : le design, la boutique) avant d'effectuer ce transfert. * voir définition des mots clés et techniques 4

Partie III : JOOMLA! 1 Description Notre choix de système de gestion de contenu (CMS) s'est porté vers JOOMLA!. En effet, ce CMS nous a permis également d'intégrer un composant comme VirtueMart* qui est spécialisé dans le e-commerce. De plus, ce CMS permet la gestion d'un site plus facilement pour une personne qui n'y connaît pas grand chose. Différentes interfaces de gestions existent et permettent de contrôler les différents éléments d'un site. De plus, nous avons pu intégrer différents modules et composants qui nous ont aidé dans le développement du site vu que nous ne savions pas à l'époque comment utiliser la base de données externe. Par contre, il a fallu que ces modules et ces composants soient compatibles avec la version de notre système de gestion de contenu et notre version de PHP. 2 Installation de JOOMLA! Nous avions décidé de l'installer sur le serveur de l'iut (spartacus) puis de le migrer vers un hébergeur par la suite. Le responsable informatique nous a donc créé un compte pour notre projet et dès cette création effectuée, nous avons commencé l'installation de JOOMLA!. Il faut décompresser le dossier d'installation dans le dossier d'installation de JOOMLA! dans le répertoire Home/public_html/joomla puis se rendre à l'adresse ci-dessous pour commencer l'installation : http://spartacus.iutc3.unicaen.fr/~projet.music/joomla a) Etape 1 : La langue Cette étape consiste à choisir la langue durant l'installation. b) Etape 2 : Pré-installation Cette étape consiste en la vérification de la compatibilité du serveur web avec JOOMLA!. En effet, le serveur web doit bénéficier d'une version de PHP* supérieure à la version 4.3.10 et doit supporter les base de données MySQL* essentiellement. c) Etape 3 : La licence Cette étape présente la licence d'utilisation de JOOMLA!. * voir définition des mots clés et techniques 5

d) Etape 4 : Base de données Nous avions également du créer un compte MySQL, qui fut aussi héberger sur le serveur de l'iut afin d'y contenir la base de données de JOOMLA!. Les identifiants, mot de passe et le nom de la base de données seront ensuite renseignés dans les cases correspondantes afin de pouvoir continuer l'installation. e) Etape 5 : Configuration FTP Cette configuration n'est pas obligatoire dans le cas d'un serveur local comme celui de l'iut mais quand nous déciderons de mettre le site sur un hébergeur externe, nous serons amenés à compléter les champs demandés. f) Etape 6 : Configuration générale Cette étape permettra de renseigner les informations utiles au site. Il faudra en effet écrire le nom du site, attribuer un mot de passe et un courriel à l'administrateur (son identifiant étant admin). De plus, il faudra cliquer sur installer les données exemples si l'administrateur souhaite avoir l'ébauche d'un site Web fait sous JOOMLA!. g) Etape 7 : Finalisation Cette étape est la dernière et indique que le site est installé. Il faudra tout de même effacer le install.php du dossier Home/public_html/joomla pour que le site soit fonctionnel. * voir définition des mots clés et techniques 6

3 Conception du menu déroulant Lors de la mise en place du site, le commanditaire nous a fait remarquer qu'un menu déroulant serait souhaitable pour certains onglets du menu principal. Il nous a donc fallu trouver un module adaptable et intégrable dans JOOMLA! pour effectuer cette tâche. C'est pourquoi, nous nous sommes penchés sur le module Moonmenu_ck qui était compatible avec la version de notre CMS et celle du PHP. Ce module permet de faire des menus déroulants verticaux et horizontaux. Après l'avoir intégré dans le système de gestion de contenu, nous avons pu réalisé notre menu. * voir définition des mots clés et techniques 7

4 Conception d'un article Pour la conception d'un article, nous vous proposons de vous reporter au manuel d'insertion d'un article situé en Annexe (Manuel d'insertion d'un article). Par contre, nous avons eu un gros problème, lors de l'insertion des articles de la discographie. En effet, les premiers articles ne contenaient que la pochette de l'album et un article décrivant l'album. Or nous devions insérer pour chaque pochette la liste de ces titres. Et à ce moment, soit nous choisissions de l'écrire dans l'article en faisant un tableau par exemple, soit nous utilisions le PHP et un formulaire pour rentrer les données dans un table externe et les afficher automatiquement ensuite. Nous avons décidé de choisir le second choix pour des raisons d'ergonomie. C'est pourquoi, nous nous sommes penché de nouveau sur la connexion d'une table d'une base de données externe avec celle JOOMLA!. Nous avons pu compter sur l'aide d'un autre groupe de projet travaillant également sur JOOMLA! pour trouver la réponse. Il suffit de sélectionner la base de données que l'on souhaite utiliser sans oublier de redonner la main à celle de notre CMS quand nous n'en avons plus besoin. Code agissant sur la base de données choisie Une fois ce problème résolu, nous nous sommes mis à la création de la table dans laquelle nous allons insérer les données par la suite. Cette table se nomme CHANSON et contient quatre champs : ch_code : clé primaire qui s'incrémente automatiquement à chaque rentrée de données dans la table. ch_album : propriété qui va contenir le nom de l'album. ch_titre : propriété qui va contenir le nom de la chanson. ch_duree : propriété facultative qui contient la durée d'un titre de chanson. Ensuite, nous avons mis en place le formulaire HTML* qui permet de voir les champs que nous voulons compléter. * voir définition des mots clés et techniques 8

Après avoir effectué ce formulaire, nous avons mis en place le fichier PHP qui contiendra ce formulaire et les fonctions MySQL qui interagissent dessus. En effet, il a fallu faire différents contrôles. Tout d'abord, il faut mettre une casse pour les chaînes de caractères qui soit formel. Ensuite, il faut accéder au fonction seulement si les deux champs principaux (album et titre) du formulaire sont remplis. Puis, il faut aussi voir si le titre d'un album donné n'est pas déjà dans la base de données pour éviter la redondance d'informations. Ce dernier contrôle se fait à l'aide d'une requête qui compte le nombre de lignes de réponses. En cas de nombre de réponse égal à 0, les données sont insérées dans la table externe. Sinon, elles sont rejetées et nous pouvons voir s'afficher un message d'erreur indiquant la redondance des informations. * voir définition des mots clés et techniques 9

Ce formulaire d'ajout d'une chanson dans la table externe est bien entendu réservé à l'administrateur. En effet, il faut que celui-ci se connecte, à ce moment-là, un nouvel élément apparaît dans le menu du haut «Ajouter Chanson», ce qui lui permet d'accéder au formulaire. Ce nouvel élément du menu a été mis en place à l'aide d'un composant que nous avons intégré à JOOMLA!, c'est Jumi. Il permet d'appeler un fichier PHP créé au préalable et d'en faire une page à part entière dans le site. Après avoir fait ce formulaire d'ajout d'une chanson dans la base de données, il a fallu réfléchir à comment mettre en place dynamiquement les titres d'un album sur la page voulue. C'est pourquoi, nous nous sommes aidés de l'article déjà mis en place en éditant le code HTML de cette page. Puis, nous avons ajouté à ce code, du code PHP qui permet de sélectionner dans la table externe les titres d'un album souhaité grâce à une requête toute simple. La fonction «mysql_query» permet d'exécuter la requête. Pour afficher les réponses, il a fallu faire une boucle. La variable «$recup» permet de récupérer les différentes lignes suite à la requête sous forme de tableau. L'affichage se fait réellement lors de la concaténation de la variable «$i» et des cases du tableau souhaitées «$recup[2]» et «$recup[3]» correspondant respectivement au titre d'une chanson et à sa durée. * voir définition des mots clés et techniques 10

5 Lecteur de musiques et vidéos Les lecteurs des différents niveaux ne correspondaient pas aux besoins de Monsieur Rivron. Nous avons donc entrepris la création d'un lecteur adapté à nos besoins. Ce lecteur devait prendre en compte les différentes contraintes évoquées par le commanditaire et répondre aux cahiers des charges. a) Rappel des fonctionnalités coder en JAVA pour proposer un maximum de souplesse et de portabilité, lire des fichiers audio de trente secondes (.MP3) et des fichiers vidéos (.AVI), se lancer dans la page (et non en pop-up), faire apparaître une liste de lecture ainsi que les boutons lecture/, stop, passer, revenir, volume et plein écran, lire les extraits de manière aléatoire, offrir la possibilité de passer un extrait, offrir la possibilité de proposer un extrait à un client. * voir définition des mots clés et techniques 11

b) Début de l'implémentation Nous avons donc débuter par la création d'un lecteur codé en JAVA. En effectuant des re cherches sur Internet, notamment sur les flux audio et vidéos, et grâce à l'aide de M. LEBRUN, nous avons été en mesure de réaliser une première ébauche de lecteur. Ébauche de lecteur JAVA Celui-ci, d'une composition basique, nous permet de lire un fichier ciblé dans le code ainsi que de le mettre en pause ou de le stopper. A l'aide des boutons précédent et suivant, nous pouvons également lire une seconde musique et faire le lien entre les deux fichiers. Lecture JAVA en activité Ci-dessus, nous pouvons voir le lecteur activé, nous voyons ainsi que le bouton de lecture se grise, tandis que les boutons de pause et d'arrêt deviennent accessible à l'utilisateur. * voir définition des mots clés et techniques 12

Voici la fonction qui nous permet de lire notre fichier, grâce à l'utilisation de la classe SimpleSoundPlayer qui encapsule un son qui peut être ouvert à partir du disque dur et joué plus tard. Ceci est le constructeur de la classe SimpleSoundPlayer. Comme on peut l'observer, cette classe fonctionne grâce à un système de de flux audio. Nous avons donc réussi à réaliser un lecteur de base pour lire nos fichiers musicaux, mais il fallait également pouvoir gérer les autres fonctionnalités attendues : la gestion des listes de lecture et lire les extraits de manière aléatoire. De plus, il a fallut prendre en compte le fait que l'on devait incorporer notre lecteur à JOOMLA. Étant donné la complexité de la tâche, et suite au conseil de M. Porcq, nous avons finalement choisi de trouver un module pour JOOMLA permettant de remplir les fonctionnalités décrites dans le cahier des charges. * voir définition des mots clés et techniques 13

c) Choix du lecteur AVR Après de nombreuses recherches sur Internet, nous avons trouvé un module pouvant contourner nos problèmes. Le module AllVideos Reloaded nous donne la possibilité d'inclure nos propres vidéos ou fichiers audio. Nous sommes maintenant capable d'inclure et de jouer n'importe quel type de vidéo ou de contenu audio, en utilisant des tags simples, depuis le contenu envoyé sur notre serveur. En plus d'être facile à utiliser, le module AllVideos Reloaded est rapide à mettre en place, gratuit et flexible. Pour lire nos fichiers audio ou vidéo, nous devons créer deux dossiers audio et vidéos qui doivent être situés dans le dossier image du site. Puis, pour lire notre fichier audio, il suffit d'utiliser des balises de lecture comme dans cet exemple : {mp3}monfichier.mp3{/mp3} En insérant ce code dans le contenu de l'article, on observe la création d'un lecteur contenant notre fichier son. Le module permet de gérer une multitude de format. Le module AVR nous offre également la possibilité de gérer nos listes de lecture. Pour se faire, il nous suffit de créer un fichier XML contenant les informations nécessaires. XML (extensible Markup Language) est un langage informatique de balisage générique. Il utilise des balises, permet l'utilisation de balises personnalisées et offre la possibilité d'échanger des données. La balise est un caractère, ou une série de caractères, utilisé pour la structuration d'un document et qui sera invisible par le lecteur final. Ainsi, voici un exemple de fichier XML qui permet de jouer une liste de lecture : les balises <tracklist> permettent de créer notre liste de lecture. les balises <track> définissent une nouvelle piste. les balises <location> définissent le chemin pour accéder à nos morceaux. * voir définition des mots clés et techniques 14

Afin de simplifier la navigation à l'utilisateur, nous avons choisi, en accord avec notre commanditaire, de proposer la mise en place d'un pop-up qui s'ouvre lorsque l'utilisateur clique sur un bouton situé sur la page de l album. En cliquant sur le bouton de lecture, nous créons un nouveau popup contenant la liste de lecture correspondante. * voir définition des mots clés et techniques 15

Au niveau du code, celui-ci reste relativement simple : {auto popup="true" plsize="100" pbgcolor="#ffffff" pfgcolor="#000000" psccolor="#000000" screenmode="plright" divid="mypopup01" autostart="true"}list.xml{/auto} {avrpopup id="mypopup01"}<img alt="ecouter l'album" src="http://www.davidicke.com/movie/images/uploads/play_button.jpg" mce_src="http://www.davidicke.com/movie/images/uploads/play_button.jpg" width="40" height="40">{/avrpopup} la balise auto permet de ne pas se préoccuper du type de notre fichier. Le lecteur le reconnaît de lui-même. les balise pbgcolor, pfgcolor et psccolor définissent les couleurs de notre lecteur. la balise screenmode permet d'afficher notre liste de lecture à l'endroit désiré. la balise divid créée un popup, sans l'afficher. enfin, la balise avrpopup créée le lien affiché dans la page Internet et active le popup si l'on clique sur ce même lien. * voir définition des mots clés et techniques 16

6 Design du site Artiste Un des objectifs principaux du site était de vendre, il était donc important d'avoir un design qui soit bien fait. Le commanditaire a décidé de confier cette tâche à des étudiants d'information- Communication (IC), nous avons dû coordonner notre travail avec eux. Ils nous ont proposé un premier design (Annexe II-6 Premier design) qui n'a pas été retenu par le commanditaire. De notre coté, pour ne pas perdre de temps en l'attente d'un autre design, nous avons décidé de travaillé sur un template* déjà existant dans JOOMLA! : Rhuk Milkyway (Annexe II-6 Template). Comme nous nous sommes par la suite adapté à ce template, les étudiants de l'autre département ont dû se baser sur ce modèle pour effectuer un second design qui a été validé en suite par le commanditaire (Annexe II-6 Second design). Une fois, le design en main il a donc fallu le mettre en place. La difficulté est alors apparu lors de cette phase de conception. Nous pensions au début que ce ne serait pas trop difficile, or nous nous sommes trompés. En effet, l'interface administration du site ne nous permettait aucun remodelage, il a donc fallu que nous nous attaquions directement à la feuille de style (CSS) du site. L'analyse de cette feuille de style a été un gros problème pour nous, nous avons eu du mal à reconnaître quelle balise correspondait à quelle partie du site. Même quand nous avons réussi à distinguer les différentes balises, nous nous sommes rendu compte qu'une modélisation comme nous le souhaitions n'était pas possible. Ne pouvant donc pas diviser le site en trois parties, nous avons mis en place une image de fond donnant l'impression de partage. Mais sur cette image de fond, le texte vient s'écraser ce qui donne un visuel désagréable. Nous avons donc dû décaler le texte en fonction de l'image de fond. La mise en page du texte ne s'est pas fait dans le CSS contrairement à l'image de fond mais se fait directement dans l'interface de publication d'article. * voir définition des mots clés et techniques 17

Partie IV : Paiement Le site propose le visionnement d'extraits de vidéo et l'écoute d'extraits de musiques durant la navigation. Une fois, le paiement mis en place, le visiteur pourra télécharger légalement ces morceaux ou ces vidéos depuis le site. C'est pourquoi, nous avons recherché en première année différents modes de paiement (CB, SMS et Paypal). Lors de cette phase de création, nous allons vous expliquer les problèmes rencontrés avec certains de ces paiements et les choix effectués. 1 Carte Bancaire Le paiement par SMS est un des modes de paiement le plus utilisé sur Internet. Il suffit de se munir de sa carte bancaire classique. Au niveau du fonctionnement (Annexe IV 1 Diagramme de séquence) : 1. Client entre ses coordonnées bancaires sur le site marchand (numéro de carte, date de validité et cryptogramme visuel) Numéro carte : Date validité : Cryptogramme visuel : * voir définition des mots clés et techniques 18

2. Informations bancaires transmises à la banque du vendeur de manière sécurisé. Site Internet Envoie des informations vers la banque du vendeur Banque vendeur 3. Banque du vendeur envoie une demande d'autorisation à la banque du client. Envoie de la demande d'autorisation Banque vendeur Banque client 4. Envoie d'une réponse de la banque client vers la banque du site commerçant. Envoie de la réponse de la banque client Banque client Banque vendeur * voir définition des mots clés et techniques 19

5. Banque du commerçant renvoie alors une requête contenant la réponse d'autorisation (acceptation ou refus) vers le site du vendeur. Site Envoie d'une requête d'autorisation ou de refus de l'achat Internet Banque vendeur 6. Ticket électronique s'affiche sur l'écran de l'internaute et indique le résultat de la transaction. Commande n : 2165 Prix : 1,99 Validation commande : oui Télécharger : Cliquer ici Au niveau de l'intégration du mode de paiement dans le site Web, il faut voir directement avec la banque du vendeur. Un contrat est alors établi entre la banque et le responsable de l'entreprise qui vend les produits présents sur le site. Une fois, le contrat signé, un compte entreprise est ouvert et la banque fournit un logiciel de gestion. Ce logiciel peut être intégré à l'aide d'un code (en C, JAVA, ou HTML) fourni par la banque. Une difficulté intervient lorsque l'on souhaite nous même créer cette page de paiement et transmettre les données cryptées sans l'intermédiaire des modules proposés par les banques. En effet, il faut crypter ces données pour qu'elles soient sécurisées. On effectue ce cryptage grâce à des algorithmes et on sécurise par un protocole HTTPS. Ce n'est pas notre optique à ce jour mais une possibilité d'études dans l'avenir. * voir définition des mots clés et techniques 20

Au niveau de la gestion des ventes, le logiciel fourni par l'entreprise permet de gérer différentes actions possibles telles que la date de transaction, valider nous-même le transfert vers le compte entreprise ou encore rembourser un achat pour différentes causes. Le prix de souscription à une offre comme celle-ci auprès de la banque du commerçant varie entre 450 et 800. Un exemple de plateforme de gestion de paiement par carte bancaire pour le vendeur : Les commissions prises par la banque sont très importantes. Notre commanditaire a donc décidé délaisser ce mode de paiement. * voir définition des mots clés et techniques 21

2 SMS Le paiement par SMS a avant tout été retenu car c'est un moyen de micro paiement. C'est un service de paiement qui permet l'achat de contenu ayant une faible valeur unitaire. Nous avons constaté ensuite plusieurs avantages au paiement par SMS : La navigation sur internet n'est pas interrompue. Le code est bien lisible à l'écran. Le code peut-être conservé. Le coût est clairement défini et maîtrisé. Au niveau du fonctionnement : 1. Client choisit de payer sur le site internet. Il voit alors le numéro de téléphone et un code de chanson généré aléatoirement. Chanson : Béti Code chanson : 02 Envoie le code ci-dessus au 88212 (prix d'un sms + 1,50) Code téléchargement : 2. Client envoie le code au numéro de téléphone indiqué. 3. Vendeur (par l'intermédiaire du serveur) renvoie un code aléatoire à quatre caractères au client * voir définition des mots clés et techniques 22

Numéro : 88212 Code téléchargement : 2jK6 02 4. Client rentre alors le code de téléchargement reçu par SMS sur la page requise. En cas de mauvais code, le client reste sur la même page. 5. Dans le cas contraire, on arrive sur la page de téléchargement avec un lien de la chanson que l'on souhaite télécharger. Chanson : Béti Téléchargement : ici Le vendeur va ainsi rentabiliser son achat grâce au SMS que le client à envoyer. L'argent que le client à déversé est renvoyé sur un compte que l'opérateur nous a donné. Pour recevoir cet argent, il est nécessaire de faire une demande à l'opérateur. Or, l'opérateur récupère une commission sur chacune des transactions. * voir définition des mots clés et techniques 23

Client paye Le compte reçoit L'opérateur prend comme commission Le vendeur perçoit 1 SMS à 2,00 2,00 1,15 0,85 1 SMS à 1,50 1,50 0,85 0,65 On remarque alors que le vendeur ne reçoit qu'une faible partie du prix de vente initial. Nous avons donc décidé d'oublier ce mode de paiement comme le commanditaire le souhaitait à cause des commissions prises sur chaque transaction. * voir définition des mots clés et techniques 24

3 Paypal a) Les différentes solutions Paypal Sur l'ensemble des trois modes de paiement envisagés au début de la seconde année, Paypal semble le plus intéressant. En effet, outre le pourcentage de commission que la société prend sur chaque vente, le système une fois mis en place assure une sécurisation efficace des données personnelles. Lorsque le client a ajouté différents produits au panier et qu'il décide de payer, il sera redirigé vers le site de Paypal afin d'y rentrer ses identifiants et de continuer le paiement. Étant sur leur site, Paypal assure crypter les informations personnelles du client et qu'aucune d'entre elles ne seront utilisées à des fins illicites. Voici un tableau récapitulant les commissions réalisées par Paypal : Ventes Mensuelles avec Paypal De 0,00 EUR à 2 500,00 EUR De 2 500,01 EUR à 10 000,00 EUR De 10 000,01 EUR à 50 000,00 EUR De 50 000,01 EUR à 100 000,00 EUR Plus de 100 000,00 EUR Prix par transaction 3,4% + 0,25 EUR 2,0% + 0,25 EUR 1,8% + 0,25 EUR 1,6% + 0,25 EUR 1,4% + 0,25 EUR Paypal propose plusieurs solutions aux vendeurs et aux acheteurs pour répondre aux différents besoins des uns et des autres. Dans notre cas, nous recherchons la solution permettant à un client de payer via un compte Paypal les produits qu'il souhaite acheter sur notre site. Deux solutions répondent à ces critères : 1ere solution : Paypal Option +* (Annexe IV-3 Paypal Option +) : Solution standard en manière de paiement sur un site web pour les utilisateurs d'un compte Paypal : 1. Acheteur valide son panier d'achat sur notre site. 2. Acheteur choisit Paypal comme mode de paiement. 3. Acheteur est alors redirigé vers Paypal pour s'y connecter. 4. Acheteur vérifie et confirme le paiement. Le compte du vendeur est crédité. 5. Acheteur est redirigé sur notre site. Notre commanditaire, Monsieur Rivron, nous a fait part en première année d'une contrainte concernant la procédure d'achat. En effet, il souhaite réduire le plus possible le nombre de clics pendant cette procédure. La seconde solution intitulée «Paypal Express» serait alors idéal : 2eme solution : Paypal Express* (Annexe IV-3 Paypal Express) : 1. Acheteur clique sur «Acheter avec Paypal», il paie alors directement sans avoir à créer son compte ou donner son adresse de livraison. 2. Acheteur valide de nouveau les informations détenues par Paypal. * voir définition des mots clés et techniques 25

Suite au paiement, notre site doit tout de même vérifier les informations envoyées par Paypal afin de pouvoir donner son autorisation pour la sortie du produit. La manière de récupérer ces données varie selon la façon d'intégration de Paypal dans le site. b) Les deux technologies d'intégration : Il existe deux technologies différentes pour intégrer Paypal dans JOOMLA!. On peut l'intégrer à l'aide de l'html ou d'un web service (API). L'HTML est le langage connu de tous pour représenter une page web tandis que l'api Paypal* est une brique fonctionnelle développée par Paypal. Voici un tableau comparatif de ces deux techniques d'intégration : HTML Avantages Simple, rapide d'utilisation Flexible, puissant, personnalisable Inconvénients Peu flexible Complexité accrue Exemple de code HTML : API Exemple de code API : * voir définition des mots clés et techniques 26

c) Les problèmes rencontrés Nous avons donc dû faire un choix entre ces deux solutions données par Paypal et ces deux techniques d'intégration. Paypal Option + peut être intégré via les deux technologies API ou HTML tandis que Paypal Express ne s'intègre qu'avec API Paypal. Au vu des contraintes données par le commanditaire, nous nous sommes donc penchés sur Paypal Express et nous avons essayé de l'intégrer et de comprendre le code API. Paypal propose une plateforme de test en ligne, nous avons donc pu y tester notre code. Les transactions de test s'effectuaient entièrement cependant nous n'arrivions pas à récupérer les informations relatives au paiement, primordiales pour le téléchargement, en utilisant l'api (Annexe I-1 Transfert de données de Paiement en API). En effet, lors de l'étape n 1 de l'index, nous envoyions un formulaire vers le site Paypal équivalent à celui ci-dessous : Durant plusieurs étapes, le site Paypal nous renvoyait des informations avec des attributs différents selon chaque étape sous la forme suivante : Cependant à une des étapes, au lieu que la variable «&ACK» ait la valeur «Succès» elle avait la valeur «Échec». Ceci nous empêchait de poursuivre la procédure pour recevoir les données de paiement. Nous n'avions pas trouvé d'où provenait l'erreur, de plus nous avions remarqué que la différence entre les deux solutions proposées par Paypal sur le nombre de clics était minime. Ainsi, au vue de notre retard dans l'avancement de cette partie du projet, nous avons décidé d'intégrer Paypal Option + en HTML plutôt que de passer beaucoup de temps sur la compréhension de l'api (développeurs confirmés) pour Paypal Express. * voir définition des mots clés et techniques 27

La procédure pour recevoir les données de paiement en utilisant la technologie HTML (Annexe I-2 Transfert de données de Paiement en HTML) comporte trois étapes. Tout d'abord Paypal nous envoie le numéro de transaction par HTTP GET. Puis nous envoyons à Paypal par HTTP POST le numéro de transaction précédemment reçu ainsi que notre jeton d'identité. Enfin Paypal nous envoie ensuite les informations concernant le paiement. Ces informations se présentent de la manière suivante : Cependant nous n'avons jamais réussi à recevoir une réponse de ce type. L'envoi de notre formulaire contenant le numéro de transaction ainsi que le jeton d'identité se soldait par une erreur 4003. La recherche dans les différentes documentations Paypal concernant cette erreur ne nous a pas permis d'en trouver la cause. Voici un des formulaires testés pour cette procédure : En théorie l'erreur proviendrait probablement d'un mauvais envoie du numéro de transaction ou du jeton d'identité. Toutefois, en testant une multitude de possibilités, nous n'avons jamais reçu ses données de paiement. * voir définition des mots clés et techniques 28

d) Téléchargement et solutions envisagées Le transfert de données de paiement est primordial pour permettre un téléchargement automatique du produit acheté une fois la transaction réalisée. En effet dans ces informations une variable mentionne le statut du paiement (accepté ou refusé). S'il était refusé, le site afficherait un message indiquant à l'utilisateur que le paiement n'est pas validé et qu'il ne peut pas télécharger le produit. En revanche si le paiement était validé, un mail aurait été envoyé à l'adresse email de l'utilisateur récupéré via Paypal par les données de paiement. Ce mail comporterait un lien vers la section téléchargement du produit sur le site, ainsi qu'un code unique. C'est ce code unique qui une fois rentré sur le site permettrait à l'utilisateur de télécharger son produit. Étant donné que nous n'arrivons pas à recevoir les données de paiement, la page testant la validité du paiement n'a pas été réalisé. Une solution permettant le téléchargement automatique serait éventuellement de ne pas utiliser le transfert de données de paiement mais un autre service proposé par Paypal intitulé: notification instantanée de paiement. Ce service une fois mis en place pourrait peut être nous informer sur le statut du paiement et ainsi autoriser ou non le téléchargement d'un produit. Toutefois cette solution n'a pas encore été approfondie. Il existe une autre solution alternative cependant elle ne permet pas l'automatisation du téléchargement et risque de provoquer la protestation des utilisateurs du site. Elle consisterait à l'envoi d'un mail au gérant du site en l'occurrence Monsieur Rivron dès qu'une transaction est effectuée. Dès réception du mail le gérant vérifierait le statut du paiement sur son compte Paypal. Puis en conséquence enverrait un mail à l'utilisateur comportant ou non le lien et le code de téléchargement du produit. L'adresse mail de l'utilisateur étant préalablement récupérée par un formulaire du site. Cependant dans un premier temps cette solution n'est pas pratique pour le gérant. Dans un second temps elle pourrait provoquer la protestation des utilisateurs ne recevant pas de mail rapidement après l'achat et pensant s'être fait arnaqués. * voir définition des mots clés et techniques 29

Conclusion Réalisations du projet : Lecteur de musique et de vidéos - Intégration en flash dans le CMS. - Lecture dans une pop-up. Mise en place des articles Mise en place du design - Affichage des pages de l'onglet Discographie se fait en HTML et PHP. - HTML : Affichage des textes et des liens. - PHP : Affichage des titres et de leur durée. - Coordination avec les IC. - Textes et design non confondus sauf sous Internet Explorer. Base de données externe - Seulement une table externe «Chanson». - Contenance : Noms des albums et des titres et leurs durées. Menu déroulant Améliorations envisagées : - Permet l'accès direct à une page. - Fait à l'aide un module intégré à JOOMLA!. Paiement en ligne Boutique Lecteur de musiques et vidéos - Intégration du paiement dans JOOMLA!. - Mise en place des derniers articles. - Intégration directement dans la page parent. - Éviter les coupures pendant les changements de page. Ces deux ans de projet sur l'analyse des besoins et la réalisation nous a amené une expérience. En effet, la gestion du travail d'équipe (organisation et temps de travail) nous sera utile dans le monde du travail dans les années avenir. * voir définition des mots clés et techniques 30