Rapport Du Projet 1DI (Oumaima Benmada) [PDF]

Zitiervorschau

Développement informatique Projet de fin d’année: Création d’un site web de gaming

R éalisé par: Oumaima Benmada

E ncadré par: Mr. Harik Mohammed

Formation It-Sup

2019/2020

S ommaire

★ Remerciement ★ Introduction

2 4

Chapitre 1: Etat de l’art ❖ Etude de l'existant: ➢ Gaming ➢ Sites web existants ❖ Problématique ❖ Solution: ➢ Uplay ➢ Objectifs et avantages

5 5 5 5 6 6 6 6

Chapitre 2: Technologies utilisées ❖ Langages utilisés: ➢ HTML ➢ CSS ❖ outils utilisés: ➢ Laragon: ■ Apache ■ Mysql ➢ Google chrome ➢ Wordpress: ■ Thème ■ Plugins

7 7 7 7 8 8 8 8 9 10 11 11

Chapitre 3: Réalisation

15

★ Conclusion ★ Webographie et références

32 33

1

R emerciement: Je tiens à remercier dans un premier temps, toute l’équipe pédagogique de l'école It-Sup et les intervenants professionnels responsables de la formation Technicien Spécialisé en Développement Informatique. Avant d’entamer ce rapport, nous profitons de l’occasion pour remercier tout d’abord notre professeur Monsieur Mohammed Harik qui n’a pas cessé de nous encourager pendant la durée du projet, ainsi pour sa générosité en matière de formation et d’encadrement. Nous le remercions également pour l’aide et les conseils concernant les missions évoquées dans ce rapport, qu’il nous a apporté lors des différents suivis, et la confiance qu’il nous a témoigné. Nous tenons à remercier nos professeurs de nous avoir incités à travailler en mettant à notre disposition leurs expériences et leurs compétences. Ainsi que Monsieur Abdelkader Mouheddani, directeur général de l’école, pour son accueil et la confiance qu’il nous a accordé dès notre arrivée dans l’école.

D édicace: Je dédie ce travail à ma famille, elle qui m’a doté d’une éducation digne: Particulièrement à mon très cher père Mr. Benmada Fouad Autant de phrases et d’expressions aussi éloquentes soient-elles ne sauraient exprimer ma gratitude et ma reconnaissance. Tu as su m’inculquer le sens de la responsabilité, de l’optimisme et de la confiance en soi face aux difficultés de la vie. Tes conseils ont toujours guidé mes pas vers la réussite. Ta patience sans fin, ta compréhension et ton encouragement sont pour moi le soutien indispensable que tu as toujours su m’apporter. Je te dois ce que je suis aujourd’hui et ce que je serai demain et je ferai toujours de mon mieux pour rester ta fierté et ne jamais te décevoir. que Dieu le tout puissant te préserve, t'accorder santé, bonheur, quiétude de l’esprit et te protège de tout mal.

Introduction: Afin d’appliquer les méthodologies et les notions enseignées au bout du première année de la formation technicien spécialisé en développement informatique à It-Sup, nous devons réaliser un mini projet qui consiste à créer un site web. Celui-ci nous permet à nous, étudiants, d’appliquer les connaissances acquises durant cette année. Techniquement, un site web ce n’est qu’un fichier ou un ensemble de fichiers, hébergés sur un serveur (une sorte de gros ordinateur connecté à internet) et accessible via internet. On le voit cette définition est large. Une simple page html, une image ou un formulaire peuvent tout à fait être des sites web. Ou plutôt : un site web peut n’être composé que d’une simple page html, d’une image ou d’un formulaire. Mais ce qui compte avec un site web, ça n’est pas tellement ce que c’est, mais plutôt ce que l’on en fait. Car un site web, c’est avant tout un outil. Un outil de communication, de prospection, de vente, bien sûr, mais aussi d’échange de données, de travail collaboratif, de transmission d’informations, de comptabilité, etc.

C HAP1/ Etude de l'existants: Gaming: Dans nos jour le gaming est une activité de loisir extrêmement populaire avec plus de deux milliards d'utilisateurs dans le monde. Le terme de gaming est l'anglicisme de "jeu vidéo", c'est-à-dire tout ce qui touche aux jeux électroniques sur PC, consoles ou appareils mobiles. Les entreprises et constructeurs informatiques développent désormais leurs gammes d'accessoires "gaming", destinées à un usage spécifique pour "gamers" (mot anglais qui désigne aussi les "joueurs de jeu vidéo").

Sites web existants: Au sujet du gaming, on peut trouve quelques site web qui ont réussi à l’en présenté parfaitement. Exemple: c orsair: https://www.corsair.com

s cufgaming: https://scufgaming.com

C HAP1/ Problématique: Le terme gaming est un terme assez nouveau que nous trouvons pas assez de sites web qui le traitent et donc plusieurs gamers au tour du monde trouve des difficultés à accéder à ce nouveau monde gaming.

