Remerciement

Avant de prsenter les rsultats de nos recherches nous tenons tout dabord remercier
toutes les personnes qui nous ont permis de mener bien et terme ce travail ainsi que celles
qui ont accept de faire partie du jury de ce projet de fin dtudes.
Il nous est trs difficile dexprimer en quelques lignes toute notre gratitude et nos

n
remerciements trs chaleureux Monsieur Mustapha Haddad, professeur la facult des

tio
sciences de Mekns. Vous nous avez fait un grand honneur en nous confiant ce travail, si
modeste soit-il, et en nous donnant la chance dtre guids sur cette voie prilleuse. Nous

a
sommes trs touchs par votre courtoisie et votre gnrosit. Votre soutien moral et
scientifique, votre enthousiasme, votre dynamisme et votre sympathie nous ont permis de
lu
mener bien ce travail. Veuillez trouver ici lexpression de notre respectueuse considration
a
et nos sincres remerciements.
Ev

Nos plus sincres remerciements sadressent aussi Madame Ait Lyazidi Saadia,
professeur la facult des sciences de Mekns, davoir accept avec amabilit de juger ce
travail. Veuillez trouver ici le tmoignage de notre vive reconnaissance.
F

On tient galement remercier considrablement Monsieur Fouad Benyaich,

PD

professeur la facult des sciences de Mekns, davoir accept de faire partie du jury de ce
projet de fin dtudes. Veuillez trouver ici lexpression de nos sentiments respectueux.
Nos remerciements sadressent galement toute personne ayant particip, de prs ou
rt

loin la ralisation de ce travail. Enfin, on tient exprimer notre reconnaissance la plus

pe

profonde nos familles et nos amis pour leur soutien moral et matriel incessant.
Ex

SMP Page 1 13/06/2013

 Sommaire
Introduction.4
Premire partie
I. La conception dun site web6
1. La conception de la carte graphique6

n
tio
2. La conception de linterface de navigation6

a
3. Mise en page du texte..8
lu
4. Couleur du texte8
a
Ev

5. Conclusion.9
F

II. Les logiciels et les langages utiliss..9

PD

1. Introduction..9
2. Les logiciels utiliss10
rt
pe

2.1Environnement matriel10
Ex

2.2 Environnement logiciel10

2.3 Logiciels utiliss10
2.3.1 Dreamweaver..10.
2.3.2 Adobe flash...10
2.3.3 Wampserver..11

SMP Page 2 13/06/2013

 3. Les languages de cration dun site11
3.1 JavaScript11
3.2 Langage HTML..12
3.2.1. Introduction.12
3.2.2. La structure dune page HTML.13
3.2.3. Les balises de HTML.14

n
tio
3.3 CSS..15

a
3.4 PHP, Apache, MySQL & PhpMyAdmin.17
a lu
Ev

Deuxime partie
F

I. Prsentation du laboratoire LASMAR24

PD

II. Le modle de donnes ..28

III. Cration de la base de donnes .30
rt
pe

IV. Maquettage du site ..33

Ex

V. La mise en forme par CSS..35

Conclusion.40

SMP Page 3 13/06/2013

 INTRODUCTION

Les systmes dinformation jouent un rle primordial dans lactivit des organisations du
fait quils permettent de fournir linformation ncessaire la prise de dcision. Ainsi, il est un
ensemble organis de ressources (personnel, donnes, procdures, matriel, logiciel,)
permettant dacqurir, de stocker, de structurer, et de communiquer des informations sous
forme de textes, images, sons, ou de donnes codes dans des organisations. Selon leur
finalit principale, on distingue des systmes dinformation supports doprations (traitement
de transaction, supports dopration de bureau et de communication) et des systmes

n
dinformation supports de gestion (aide la production de rapports, aide la dcision).
Linformatique couvre aujourdhui peu prs toutes les branches de lactivit humaine. Elle

tio
contribue lvolution de plusieurs domaines grce ses applications varies en industrie,
communication, enseignementetc. A son tour, la qualit jouer du progrs de

a
linformatique et de ses apports vus que la qualit reprsente aujourdhui le moyen le plus
lu
sr de gagner la bataille de la concurrence. La cration dun site web ncessite aussi bien des
formations professionnelles en communication et en cration des sites et pour avoir un
a
message communicationnel bien labor au risque de se trouver prsent sur Internet sans
Ev

pour autant raliser le profit escompt. Lobjectif de ce projet effectu, est concevoir et
raliser le site web du laboratoire LASMAR de la facult des sciences Mekns et dassurer sa
prsence sur le web. Pour cela, quelques tapes sont ncessaires savoir : La prparation du
F

contenu textuel, la conception de la maquette graphique et la ralisation. Dans ce projet nous

allons dtailler les tapes de la conception et de la ralisation du Site web, en rpondant
PD

quelques questions savoir : Quelles informations prsenter sur le site ? Quels sont les
meilleurs langages et logiciels utiliser pour crer les sites web ? Sagit-il dun site web
statique ou dynamique ?
rt
pe
Ex

SMP Page 4 13/06/2013

 Premire partie

n
a tio
I. La conception dun site web
a lu
Ev

II. Les logiciels et les langages utiliss

F
PD
rt
pe
Ex

SMP Page 5 13/06/2013

 I. La conception dun site web
Un internaute a besoin de se faire une image mentale du site et de comprendre sa
structuration. En consquence, tout concepteur d'un site web doit donner une identit visuelle
son site travers la carte graphique, les polices et les couleurs de caractres utiliss. Donc,
et la fin de cette phase de conception de notre site, nous devons avoir : Une carte
graphique (le logo du site, les icnes, couleurs utilises), l'interface de navigation (contenu de
la barre de navigation, l'emplacement des diffrents lments au sein d'une page,..)

1. La conception de la carte graphique

Pour accder un site web, l'utilisateur peut procder de deux faons diffrentes : Soit il
connat l'adresse du site, soit il a accd via les outils de recherche. En effectuant sa
recherche selon la premire mthode, l'utilisateur accde directement la page d'accueil du
site. La prsence du logo ou de notre site ainsi que les icnes des diffrentes rubriques y est

n
indispensable pour lui indiquer le contenu. En accdant au site, suite l'utilisation des outils

tio
de recherche, le visiteur peut se trouver dans un document situ un niveau profond dans
l'hirarchie du site et ceci sans passer, ncessairement, par la page d'accueil.

a
Dans ce cas, la prsence d'une indication, pour signaler l'appartenance du document
lu
courant un site et plus prcisment un thme dtermin, est ncessaire : Ceci permet
a
notre visiteur de se reprer. De mme, la prsence d'un ensemble d'icnes graphiques
envoyant vers la page d'accueil du site et vers les diffrentes rubriques permet d'avoir une vue
Ev

d'ensemble des diffrentes ressources d'information prsentes sur le site. Pour que les icnes
utilises soient plus explicites, nous avons besoin dajouter un texte d'explication au-dessus
de chaque icne.
F

La conception des icnes graphiques, nous permet d'tablir :

PD

-La dfinition du logo du site et son emplacement dans les diffrents documents.
-La dfinition des icnes des diffrents thmes.
rt
pe

2. La conception de l'interface de navigation

L'interface de navigation est la suite indispensable d'une bonne structuration du site.

Ex

Elle doit tre simple comprendre, facile mmoriser et offre une orientation vers
l'information cherche.
Une faon simple de lui permettre d'avoir accs toutes les rubriques est d'insrer dans
chaque page du site, une barre de navigation.

Les lments de la barre de navigation :

La barre de navigation peut contenir un ensemble d'icnes ou de mots - cls permettant
d'accder aux principales rubriques et aux services offerts par le site.
Pour les diffrentes rubriques, il faut veiller les biens nomm pour que l'intitul de la
rubrique soit cohrent avec son contenu. Parmi les lments que nous devons prvoir dans
notre barre de navigation, en plus des rubriques spcifiques du site :

