!

JK GROUPE

MI AGE
Etablissement de Formation Professionnelle Privee
Etablissement de Formation Professionnelle Privee
Autorisation n° : 4/07/8/98
E-mail : miage01@menara.ma
Site Web : www.miage.ma

f Projet de Fin d'Annee

V - Memoire - _)

[©]
Niveau
Technicien Specialise

Filiere
Developpement Informatique

Sujet
m

m J
Le nom de sujet
A_ _r
Encadre par

Realise par
M. : TAIBI Zouhir

En
M. :collaboration avec
M. :

m
u

BOOK TO READ
BibLiotheque
[©]
Annee : 2022-2023
 -^LGROUPE

LL MI
J
BOOK TO
READ AGE Etablissement de Formation
Professionnelle Privee

Au nom de Dieu Clement et Misericordieux, nous tenons a exprimer nos

Remerciem
sincere sentiment d'honneur de presenter cet humble travail devant ents
les

respectables membres du jury et a ceux qui nous ont aide dans la realisation

de ce travail par leurs conseils et par leur devouement.

Ce rapport de fin d'annee n ’est jamais Pwuvre seule d’une personne, c’est

le fruit d’une collaboration de nombreuses bonnes volontes.

Nous tenons a presenter nos vifs remerciements a « Directeur general de

Uecole MIAGE » ainsi que le nom de directrice, Directrice de l'ecole MIAGE,

Site de SALE,

Nous remercions sincerement notre encadrant Monsieur Zouhir TAIBI

pour son effort, sa gentillesse et son efficacite, tres active qui arrive, malgre ses

innombrables etudes a nous guider vers le bon chemin.

Nos sinceres remerciements a tout le personnel de Direction (Secretariat et

Professeurs...) et tous ceux qui ont contribue, de pres ou de loin, au bon

deroulement de notre stage trouvant ici l ’expression de notre gratitude et de

notre respect.

Enfm nous tenons a remercier chaleureusement toutes les personnes qui

nous ont soutenu et nous ont aide tout au long de cette annee.

2
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO
READ
Dedicace

A mes chers parents

Aucun mot, aucune dedicace ne saurait
exprimer mon respect, ma consideration et
l’amour eternel pour les sacrifices que vous avez
deployes pour mon instruction et mon bien etre.
Trouvez en ce travail le fruit de votre
devouement et l expression de ma gratitude
et mon profond amour.
Puisse Dieu, le tout puissant, vous preserver et
vous accorder sante, longue vie et bonheur.

A mes chers freres et Swurs

Pour avoir ete des meilleurs amis pour moi, pour
avoir illumine ma vie et pour chaque moment
de joie que vous avezpartage avec moi...

A mes chers Ami(e)s

Vous etes pour moi des freres, des swurs et des amis sur qui je
peux toujoursAcompter.
toute ma famille etdemes
En temoignage proches
l’ amitie qui nous unit et
des souvenirs de Pour votre
tous les soutienque
moments et votre
nousaffection qui me
avons passes donnent
ensemble,
je vous dedie la
ce force
travaildeetcontinuer et d’aller
je vous souhaite uneenvie
avant
pleine de
prosperite et de
bonheur.