C HAP1/ Solution: Uplay: Uplay est un site web dédié à tous les gamers qui cherchent à avoir une meilleure expérience tout au long de leur jeu. Nous vous fournissons par les dernières actualités gaming ainsi que nous vous présentons des informations bien détaillées sur toutes jeux populaires. Non seulement ça mais aussi on met à votre disposition toutes informations esports et on vous permet de choisir entre notre gamme de produits bien diversifié sur notre shop.

Objectifs et avantages: Uplay a comme objectif principale de fournir la meilleure expérience gaming. Et donc, pourquoi nous choisir? -On vous fournit des produits haute gamme utilisés par plus de 80% de tous les joueurs professionnels car ils répondent aux exigences de ce niveau de performance. -Notre engagement envers votre gameplay ne s'arrête pas à votre achat, nous voulons nous assurer que vous utilisez votre Uplay pour libérer votre potentiel maximum. -Des configurations d’équipements spécifiques au jeu, des guides de jeu avec des stratégies au coaching et bien plus encore, nous sommes toujours là pour vous aider à atteindre vos objectifs.

C HAP2/ Langages utilisés: Le HyperText Markup Language, généralement abrégé HTML ou dans sa dernière version HTML5, est le langage de balisage conçu pour représenter les pages web. C’est un langage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et logiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Sur le plan de la conception d'une page Web, il permet par ailleurs de séparer la présentation d'une page HTML et sa structure.

C HAP2/ Outils utilisés: Laragon: Laragon est un environnement de développement Web dédié au système d'exploitation Windows. Il est accompagné de différentes technologies à savoir : NGINX / Apache (serveur web) PHP (langage interprété côté serveur).

➔ Le logiciel libre Apache HTTP Server (Apache) est un serveur HTTP créé et maintenu au sein de la fondation Apache. Jusqu'en avril 2019, ce fut le serveur HTTP le plus populaire du World Wide Web. Il est distribué selon les termes de la licence Apache. ➔ MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion de base de données les plus utilisés au monde4, autant par le grand public (applications web principalement) que par des professionnels, en concurrence avec Oracle, PostgreSQL et Microsoft SQL Server.

Google Chrome:

Chrome est un navigateur web propriétaire développé par Google basé sur le projet libre Chromium fonctionnant sous Windows, Mac, Linux, Android et iOS. Un navigateur web (web browser en anglais et « fureteur » au Québec) est un logiciel conçu pour consulter et afficher le World Wide Web. Techniquement, c'est au minimum un client HTTP.

WordPress:

WordPress est un système de gestion de contenu (SGC ou content management system (CMS) en anglais) gratuit, libre et open-source. Ce logiciel écrit en PHP repose sur une base de données MySQL et est distribué par l'entreprise américaine Automattic. Les fonctionnalités de WordPress lui permettent de créer et gérer différents types de sites Web: site vitrine, site de vente en ligne, site applicatif, blogue, ou encore portfolio. Il est distribué selon les termes de la licence GNU GPL version 2. Le logiciel est aussi utilisé comme socle du service multisite WordPress.com, celui ci supporte plusieurs millions de sites.

Thème: (thème active cloux par gloria themes)

Un thème WordPress est un modèle de mise en forme graphique des contenus pour le CMS WordPress. On peut comparer un thème à une “peau” de site web.

Plugins:

Les plugins, ou extensions, permettent de réellement personnaliser son site WordPress. Il en existe des dizaines de milliers, gratuites ou payantes, dans différentes langues, sous différents formats, et qui permettent d’ajouter différentes fonctionnalités sur son site.

P lugins utilisés: WPBakery Page Builder: un plugin de création de page pour WordPress qui vous permet de créer de superbes contenus de sites Web par simple glisser-déposer.

WooCommerce: un plugin e-commerce open source pour WordPress. Il est conçu pour les commerçants en ligne de petite à grande taille utilisant WordPress.

Contact form 7: une extension WordPress gratuite qui permet de créer simplement des formulaires. Elle support l’envoi par Ajax, permet d’ajouter des CAPTCHAs et s’associe parfaitement à akismet pour éviter le spam.

Really Simple SSL: un plugin WordPress qui détecte automatiquement vos paramètres et configure votre site Web pour qu'il s'exécute sur https. Pour le garder léger, les options sont réduites au minimum. L'ensemble du site passera à SSL.

bbPress: un plugin WordPress qui permet d’ajouter un forum sur votre site WordPress tout en conservant la simplicité et l'extensibilité de WordPress. Il a la possibilité de créer des forums multi sites, il a des modèles personnalisables et un support intégré pour prévenir le spam.

Regenerate Thumbnails: un plugin WordPress qui permet de régénérer toutes les tailles de vignettes pour une ou plusieurs images qui ont été téléchargées dans la bibliothèque multimédia.

CHAP3/ Réalisation: + Page d'accueil (home)