SMP Page 6 13/06/2013

 Rubrique Contact :

Cette rubrique permet au visiteur de demander plus d'informations sur un document

(informations complmentaires, les coordonnes de l'auteur du document,...). Sa prsence est
ncessaire au niveau de la barre de navigation (par consquent au niveau du chaque page du
site).

Rubrique de recherche :

Il s'agit de l'intgration d'un moteur de recherche local un site web : C'est un outil
permettant de guider le visiteur vers un document prcis (situ dans notre site), et ceci suite
une recherche par mot - cl. L'intgration des rubriques Dans note barre de navigation est
trs conseille surtout si le contenu de notre site augmente rapidement.

Carte du site :

n
tio
Pour faciliter la navigation de notre visiteur, on va prsenter une carte de notre site. C'est
un schma, prsentant une vue synthtique de l'organisation des documents au sein du site.

a
Toutes les rubriques doivent avoir un lien partir de la barre de navigation. De mme, et
lu
pour permettre l'accs universel, la barre de navigation, nous sommes besoin de prvoir
une version texte. Si les boutons de navigation sont des images, reprenez ses lments en une
a
ligne de texte, directement sous ses images. Ceci est trs utile, surtout pour les navigateurs en
Ev

mode texte pour les internautes dsactivant l'option de tlchargement des images.
F

La conception des boutons de navigation linaire :

PD

Les boutons de navigation linaire serviront surtout dans le cas des documents composs
de plusieurs pages crans. Pour faciliter la navigation au sein de ces documents on peut
prvoir les boutons suivants :
rt

Prcdent : Permet d'aller la page prcdente du document courant ;

pe

Suivant : Permet d'aller la page suivante du document courant ;

Ex

Haut de page : Permet de revenir en haut de la page courante (Ce bouton est trs utilis si le
document consult est sur plusieurs crans)

3. Mise en page du texte

Comme nous disposons une norme quantit de couleurs et de polices de caractres,
nous serons tents de les utiliser. Pour ne pas frustrer le lecteur et ne pas manquer notre
objectif qui consiste avant tout transmettre un message et attirer lattention sur le contenu
et de prsenter une page facile lire.

Rgles typographiques :

SMP Page 7 13/06/2013

 Nous donnons ci-dessous quelques rgles lmentaires de typographie qui nous permet
de crer des pages esthtiques :
Les polices de caractres : En langage Html, on peut utiliser n'importe quelle police de
caractre mais la condition que celle-ci soit installe sur l'ordinateur de notre visiteur.
Ainsi, si nous crivons tout le site avec la police ''Comics'' et si cette police n'est pas installe
sur le poste de notre visiteur, ce dernier verra notre site dans la police par dfaut de son
navigateur. La solution pour faire de la mise en page de notre texte consiste utiliser les
polices installes par dfaut dans le systme d'exploitation, des polices que tout utilisateur est
cens avoir sur sa machine.
Utilisation des majuscules et des minuscules : Il est plus facile de lire un texte possdant
des minuscules et des majuscules, parce que celui - ci offre des formes distinctes faciles
reprer et aide dcoder le contenu des pages web. Pour mettre en vidence un mot ou une
phrase, on recommande gnralement, l'utilisation du gras plutt que des MAJUSCULES car

n
ces dernires ont une signification bien particulire : Elles signifient ''crier''. De plus un texte,

tio
crit dans sa totalit en majuscule forme un bloc serr qui permet difficilement la distinction
des lettres.

a
Type et taille des caractres : Evitez toute utilisation exagre de caractres en gras ou
lu
en italique. Les caractres en gras deviennent trs vite monotones, car s'ils sont utiliss
a
partout ils n'auront aucune signification et finissent par devenir agressifs l'gard du lecteur.
Ev

L'utilisation du texte soulign : Le soulign identifie les hyperliens, vous devez viter son
utilisation en tant que texte ''normal''.
F

L'utilisation des styles d'en-tte (Les balises hr en HTML) : Slectionnez quelques styles
d'en-tte pour organiser notre contenu et utiliser ces styles de manire cohrente. Une
PD

prsentation rgulire avec des rptitions permet au lecteur de localiser rapidement

l'information et de saisir la structuration de notre site tout en contribuant la clart des
pages.
rt

4. Couleur du texte
pe

La couleur du texte doit contraster avec le fond pour faciliter la lisibilit. Idalement,
une typographie fonce sur un fond clair produit moins de fatigue l'cran. Il est possible
Ex

d'obtenir un bon contraste en utilisant un texte clair sur un fond fonc, mais l'impression
d'une telle page-cran peut tre illisible. En effet la plupart des internautes configurent
l'impression des pages crans en noir et blanc afin d'acclrer le traitement. Cela a pour effet
qu'un texte clair sera de pitre qualit d'impression en noir et blanc, moins d'utiliser les
niveaux de gris de l'imprimante. Selon notre exprience, il semble que certaines associations
de couleurs soient plus efficaces que d'autres, pour faciliter la lisibilit du texte.

5. Conclusion

Cette tape de conception du site vous permet d'avoir un modle de page ainsi que ses
diffrentes composantes. Un exemple de modle de page est prsent ci-dessous :

SMP Page 8 13/06/2013

 n
a tio
a lu
Ev

II. Les logiciels et les langages utiliss

F
PD

1. Introduction
rt

Ce chapitre a pour objectif majeur de prsenter les logiciels utiliss. Cest la phase de
ralisation de ce site web dynamique. Elle est compose de deux parties : la premire partie
pe

prsente lenvironnement de dveloppement alors que la seconde partie concerne les

principaux langages de crations.
Ex

2. Les logiciels utiliss

2.1. Lenvironnement matriel

Pour crer un site nous avons besoin dune machine, configurs comme suit :
Mmoire Vive : 3 Go.
Disque Dur : 25 Go.
Processeur : Intel (R) Core (TM) 2 duo 2.00 GHz.

2.2. Environnement Logiciel

Lors la cration dun site web dynamique, il faut utiliser des logiciels notamment :
o Dreamweaver.

SMP Page 9 13/06/2013

 o Flash.
o Wampserver.

2.3. Logiciels utiliss

2.3.1. Dreamweaver
Dreamweaver (anciennement Macro mdia Dreamweaver) est un diteur du site web. Il
fut l'un des premiers diteurs HTML de type tel affichage, tel rsultat , mais galement l'un
des premiers intgrer un gestionnaire du site. Ces innovations l'imposrent rapidement
comme l'un des principaux diteurs du site web, aussi bien utilisable par le nophyte que par
le professionnel.
Dreamweaver offre deux modes de conception par son menu affichage. L'utilisateur peut
choisir entre un mode cration permettant d'effectuer la mise en page directement l'aide

n
d'outils simples, comparables un logiciel de traitement de texte (insertion de tableau,

tio
d'image, etc.). Il est galement possible d'afficher et de modifier directement le code (HTML
ou autre) qui compose la page. On peut passer trs facilement d'un mode d'affichage
l'autre, ou opter pour un affichage mixte. Cette dernire option est particulirement

a
intressante pour les dbutants qui, terme, souhaitent se familiariser avec le langage
lu
HTML. Il a volu avec les technologies de l'internet.
Il offre, aujourd'hui, la possibilit de concevoir des feuilles de style. Les liaisons avec
a
des bases de donnes ont galement t amliores ainsi que le chargement des fichiers sur
Ev

les Serveurs d'hbergement. Il propose, en outre, l'utilisation de modles imbriqus de pages

web, selon un format propritaire.
Depuis la version MX, il peut tre utilis avec des langages web dynamiques PHP
F

l'aide d'outils relativement simples d'utilisation. Il permet ainsi de dvelopper des

applications dynamiques sans connaissance pralable des langages de programmation.
PD

2.3.2. Adobe flash

rt

Adobe Flash ou simplement Flash, se rfre Adobe Flash Player et un logiciel

multimdia utilis pour crer le contenu de Adobe Engagement Platform (tel quune
pe

application Internet, vidos). Flash Player, dvelopp et distribu par Macro mdia
(rachet en 2005 par Adobe System), est une application client fonctionnant sur la plupart des
Ex

navigateurs Web. Ce logiciel permet la cration de graphiques vectoriels et de bitmap anims

par un langage script appel Action Script, et la diffusion de flux (Stream) bidirectionnels
audio et vido.
Pour tre bref, Adobe Flash est un environnement de dveloppement intgr (IDE), une
machine virtuelle utilise par un player Flash ou serveur flash pour lire les fichiers Flash.
Mais, le terme Flash peut se rfrer un lecteur, un environnement ou un fichier
dapplications. Depuis son lancement en 1996, la technologie Flash est devenue une des
mthodes les plus populaires pour ajouter des animations et des objets interactifs une page
web; de nombreux logiciels de cration et Opration Systme sont capables de crer ou
dafficher du Flash. Qui est gnralement utilis pour crer des animations, des publicits ou
des jeux vido. Il permet aussi d'intgrer de la vido en streaming dans une page jusqu'au
dveloppement d'applications Riche Media.

SMP Page 10 13/06/2013

 Les fichiers Flash, gnralement appels animation Flash portent l'extension swf. Ils
peuvent tre inclus dans une page web et lus par le plugin Flash du navigateur, ou bien
interprts indpendamment dans le lecteur Flash Player.

2.3.3. Wampserver

WampServer (anciennement WAMP5) est une plateforme de dveloppement Web de type

WAMP, permettant de faire fonctionner localement (sans se connecter un serveur externe)
des scripts PHP. WampServer n'est pas en soi un logiciel, mais un environnement comprenant
deux serveurs (Apache et MySQL), un interprteur de script (PHP), ainsi que phpMyAdmin
pour l'administration Web des bases MySQL. Il dispose d'une interface d'administration
permettant de grer et d'administrer ses serveurs au travers d'un icone (icne prs de
l'horloge de Windows).
La grande nouveaut de WampServer rside dans la possibilit d'y installer et d'utiliser

n
n'importe quelle version de PHP, Apache ou MySQL en un clic. Ainsi, chaque dveloppeur

tio
peut reproduire fidlement son serveur de production sur sa machine locale.

3. Les langages de cration dun site

a
3.1 JavaScripts
a lu
JavaScript est un langage de programmation de scripts, principalement utilis dans les
Ev

pages web interactives. C'est un langage orient objet prototype, c'est--dire que les bases
du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des
instances de classes, mais qui sont quips de constructeurs permettant de gnrer leurs
F

proprits. Le langage a t cr en 1995 par Brendan Eich pour le compte de Netscape

Communications Corporation. Le langage actuellement la version 1.8.2 est une
PD

implmentation de la 3e version de la norme ECMA-262 qui intgre galement des lments

inspirs du langage Python. La version 1.8.5 du langage est prvue pour intgrer la 5e
version du standard ECMA.
rt
pe

3.2 Langage HTML

Ex

3.2.1 Introduction

Le HTML (HyperText Markup Language) est un format de prsentation de donnes

permettant de crer des pages web pouvant tre lues dans des navigateurs.
C'est un langage de description de donnes, et non un langage de programmation. Il s'agit
d'un langage permettant de dcrire la mise en page et la forme d'un contenu rdig en texte
simple. Une page HTML est ainsi un simple fichier texte contenant des balises (parfois
appeles marqueurs ou repres ou tags en anglais) permettant de mettre en forme le texte, les
images, etc.
Il est important de comprendre que le langage HTML est un standard, c'est--dire qu'il
s'agit de recommandations publies par un consortium international : le World Wide Web
Consortium (W3C).
Les spcifications officielles du HTML dcrivent donc les "instructions" HTML mais en
aucun cas leur implmentation, c'est--dire leur traduction en programmes d'ordinateur, afin

SMP Page 11 13/06/2013

de permettre la consultation de pages web indpendamment du systme d'exploitation ou de
l'architecture de l'ordinateur. Il existe toujours une marge d'interprtation de la part des
navigateurs, ce qui explique qu'une mme page web puisse s'afficher diffremment d'un
navigateur Internet l'autre.
Pour crer des pages web on na pas vraiment besoin dun programme spcifique. Un
simple diteur de texte (Dreamweaver ; bloc-notes ; Notepad++) peut suffire et son
utilisation est relativement facile. Il est bien facile de crer une page web (la plus simple
possible), il suffit dcrire du texte avec un diteur et denregistrer la page avec lextension
.htm. Lextension est un point suivi de trois (ou quatre) lettres aprs le nom du ficher. Elle
sert dfinir le type de fichier.
Exemples:
.doc est lextension dun fichier Word
.pdf est une extension dun fichier dimage
.xls est lextension dun fichier Excel

n
.htm est une extension de fichier web

tio
Comment procder ?
Sur Windows par exemple :
On ouvre Dreamweaver puis appuyant sur HTML

a
Tapez un petit texte directement dans Dreamweaver au niveau du (body) corps du site
lu
Enregistrez-le dans un nouveau dossier intitul
Quittez le Dreamweaver et Cliquez sur le fichier page que vous enregistrez le fichier il
a
s'ouvrira dans votre navigateur (Internet Explorer, Netscape, Mozilla Firefox, Google
Ev

chrome...).
Il est galement possible douvrir ce mme fichier avec un navigateur. Par exemple aprs
avoir ouvert Internet Explorer aller sur:
F

- Fichier - Ouvrir... - Parcourir et cherchez le dossier qui nous intresse sur lordinateur.
PD

- Ouvrir page.htm
rt
pe

3.2.2 La structure dune page HTML

Ex

A la diffrence du document texte qui ne contient aucune mise en forme, un document

HTML contient les donnes du document et les balises dfinissant la structure et l'aspect du
document. La structure d'un document Html est la suivante :
<HTML>
<HEAD>
....l'en tte....
</HEAD>
<BODY>
......Le contenu du document......
</BODY>
</HTML>
Tous les documents HTML commencent par cette balise <HTML> .
<HEAD> : Dfinit la zone d'en-tte de la page.
<BODY> : Dfinit le corps de la page.

SMP Page 12 13/06/2013

L'entte d'un document Html contient les lments suivants :
Par exemple
<TITLE>: Un page HTML doit avoir un titre qui apparatra dans la zone titre du
navigateur.
<META>: les balises META ont pour but de fournir des informations sur la page HTML.
Ces informations ne sont pas visibles l'cran. Chaque balise META est constitue de deux
attributs:
NAME : Il permet de spcifier un mot-cl indiquant quelle information donne la balise, on
trouve par mis ces mots-cls AUTHOR (l'auteur du document), KEYWORDS (permet de
donner les mots cls sur le contenu de la page).
CONTENT : Il permet d'associer une valeur au mot-cl. Cest dire il annonce le contenant
de cette zone le contenu de notre balise <TITLE> apparait sur la barre de titre (barre bleue)
de notre navigateur. Par ailleurs, notre page web ressemble bien une page de texte simple.
Elle n'a pas t enrichie, ne contient aucune image et ne renvoie aucune autre page ni un

n
autre site web.

tio
HTML offre la possibilit de mettre en valeur certains lments de la page et nous
verrons ici quelques attributs qui nous permettrons d'amliorer notre exemple.
Un certain nombre d'attributs de la balise <BODY> permettent de contrler la couleur du

a
fond de la page, des caractres du texte et enfin des liens. La page Web et le site Web La page
lu
web est le document qui apparat sur un cran dordinateur et qui se prsente sous forme de
texte, de son dimages etc. Chaque page web est crite dans un langage particulier appel le
a
HTML. Ce langage est bas sur des balises (ou tags), qui contiennent des instructions,
Ev

lesquelles sont interprtes par les diffrents navigateurs et apparaissent sur votre cran. Il
s'agit donc d'un langage de mise en forme du texte. Le code HTML d'une page est appel le
"code source". Les codes sources de chaque page web sont normalement en libre accs, vous
F

pouvez les voir en cliquant sur : "Affichage > source" pour Internet Explorer "Afficher >
PD

Source" de la page pour Netscape. Le HTML est le langage de base des pages web,
cependant il existe de nombreux autres langages qui interviennent dans la programmation
dune page web (PHP, ASP etc.). Nous reviendrons sur ces langages dans les prochains
chapitres de ce cours.
rt

Le site web quant lui est constitu de lensemble des pages cres par une structure ou
un individu relies entre elles par des liens hypertextes, stockes sur un serveur et accessibles
pe

via l'Internet. Chaque site web possde un identificateur appel adresse URL1, permettant de
la retrouver sur le Web et didentifier le type de protocole daccs qui lui est associ. Le
Ex

protocole tant lensemble des rgles (codes) respecter pour tablir un change
dinformations entre ordinateurs. Jusquau 1996, la plupart des sites hors des Etats-Unis
utilisaient un nom de domaine gographique deux lettres, par exemple : .sn pour le Sngal
; .fr pour la Fance etc. Depuis quelques annes plusieurs organisations prfrent dissocier
leur image de celle de leur pays.
Elles choisissent pour cela des noms de domaine lis leur activit par exemple .com
(commercial) ; .org (organisation) ; .net (Internet). Les noms de domaine sont grs
actuellement par la socit amricaine Network Solution Inc. (NSI). Les adresses IP qui
identifient les ordinateurs sont attribues par des registres amricains ARIN et europens
RIPE.

3.2.3Les balises de HTML

Comment utiliser les balises HTML ?

SMP Page 13 13/06/2013

Une balise est un lment de texte (un nom) encadre par le caractre infrieur (<) et le
caractre suprieur (>). Par exemple <H1> .
Les balises HTML ne sont pas sensibles la casse, c'est--dire qu'elles peuvent tre
saisies indiffremment en minuscules ou en majuscules ! Les balises HTML fonctionnent par
paire afin d'agir sur les lments qu'elles encadrent. La premire est appele balise
d'ouverture (parfois balise ouvrante) et la seconde balise de fermeture (ou fermante).
La balise fermante est prcd du caractre /) :
<marqueur> notre texte format </marqueur> A titre d'exemple, les balises <b> et </b>
permettent de mettre en gras le texte qu'elles encadrent:
<b> Ce texte est en gras </b>
Les balises HTML peuvent parfois tre uniques : la balise <br> reprsente par exemple un
retour la ligne.
Afin d'tre le plus proche possible du standard XHTML (beaucoup plus stricte que le
standard HTML), il est conseill d'utiliser la notation suivante : <br />.