3
LL & [AGE
J Etablissement de Formation Professionnelle Privee

BOOK TO RESUME
READ

Resume en franfais :
Ce projet vise a creer un site web de bibliotheque interactif, permettant la recherche de livres, la
consultation de resumes, la connexion des utilisateurs et le contact avec l'equipe de la bibliotheque.
Il utilisera HTML, CSS et JavaScript pour offrir une experience conviviale. Le design sera
attrayant, axe sur l'ergonomie, et le projet sera gere de maniere efficace pour garantir son succes.

4
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO
Liste Des figure
READ Figure 1 : Page d’accueil du site web..........................................................................................14
Figure 2 : Page About...................................................................................................................15
Figure 3 : Page de Sommaire......................................................................................................15
Figure 4 : Page de contact............................................................................................................16
Figure 5 : Page de Login..............................................................................................................16

5
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO
READ
Liste des abreviations :

1. **HTML**: Hypertext Markup Language

2. **CSS**: Cascading Style Sheets

3. **JS**: JavaScript

4. **UI**: User Interface

4. **UX**: User Experience

5. **DOM**: Document Object Model

6. **SEO**: Search Engine Optimization

6
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO
READ

Table des matieres

Remerciements...............................................................................................................................2
Dedicace.........................................................................................................................................3
RESUME.......................................................................................................................................4
Liste Des figure.............................................................................................................................5
Liste des abreviations...................................................................................................................6

7
 GROUPE

MLAGE
Etablissement de Formation Profession nelle Privee

I. Planification de Projet

Le projet de creation d'un site web de bibliotheque trouve sa genese dans la necessite
croissante de fournir un acces convivial et informatif a une bibliotheque virtuelle de
livres. Dans un monde de plus en plus numerique, l'importance de disposer d'une
plateforme en ligne pour rechercher, explorer et acceder a des ressources litteraires ne
peut etre sous-estimee. Les objectifs de ce projet sont multiples : tout d'abord, creer un
site web interactif qui permettra aux utilisateurs de parcourir et de rechercher une vaste
collection de livres, de consulter des resumes et des informations detaillees sur chaque
ouvrage, de contacter le personnel de la bibliotheque, et de se connecter a leur propre
espace utilisateur pour gerer leurs emprunts. De plus, ce projet vise a offrir une
experience utilisateur intuitive et agreable grace a une conception attrayante, une
navigation fluide, et une performance optimale. Enfin, il convient de souligner que ce site
web de bibliotheque repond a un besoin concret dans la societe actuelle, ou l'acces a la
connaissance et a la culture est essentiel. La justification de ce projet reside donc dans
son potentiel a faciliter l'acces a la litterature, a promouvoir la lecture, et a servir de
ressource educative precieuse pour un large public. En resume, ce projet s'ancre dans un
contexte de transition numerique, vise a atteindre des objectifs clairement definis, et
trouve sa legitimite dans la reponse aux besoins de la communaute en matiere d'acces a la
litterature et a la culture.

8
LLI
BOOK TO READ
Bibliotheque Etablissement de Formation Professionneile Privee

II. Technologies Utilisees

La phase relative aux technologies utilisees revet une importance capitale dans le
developpement du projet du site web de bibliotheque. Cette etape se consacre a la
selection et a la mise en place des langages de programmation et des technologies
essentielles qui serviront de fondation a la creation du site web. Trois piliers
fondamentaux se distinguent dans cette demarche : HTML, CSS et JavaScript. HTML
(Hypertext Markup Language) est le squelette du site, permettant de structurer le contenu
en pages web, de definir les en-tetes, les paragraphes, les images, et de lier les differentes
parties du site. CSS (Cascading Style Sheets) joue un role essentiel dans l'aspect visuel
du site en gerant la mise en forme, la presentation et l'esthetique. Enfin, JavaScript
confere une dimension interactive au site, permettant de creer des fonctionnalites
dynamiques telles que la recherche en temps reel, la gestion de l'interface utilisateur, et
bien d'autres encore.

De plus, pour optimiser le processus de developpement, l'utilisation de bibliotheques ou

de frameworks peut s'averer judicieuse. Par exemple, l'utilisation de Bootstrap, un
framework CSS, facilite la creation d'un design reactif et agreable, reduisant ainsi le
temps de developpement. De meme, l'integration de bibliotheques JavaScript comme
jQuery peut simplifier la manipulation du DOM (Document Object Model) et ajouter des
fonctionnalites interactives de maniere efficace. Le choix de ces technologies et
l'integration de bibliotheques ou de frameworks sont strategiques pour garantir la
coherence, la performance et l'efficacite du site web de bibliotheque. Cette etape de
selection et de configuration des technologies est donc fondamentale pour la reussite du
projet, car elle determine en grande partie les capacites et les fonctionnalites qui seront
offertes aux utilisateurs finaux.

9
 GROUPE

MLAGE
Etablissement de Formation Profession nelle Privee

III. Implementation
La phase d'implementation, souvent consideree comme le creur du developpement, est
ou le projet du site web de bibliotheque prend forme. Cette etape est caracterisee par une
serie d'etapes de developpement minutieuses, la creation du code source (HTML, CSS,
JavaScript) pour chaque page du site, et l'integration des fonctionnalites specifiques a
chaque page.