La première chose que ce voit dès qu’on accède à ce site web est une diaporama de quelques jeux tendance avec une petite description et catégories cliquable du jeu, et donc si on clique sur une catégorie précise ça va nous prend vers tous les jeux sous la même catégorie et si on clique sur games details ça va nous prendre vers la page web du jeu. Puis on a une petite présentation des composantes du site comme suit: les jeux qu'on offre:

les derniers blogs écrits par nous:

Ici il y a les derniers blogs que nous avons écrits, si on clique sur un ça va nous rendre vers la page du blog et si on clique sur une catégorie cela va nous rendre vers une page où il y a tous les blogs inscrits sur la même catégorie. A propos de nous:

Ici il ya une petite description de notre site et si on clique sur read more ça va nous donner une petite présentation de Uplay et notre mission:

Quelques produits que nous offre:

Comme le nom suggère ici on présente quelques produits qu'il offre sur notre shop. Footer: Ici dans le footer on a un petit menu qui rend vers la page d'accueil (home) et vers à propos de nous (about us) et nous contacter (contact us). Ce footer est présent dans tous les pages du site web.

+ Blogs:

Ici on a tous les blogs que nous avons écrits et ils sont sous 3 catégories news/video/reviews. Ex: catégorie reviews

Ici on a une galerie de photos du jeu et à droite une barre de recherche qui permet de rechercher parmis les blogs ainsi qu’une zone qui présente les derniers blogs écrits. Si on tape une mot dans la barre de recherche cela va permet d’afficher tous les blogs contenant ce mot.

Ici on peut voir ce que nous avons écrits dans le blog, qui l’a écrit? si il y a des commentaires où non? la catégorie sous laquelle ce blog est inscrit et la date de publication. Puis on peut voir review:

Après review on voit l’analyse du jeu: ce qui est bon et ce qui est mal ainsi que les blogs liés à ce sujet comme on peut ajouter des commentaires si on veut:

+ Games:

Ici on a tous les jeux que nous offre et si on clique sur une cela va nous rendre vers la page du jeu. Ex: Fortnite

Ici la première chose que nous voyons c’est une galerie des photos et des vidéos du jeu ainsi que à droite il y a des informations sur le jeu comme le genre, la date de sortie, plateforme...

Ici on peut voir les informations à propos du jeu ainsi qu'un poster à droite avec une petite description du jeu.

Ici on voit les configurations requises pour installer le jeu ainsi les langues du jeu. Puis si on veut ajouter un commentaire. + Shop:

Ici dans le shop on présente tous les produits qu’on offre et si on clique sur un produits cela va nous prendre vers la page du produit.

Ici on a les détails du produit avec une petite description et son image puis on a les autres produits que nous offrons:

Si on veut acheter le produit on détermine la quantité et on clique sur add to cart (ajouter au panier):

Afin que le prix soit mis à jour après chaque modifications dans le panier nous devons cliquer sur update cart et si on veut appliquer un coupon on écrit le code puis on clique sur apply coupon et update cart:

Et maintenant on peut placer notre commande après le remplissage des informations requises:

+ Esport:

La première chose que se voit ici est une bannière qui fait une diaporama de l’esport. Puis on a une petite présentation de notre équipe:

Apres la presentation de notre equipe on fait une presentation de quelques joueurs connus. Ex: Faker

Et ici on a nos sponsors et notre galerie des matches (images/vidéos).

+ Pages: Galerie

FAQ

Ici on offre une galerie de jeux et on répond au questions qu’on reçoit le plus.

+ About us:

Ici on parle de qui sont nous, notre mission, notre équipes, nos jeux et notre shop. On présente une petite description de chacun d’eux.

+ Contact us:

Ici vous pouvez nous contacter soit par email direct soit en remplissant la form oû bien en nous visitant à l’aide du map.

Conclusion: Aujourd’hui, le commerce électronique est considéré comme un dossier prioritaire par de nombreuses organisations internationales, surtout depuis que les problèmes liés à la facture numérique ramènent les politiques des technologies de l’information, de la communication et du développement sur les devant de l’actualité. Des recommandations stratégiques spécifiques ont été formulées dans différent domaine : infrastructure et services de télécommunications, fiscalité, protection du consommateur, sécurité des réseaux, protection de la vie privée et des données. La confiance est un élément crucial pour le développement du commerce électronique. Il s’agit, essentiellement, d’assurer aux consommateurs et à l’entreprise des services de réseaux sûres, fiables et vérifiables. Pour cela que j’ai conçu ce site web afin d'approfondir mes connaissance sur le e-commerce ainsi que les langages de conception d’un site web par wordpress à savoir SQL, CSS, HTML...

W ebographie et références: - Définitions utilisés: www.wikipedia.org - Informations gaming: https://www.corsair.com/us/en/ - Informations des jeux: https://scufgaming.com/int/gaming - Informations d’esports: https://www.corsair.com/us/en/esports - Informations des produits: https://www.originpc.com/specialoffers