n
Imbrication des balises

tio
Les balises HTML ont la particularit de pouvoir tre imbriques de manire
hirarchique afin de permettre le cumul de leurs proprits. En contrepartie le
chevauchement de balises n'est pas tolr par le standard HTML. Voici un exemple de texte

a
format avec des balises imbriques : lu
<i><b>Mon pays, est la Cote dIvoire</b></i> : imbrication de balises
<i><b>Mon pays</b>, est la Cote dIvoire</i> : chevauchement de balises
a
En contrepartie l'exemple ci-dessous n'est pas correct :
Ev

<i><b>Mon pays</i>, est la Cote dIvoire </b>

Notion d'attribut
Un attribut est un lment, prsent au sein de la balise ouvrante, permettant de dfinir des
F

proprits supplmentaires. Les attributs se prsentent la plupart du temps comme une paire
PD

cl=valeur, mais certains attributs ne sont parfois dfinis que par la cl.
Voici un exemple d'attribut pour la balise <p> (balise dfinissant un paragraphe), permettant
de spcifier que le texte doit tre align sur la droite :
<p align="right">Exemple de paragraphe</p>
rt

Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une
ou plusieurs valeurs.
pe

Espaces, saut de ligne et tabulations

Le langage HTML ne tient pas compte des espaces, des tabulations et des sauts de ligne
Ex