Tout d'abord, les etapes de developpement sont soigneusement planifiees pour chaque
page. Cela inclut la creation de la structure HTML de base de chaque page, la definition
des elements de navigation, des zones de contenu, des formulaires, et la mise en place
des elements d'interface utilisateur. Ensuite, les styles CSS sont appliques pour donner
vie au design. Les feuilles de style definissent la mise en page, les couleurs, les polices,
et toutes les proprietes visuelles necessaries pour rendre chaque page attrayante et
coherente avec la vision du projet.

Le JavaScript est ensuite integre pour ajouter des fonctionnalites interactives specifiques
a chaque page. Par exemple, sur la page de recherche de livres, JavaScript peut etre
utilise pour effectuer des requetes en temps reel a mesure que l'utilisateur saisit des mots-
cles, affichant les resultats de maniere dynamique. Sur la page de connexion, JavaScript
peut gerer l'authentification des utilisateurs et la gestion des sessions.

Chaque page est developpee en suivant un processus similaire, mais avec des
fonctionnalites uniques en fonction de son objectif. Par exemple, la page de resume
pourrait inclure un script JavaScript pour afficher des resumes de livres a partir d'une
base de donnees, tandis que la page de contact pourrait comporter un formulaire
interactif pour permettre aux utilisateurs de soumettre des demandes.

En resume, l'etape d'implementation est l'endroit ou le site web prend forme, avec une
attention particuliere portee aux details de chaque page. Le code source est elabore pour
creer une experience utilisateur fluide et intuitive, tandis que les fonctionnalites
specifiques a chaque page sont mises en reuvre pour repondre aux besoins des utilisateurs
du site web de bibliotheque. Cette phase exige une competence technique, une precision
et une coherence pour s'assurer que le site fonctionne comme prevu et offre une
experience de haute qualite.

10
 Etablissement de Formation Professionneile Privee

- Home page

ABOUT SUMMARY CONTACT US LOG IN

Welcome to Your Library

Today Readers — Tomorrow Leaders.

i
III
I mm
<»>- * I
I
Recommended

Rich Dad Poor Dad. Facts and Our Minds

Rich Dad Poor Dad is how to use money as a tool for Here we recommended you a urdu article titled as
Ji j^ uk ^ ‘rilaS 'H J*- P*^5 J
wealth development. It destroys the myth that the
^ ^ ^ ^ ’Facts and Our Minds' in which Writer talked about
rich are born rich, explains why your personal many things , to read that article click on the link..
residence may not really be an asset, describes the
real difference between an asset and a liability, and
much more.

1 *
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO - Page de sommaire

READ

Book Summaries
The Lessons Of History..

Start With Why by Simon Sinek

In this summary
Start With Why is a great read for anyone looking to discover their sense of purpose or belonging, anyone who is looking for that big picture ‘why’ we do the things we do.
Organisations and leaders, whether small scale or large will benefit from reading this book. This summary will cover 6 key points, Why manipulation is not the same as
inspiration the concept of the 'Golden Circle , Leadership, Rallying believers Challenges, and the big Why?

- Page de contact

{ } 12
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO - Page de Connexion

READ

Au creur du developpement de notre site web de bibliotheque se trouve la phase

d'implementation, ou le code source prend forme pour chaque page cle. Ci-dessous,
nous presentons des extraits de code representatifs pour deux des pages principales du
site

