SIHAM - PFE

1 2 DEDICACES A mes chers parents, Mais aucune dédicace ne serait témoin de mon profond amour, mon immense gratitude et mon plus grand respect, car je ne pourrais jamais oublier la tendresse et l’amour dévoué par lesquels ils m’ont toujours entourer depuis mon enfance. Je dédie aussi ce modeste projet : A toute ma famille, pour leur soutien moral. A tous mes amis, et à tous ceux que j’aime et à toutes les personnes qui m’ont Prodigué des encouragements et se sont données la peine de me soutenir durant cette année de formation. A mes chers formateurs et formatrices, sans aucune exception. A tous les membres de L’Ecole ELOSIG a Fès. A tous les stagiaires de T.S.D.I 2ème année. 3 REMERCIMENT Je tiens à remercier toutes les personnes qui m’avoir donné à la fois le courage et la confiance en moi-même pour pouvoir continuer mes études. Nous tenons à rendre un grand hommage à M.LAMCHANNAK Mohamed le directeur de l’Ecole ELOSIG, Nous remercions chaleureusement nos encadrant M.El MEZANDY Mohamed pour son aide, son soutien, sa gentillesse et la patience qu’il a manifesté à notre égard durant ce projet. Par la même occasion et avec un haut respect, il nous est agréable de remercier infiniment notre formateur Mlle.HALIM MERYEM pour son effort et collaboration. 4 SOMMAIRE Partie Théorique Chapitre 1: Animalerie en ligne - INTRODUCTION GENERALE…..........................................................................................................8 1- Définition d’Animalerie …………………………………………………………………………………………………………..9 2- Pourquoi vendre en ligne accessoires et produits pour animaux de compagnie ?.........................10 3-Quels sont les prés requise avent d'ouvrir animalerie en ligne?................................................11 -QU'EST-CE QUE LE COMMERCE ÉLECTRONIQUE ?................................................................…….12 1- Comment le commerce électronique fonctionne-t-il …………………………………………………….………..14 2- Quels sont les avantages et les inconvénients du commerce sur Internet ?............................15 2.1- Les Avantage…......................................................................................................................16 2.2-Les inconvénients……………………………………………………………………………………………………………........16 3- Comment se lancer efficacement dans le commerce électronique..........................................17 4-Conclusion…………….…………………………………………………………………………….……………………….……….19 Chapitre 2: Les Sites Web -QU’EST-CE QU’UNE SITE WEB ?........................................................................................................21 1-Quelle est l’utilité d’un site web ?....................................................................................................22 2-Définition d’une page web……………………………………………………………………………………………….………...22 3-Les différents types des sites web………………………………………………………………………………………..........23 3.1-La différence entre un site web statique et un site web dynamique………………………………..…....23 4- Comment faire un site web ?..................................................................................……………………...24 5-Conclusion ……………………………………………………………………………………………………………………………24 Chapitre 3: Environnement de développement utilisé 5 -LANGAGES UTILISES…………………………………………………………………………………….…………………..……25 1- HTML : Historique………………………………………………………………………………………………………………….26 1.1- C'est quoi Langages HTML ? ……………………………..................................................................27 1.2- Les Balises HTML………………………..........................................................................................28 1.3-Structure d’une page web…………………………………………………………………………………………….…...29 2-Les définitions: …………………..……………………………….....................................................................29 2.1- CSS ……………………………………………………………………………………………………………………………...30 2.2- PHP ………………………………………………………………………………………………… …………………………..31 2.3- MySQL ………………………………………………………………………………………………................................31 2.4-JavaScript…………………………………………………............................................................................32 3-Quels sont les principaux Framework JavaScript ?.......................................................................32 - LOGICIELES UTILISES :….......................................................................................................34 1- Les définitions : …………………..……………………………......................................................................34 1.1-VsCODE………………………………………………………………………………………………………………… …….....34 1.2- Bootstrap..............................................................................................................................35 1.3- XAMPP……………………………………………….……….......................................................................35 1.4-Quel est le but de XAMPP ?................................................................................................36 2-Conclusion………………………………………………....................................................................................36 6 Partie Pratique Chapitre 1: Conception et réalisation de Projet 1-Analyse et Conception…………………………………………………………………………………………….…………………....37 1.1-Introduction………………………………………………………………………………………………………………………....37 1.2-Diagramme de cas d'utilisation…………………………………………………..………………………………..……...38 1.3-Diagramme de classe…………………………………………………………………………………………………….……..39 2- Les interfaces graphique………………………………………………………………………………………………………......…40 2.1- Page Home…………………………………………………………………………………………………………………………....42 2.2- Page magasin…………………………………………………………………………………………………………………….…..42 2.4-Page catégorie ……………………………………………………………………………………………………………….….…43 2.4-Page Register ………………………………………………………………………………………………………….……….…..43 2.5-Page Login……………………………………………………………………………………………………………………………...44 2.6- Page Panier………………………………………………………………………………………………………………………..….44 3-Conclusion…………………………………………………………………………………………………………………………….……….46 -Tables des index ……………………………………………………………………………………………………………….…..47 -Table des Figures………………………………………..……………………………………………………………………..….…..48 -Webographie ………………………………………………………………………………………………………………………..…..48 7 8 - INTRODUCTION GENERALE : Le commerce international occupe une place importante dans les débats de politique économique dans la période récente. Selon les nations, les échanges internationaux sont perçus comme une chance, par exemple pour les pays d’Asie qui connaissent une croissance forte en raison de leurs exportations, ou comme une menace, pour les pays développés qui voient la production de nombreux secteurs concurrencée par des importations accrues. Depuis la fin de la Seconde Guerre mondiale jusqu’en 2008, le commerce international a connu, à de très rares exceptions près, une croissance remarquable, très supérieure à celle de la production mondiale. Mais la crise financière de l’automne 2007 et ses répercussions sur l’économie réelle conduisent à des prévisions de diminution très sensible: d’après les données de l’OMC (Organisation mondiale du commerce), les exportations mondiales du premier trimestre 2009 ont diminué de 22 % en glissement trimestriel et de 31 % en glissement annuel. Alors que, jusqu’en 2007, la mondialisation commerciale semblait vouée à une croissance sans limite, de nouvelles interrogations sur son futur s’expriment maintenant ; à l’impact de la dépression sur le commerce mondial s’ajoute la crainte de réactions protectionnistes. Parmi les problèmes rencontrés par les vendeurs avant l'émergence du commerce électronique figurent de nombreux problèmes, notamment le loyer des magasins chers, les taxes sur les magasins et le problème de l'implantation du magasin dans la région ou le pays, ce qui rend le magasin moins attractif, ainsi que fatigue et perte de temps lors de la présentation du produit aux clients. Tous ces problèmes constituent un obstacle majeur pour les patrons de commerce car ils réduisent la part des revenus face à la fatigue et au temps perdus. Par conséquent, l'émergence du commerce électronique a beaucoup aidé à résoudre la majorité des Problèmes et à faciliter les échanges, car il est devenu dépendant de l'affichage des produits sur les sites, de leur promotion et de leur publicité avec facilité. 9 1- Définition d’Animalerie: Magasin ou commerce qui vend des animaux de compagnie est une entreprise de vente au détail qui propose des produits pour animaux domestiques tels que la nourriture et collations, les cages ou aquariums, des jouets, des brosses et accessoires en général pour l'entretien et l'élevage d'une grande variété d'animaux. Figure1 : Photo d’un Animalerie Une animalerie ou magasin en ligne d'animaux de compagnie qui peut vendre par internet a laide des sites web 1.1-Produits des animaux : Ces dernières années, le marché des produits pour animaux de compagnie s'est considérablement développé .L'industrie a développé et incorporé de nouveaux produits, de plus en plus spécifiques, pour tous les types d'animaux domestiques et pour tous les types de besoins. Par exemple, des habits pour les animaux domestiques avec incontinence ou en chaleur; des vêtements et des bottes pour les chiens, des mangeoires programmables (distributeurs 10 De nourriture) qui appellent l'animal à manger à l'heure dite (grâce à un message qui peut être enregistré par son maître) et beaucoup plus. Dans le domaine des aliments équilibrés, il y a également eu une grande avancée. La variété de produits pour animaux de compagnie ayant des besoins spécifiques a été étendue : selon l'âge et la taille, pour les animaux qui souffrent de problèmes médicaux, selon l'environnement dans lequel ils vivent (à l'intérieur ou à l'extérieur), etc. 2-Pourquoi vendre en ligne accessoires et produits pour animaux de compagnie ? Des chiffres en constante augmentation : Internationale : Les québécois ont dépensé pour leurs animaux domestiques près de 1,4 milliards de $ en 2017 et ce chiffre ne fait qu’augmenter.  Plus de 8,2 milliards de $1 a été dépensés pour nos animaux chéris au Canada en 2017.  En 2018, les canadiens avaient 8,2 millions de chiens et 8,3 millions de chats en tant qu’animaux de compagnie2.  Près de 3 millions de chiens et chats au Québec et 1 ménage sur 2 a un animal de compagnie3.  3% des achats pour les animaux (accessoires et nourritures) au Québec se font sur le web4 , soit un marché de 246 millions de $ au Canada.  Les Animaux Familières au Maroc 61,6 milions 6% 5% Poissons Chats 13% Chiens 17% 59% Oiseaux Petits mammiféres Figure2 : Les animaux familiers au Maroc 11 En effet, dans la société actuelle, nous pouvons remarquer qu’il y a un certain besoin dans cette niche. On voit de plus en plus de personnes donner beaucoup d’importance à leur animal de possibilités et le besoin est important. de compagnie. Nous pouvons notamment le remarquer avec l’émergence des réseaux sociaux. La population française aime que son animal de compagnie ait des accessoires pour lui. En passant du petit manteau pour chiens à un aquarium de qualité, vous avez beaucoup C’est très important de se lancer dans une niche répondant à un besoin. En l’occurrence, la niche des animaux de compagnie résout bel et bien le besoin de gâter son animal. En effet, ça ne résout pas un problème comme le stress, le sommeil…. Mais il y a vraisemblablement une demande et s’il y a une demande, il y a beaucoup de possibilités en ce qui concerne le business en ligne. 3-Quels sont les prés requis avant d’ouvrir animalerie en ligne ? Comme dans tout commerce, certaines étapes sont indispensables avant l’ouverture d’une animalerie en ligne. Voici les points-clés incontournables à la réussite de votre projet .Votre animalerie en ligne doit s’adresser à un public déterminé. Vous entrez dans le domaine commercial : votre entreprise va donc rechercher des clients intéressés par vos produits. Quel est votre public cible ? Quel est votre persona ? Quels sont les produits qui cartonnent sur les réseaux sociaux ? Quelles sont les marques les plus novatrices ? Évidemment, vous vous adresserez à des propriétaires d’animaux pour la plupart, mais quels seront ces animaux ? Chiens, chats, reptiles, rongeurs, oiseaux, poissons… À vous de savoir vers quelle niche vous tourner ! Aussi, ces propriétaires d’animaux auront certainement des caractéristiques précises : ils seront dans l’attente de produits spécifiques pour leurs petites bêtes qui ne pourront certainement pas trouver ailleurs que chez vous. Produits bio, respectueux de l’environnement, jouets originaux, nouvelles technologies d’accessoires pour la maison, produits d’hygiène respectueux et responsables, etc. Soyez à l’affût 12 des dernières tendances pour séduire un maximum de nouveaux consommateurs attentifs et soucieux du bien-être de leurs animaux de compagnie.  Choisir la structure juridique adaptée Votre commerce doit être encadré par une structure juridique adaptée à votre situation. Si vous souhaitez ouvrir une boutique en ligne seul, vous pouvez opter pour le statut d’auto entrepreneur et donc la micro entreprise. Démarche allégée, rapidité d’ouverture de boutique : en quelques clics, vous pourrez recevoir votre numéro SIREN et ainsi démarrer votre aventure ecommerce. Si vous envisagez de dépasser les 176 200 euros de chiffre d’affaires H.T. par an, alors vous pourrez vous tourner vers la société unipersonnelle comme l'EURL. Si vous souhaitez vous associer avec quelqu’un, alors ce sera plutôt vers la SARL qu’il faudra se pencher. Si vous voulez ouvrir votre société à plusieurs autres associés comme dans une SAS, tournez-vous vers des comptables et avocats spécialisés en droit des affaires pour pouvoir répondre à ces questions plus poussées. Franchises et marques leaders : faire une étude de marché Sur le marché de l’animalerie en ligne, il existe déjà des dizaines voire des centaines de propositions différentes. Que ce soit des grandes franchises ou des boutiques indépendantes, parcourez le web et les réseaux sociaux pour connaître les marques leader et les produits qui cartonnent. Avec une étude de marché, votre but sera de tirer le meilleur parti des best-sellers mais également de trouver les fournisseurs qui pourront vous proposer les meilleurs prix. Grâce à la veille concurrentielle, vous pourrez vous inspirer des meilleures pratiques des marques déjà installées sur le secteur mais également connaître les faiblesses de ce domaine en 13 Perpétuel mouvement et ainsi vous démarquer de tous vos concurrents grâce à cette lecture précise des qualités et des défauts du marché. Etablir un business plan solide Les animaleries en ligne n'échappent pas à la règle du business plan : ce document commercial va vous permettre une gestion optimale de votre entreprise. Le business plan vous permet de mettre à plat toutes les idées liées à votre future entreprise mais également toutes vos ambitions d’avenir. Ce document qui n’appartient qu’à vous va vous permettre de dessiner le cap précis lié à votre activité pour vous y tenir et tracer votre chemin le plus court vers la réussite. Au-delà d’un projet immédiat, le business plan est aussi un document qui vous permettra de récolter des fonds une fois votre société en croissance auprès de mécènes ou de banques et ainsi vous développé davantage sur le long terme. Créer une stratégie marketing précise et originale La concurrence fait rage dans le milieu de l’animalerie en ligne. Ce qui pourra vous aider à sortir du lot, ce sera d’établir une stratégie marketing et de communication unique, originale, avec des créations de contenus qui n’appartiennent qu’à vous. Jouez sur l’émotion que peut ressentir un propriétaire d’animal de compagnie à la vue de jolies photos et de vidéos mignonnes mettant en scène un chat, un chien, un petit oiseau, etc. Mais surtout, mettez en avant tous vos produits de qualité et tous ceux qui sortent de l’ordinaire grâce à des post sur les réseaux sociaux qui pourront expliquer et faire découvrir vos nouveautés à vos futurs clients potentiels. On manque d’inspiration pour vos réseaux sociaux ? Pas de panique : découvrez des idées de post Instagram qui feront mouche auprès de vos clients et prospects ! Aussi, optimisez vos actions sur votre site afin de booster votre référencement naturel : choisissez les bons mots-clés et créez des contenus de qualité pour pouvoir vous hisser à la tête des résultats des moteurs de recherche. Pour en savoir plus sur ces leviers, suivez tous nos articles sur notre blog SEO.Trouver ses fournisseurs et les meilleurs produits animaliers Il faut que votre animalerie en ligne tienne toutes ses promesses : cela va alors passer par le recrutement des meilleurs fournisseurs de votre domaine et donc la vente des produits les plus qualitatifs du marché. 14 Aussi, les clients sont toujours en quête de promotions et de prix cassés sans pour autant s’asseoir sur la qualité des produits qu’ils achètent. À vous donc de pouvoir négocier auprès de vos fournisseurs les meilleurs prix mais également de partir à la recherche de nouvelles marques qui pourront séduire vos futurs clients. Grâce à cela, vous pourrez vous positionner en expert dans le domaine des animaux de compagnie et vous deviendrez incontournable, car vous seul aurez l’œil pour trouver les pépites que les petites et grandes bêtes adorent ! - QU'EST-CE QUE LE COMMERCE ÉLECTRONIQUE ? Le commerce électronique désigne le fait de vendre un bien ou un service par voie électronique, via un réseau Internet. Entreprises et particuliers peuvent lancer leur activité de ecommerce, tout dépendra ensuite du type de transaction selon les modèles de commerce électronique. Le e-commerce (autre appellation du commerce électronique) est un processus d'achat et de vente, par l'intermédiaire d'un ordinateur ou d'un Smartphone. Cette stratégie multicanale est largement plébiscitée, d'autant qu'avec les nouvelles technologies, le commerce mobile prend de plus en plus d'ampleur. Pour les entreprises ou les particuliers, si l'achat des produits ou des prestations de services se font à distance, le paiement s'effectue lui aussi en ligne, par transaction électronique. Statistique d'utilisation de commerce électronique aux mondes 600% 400% Statistique d'utilisation de commerce électronique aux monde 200% 0% 2018 2019 2020 2021 Figure3 : Histogramme montrant le pourcentage d’utilisation de commerce électronique aux mondes 15 1- Comment le commerce électronique fonctionne-t-il Le commerce électronique est accessible sur la toile 24h/24 et 7 jours/7, à la différence du commerce traditionnel. En pratique, le cyberacheteur suit presque le même processus d'achat que lorsqu'il se rend dans une boutique physique. Il cherche des informations sur un produit et compare son prix via un moteur de recherches. En parallèle, il peut aussi être séduit par un article ou un service additionnel, et ainsi effectuer un achat compulsif. Dès qu'il passe sa commande, l’e-commerçant de la boutique en ligne s’occupe de la logistique et lui livre le produit fraîchement acheté à son adresse. Le commerce électronique est un canal de distribution. Simple et rapide à utiliser, il permet de faire ses achats à toute heure, sans même avoir à se déplacer. Nombreux sont ainsi les clients à se laisser séduire par la possibilité de trouver n'importe quel produit, à n'importe quel moment, depuis n'importe quel lieu. Taxes, code de la consommation, paiements par carte ou par d'autres moyens, droits et devoirs des entreprises, spécificités des pays européens, de Etats-Unis... Cette économie numérique prend en charge toutes les spécifications du commerce physique. 2-Quels sont les avantages et les inconvénients du commerce sur Internet ? 2.1-Avantages du commerce électronique :  Des achats plus rapides pour les clients  Pour les clients, le e-commerce permet de faire des achats de n’importe où et à n’importe quel moment.  Ainsi, les acheteurs peuvent obtenir les produits qu’ils veulent et dont ils ont besoin plus rapidement. Il ne sont donc pas limités par les heures d’ouverture d’un magasin traditionnel. 16  De plus, les mises à jour d’expédition rendent la livraison rapide disponible aux clients. Elles permettent également de diminuer largement le délai de livraison des commandes (pensez à Amazon Prime Now, par exemple).  Les entreprises peuvent facilement atteindre de nouveaux clients  Le commerce électronique permet également aux entreprises d’atteindre plus facilement de nouveaux clients dans le monde entier.  Un site de e-commerce n’est pas lié à un emplacement géographique unique. En effet, il est ouvert et accessible à tous les clients qui le visitent en ligne.  D’autre part, les marques ont la possibilité d’entrer en contact avec d’importants auditoires pertinents qui sont dans un état d’esprit prêt à acheter. Cela est possible notamment grâce à la publicité sur les médias sociaux.  Réduction des coûts d’exploitation Par ailleurs, les détaillants en e-commerce peuvent ouvrir des magasins avec des coûts d’exploitation minimes. En effet, ils n’ont pas besoin d’une vitrine physique (et d’employés pour la doter en personnel). Au fur et à mesure que les ventes augmentent, les marques peuvent facilement étendre leurs activités. Aussi, elles n’ont pas besoin de faire d’importants investissements immobiliers ou à embaucher une main-d’œuvre importante. Cela signifie donc des marges plus élevées dans l’ensemble. Expériences personnalisées Grâce à l’automatisation et à l’utilisation des données, les entreprises peuvent offrir des expériences en ligne hautement personnalisées à leurs clients de e-commerce. 2.2- Les inconvénients du commerce électronique :  Interactions limitées avec les clients  Sans être face à face, il peut être plus difficile de comprendre les désirs, les besoins et les préoccupations des clients de e-commerce.  Il existe encore des moyens de recueillir ces données (données d’enquête, interactions avec le service à la clientèle, etc.). Cependant, cela exige un peu plus de travail que de parler avec les acheteurs en personne sur une base quotidienne.  17  Les pannes technologiques peuvent avoir une incidence sur la capacité de  Si le site de e-commerce d’une entreprise est lent, en panne ou indisponible vendre pour ses clients, cela signifie qu’aucune vente ne sera possible.  Les pannes de site et les défaillances technologiques peuvent nuire aux relations avec les clients et avoir un impact négatif sur les résultats financiers de l’entreprise.  Aucune possibilité de test ou d’essai.  Pour les acheteurs qui souhaitent voir et toucher le produit (surtout dans le domaine des produits physiques comme les vêtements, les chaussures et les produits de beauté), l’expérience du commerce électronique peut être limitée.  Cependant, avec l’aide de la vidéo, des images de produits et même de la technologie de réalité virtuelle, les entreprises trouvent de nouvelles façons de surmonter cet aspect de l’expérience d’achat en ligne. 3- Comment se lancer efficacement dans le commerce électronique ? Si le commerce électronique est particulièrement porteur actuellement, mieux vaut préparer correctement le lancement de votre entreprise pour assurer sa réussite. Il sera alors nécessaire d'établir un plan d'action efficace afin de ne rien laisser au hasard. Vous pouvez imaginer créer un SWOT, une expression anglaise pour "Strengths – Weaknesses – Opportunities – Threats" soit "Forces – Faiblesses – Opportunités – Menaces", pour évaluer les challenges et les risques, ou encore regarder ce que votre future concurrence propose pour suivre certains codes, les tranches de prix ou le style de communication employé. Se poser les bonnes questions avant de démarrer : Connaissez-vous la règle des 5W ? Ce label très utilisé aux Etats-Unis correspond à une liste de questions, que nous pouvons traduire en français comme suit : “Qui, Quoi, Où, Quand, Comment, Combien, Pourquoi”. Comme dans tout projet personnel ou professionnel, le but sera de savoir si vous avez tout intérêt à vous investir dans une nouvelle aventure. Des challenges, du temps et de l'argent seront employés afin de construire votre chemin vers la réussite. Ouvrir un commerce sur Internet n'est pas une solution de facilité ! Si l'investissement est moins important que pour une entreprise physique, la concurrence, en revanche, est bien plus grande. Prenez donc le temps d'avoir le recul nécessaire pour trouver le marché porteur ! Assurez18 vous de trouver la bonne idée, tout en ayant suffisamment de motivation et de temps à consacrer à votre nouvelle activité. Aussi, ne délaissez pas l'importance de votre communication : vos réseaux sociaux et votre présence en ligne seront votre vitrine pour solliciter de nouveaux clients, de nouveaux partenaires. S'investir au niveau de l'image et du marketing pourra vous faire gagner en notoriété et en influence plus rapidement. Il n'y a pas que la vente dans une entreprise de commerce électronique ! Pour vous démarquer, je vous conseille aussi de trouver un concept original et différenciant. Mettez-vous un instant à la place de vos clients… Quelles seraient les raisons qui vous pousseraient à acheter sur votre propre site marchand plutôt qu'auprès d'un autre commerce électronique ? Proposez-leur des produits de qualité à des offres tarifaires intéressantes. Mettez un point d'honneur à la sécurisation de leurs données numériques et de leurs envois. Montrez-vous réactif et à l'écoute. Trouvez le juste équilibre pour être compétitif, mais rentable. Faire une étude de marché pour votre entreprise Votre e-business aura lui aussi droit à son étude de marché avant d'être lancé ! Avant de démarrer votre projet, renseignez-vous sur vos potentiels clients, vos concurrents et vos fournisseurs. Tâchez d'identifier les niches sur lesquelles vous pourriez vous positionner pour vous spécialiser. Enfin, définissez avec précision le profil de vos clients et leurs habitudes de consommation. Ces profils types seront des guides afin de construire votre projet. Ils pourront déterminer de nombreux détails de votre plan marketing comme la présentation de votre site, votre manière de communiquer, les attentes en termes de paiement, d'expédition, de livraison et, pourquoi pas, des demandes localisées (selon leur ville ou leur région). Créer son nom de domaine, son logo puis son site * Une fois le concept clairement mis en place, trouvez un nom de domaine percutant et facile à retenir pour votre site. Il doit être disponible et original, sans être trop long. Prenez réellement le 19 Temps d'y réfléchir, car il s'agit d'un point très important pour assurer le succès de votre commerce électronique. Communication, affichages publiques, publicités en ligne, ADN de marque... Tous ces éléments seront influencés voire conditionnés par votre dénomination ! Votre logo doit également être bien réfléchi, tout en révélant d'emblée votre secteur d'activité. Dès lors, il ne vous reste plus qu'à créer votre site. Pour cela, WiziShop offre une Solution complète et facilement accessible, tout en vous proposant de très nombreux designs ergonomiques. S'occuper des démarches administratives En parallèle, n'oubliez pas de gérer les démarches administratives et juridiques inhérentes à la création d'un commerce électronique, comme le choix de votre statut, l'ouverture de votre compte professionnel, la rédaction de vos statuts ou encore la mise en place de votre business plan, pour convaincre d'éventuels investisseurs. Profitez d'une formation complète et offerte sur le commerce électronique ! 6-Conclusion : Comme des millions de personnes, vous êtes amoureux des animaux et vous souhaitez vous réaliser dans une activité en lien avec eux. Pour cela, le e-commerce peut vous ouvrir les bras : en créant une animalerie en ligne, il vous sera possible de vendre des produits animaliers Par conséquent, la conception d'une animalerie électronique nécessite de savoir créer un site Web et de le télécharger sur Internet. Quelle est la définition d'un site Web ? et comment il est créé ? 20 21 -QU’EST-CE QU’UNE SITE WEB ? La définition d’un site Web (website en anglais) ou site Internet est un ensemble de pages Web reliées entre elles par des liens internes, visualisable depuis un navigateur Web. D’une manière générale, la totalité des pages d’un site Web est accessible sur une même adresse, sous le même nom de domaine. Un site Internet contient différents types de contenus (textes et multimédia), et est hébergé sur un serveur Web. Le serveur Web, pour sa part, est accessible à travers un réseau Internet ou intranet, par l’intermédiaire d’un navigateur Web comme Firefox, Internet Explorer, Chrome, Safari, Opera… Chaque page Web qui constitue un site Web est un ensemble de documents HTML structurés et stockés sur le serveur Web. 2-Définition d’une page web : La page Web est principalement composée de textes, mais également d’images, de vidéos, d’animations, ou encore de liens dirigeant vers d’autres sites Web. Selon l’objectif du propriétaire d’un Web site, il existe un certain nombre de types de sites Web, notamment les sites e-commerce, les sites vitrines, les sites portails, les sites institutionnels, les sites communautaires, les sites personnels, les blogs, parmi tant d’autres. Il existe actuellement un grand nombre de concepteurs de sites web, appelés Webmasters ou Webdesigners. De nos jours, Internet et ses sites Web ont intégré le quotidien de la population mondiale, servant de moyen de communication, de divertissements, de désir de connaissances, de partage… Un site Web peut être utilisé par un professionnel pour faire connaître ses activités ou ses compétences, mais également pour augmenter les ventes. Par ailleurs, les sites Internet sont également des outils très efficaces pour développer la notoriété et la réputation d’une marque sur le Web. Un site web est plusieurs pages web reliées par les liens et accessible via une adresse web. 22 3-Les différents types des sites web : Un site web peut être de natures variées. On peut citer :  Les sites e-commerce ou boutique en ligne, dont l’objectif est la vente en ligne.  Les sites vitrines, qui peuvent par exemple être utilisés pour présenter une organisation ou promouvoir une marque. Les Extranets, dont l’objectif est de partager des données entre plusieurs individus distants (l’Intranet n’étant pas accessible par Internet, on ne peut pas l’inclure dans la catégorie des sites web).  Les médias sociaux, support à la création de réseaux sociaux.  Site web statique : si les produits ne sont modifiés qu'une ou deux fois par mois et qu'un ou deux Nouveaux produits sont ajoutés au catalogue chaque année Site web dynamique : si on souhaite que les visiteurs ajoutent des commentaires sur les fiches Produits et/ou qu'il faut modifier très souvent (ajout, suppression, modification) les fiches produites. 3.1-La ddifférence entre un site web statique et un site web dynamique Site statique : les pages du site ne sont pas modifiables par des utilisateurs. Le site est donc rempli et mis à jour par l'administrateur qui le fait depuis son poste de travail. Une fois le site mis à jour sur l'ordinateur de l'administrateur, celui-ci devra être envoyé sur le site via FTP. Le site est dit statique car les pages HTML qui le compose sont toujours identiques entre deux visites sans mise à jour. Le serveur donc n'a pas besoin de éléments de scripting. b- Site dynamique: les pages du site qui le compose peuvent être modifiables par les visiteurs. De plus, entre deux visites sur un même site, le contenu de la page peut être différent sans action de l'administrateur du site Internet. Les grandes applications de ce type de site sont : les forums, les Wiki (Wikipédia étant le plus grand représentant du genre) et tous les sites communautaires (Facebook, Twitter, hi5, etc.). Le serveur qui fait fonctionner le site utilise une technologie de Scripting (comme PHP, Ruby, Python ou Perl) ainsi qu'une base de données comme MySQL. 23 Les Sites Web statiques • Leurs contenu ne change jamais , même pour tous les visiteurs . Les Sites Web Dynamiques • Leurs contenu variés en fonction d’information (heure, nom d’utilisateurs ,formulaire rempli par l’utilisateurs ...). Les Sites Web fonctionnels ou Web-App • qui vous met en relation un réseau d’amis et vous permet de partager le contenu Exp : Facebook… Les Sites Web e-commerces • Boutique en ligne ,dont l’objectif est la vent en ligne , Exp : Jumia… Figure4 : Tableau montrant les types des sites web et leurs définitions. 4-Comment faire un site web ? Il existe des dizaines de façons de faire un site web. Dans les premiers temps du web, faire un site web consistait à stocker des fichiers (html, images, etc) sur un serveur web et à les rendre accessibles par Internet. Dans le jargon du métier, Il existe aujourd’hui des systèmes assimilables à des Framework qui permettent, selon la destination du site, de fournir des canevas pré-établis pour créer des sites plus maintenables plus rapidement et de meilleur qualité. C’est par exemple le cas des CMS, qui offrent une interface de gestion simplifiée pour réaliser soi-même son site web sans connaissances techniques particulières. 24 Figure5 : Les étapes de création d’un site web 5-Conclusion : L'Internet est en effet un réseau de vigilance, alimenté par les associations, et les gouvernements, accessible à tous les citoyens (au moins dans les pays les plus développés), et qui peut en outre servir de source d'information pour tous. Et dans ce chapitre, nous avons présenté le mécanisme de transport de l'information sur Internet et la différence entre un site statique et un site dynamique. Ainsi nous allons voir plus en détail dans les chapitres suivants, la présentation des concepts de base de langage de modélisation UML. Pour permettre une bonne lecture de ce qui va suivre et exprimer de manière uniforme l'analyse et la conception de site e-commerce 25 LANGAGES UTILISES : 26 HTML :Historique Avec le protocole HTTP et les adresses URL, l'HTML est l'une des trois inventions majeures ayant permis l'avènement du Web tel qu'on le connaît aujourd'hui. L'invention de l'HTML est attribuée à un Anglais de ans au moment des faits. Son nom, Tim Berners-Lee. On lui attribue plus généralement l'invention de l'Internet moderne, l'HTML n'étant que l'une des technologies sur lesquelles Lee a travaillé. Pour être tout à fait honnête, Lee n'est pas parti de rien. Il existait déjà à l'époque des langages utilisant un système de balises. Le plus connu était le SGML, que Tim Berners-Lee connaissait bien puisque ce langage était utilisé par le CERN, le Centre Européen de Recherche Nucléaire situé à Genève et pour le compte duquel il travaillait à l'époque. C'est en août 1991 que Tim Berners-Lee annonce publiquement son travail, en utilisant d'ailleurs le premier fichier HTML de l'histoire. C'est donc cette date qui marque la naissance officielle de l'HTML. Á l'époque, on ne parle même pas encore d'HTML1. L'HTML n'est pas standardisé et ne compte que les quelques balises de base permettant de créer des titres, des paragraphes, des listes, et bien sûr des hyperliens. Au début des années 1990, l'HTML n'est pas formellement défini. Ce sont donc les implémentations de l'HTML par les navigateurs qui définissent son fonctionnement, et les incompatibilités sont très nombreuses. Pour tenter de mettre de l'ordre dans tout cela, on crée en 1994 le W3C, avec à sa tête un certain Tim Berners-Lee. En mars 1995, le W3C annonce l'HTML2 qui, grosso-modo, reprend les différents éléments ajoutés au langage par les divers navigateurs, et essaye d'en faire un standard que tout le monde devrait idéalement respecter. Mais très vite, des voix discordantes se font entendre. On reproche au W3C, principalement composé de scientifiques et d'académiques, de ne pas assez se soucier de l'apparence des pages web et de trop se concentrer sur la structure des documents. Malgré l'introduction de l'HTML 3.2, puis très vite après de l'HTML 4 par le W3C en 1997, les navigateurs continuent à n'en faire qu'à leur tête et ajoutent dans le langage HTML des éléments de présentation dont la plupart ne sont pas définis dans la norme HTML officielle. 27 C'est l'époque de la guerre des navigateurs, principalement animée par Internet Explorer d'un côté et Netscape de l'autre. Pour les développeurs web, c'est l'époque des sites incompatibles, des langages divergents, des navigateurs supportant ou ne supportant pas tel ou tel élément. Bref, c'est l'enfer. Les années 2000 voient les deux camps se déchirer. Dans une tentative de reprendre le contrôle et d'imposer son idée, le W3C annonce qu'il abandonne le développement de l'HTML et qu'il se lance dans le développement de l'XHTML, une variante plus stricte du langage qui ne se concentre que sur les aspects de structuration du document, la mise en forme des pages web étant confiée à une autre technologie émergente, le CSS, les Cascading Style Sheets. De leur côté les constructeurs de navigateurs se rebellent et forment leur propre groupe, appelé WHATWG, dans le but de poursuivre le développement de l'HTML, abandonné par le W3C. Plus généralement le WHATWG conteste l'autorité et le mode de fonctionnement du W3C, considéré comme trop fermé par une partie des développeurs et des designers web. Le développement d'un standard HTML respecté par tous est à l'arrêt. Mais les besoins des internautes évoluent rapidement. 1.1-C'est quoi Langages HTML ? Figure5 : Logo de html HTML signifie « HyperText Markup Langage » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (CSS) et/ou ses fonctionnalités interactives (JavaScript). 28 L'« hypertexte » désigne les liens qui relient les pages web entre elles, que ce soit au sein d'un même site web ou entre différents sites web. Les liens sont un aspect fondamental du Web. Ce sont eux qui forment cette « toile » (ce mot est traduit par web en anglais). En téléchargeant du contenu sur l'Internet et en le reliant à des pages créées par d'autres personnes, vous devenez un participant actif du World Wide Web. 1.2- Les Balises HTML Le langage HTML utilise des « balises » pour annoter du texte, des images et d'autres contenus afin de les afficher dans un navigateur web. Le balisage HTML comprend des « éléments » spéciaux tels que <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> et bien d'autres. En HTML, les balises sont insensibles à la casse et peuvent aussi bien être écrites en minuscules, en majuscules voire avec un mélange des deux. Autrement dit, la balise <title> pourrait très bien être écrite comme <Title>, <TiTle> ou d'une autre façon. 29 1.3-Structure d’une page web <html></html> -une balise permet la mise en page et en forme du contenu d’une page web <title></title> -une balise de langage html pour définir le titre de la page <head></head> -une balise de langage html pour définir la zone d’entête <body></body> -le corps du la page Figure 6 : structure d’une page web 2-LES Définition : 2.1-CSS : Figure 7 : Logo CSS Le CSS pour Cascading Style Sheets, est un langage informatique utilisé sur Internet pour la mise en forme de fichiers et de pages HTML. On le traduit en français par feuilles de style en cascade. 30 Apparu dans les années 1990, le CSS se présente comme une alternative à la mise en forme via des balises, notamment HTML. Un peu plus complexe à maîtriser, il permet un gain de temps considérable dans la mise en forme d'une page web par rapport à ces balises. Grâce au CSS, vous pouvez en effet appliquer des règles de mise en forme (titrage, alignement, polices, couleurs, bordures, etc.) à plusieurs documents simultanément. 2.1-PHP : Figure 8 : Logo de PHP Le PHP, pour Hypertext Preprocessor, désigne un langage informatique, ou un langage de script, utilisé principalement pour la conception de sites web dynamiques. Il s'agit d'un langage de programmation sous licence libre qui peut donc être utilisé par n'importe qui de façon totalement gratuite. Créé au début des années 1990 par le Canadien et Groenlandais Rasmus Lerdorf, le langage PHP est souvent associé au serveur de base de données MySQL et au serveur Apache. Avec le système d'exploitation Linux, il fait partie intégrante de la suite de logiciels libres LAMP. 2.3- MySQL : MySQL/SQL permet la communication entre les bases de données et les sites Web, ce qui permet aux utilisateurs de tester et de stocker les emails, les mots de passe et toute autre donnée. Nous l’utilisons pour notre compte WordPress local. 31 Cliquez sur le bouton Démarrer dans votre panneau de configuration XAMPP. Attendez qu’Apache et MySQL soient surlignés en vert sous votre section de module. Une fois activé, vous êtes libre d’utiliser XAMPP. Pour vous assurer que tout est en ordre de marche, ouvrez un navigateur Web, entrez http://localhost/ dans votre barre d’adresse et appuyez sur Entrée. Vous devriez être redirigé vers http://localhost/dashboard/, qui est la page par défaut de XAMPP. 2.4-JavaScript : Figure 9: Logo de JavaScript JavaScript désigne un langage de développement informatique, et plus précisément un langage de script orienté objet. On le retrouve principalement dans les pages Internet. Il permet, entre autres, d'introduire sur une page web ou HTML des petites animations ou des effets. Créé en 1995 par Brendan Eich, en même temps que la technologie Java, le langage JavaScript se distingue des langages serveurs par le fait que l'exécution des tâches est opérée par le navigateur lui-même, sur l'ordinateur de l'utilisateur, et non sur le serveur web. Il s'active donc généralement sur le poste client plutôt que côté serveur. 3-Quels sont les principaux Framework JavaScript ? Il existe de nombreux Framework JavaScript orientés vers les interfaces web (ou "orientés client"). Les trois plus connus sont Jquery, AngularJS (qui a été initialement développé par Google) et React (qui, lui, est né chez Facebook). Il existe néanmoins quelques infrastructures JavaScript open source orientées serveur, même si ce langage n'avait pas été conçu dans cette optique au départ. La plus célèbre d'entre elles n'est autre que NodeJS. 32 - LOGICIELES UTILISES 1- Les définitions: 1.1-VS CODE : Figure 11: Logo de VS CODE Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS2. On utilise pour écrire le code. Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et Git intégré. Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les préférences et installer des extensions qui ajoutent des fonctionnalités supplémentaires. Le code source de Visual Studio Code provient du projet logiciel libre et open source VSCode de Microsoft publié sous la licence MIT permissive, mais les binaires compilés constituent un freeware, c'est-à-dire un logiciel gratuit pour toute utilisation mais privateur. Dans le sondage auprès des développeurs réalisé par Stack Overflow en 2021, Visual Studio Code a été classé comme l'outil d'environnement de développement le plus populaire, avec 71,06 % des 82 277 répondants déclarant l'utiliser3 33 1.2-BOOTSTRAP : Figure 12 : Logo de Bootstrap C’est une collection d'outils utiles à la création du design de sites et d'applications web. On l’utilise dans la personnalisation du style de plateforme. Bootstrap est un framework développé par l'équipe du réseau social Twitter. Proposé en open source (sous licence MIT), ce framework utilisant les langages HTML, CSS et JavaScript fournit aux développeurs des outils pour créer un site facilement. Ce framework est pensé pour développer des sites avec un design responsive, qui s'adapte à tout type d'écran, et en priorité pour les smartphones. Il fournit des outils avec des styles déjà en place pour des typographies, des boutons, des interfaces de navigation et bien d'autres encore. On appelle ce type de framework un "Front-End Framework". 1.3- XAMPP : Figure 13 : Logo de Xampp XAMPP est un ensemble des logiciels permettant de mettre en place facilement un serveur Web et un serveur FTP. Il s’agit d’une distribution de logiciels libres (X Apache MySQL Perl PHP) offrant une bonne souplesse d’utilisation, réputée pour son installation simple et rapide. Ainsi, il est à la portée d’un grand nombre de personnes puisqu’il ne requiert pas de connaissances particulières et fonctionne, de plus, sur les systèmes d’exploitation les plus répandus. 34 Cette « distribution » se chargera donc d’installer l’ensemble des outils dont vous pourriez avoir besoin lors de la création d’un site Web. Plus d’une dizaines d’utilitaires sont intégrés  comme MySQL  PHP  Perl  ou encore phpMyAdmin L’alternative WAMPServer vaudrait apparemment le détour mais je vous conseille XAMPP car il peut s’installer sur une clé usb et donc être transporter n’importe où, tandis que WAMP Server ne s’installe que sur Windows et via un exécutable uniquement. Il faut rappeler, aux grincheux qui se plaignent de voir très peu de documentation dans cette suite de logiciels, que XAMPP n’est pas une application en soit mais simplement une distribution avec une installation automatique ; ce qui signifie en clair que pour la documentation « avancée », il faut utiliser celle des logiciels qui la composent (apache.org, php.net, etc).Il est distribué avec différentes bibliothèques logicielles qui élargissent la palette des services de façon notable        OpenSSL Expat(parseur XML) PNG SQLite zlib différents modules Perl et Tomcat FileZilla Server 1.4-Quel est le but de XAMPP ? XAMPP de Bitnami est « une distribution Apache contenant PHP et Perl ». Il suffit de comprendre que XAMPP est un programme simple et gratuit qui permet aux utilisateurs d’héberger des sites Web sur leur PC. Bien que la configuration d’un serveur local à l’aide de XAMPP soit quelque peu technique, le processus est également assez facile et direct. Une fois que tout a été mis en place, vous constaterez que la gestion et l’édition de sites Web est un jeu d’enfant. En utilisant XAMPP pour créer et modifier des sites Web, vous pourrez modifier un site Web quand vous le souhaitez. Mais l’inconvénient, c’est que vous êtes aussi plus susceptible de perdre 35 vos sites, surtout si vous ne créez pas de sauvegardes. Dans votre panneau de configuration XAMPP, vous devriez voir une présentation simple des processus XAMPP en cours d’exécution. Pour nos besoins, nous nous concentrerons sur les deux premières options : Apache et MySQL. Apache : Noyau principal de XAMPP, l’option Apache crée un serveur Apache sur votre PC. C’est ce qui vous permettra d’exécuter et d’éditer des sites Web sur votre PC à l’aide de navigateurs Web, tout comme on le ferait pour un site. Sauf, bien sûr, que ce site fonctionne sur votre PC, par opposition à un serveur connecté à Internet. - cliquez sur le bouton phpMyAdmin dans le menu de navigation supérieur. Vous serez dirigé vers votre page phpMyAdmin par défaut. Si vous cliquez sur l’option de menu phpMyAdmin, vous pouvez commencer à configurer vos bases de données MySQL. L’écran de connexion phpMyAdmin s’ouvrira dans une nouvelle fenêtre du navigateur. Par défaut, le nom d’utilisateur administrateur sera root, et vous pouvez laisser le champ mot de passe vide. 3-Conclusion : Les sites web est l’ensemble des pages web reliées entre elles par des liens hypertextes et ces pages web sont un ensemble des documents html stockés sur un serveur connecté au réseau. On trouve plusieurs types de documents html : 36  Les sites web statiques  Les sites web dynamiques  Les sites web e-commerce Partie Pratique 37 1-Analyse et conception : 1.1-Introduction : Après avoir cité précédemment le contexte général de notre projet, nous allons s’intéresser à la conception de la solution que nous avons proposée. Cette conception a pour but de rendre flexible la tâche de notre application. Ce chapitre présentera la partie fonctionnelle du modèle UML à travers le diagramme des cas d’utilisation et les diagrammes de séquence ainsi que le diagramme de classe. -Description des cas d’utilisation : 1. Identification des acteurs et leurs rôles : Au niveau de cette section, nous présentons les différents acteurs susceptibles d’interagir avec le système :  Administrateur : (D.G. Directeur Général) C’est la personne qui possède le privilège de plus haut niveau. Cet acteur est capable de manipuler toutes les fonctionnalités proposées par l’application notamment la gestion des membres, entraineurs, gestion des paiements, des activités, Ainsi que la gestion des utilisateurs.  Utilisateur : C’est la personne naviguer dans le site du club, et inscrit dans le site (envoie une demande de rejoindre le club). 1.2-Diagramme de cas d’utilisation : Le modèle suivant représente l’acteur principal (utilisateur de l’application) ainsi que les différents cas d’utilisation qui lui sont rattachés. L’acteur étant représenté par l’utilisateur et les cas d’utilisation (séquences de taches) par les cercles. Ce modèle résume plus ou moins les différents traitements qui seront effectués par l’utilisateur. 38 Figure8 : représente le diagramme de cas d’utilisation de l’Admin Figure9 : représente le diagramme de cas d’utilisation d’internaute 39 1.2-Diagramme de classes : Pour la structure statique du système en termes de classes et de relations entre ces classes. On a utilisé Le diagramme de classe, son ’intérêt est de modéliser les entités du système d’information. Ces informations sont regroupées ensuite dans des classes. Figure 10 : représente le diagramme de classe 40 2- Les interfaces graphique 2.1- Page Home : 41 2.2-Page blog 2.3-Page magasin 42 2.4-page Login : 2.5-page Registrer : 43 2.6-page panier 44 2-Conclusion : L’objectif de ce projet était de développer un site web E-commerce pour l’achat des produits . Le développement d'un site Web nécessite une bonne coordination des couleurs et de la forme en utilisant HTML ,CSS ,JAVASCRIPT et c'est ce qu'on appelle « front end » car mon site affiche bien les produits pour impressionner l'utilisateur, où l'utilisateur peut envoyer des commandes facilement depuis le site, et le processus d'envoi de la demande se fait après avoir entré le nom et le mot de passe de l'utilisateur en utilisant Un ensemble d'opérations et des fonctions pour programmer l'entrée des informations personnelles de l'utilisateur et récupérer a partir de la base de donner , en utilisant: PHP ; WAMPSERVER ; SQL Et aussi pour le processus d'envoi des commandes à l'administrateur, et c'est ce qu'on appelle le « back end ». L’apport de ce travail a été d’une importance très considérable, en effet, il m’a permis de suivre une méthodologie de travail bien étudiée et d’approfondir mes connaissances dans le monde de développement des sites web. Cette expérience m’a permis de maîtriser l‘environnement de développement web à savoir Les fonctions PHP, sous lequel, le développement n’a pas été une tâche facile, mais je n’ai pas hésité à y participer. 45 Tables des index 46 VS code Visual Studio Code HTML Hyper text Markup Language CSS Cascading Styles Sheets PHP Hypertext Preprocessor UML Unified Modeling Langage MySQL My Structured Query Language Vs Code Visual Studio Code XAMPP X Apache MySQL Perl PHP BD Base donnée JS JavaScript Table des Figures Figure1 Photo d’un Animalerie Figure2 Les animaux familière au Maroc Figure3 Histogramme montrant le pourcentage d’utilisation de commerce électronique aux mondes Figure4 Tableau montrant les types des sites web et leurs définitions. Figure5 Les étapes de création d’un site web Figure6 Logo de html Figure7 Logo de Css Figure8 Logo de Javascript Figure9 Logo de Bootstrap Figure10 Logo de vscode Figure11 Figure5 : Logo de xampp Figure12 47 Figure : Diagramme de classe Webographie https://fr.wikipedia.org/wiki/Animalerie https://www.petmarketmaroc.com/?gclid=CjwKCAjw46CVBhB1EiwAgy6M4s9aoYuXARene pQdFZAl9-we7oGa10LQG7okwqaOBc-nptSj2I0HxhoCN7AQAvD_BwE https://snpcc.com/wp-content/uploads/2020/04/ALIMENTATION-DU-CHIEN_REPRIS.pdf https://raw-feeding-prey-model.fr/wp-content/uploads/2017/10/Ce-poison-nomme-croquetteVERSION-extrait.pdf https://getbootstrap.com/docs/5.1/examples/footers/# https://www.zooplus.fr/magazine/chien/education-du-chien/obeissance-canine https://pngimg.com/ 48