(ci-aprs appels) ou plus exactement il considre une suite d'un ou plusieurs

espaces/tabulations/saut de ligne comme une seule espace. Cela permet notamment
dindenter le code HTML pour plus de lisibilit, sans modifier l'apparence de la page HTML
dans le navigateur.
Le langage HTML possde par contre des lments permettant expressment de dfinir
chacun de ces lments de mise en forme :
Espace inscable : il s'agit d'une espace ne pouvant tre brise par une fin de ligne.
Sa reprsentation en HTML est &nbsp.
Saut de ligne manuel : il s'agit d'un saut de ligne explicite. Sa reprsentation en
HTML est <br> (<br /> pour tre conforme au XHTML).
Commentaires
Il est possible d'ajouter des lments d'information dans une page web sans que ceux-ci soient
affichs l'cran grce un jeu de balises spcifique, appel balises de commentaires.
<!-- Voici un commentaire -->

SMP Page 14 13/06/2013

Les balises de commentaires permettent de mettre en commentaire du texte mais peuvent
galement servir commenter du code HTML.

3.3 CSS

Le CSS n'est pas plus compliqu que le XHTML, il est juste diffrent car il sert
raliser la prsentation de notre page web. CSS signifie "Cascading Style Sheets", ce qui peut
se traduire en franais par "Feuilles de style en cascade".
On dit "Feuille de style" car en rgle gnrale, on crit le code CSS dans un fichier part (
l'extension .css au lieu de .html). C'est un fichier dans lequel on crit l'apparence que notre
site doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la
couleur ou l'image de fond etc.
On peut crire du code CSS dans 3 endroits diffrents. Les voici, le premier tant le moyen le
plus recommand :

n
Dans un fichier .css :

tio
on crit du code CSS dans un fichier spcial ayant l'extension .css (contrairement aux fichiers
XHTML qui ont l'extension .html).
C'est la mthode la plus pratique que je vais utiliser quelque part . Parmi les nombreux

a
avantages que cette solution apporte, il y a la possibilit de pouvoir proposer facilement
lu
plusieurs designs diffrents nos visiteurs.
Voici un exemple de fichier CSS sous Notepad++ :
a
Il faudra ajouter une ligne dans votre fichier .html entre les balises <head> </head> comme
Ev

ceci :

Code : HTML
F

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

PD

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple d'utilisation de CSS externe</title>
rt

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="Design sombre"
pe

href="sombre.css" />
</head>
Ex

<body>
<p>Cette page comporte une feuille de style externe. C'est la meilleure mthode
utiliser quand on
fait du CSS.</p>
</body>
</html>
La balise <link /> comporte plusieurs attributs. Nous pouvons en modifier deux d'entre eux
pour le moment :

title : c'est le nom que nous donnons notre feuille de style.

href : c'est l'emplacement o se trouve notre feuille de style sous forme de lien relatif. Dans
cet exemple le CSS se trouve dans le mme dossier, mais je vous recommande de le mettre
dans un sous-dossier "styles/" par exemple.

SMP Page 15 13/06/2013

Directement dans le header du fichier XHTML :

Il est aussi possible de taper du CSS directement l'intrieur de mme fichier XHTML,
entre les balises <head> </head>. On met une balise <style> </style> l'intrieur, comme
ceci :
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple de CSS dans le header</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Vous taperez votre code CSS ici */

n
</style>

tio
</head>
<body>
<p>Cette page comporte du CSS directement dans le header.</p>

a
</body> lu
</html>
a
Cette seconde mthode ressemble beaucoup la premire. Cependant, la premire
Ev

solution (utiliser un .css externe) est quand mme bien plus pratique, car elle nous permettra
de faire changer le design du site en un clin d'il. De plus, le fichier ne sera tlcharg
qu'une seule fois pour toutes les pages de notre site, ce qui allgera la taille des fichiers .html
F

et rendra donc notre site plus rapide.

PD

La mthode " l'arrache" dans les balises :

Cette mthode consiste ajouter un attribut style sur les balises pour leur appliquer un style
particulier. Cet attribut fonctionne sur toutes les balises. Par exemple sur un titre :
rt

Code : HTML
<h1 style="/* Votre style pour cette balise ici */">Titre</h1>
pe

Cette mthode a tous les dfauts : non seulement le CSS sera peu lisible l'intrieur des
balises, mais en plus a ne nous permet pas de profiter de tous les avantages du CSS, comme
Ex

la possibilit de changer la couleur de tous les titres du site en un clic.

Dans un CSS, on trouve 3 lments diffrents :
Des noms de balises : on crit les noms des balises dont on veut modifier l'apparence.
Par exemple, si je veux modifier l'apparence de tous les titres <h1>, je dois crire h1.

Des proprits CSS

Les "effets de style" de la page sont rangs dans des proprits. Il y a par exemple la
proprit color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la
taille du texte etc ...
Les valeurs : chaque proprit CSS on doit indiquer une valeur. Par exemple, pour la
couleur, il faut indiquer le nom de la couleur. Pour la taille, il faut indiquer quelle taille on
veut etc ...

SMP Page 16 13/06/2013

 3.4 PHP, Apache, MySQL et PhpMyAdmin

De nos jours, nombreux sont les sites qui tournent avec lemblmatique tryptique libre :
Apache + PHP + mySQL ensemble de scripts crits en PHP, PHPMyAdmin est tout
simplement le meilleur outil pour administrer nos BDD mySQL.
Tout se fait via une interface web complte et conviviale. Et en quelques clics, vous pouvez
ainsi crer et supprimer des bases ou des tables, excuter des requtes, exporter et importer
des fichiers, etc.

PHP

PHP est le langage les plus clbre et les plus utiliss permettant de crer des sites

n
web dynamiques. Cest notamment lui qui se cache derrire Facebook et Wikipdia qui font

tio
partie des sites les plus frquents au monde. Pour programmer en PHP, il faut connaitre les
langages de base du web: HTML et CSS.
On associe la plupart du temps PHP une base de donnes pour concevoir des sites

a
capable de stocker tout le flot de donnes quils reoivent parmi tous les systmes de bases de
lu
donnes qui existent .MYSQL est un des outils que lon utilise le plus couramment.
Ses principaux atouts sont:
a
- la gratuit et la disponibilit du code source (PHP est distribu sous licence GNU GPL).
Ev

-sa richesse fonctionnelle : PHP comporte plus de 1000 fonctions.

-la simplicit d'criture des scripts (?).
-la disponibilit sur le Web de nombreux scripts PHP prts l'emploi.
F

-la possibilit d'inclure le script PHP au sein d'une page Html.

PD

-la simplicit de liaison avec des bases de donnes. De nombreux systmes de base de
donnes sont supports, mais le plus utilis avec le PHP est MySQL, un systme de base de
donnes gratuit et disponible sur les plateformes Unix, Linux, et Windows.
Ce langage de programmation permet essentiellement de construire des sites Web
rt

dynamiques, particulirement lorsquils sont relis une base de donnes.

pe

Principe de fonctionnement
Ct-client et ct-serveur
Ex

Site statique
Ct-client:
XHTML et CSS sont des langages ont t crs pour produire des sites web. Lorsque le
serveur envoie la page web au client, il envoie en fait du code en langage XHTML et CSS.

Dtaillons ce qu'il se passe lorsque nous consultons une page Html dite statique :

SMP Page 17 13/06/2013

- Notre navigateur envoie l'adresse URL (Uniform Ressource Locator) que vous avez
encode.
- Le serveur Web (l'ordinateur) qui hberge la page que vous demandez, va chercher le
fichier demand dans son disque dur et vous envoie la page Html telle qu'elle votre
navigateur.
- Notre navigateur interprte les diffrents langages se trouvant dans ce fichier (Html,
JavaScript, CSS, etc.) et affiche la page.
La connaissance de ces deux langages nest pas parfait pour crer un site dynamique.
Site dynamique
Ct-serveur:
Quel que soit le site web que l'on souhaite crer, XHTML et CSS sont donc indispensables.
Cependant, ils ne suffisent pas pour raliser des sites dynamiques. Il faut les complter avec
d'autres langages comme PHP et MYSQL qui sont des langages que seuls les serveurs
comprennent et qui permet de rendre votre site dynamique

n
a tio
a lu
Ev
F
PD

Dtaillons ce qu'il se passe lorsque nous consultons une page Html dite dynamique :
-Un fichier PHP est un fichier HTML ou XHTML dans lequel on ajout des instructions PHP
rt

places entre les balises < ?php et?>

-Il est sauvegard avec lextension .php
pe

-Lorsque lutilisateur (un navigateur) demande un fichier PHP au serveur, celui ci commence
par vrifier sil existe.
Ex

-Si le fichier existe, le serveur le transmet linterprteur PHP qui excute le code (avec
ventuellement des interactions avec une base de donnes) et remplace le code PHP par le
rsultat (donc des balises HTML).
-Le serveur renvoie alors le fichier rsultat dbarrass des instructions PHP, remplaces
par leurs rsultats.
Il est important de noter :
- que tout ce qui a trait la prsentation de la page (couleur, police, mise en forme du texte,
etc..) est l'affaire du Html et des feuilles de style CSS.
- que PHP n'a donc rien voir avec le design de votre page.
- que tout ce qui touche au comportement du navigateur est du domaine du JavaScript, lui
aussi excut par le client.
Gnralits :
Le code est compris entre les balises < ?php et?>
Les instructions sont spares par un point-virgule; comme en C, Java, ...

SMP Page 18 13/06/2013

Les commentaires sont placs entre les signes /* et */ ou sur une seule ligne prcde de // ou
de #
PHP est sensible la casse (majuscule et minuscule).

Apache

Apache est le serveur le plus rpandu sur Internet. Il fonctionne principalement sur les
systmes d'exploitation UNIX (Linux, Mac OS X, Solaris, BSD et UNIX) et Windows. Version
Windows n'est considre comme stable que depuis la version 1. 2 d 'Apache. Il est utilis par
de nombreux produits, dont WebSphere d'IBM, ainsi que par Oracle Corporation. Il est
galement support d'une faon ou dune autre par les outils de dveloppement Borland
Delphi et Kylix, ainsi que par des CMS comme Drupal.
Apache est conu pour prendre en charge de nombreux modules, en lui donnant des
fonctionnalits supplmentaires : interprtation du langage PHP, serveur proxy, Common

n
Gateway Interface, Server Side Includes, rcriture d'URL, ngociation de contenu,

tio
protocoles de communication additionnels, et c. Nanmoins, il est noter que l'existence de
nombreux modules Apache complexifie la configuration du serveur web. En effet, les bonnes
pratiques recommandent de ne charger que les modules utiles : de nombreuses failles de

a
scurit, affectant uniquement les modules d 'Apache sont rgulirement dcouverts.
lu
a
Ev

MySQL

MySQL en Anglais : Structured Query Language est un langage volu destin aux
F

systmes de bases de donnes relationnelles. Dvelopp l'origine par le laboratoire de

PD

recherche d'IBM San Jose en Californie la fin des annes 70, SQL a t adopt pour de
nombreux systmes de gestion de bases de donnes relationnelles et adapt ceux-ci. Il a t
reconnu en tant que norme officielle de langage de requte relationnelle par l'institut ANSI
(American National Standards Institute) et par l'organisme ISO (International Standards
rt

Organization).
Bien que SQL soit un langage de requtes, il ne comporte pas uniquement des
pe

commandes de requte, c'est--dire d'extraction de donnes d'une base de donnes, mais offre
aussi des commandes de cration de bases de donnes et d'objets de bases de donnes, d'ajout
Ex

de donnes, de modification de donnes existantes et beaucoup d'autres fonctions.

MySQL est un systme de gestion de base de donnes (SGBD). Selon le type d'application, la
licence est libre ou propritaire. Il fait partie des logiciels de gestion de base de donnes les
plus utiliss au monde, autant par le grand public (applications web principalement) que par
des professionnels, en concurrence avec Oracle et Microsoft SQL Server. C'est un logiciel
libre dvelopp sous double licence en fonction de l'utilisation qui en est faite : dans un
produit libre ou dans un produit propritaire. Dans ce dernier cas, la licence est payante,
sinon c'est la licence publique gnrale GNU (GPL) qui s'applique. Ce type de licence double
est utilis par d'autres produits comme le Framework de dveloppement de logiciels (pour les
versions antrieures la 4.5).
Le couple PHP/MySQL est trs utilis par les sites Web et propos par la majorit des
hbergeurs Web. Plus de la moiti des sites Web fonctionnent sous Apache, qui est le plus
souvent utilis conjointement avec PHP et MySQL.