V UBRARYTITAN-BOOK5ITE P+ ^ O 0
> books

> css •

> img
<> about.html M

<> blog.html M
<> cortact.html M

<> index.html M

<> logir.html M
<> posts.html M

<> surnmaiy.html M

13
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO
READ <> index.html > 0 html > ^ body > 0 footer > ^ p
You, 3 seconds ago | 2 authors (Umar Ashraf and others)
i <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 cmeta name="description" content="Easy Access to Books.” />
<meta 1
6
7 name =”keywords"
8
content="book reading, books,online books,informational,motivational,historical"
9 f>
13 <meta name="author" content="Umar Ashraf" />
11 <! -- Favicons —>
<link href="./img/articlel.jpeg" rel="icon" />
12
13
I <title>Library - i . .</titl p>
14 <link rel=”stylesheet" href="./css/style.css" />
15 </head>
<body>
16
17 <header>
18 <div class="container”>
19 <div id="branding">
23 <hl style="font-family: 'Brush Script MT', cursive; font-size: 34px">
21
1 Library
22
</hl>
23 </div>
24 <nav>
25 <ul> "
26 <li class="current“xa href="index.html">Home</ax/li>
27 <li><a href="about.html">About</a></li>
clixa href= "summary.html">Summary</ax/li>
28
29 | <lixa href="contact.html">Contact us</ax/li>
33 | <li><a href="login.html">Log in</ax/li>
31 </ul>
Z T

14
LLI
BOOK TO READ
Bibliotheque Etablissement de Formation Professionneile Privee

IV. Fonctionnalites Principales

Cette etape est essentielle pour mettre en lumiere comment le site web repond aux besoins
des utilisateurs et pour expliquer comment chaque fonctionnalite contribue a ameliorer
l'experience globale de l'utilisateur.

Chaque fonctionnalite est decrite en detail, notamment son objectif, son fonctionnement
et son interaction avec l'utilisateur. Par exemple, sur la page d'accueil, la fonctionnalite de
recherche est expliquee en detail, montrant comment les utilisateurs peuvent saisir des
mots-cles et obtenir des resultats pertinents. Sur la page de resume d'un livre, la
fonctionnalite de visualisation d'un resume est detaillee, expliquant comment les
utilisateurs peuvent acceder a des informations essentielles sur un livre donne.

De plus, pour une meilleure comprehension, des captures d'ecran des fonctionnalites cles
sont fournies. Ces captures d'ecran illustrent visuellement comment chaque fonctionnalite
est presentee a l'utilisateur et comment elle s'integre dans le design global de la page. Par
exemple, une capture d'ecran de la barre de recherche sur la page d'accueil montre son
emplacement et son apparence, tandis qu'une capture d'ecran de la page de connexion
peut montrer comment les utilisateurs peuvent saisir leurs informations d'identification.

L'objectif de cette etape est de fournir une documentation complete des fonctionnalites
du site web, de maniere a ce que les utilisateurs et les parties prenantes puissent
comprendre facilement comment interagir avec le site et en tirer le meilleur parti. Cela
contribue a assurer une experience utilisateur positive et a mettre en avant les
caracteristiques distinctives du site web de bibliotheque.

1 15 1
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO
READ

Full name..

Email.

Send

f* @ in

Login Here
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO
READ

Conclusion
La phase finale de tout projet est marquee par la redaction d'une conclusion, et dans le
contexte du projet de creation d'un site web de bibliotheque avec HTML et CSS, elle
revet une importance particuliere. La "Conclusion" est l'opportunite de recapituler les
realisations majeures, de reflechir aux enseignements tires tout au long du processus, et
de proposer des pistes d'amelioration pour l'avenir.

Tout d'abord, il est crucial de recapituler les objectifs qui ont ete atteints avec succes au
cours du projet. Cela inclut l'achevement de chaque page du site web, l'integration de
fonctionnalites cles telles que la recherche de livres, la mise en place de l'interface
utilisateur, et l'application du design visuel a l'aide de CSS. L'ensemble de ces realisations
doit etre mis en lumiere pour demontrer que les objectifs initiaux du projet ont ete atteints
de maniere satisfaisante.

