Développement informatique

Projet de fin d’année:

Création d’un site web de gaming

R éalisé par: E ncadré par:

Oumaima Benmada Mr. Harik Mohammed
Formation It-Sup 2019/2020

S ommaire

★ Remerciement 2
★ Introduction 4

Chapitre 1: Etat de l’art 5

❖ Etude de l'existant: 5
➢ Gaming 5
➢ Sites web existants 5
❖ Problématique 6
❖ Solution: 6
➢ Uplay 6
➢ Objectifs et avantages 6

Chapitre 2: Technologies utilisées 7

❖ Langages utilisés: 7
➢ HTML 7
➢ CSS 7
❖ outils utilisés: 8
➢ Laragon: 8
■ Apache 8
■ Mysql 8
➢ Google chrome 9
➢ Wordpress: 10
■ Thème 11
■ Plugins 11

Chapitre 3: Réalisation 15

★ Conclusion 32
★ Webographie et références 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