SMP Page 19 13/06/2013

 PhpMyAdmin

PhpMyAdmin est un outil entirement crit en PHP qui fournit une interface simple et
trs complte pour administrer une base MySQL. La plupart des commandes de lutilitaire
MySQL peuvent seffectuer par lintermdiaire de phpMyAdmin, les oprations possibles
dpendant bien sr des droits de lutilisateur qui se connecte la base.
Voici une liste des principales possibilits:
1. Crer des bases de donnes.
2. Crer et modifier la description des tables.
3. Consulter le contenu des tables, modifier certaines lignes etc.
4. Excuter des requtes SQL interactivement.
5. Charger des fichiers dans des tables et, rciproquement, rcuprer le contenu ,de tables
dans des fichier ASCII.
6. Administrer MySQL.

n
Lutilisation de phpmyAdmin permet de crer, modifier ou mise jour dune base de

tio
donnes personnelle distance, laide dun simple navigateur. Lannexe A dcrit
linstallation de phpMyAdmin. Mme sil ne dispense pas compltement de lutilisation de
lutilitaire mysql, il permet de faire beaucoup doprations simples de manire conviviale.

a
- La page daccueil de phpMyAdmin, aprs connexion dun utilisateur :
lu
Lcran est divis en deux parties. Sur la gauche un menu droulant propose la liste des
bases de donnes accessibles lutilisateur (si vous accdez au systme dun fournisseur
a
daccs, vous ne verrez certainement que votre base personnelle). Cette partie gauche reste
Ev