Ensuite, la "Conclusion" permet de prendre du recul et de reflechir aux enseignements

tires du projet. Cela peut inclure une analyse des defis rencontres en cours de route, des
solutions apportees pour resoudre les problemes techniques ou de conception, ainsi que
des reussites majeures qui ont contribue au succes du projet. Il s'agit egalement d'un
moment propice pour evoquer les competences acquises et les connaissances developpees
par l'equipe de projet tout au long de cette experience.

Enfin, la "Conclusion" offre une opportunite precieuse pour identifier des suggestions
^ameliorations futures. Cela peut concerner des aspects tels que l'optimisation des
performances, l'ajout de fonctionnalites supplementaires, Amelioration de l'experience
utilisateur, ou meme l'exploration de technologies plus avancees.

{
17
1
 GROUPE

MLAGEEtablissement de Formation Profession nelle Privee

Ces suggestions servent a orienter le developpement futur du site web de bibliotheque,

en gardant a l'esprit qu'un projet est rarement acheve, mais plutot une etape dans
revolution continue d'un produit ou d'un service.

En somme, la "Conclusion" est une etape cruciale pour mettre en perspective le travail
accompli, pour celebrer les reussites et pour apprendre des defis. Elle prepare
egalement le terrain pour l'amelioration continue, garantissant que le site web de
bibliotheque reste une ressource precieuse pour les utilisateurs et s'adapte aux besoins
changeants de la communaute

{ ) 18
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO
READ
Le Processus de Developpement et d’Hebergement

GitHub :
en creant un referentiel est une etape initiale cruciale pour donner vie a votre projet de
bibliotheque sur Internet. sert de plateforme puissante de gestion de versions et de
collaboration, vous permettant de stocker en toute securite le code de votre projet, de
suivre les modifications et de collaborer facilement avec les membres de votre equipe.
En poussant votre code HTML, CSS et JavaScript dans un referentiel GitHub, vous
assurez une organisation efficace de votre projet, ce qui facilite la gestion de son
developpement.

Netlify :
est la prochaine etape fluide du processus. est une plateforme de cloud hosting et
d'automatisation confue pour les projets web modernes. Elle offre une maniere conviviale
et efficace de deployer des sites web statiques. En connectant votre referentiel GitHub a
votre compte Netlify, vous permettez des deploiements automatiques a chaque fois que
vous poussez des modifications dans votre referentiel. Cela signifie que votre site web est
toujours a jour, sans necessiter de deploiement manuel a chaque modification.
Netlify va au-dela de l'hebergement simple ; il propose des fonctionnalites telles que la
prise en charge de domaines personnalises, l'integration continue et la fourniture
automatique de certificats SSL. Cela ameliore les performances globales et la securite de
votre site. Netlify fournit egalement des journaux de deploiement detailles et un
historique des versions, ce qui est precieux pour le depannage et la surveillance de votre
projet.
En resume, la combinaison de GitHub et de simplifie le processus de developpement et
d'hebergement pour votre projet de bibliotheque. Elle garantit que votre code est stocke
en toute securite, facilement accessible pour la collaboration, et toujours disponible sur le
web. Cette integration simplifie la gestion du cycle de vie de votre projet, de la
programmation a l'hebergement, vous permettant de vous concentrer davantage sur
Amelioration de l'experience utilisateur et l'ajout de nouvelles fonctionnalites a votre site.

{ ) 19
LL
J
Etablissement de Formation Professionneile Privee

BOOK TO
READ

- **HTML:** www.html.com
- **CSS:** www.css.com
- **JavaScript:** www.javascript.com
- **GitHub:** www.github.com
- **Netlify:** www.netlify.com
- **Visual Studio Code:**
www.vscode.com

{ ) 20