affiche en permanence. La partie droite prsente lensemble des oprations disponibles en

fonction du contexte. En slectionnant une des bases, on obtient sa structure ( savoir la liste
des tables), et toute une liste dactions effectuer sur cette base. La figure 1.7 montre cette
F

seconde page (noter quil sagit dun formulaire HTML). Voici quelques indications sur les
PD

fonctionnalits proposes, pour chaque table affiche, on peut effectuer les

oprations suivantes :
1. Afficher donne le contenu de la table.
2. Slectionner propose un petit formulaire permettant de slectionner une partie de la table.
rt

3. Insrer prsente un autre formulaire, cr dynamiquement par phpMyAdmin, cette fois

pour insrer des donnes dans la table.
pe

4. Proprits donne la description de la table et de ses index. Cette option donne accs une
autre page, assez complte, qui permet de modifier la table en ajoutant ou en supprimant des
Ex

attributs.
5. Supprimer dtruit la table (phpMyAdmin demande de confirmation).
6. Vide dtruit toutes les lignes.
SQL. La fentre place en dessous de la liste des tables permet dentrer des commandes
SQL directement.
Pour crer la table FilmSimple, on peut copier/coller directement la commande
CREATETABLE dans cette fentre et lexcuter. De mme, on peut effectuer des
INSERT, des SELECT, et toutes les commandes vues dans la section prcdente.

Connexion phpmyadmin et notre base de donnes phpBB

Il va falloir dans un premier temps, nous connecter notre gestionnaire de base de donnes.
Une fois connect PhpMyadmin, nous arriverons donc sur cette page daccueil

SMP Page 20 13/06/2013

 n
tio
Nous allons donc crer une base que nous allons nommer MyBase et qui contiendra 4
champs.

a
a lu
Ev
F
PD
rt
pe

Aprs avoir cliqu sur Excuter , nous allons nous retrouver face un tableau de 4 lignes,
Ex

chacune reprsentant un champ de votre future table.

La prochaine tape ressemble ceci:

Dans cette tape, nous allons remplir les diffrents champs

SMP Page 21 13/06/2013

En cliquant sur le bouton "Sauvegarder"

n
a tio
a lu
Ev
F
PD
rt
pe
Ex

Nous constatons alors dans la colonne de gauche que la table " liens" a t cre,
PhpMyAdmin vous le dit et en plus il vous donne la requte SQL qui a t effectu

SMP Page 22 13/06/2013

 n
tio
Deuxime partie
a
a lu
Ev

I. Prsentation du labo
F

II. Le modle de donnes

PD

III. Cration de la base de donnes

rt
pe

IV. Maquettage du site

Ex

V. La mise en forme par CSS

SMP Page 23 13/06/2013

 I. Prsentation du labo
Avant de se lancer dans la programmation, la structure et la mise en forme du site
LASMAR, nous devons donc dans un premier temps bien prsenter le laboratoire
LASMAR.LASMAR a t accrdit en 2006, il s'inscrit dans la continuit du Laboratoire
de Spectronomie Physique (1990-2006). LASMAR est associ au Centre National pour

n
la Recherche Scientifique et Technique (CNRST) depuis janvier 2010 (URAC 11).

tio
Intitul du laboratoire : Laboratoire de Spectromtrie des Matriaux et Archomatriaux

a
Acronyme: LASMAR
lu
Domaines de recherche : Physique Applique / Archomatriaux et Gomatriaux,
a
Matriaux et Hyperfrquences, Environnement.
Ev

Discipline : Physique
F

Responsable du laboratoire :
PD

Nom Prnom : HADDAD Mustapha

E-mail : mhaddad22@yahoo.fr et mhaddad@fs-umi.ac.ma

rt
pe

Equipes de recherche composant LASMAR :

Ex

Spectromtrie, Archomtrie et Physico-Chimie des Matriaux (Resp. M. Haddad)

Spectroscopie Optique Applique au Patrimoine, lEnvironnement et la Physico-

chimie Molculaire (Resp. S. Lyazidi)

Matriaux et Instrumentation (Resp. L. Bejjit)

Membres de LASMAR : 12 chercheurs permanents, 6 chercheurs associs, 3 5

chercheurs invits par an, 8 10 doctorants, 5 8 tudiants en Master.

Thmes de recherche dvelopps au sein de LASMAR :

- Investigation du patrimoine : archomatriaux et gomatriaux

- Techniques physiques appliques aux archomatriaux

SMP Page 24 13/06/2013
 - Dveloppement des mthodes de datation absolue au Maroc

- Analyse Environnementale / Surveillance de lenvironnement

- Pollution de lair

- Pollution Organique : Dveloppement dune nouvelle approche danalyse de polluants

organiques dans les eaux et dans le sol : Pesticides et HAPs

- Matriaux, Matriaux pour llectronique et Hyperfrquences

- Polymres, verres

- Hyperfrquences

n
Equipements disponibles au sein du LASMAR pour la ralisation du projet

tio
- Spectromtre de Rsonance de Spin Electronique (ESR) fonctionnant en bande X,

a
- Spectrophotomtre dabsorption optique trs performant UV/VIS/NIR (JASCO V
lu
570) avec systme de rflexion diffuse,
a
- Spectrofluorimtre SHIMADZU RF-5301, trs performant, fonctionnant en mode
Ev

normal et en mode synchrone,

- Spectromtre Raman Renishaw trs performant quip dun microscope optique Leica
F

de diffrents grossissements et dun laser excitant dans le rouge (exc. = 633 nm),
PD

puissance variable allant de quelques dixime de mW jusqu 20 mW,

- Spectromtre Raman JASCO quip dun microscope optique de diffrents

grossissements et dune fibre optique pour les mesures distance, laser excitant dans le
rt

vert (exc. = 532 nm), puissance variable allant de quelques mW jusqu 60 mW, filtre
pe

super-noch permettant des mesures partir de 50 cm-1,

Ex

- Spectrocolorimtre Konica Minolta portable pour les mesures de couleur in-situ et

sur site, avec logiciels requis

- Micro-balance de haute prcision et petit matriel de paillasse, - Parc informatique et

documentation actualiss.

SMP Page 25 13/06/2013

 n
a tio
a lu
Ev

Politique scientifique et stratgie de recherche pour les 5 prochaines annes

La recherche au sein du LASMAR sarticule autour des thmes suivants : Matriaux

F

(verres, cramiques, polymres et matriaux composites, matriaux valeurs ajoutes

PD

pour llectronique, lindustrie et lartisanat, pharmaco-produits), Techniques

physiques appliques linvestigation du patrimoine (Archomatriaux et
gomatriaux : recherche des causes physiques de laltration, provenance, laboration
de matriaux de substitution, expertise, authenticit et contrefaon, restauration,
rt

datation, risques majeurs), Pollution de lenvironnement (dtection, identification et

pe

dosage de polluants organiques et minraux dans les divers compartiments de

lenvironnement eau-sol-air) et Hyperfrquences (antennes, instrumentation,
Ex

modlisation).

La politique scientifique de LASMAR consiste conduire et dvelopper des travaux

de recherche ayant une porte applique et qui dboucheront sur des approches
pratiques et exprimentales telles que la caractrisation physico-chimique des
matriaux (inorganiques et organiques), la spectromtrie, l'archomtrie, la dosimtrie,
lexpertise, la datation, la surveillance de lenvironnement. Les techniques danalyses
utilises sont principalement celles disponibles localement et qui sarticulent autour de
mthodes spectroscopiques telle que la spectroscopie RPE, la micro-spectromtrie
Raman, la spectrophotomtrie et la spectrofluorimtrie UV-Visible, la colorimtrie, ou
celles disponibles chez nos partenaires comme la fluorescence X, le MEB, la
thermoluminescence et la cathodoluminescence.

SMP Page 26 13/06/2013

 Pourquoi le site LASMAR

Actuellement, il n'est plus possible de laisser un site aux mains du hasard si l'on
souhaite y attirer le public pour lequel il a t pens la base. Une phase de rflexion
prliminaire est ncessaire avant d'entamer le dveloppement du site.

Alors deux questions trs importantes sont poser :

- Quel public cible voulons-nous atteindre notre site web ?

n
- Quelle est l'utilit d'un tel projet et quelles informations va-t-on mettre sur le site ?

tio
La rponse ces deux questions nous aiguillera tout au long des phases de
conception et de dveloppement du site.

a
lu
Le but principal du site LASMAR est de communiquer de l'information et ceci d'une
faon conviviale, permettant ainsi aux internautes de tirer profit de cette information.
a
Donc, et en pensant dvelopper son site, le laboratoire LASMAR, prsentera des
Ev

informations concernant ses activits, ses recherches et autres.

II. Le modle de donnes

F

Tout dabord, il convient de bien dterminer l'ensemble des donnes ainsi que
PD

les liaisons qu'elles ont entre elles. En effet la programmation ne reprsente qu'
peu prs 20% dans la cration d'une application (site web), le reste tant partag
entre l'tude de ce que l'on veut raliser et les tests finaux.
rt

Cette tape consiste rassembler toutes les informations disponibles et les

pe

regrouper en plusieurs thmes. Chaque thme contient un ensemble de documents ayant

le mme type d'informations relatif une seule ide principale. Nous pouvons procder
Ex

une structuration axe sur nos domaines d'activit : Un thme par famille d'activit ou
par entit administrative.

Dans cette tape il faut aussi valider le contenu informationnel qui sera dit. En
effet et surtout dans le cas d'un contenu scientifique, la lgitimit de l'information est
fondamentale pour avoir un contenu de qualit. Cette validation est faite en coopration
avec un spcialiste (du sujet trait par le site) n'ayant pas particip la ralisation du
contenu. A la fin de cette phase, on aura, pour chaque thme :

Le titre du thme.
Une brve description de son contenu.
Une liste des documents qu'il va contenir.

SMP Page 27 13/06/2013

 Une fois les fonctionnalits figes, nous devons organiser nos donnes afin de
pouvoir constituer notre base de donnes. C'est celle ci qui sera le cur de notre site
web, donc nous devons y consacrer une grande attention pour que celle ci ne soit pas
mal conue, ce qui rendrait notre site moins fonctionnel.

Cependant pour que notre application soit moins rbarbative, dans le sens ou au
bout d'un moment les utilisateurs risquent de se perdre dans la jungle des sujets, nous
allons intgrer une nouvelle notion : La catgorie.

En effet nous avons dcid de regrouper nos sujets par catgories, pour que nos
utilisateurs puissent utiliser facilement les pages qui leurs intressent.

Trois notions vont apparatre :

n
Les actualits : dans la page daccueil, parlent des nouveauts du labo.

tio
LASMAR : cette rubrique reprsente le labo, ses recherches, ses membres et ses
publications

a
Contacts : l o les membres du site puissent accder au site vu que notre site
est fait que pour les membres de LASMAR. lu
Donc nous voyons ici que notre site web devra au moins grer cinq entits. Donc nous
a
devrons crer cinq tables pour constituer notre base de donnes.
Ev

La structure complte de la base de donnes

Nous avons donc dfinit, de faon thorique la structure de notre base de donnes, voici
F

le schma gnral :
PD
rt
pe
Ex

SMP Page 28 13/06/2013

 III. Cration de la base de donnes
Maintenant que nous avons dfinis les diffrentes donnes que notre site
devra grer, nous allons crer physiquement notre base de donnes. Pour cela nous
allons utiliser le MySQL, qui est l'un des plus connu dans le monde du WEB et du
logiciel libre. Afin de faciliter, la manipulation de MySQL, nous allons utiliser
PhpMyAdmin. Cet outil, crit en PHP, permet de grer ses bases de donnes
sans avoir besoin d'une grande connaissance de MySQL. De plus du fait qu'il est
crit en PHP (donc sur notre serveur HTTP) nous pouvons surtout grer nos bases
distance.

n
Prparation de configuration

tio
Il n'est pas recommand d'utiliser le "compte" administrateur MySQL (root)
pour manipuler une base de donnes donc nous allons dans le client MySQL, crer

a
un utilisateur qui permettra de grer notre base de donnes (cration de table, ajout
lu
d'enregistrements, ...) cest lAdmin du site . Premirement, il faut se connecter
MySQL en tant que root via le client MySQL, dans le but de crer notre base et
a
d'ajouter l'utilisateur (qui permettra de grer la base sous PhpMyAdmin).
Ev
F
PD
rt

Il faut maintenant crer notre base de donnes :

pe
Ex

Nous allons maintenant crer lutilisateur qui sera lAdmin de notre base de
donnes, nous allons donc nous positionner sur la base laboratoire, puis donner
lutilisateur wwwadmin toutes les autorisations de cette base :

Nous donnons maintenant un mot de passe pour lutilisateur wwwadmin :

SMP Page 29 13/06/2013

 Vrifions maintenant la configuration de PhpMyAdmin, afin que lorsque lon se
connecte MySQL via PhpMyAdmin il demande un nom dutilisateur et un mot de
passe.

On peut maintenant se connecter PhpMyAdmin via notre navigateur prfr :

http//localhost/phpMyAdmin. Ici nous avons utilis le WampServer.

Cration de nos tables

n
tio
Maintenant que lon est connect MySQL sous PhpMyAdmin, nous allons donc crer
nos tables dans notre base lasmar :

a
a lu
Ev
F
PD
rt
pe
Ex

Nous arrivons sur un cran qui nous propose de crer une nouvelle table, en effet
pour linstant cest la seule action que nous pouvons effectuer car notre base est vide.
Nous avons dit que notre site va grer au moins cinq entits : recherches, prsentation,
thses, membres, messagerie.

SMP Page 30 13/06/2013

 n
a tio
lu
Nous prenons exemple la table utilisateur qui contiendra les informations sur les
a
utilisateurs.
Ev
F
PD
rt
pe
Ex

Nous voyons donc cinq lignes qui correspondent nos cinq champs que nous
voulons dcrire. On prend par exemple la table groupe cette table consacrer pour
lajout dun utilisateur en dterminant son statut sagit il dun admin ou simple visiteur
etc. Donc notre table est de la structure suivante :

compte : varchar (20)

Nom : varchar (30)

SMP Page 31 13/06/2013

 prenom : varchar (30)
titre : varchar (100)
cin: varchar (60)
naissance : varchar (100)
adresse electronique : varchar (100)
tel : varchar (100)
groupe : int (11)

Il faut donc maintenant crer les autres tables afin dobtenir la structure complte
de notre base de donnes. Une fois, notre structure cre, il est bon de la sauvegarder.

IV. Maquettage du site

n
tio
Avant de programmer les pages du site en PHP avec les accs la base de
donnes MySQL, nous allons passer par une phase de maquettage de lapplication. Il

a
sagit de crer les pages avec les valeurs statiques dans le but de raliser linterface et
lu
la navigation entre pages. On ne peut pas citer toutes les pages de notre site parce
quon peut ajouter dautres rubriques, pour linstant on va dfinir quelques pages :
a
Ev

Accueil : l o lutilisateur peut accder au site.

Laboratoire : contient le fil dactualit du laboratoire
Recherches.
Thses.
F

Contacts : o le membre du site peut sy connect.

PD

Les lments de la page web

Cette tape va nous permettre de construire un modle commun aux diffrentes

rt

pages du site. La prsence d'un tel modle prsente deux avantages :

pe

o L'utilisateur devient familier du site, il sait l'emplacement des diffrents boutons

de navigation ainsi que celui des titres des documents, des rubriques et la
Ex

signification des icnes graphiques.

o Ceci lui permet de se concentrer sur le contenu informationnel des documents au
lieu de chercher comment se reprer et naviguer sur le site.
o Faciliter le travail du concepteur : En effet, une fois quon a dfinit les lments
standards de nos pages, nous ne s'occuperons que du contenu informationnel et
de la mise jour du site ultrieurement.
Les lments que l'on devrait trouver dans une page web sont :

En - tte :

Logo du site et / ou nom du site : Il se trouve en haut de la page, sa prsence est

obligatoire au niveau de toutes les pages du site.
Titre de la rubrique courante : Il permet de signaler l'appartenance d'un
document une rubrique du site ce qui aidera le visiteur se reprer.

SMP Page 32 13/06/2013

 Titre du document : Titre du document : Chaque document inclus dans votre
site doit avoir un titre.

Corps du document :

Table des matires (optionnelle) : Pour une meilleure organisation des

informations au sein de vos pages, vous pouvez subdiviser le document en sous-
titre et utiliser une table de matires pour orienter l'utilisateur vers les diffrents

n
paragraphes du document.

tio
Sous-titre : Afin de rendre la recherche d'informations plus efficace au sein de
vos documents, on peut synthtiser les ides et les regrouper en sous - thmes

a
qu'on identifie par un sous - titre au dbut de chaque paragraphe.
lu
Contenu : C'est le contenu informationnel du document.
a
Ev
F
PD
rt
pe
Ex

Pied de page : Le pied de page devrait contenir :

La barre de navigation.
Les lments indicatifs : Ces lments permettent de donner de donner des
informations supplmentaires sur le site et sur votre organisme. Cela peut
comprendre :
L'identification de l'organisme : On considre trs important d'identifier
l'auteur ou l'organisme responsable du site afin de donner toute la
crdibilit l'information. Pour cela, on peut mettre le nom de
l'organisme, son logo, son courriel

SMP Page 33 13/06/2013

 Le nom de l'auteur : Chaque page devrait inclure le nom et l'adresse
lectronique de l'auteur de la page. On peut aussi mettre l'adresse
lectronique du responsable du site (WebMaster), pour l'informer des
ventuels problmes techniques dtects sur le site (Tels que les liens
invalides,..)
L'adresse du site : il serait trs commode d'ajouter au bas de chaque
page l'adresse du site. Cette pratique permet l'internaute lors de
l'impression des pages de pouvoir facilement obtenir ''les coordonnes
informatiques'' du site.
Date de la dernire mise jour : Cette information permet de communiquer aux
visiteurs de votre site la date de la dernire mise jour, il s'agit d'un bon
indicateur sur l'volution du contenu du site.

n
a tio
a lu
Enfin, pour raliser ces pages nous allons utiliser les technologies XHTML pour le
Ev

contenu des pages et CSS pour la mise en forme de celles-ci.

F

V. La mise en forme par CSS

PD

Lors la cration de nouveaux sites web, la sparation du contenu structure de sa

prsentation est une aubaine pour les dveloppeurs Web. En effet, il est possible de
crer des feuilles de style qui sappliqueront un ou plusieurs documents, permettant
rt

ainsi de changer lapparence dun site en changeant la feuille de style.

pe

Il faut essayer de sparation au maximum le contenu de la prsentation. Pour cela il est

prfrable dcrire, de gnrer des documents suivants la DTD XHTML 1.0 Strict plutt
Ex

que de la DTD XHTML 1.0 Transitional.

Le modle des botes

Chaque boite possde une aire de contenu (ex. un texte, une image, etc.) entoure en
option par une aire despacement, une aire de bordure et une aire de marge. Le schma
suivant illustre les relations entre ces aires et la terminologie employe pour les
dsigner :

SMP Page 34 13/06/2013

 n
a tio
a lu
Ev

On peut subdiviser la marge, la bordure et lespacement selon quil sagit du cot

F

gauche, droite, haut ou bas (ex. dans le schma, MG mis pour marge gauche [ndt.
PD

margin-left], ED mis pour espacement droit [ndt. padding-right], BH mis pour

bordure haute [ndt. border-top], etc.).

Exemple : LASMAR avec CSS

rt
pe

Voici un exemple de feuille de styles CSS de notre application:

Ex

SMP Page 35 13/06/2013

 n
tio
a
a lu
Ev
F
PD
rt
pe
Ex

SMP Page 36 13/06/2013

 n
tio
a
a lu
Ev
F
PD
rt
pe
Ex

SMP Page 37 13/06/2013

 n
tio
a
a lu
Ev
F
PD
rt
pe
Ex

SMP Page 38 13/06/2013

 Donc nos pages seront de la forme si dessous sans oublier quil y aura des
modifications ultrieurement.

n
a tio
a lu
Ev
F
PD
rt
pe
Ex

SMP Page 39 13/06/2013

 Conclusion

Ce passionnant projet a demand tout d'abord un gros travail pralable de recherches

sur Internet, Il consiste crer un site web dynamique du laboratoire LASMAR. Cest une

n
application presque constitue touts ses activits. Pour concevoir ce travail nous avons

tio
prsent premirement ltude des logiciels et les langages. Deuximent, nous avons montr

a
la phase de la conception et la cration du site LASMAR.
lu
Finalement, la ralisation de ce projet, consiste manipuler les langages PHP, HTML et
a
Ev

Java Script, en introduisant les outils langages suivants Apache, SQL et MySQL.
F
PD
rt
pe
Ex

SMP Page 40 13/06/2013

 Les rf re nces

http://www.wampserver.com
www.siteduzero.com

http://xml.apache.org.

n
tio
http://www.mysql.com/

http://www.mysql.com/products/tools
ua
al
Ev
F
PD
rt
pe
Ex

SMP Page 41 13/06/2013