Uni

ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

REPUBLI
QUEDUTCHAD.
UNI
TE-
TRAVAI
L-PROGRES
*
***
*
UNI
VERSI
TEDEN’
DJAMENA
*
***
*
MI
NISTEREDEL’
ENSEI
GNEMENTSUPERI
EURET
DELARECHERCHESCI
ENTI
FIQUE
*
***
*
UNI
VERSI
TEDEN’
DJAMENA
*
***
*
DEPARTEMENTDEL’
I
NFORMATI
QUE
NI
VEAU:
L3
Uni
téd'
ensei
gnement(
UE):
PROGRAMMATI
ONWEBetTECHNOLOGI
E

Mi
ni-
proj
etdePROGRAMMATI
ON
WEBetTECHNOLOGIE

Réal
isépar: sousl
adi
rect
ionde:

1-
VINCENTFERRI
ERRAMADI
NGUE I
NGALLAZAM KHALI
L
2-
DASSI
DIDJATONar
cisse

PLANDETRAVAI
L:
I
-I
ntr
oduct
ion
I
I-
Présent
ati
onducont
ext
e
I
II
-Mi
seenœuv
redel
'
exer
cice
I
V-Concl
usi
on

1
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

-I
I NTRODUCTI
ON

Lapr
ogr
ammat
ionwebestl
epr
ocessusdecr
éat
iondesi
tesWebenut
il
isantdes
l
angagesdepr ogrammationt elsqueHTML, CSS, JavaScri
pt,PHP, Pyt
hon, Ruby,
etc.Lesdév el
oppeurswebut ili
sentceslangagespourcr éerdessitesWeb
dynami quesetinter
act
if
squi foncti
onnentsurdif
férentsappareil
setnav i
gateurs.
Lapr ogrammat i
onwebimpl iqueégal ementlagesti
ondesbasesdedonnées, la
sécurit
édessi t
esWebetl 'optimisati
ondusitepourl esmot eur
sder echerche.

I
l-PRÉSENTATI
ONDUCONTEXTE

L'
enj eudecemi ni-
projetestcelui delacréat
iond' unsitewebaunom
del'universi
tédeN' djamenai ntégr antdi
versfonct i
onnali
téstell
es
quel aconnexi onetl 'i
nscri
pti
ondesanci ensetnouv eauxutil
isateur
s,
L'
affichagedescont enusdel apagewebasav oirlal
istedes
étudiantsetlapossi bil
it
éd'uner echerchecibléeparl esparamèt res
commel eCIN, nom, prénom....
!Nousut i
l
isonsi ciunecombi naisonde
l
angagedepr ogr ammat ionàsav oirl
eHTML, CSS, JavaScri
pt,PHPet
My SQL.

I
I-MI
I SEENŒUVREDEL'
EXERCI
CE

2
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

*ÉNONCÉ:

1. Créerunepagedeconnexi onquiaprèsauthenti
fi
cati
on,vousdiri
geravers
unepaged’ accueil
qui cont
ientunli
enversunepaged’ i
nscri
pti
onetunlien
versunepaged’ aff
ichage.Lapaged’ i
nscri
ptionoùonenr egi
str
elenom, le
prénom, l
adate,lacarted’i
denti
ténati
onal
e( CIN)
,l’
adressemailetchoi
xde
laformati
on.

2.Unepagepourl
esut
il
isat
eur
squi
doi
vents’
aut
hent
if
ier.

I
- St
ruct
uredel
aBasedeDonnées
1.
lat
abl
euser
s

2.Tabl
e`et
udi
ant
`:

3
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

3.Scr
iptdel
aconnexi
on-
basededonnées

Lescr
iptPHPfour
niét
abl
ituneconnexi
onàunebasededonnéesMy
SQLenut
il
isant
l
'
ext
ensionPDO(PHPDataObject
s).

Lescri
ptPHPutil
i
sePDOpourseconnect eràunebasededonnéesMy SQL.I
létabli
t
uneconnexi
onsécuri
séeencapturantleserreurspotentiell
esavecunbl oc`
try-
catch`
.
Encasd'er
reur
,unmessagedescripti
festaffiché,etl'
exécutionduscri
ptestarrêt
ée.Ce
mécanismeaméli
orel
arobust
esseetl
afiabi
li
tédel aconnexionàlabasededonnées.
I
I-PagesduSi
teWeb

4
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

1.PagedeConnexi
on(`
login.
php`&’
logi
n.j
s):
Cepagepermetauxuti
l
isateur
sdeseconnect
er.

1.
For
mul
air
edeconnexi
on
:-Permetauxut i
li
sateursdesai si
rleurnom d'
uti
li
sat euretl
eurmotdepasse.
2.Val
idationdesi nformat i
onsdeconnexi on:
-Véri
fielesinformationssoumi sescont r
elesenregistrementsdelabasededonnées.
3.Gestiondel asessi on:
-Créeunesessi onut il
isateurencasdesuccèsdel aconnexion.
4.Redir
ect i
on:
-Rediri
gel '
uti
l
isateurv erslapaged'accueil
aprèsuneconnexi onréussi
e.
Détail
sducodePar t
ieHTMLLecodeHTMLdéf i
nitl
ast r
uct
uredelapagedeconnexion:

5
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

Formul ai
redeconnexi on:
-`action="l
ogin.php"`
:
Lef ormulair
esoumetl esdonnéesv i
aPOSTàl amêmepage.
-`i
nputt ype="text"i
d="username"name=" username"requir
ed`:
Champdesai siepourlenom d'uti
li
sateur,obli
gatoi
re.
-`i
nputt ype="passwor d"id="
password"name=" password"requi
red`
:
Champdesai siepourlemotdepasse, obli
gatoir
e.
-`buttontype=" submit
"`:
Bout onpoursoumet tr
el eformul
air
e.
PartiePHPLecodePHPt rai
tel
esinformationsdeconnexionetgèrelasessi
on
uti
li
sateur:

6
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

Gest i
ondel asessi on:
-`sessi on_ start
();`
:Démar rel asessi onpourl 'ut i
li
sateur.
-**Connexi onàl abasededonnées* *:
-`include' db.php' ;
`:Incl
utl ef i
chierdeconnexi onàl abasededonnées.
-**Traitementdel ar equêtePOST* *:
-`if($_SERVER[ 'REQUEST_ METHOD' ]==' POST' )`:Véri
fi
equel amét hodede
requête
estPOST.
-`$user name=$_ POST[ 'user name' ]
;`:Récupèr el enom d'util
isateursoumi s.
-`$passwor d=$_ POST[ 'passwor d'
];
`:Récupèr elemotdepassesoumi s.
-**Validationdesi nf or
mat ions* *:
-`$st mt=$pdo- >pr epare("SELECT*FROM user sWHEREuser name=?AND
passwor d=
?")
;`:Prépar euner equêt eSQLpourv érif
ierlesi nformati
onsd' identi
fication.
-`$st mt -
>execut e([$user name, $passwor d]);
`:Exécut elarequêteav ecl es
paramèt r
es
fournis.
-`$user=$st mt -
>f etch();
`:Récupèr eler ésult
atdel arequête.
-**Gest i
ondel asessi onut ili
sateur**:
-`if($user ){. .
.}`:Siunut i
lisateurestt rouvé, créeunesessi onut i
li
sateuret
rediri
gev ersl a
paged' accuei l.
-`$_ SESSI ON[ '
user _id'
]=$user ['
id']
;`
:St ockel'IDdel 'ut
il
isateurdansl asessi on.
-`header ("Locat ion:accuei l.php");`
:Redi ri
gev er slapaged' accueil.
-`exit;`
:Ar rêtel'
exécut i
onduscr i
pt.

7
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

CecodeJav aScr i
ptajout eunev ali
dationcôtéclientaufor
mulai
redeconnexion.
Ilvéri
fiesi
l
eschamps" nom d'uti
lisateur
"et" motdepasse"sontr empli
savantde
permet tr
el a
soumi ssionduf ormulaire.Voiciuneanal ysedétaill
éedececode.
Fonct i
onnal it
éspr i
ncipales
1.Validati
ondeschampsdef ormul ai
re:
-Vér ifi
equel eschamps" nom d'ut
ili
sateur"et"
motdepasse"nesontpasv i
des
avantde
soumet t
rel eformulaire.
2.Interactionut i
li
sateur :
-Af fi
cheuneal ertesil'undeschampsestv i
de,etempêchelasoumi ssi
ondu
formul ai
re
j
usqu' àcequet ousl eschampssoi entremplis.
Dét ai
lsducode
```
javascript

document .
addEv entList ener
('
DOMCont entLoaded' ,functi
on(){
constl oginFor m =document .querySelector(
'form');
loginFor m.addEv entListener('
submit',
funct i
on( ev
ent ){
constuser name=document .getEl
ement By I
d('username').value;
constpasswor d=document .get
Element By I
d('passwor d'
).v
alue;
if(username===' '|
|passwor d===''){
alert(
'Veuillezremplirt ousleschamps. '
);
event .
pr ev
ent Default(
);
}
});
})
;
``
`
Expli
cat i
ondesl i
gnesdecode
1.Attenteduchar gementduDOM:
```
javascr i
pt
document .addEv entLi
st ener('
DOMCont entLoaded',function(){
```
-Cetév énementestdécl enchélorsquel edocumentHTMLaét écompl
ètement

8
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

char géet
analy sé,sansat t
endr equel esf eui
llesdest y
le, l
esi magesetl essous-
document sai entf inide
sechar ger .
2.Sélect i
onduf ormul aire:
```j
av ascr i
pt
constl oginFor m =document .
query Selector(
'form');
```
-Sél ect i
onnel epr emi erélément` <form>`del apageetl estockedansl a
variable
`l
ogi nForm` .
3.Aj outd' unécout eurd' événement spourl asoumi ssionduf or mul
aire:
```j
av ascr i
pt
loginFor m. addEv ent Listener('
submi t',
funct i
on( event){
```
-Aj out eunécout eurd' événement squi écoutel '
événement` submi t
`surle
formul aire.
Lorsquel '
ut il
isateurt ent edesoumet tr
el eformul aire,lafoncti
onf ourni
esera
exécut ée.
4.Récupér ationdesv aleursdeschamps:
```j
av ascr i
pt
constuser name=document .getElement ByI
d('user name').
value;
constpasswor d=document .getElement By I
d('passwor d'
).
value;
```
-Récupèr el esv aleur sdeschamps" nom d'util
isateur "et"motdepasse"à
partirdu
formul aire.
5.Val idationdeschamps:
```j
av ascr i
pt
if(user name===' ' |
|passwor d===' '){
aler t(
'Veui l
lezr empl irt ousleschamps. '
);
ev ent .
prev ent Defaul t();
}
``

-Vér i
fi
esi l
'undeschampsestv i
de.Si c'
estlecas, af
fi
cheuneal er
teavecl emessage
"Veuill
ezrempl i
rtousl eschamps. "etempêchel asoumi ssionduf ormulair
eenappel ant
`event.
preventDefault()`
.Bref,
codeaj outeunev alidati
ondebasecôt éclientpour
s'assurerquelesut i
l
isat eur
srempl issenttousl eschampsr equisavantdesoumet tr
ele
formulairedeconnexi on.Desamél i
or ati
onspeuv entêtr
eappor téespourr endrela
validat
ionplusrobust e,accessibleetconv i
viale.2.Paged’ accueil(`
accueil.
php`):Cett
e
paged' accueil
fournitdesl i
ensv erslespagesd’ i
nscripti
on, deconnexionàl abasedes
données, d’
affi
chageparCI Netdedéconnexi on.

9
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

Lecodef ourniestunepaged' accueil

sécur iséeav ecnavigati
onpourl es
uti
li
sateursauthentif
iés.Fonctionnal
itéspr i
ncipales1.Aut hent i
fi
cati
ondes
uti
li
sateurs:-Lescr i
ptcommenceparv érif
iersi l
'
uti
li
sateurestaut hentif
iéen
véri
fi
antlaprésencede` user_i
d`dansl asessi on.-Sil'
uti
lisateurn'estpas
authenti
fi
é,i
l estredi
rigév er
s` l
ogin.
php` .2.Interf
aceutil
isateur:-LapageHTML
aff
icheunmessagedebi envenueetpr oposeunmenudenav igati
onav ec
dif
férent
esopt ionspourgér erlesétudiants.Dét ai
lsducodeVér i
fi
cationde

10
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

l
'authent
ifi
cat
ionLebl
ocdecodePHPenhautdel
apagev
éri
fi
esi
l'
uti
l
isat
eurest
authenti
fi
é:

``
`php
sessi on_ start(
);
i
f(!i
sset ($_ SESSION[ '
user_id'
]))
{
header ("Locat i
on:logi
n.php" );
exit();
}
``
`
-`sessi on_ start
();
`démar reunenouv ell
esessi onour eprendunesessi
on
existant e.
-`i
f(!isset ($_SESSION['user_id'
])
)`véri
fiesil
'utili
sateurestaut
henti
fi
éen
cher chantl a
variable` user _i
d`dansl asession.
-`header ("Locati
on:login.php");
`redir
igel'
util
isateurverslapagedelogi
ns'
i
l
n'
estpas
authent ifié.
-`exit();
`assur equel escr ipts'
arrêteaprèslar edir
ection.

St
ruct
ureHTML
Laparti
eHTMLdel
apagest
ruct
urel
'
int
erf
aceut
il
isat
eur
:

11
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

-``définitlet y
pededocument .-``
commencel abal i
seHTMLetdéf i
nitl
al anguedudocument .
-``cont ientlesmét adonnéesdudocument ,ycompr i
sleti
tredel apageetl aréfér
ence
auf i
chierCSS.-`
`contientl econt enuv i
sibledelapage.
-`
`estunedi vcont enantlemessagedebi envenueetlemenudenav igati
on.
-``cont i
entunmenudenav i
gationav ecdesl iensversdiffér
entespages:
-`inscri
ption.php`pourinscri
redenouv eauxét udi
ants.
-`affi
chage. php`pouraffi
cherunel isted'étudiant
s.
-`af f
ichage_cin.php`pouraffi
cherdesét udiantsenfonctiondel eurCIN(Carte
d'Identit
éNat i
onale).
-`logout.
php`pourdéconnect erl'
util
isateur.
4.For mulaired'Inscr
ipt
iondesÉt udiants( `
inscri
pti
on.php`&‘inscri
ption.
js’
):
Cet tepageper metauxut i
li
sateursdes' i
nscr i
re

12
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

13
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

14
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

Fonctionnalitéspri
ncipales
1.For mulaired'i
nscri
ptionpourlesétudiants:
-Lef ormul aireHTMLper metauxétudiantsdesaisi
rleursinfor
mat i
ons
personnellesetdes' i
nscr i
reàunprogrammespéci f
ique.
2.Tr ait
ementdesi nscript
ions:
-LecodePHPt r
ait
elesdonnéessoumi sesparleformulair
eetl esenregi
str
e
dansunebasededonnées.
Dét ail
sducode
Par ti
eHTML
LecodeHTMLdéf i
nitunformulai
red'i
nscripti
onavecplusieurschamps:

15
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

-Champsdesai sie:
-`ci
n`: Champt extepoursai si
rlenumér odeCarted'
Ident
it
éNat i
onale.
-`nompr enom` :Champt extepoursai si
rlenom etprénom.
-`emai l̀:Champt extepoursaisirl
'adresseemail.
-`ni
v eau` :Opti
onsdesél ecti
ondeni veaud' ét
udes(Secondai
re,Uni
v er
sit
air
e,
Autr
es) .
-`modul e`:Menudér oul
antpoursél ecti
onnerunmodul edeformation(Réseaux
etTIC,
Cybersécur it
é,Dev sWeb).
-Boutondesoumi ssion:
-Unbout onpoursoumet treleformulaire.
Part
iePHP
LecodePHPt r
aitelesdonnéessoumi sesvialefor
mulair
eetlesenregist
redans
l
abasede
données.

16
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

-Vér
if
icat
iondel
amét
hodeder
equêt
e:
-` i
f( $_SERVER[ 'REQUEST_ METHOD' ]=='
POST' )
`:Assurequelecodes'exécute
uniquementl orsquel eformulaireestsoumisv i
alamét hodePOST.
-Récupér ationdesdonnées:
-` $_POST[ '
cin']`
,`$_POST[ '
nompr enom']
`,`
$_POST[ '
email
']
`,`
$_POST['
ni
v eau'
]`,
`$_POST[ 'modul e']
`:Récupèrelesdonnéesduf or
mul ai
re.
-Inser ti
ondansl abasededonnées:
-` i
ncl ude'db. php'`:I
nclutlefi
chierdeconnexionàl abasededonnées.
-` prepar e`et` execute`:PrépareetexécuteunerequêteSQLpouri nsér
erl es
donnéesdansl a
table` Etudiant `.
-Messagedeconf i
rmation:
-` echo" I
nscriptionréussie!";
`:Aff
icheunmessagedeconf i
rmati
onaprèsune
i
nscr iption
réussi e.

17
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

LecodeJav aScri
ptfourniestdest
inéàgérerlaval
idati
ond'unf or
mulai
rede
regi
strementd' unuti
li
sateursurunepageweb.1.Év énement
`DOMCont entLoaded`Lecodecommenceparécout erl'
événement
`DOMCont entLoaded`,quisedéclenchelor
squeledocumentHTMLest
enti
èrementchar géetanal y
sé.Cecipermetdes'assurerqueleDOM estprêt
avantd'exécutertoutscri
ptmanipulantl
esélémentsduf ormulair
e.

```
JavaScr ipt
document .addEv ent List
ener('
DOMCont entLoaded',functi
on(){
/ /Codedev ali
dationi ci
});
```
2.Sélect i
onetÉv énementdeSoumi ssionduFor mulaire
Lef ormul air
eestsél ecti
onnéàl '
aidede` document .querySelect
or('
for
m')
`,etun
écouteur
d'événementestaj out épourcapt urerl
'événement` submi t`
.Cecipermetde
déclencherune
fonctionchaquef oisquel eformulair
eestsoumi s.
```
JavaScr ipt
constr egisterForm =document .
querySelector(
'f
orm' );
regist
er Form. addEv entLi
stener('
submit',f
unction(event){
/ /Codedev ali
dationi ci
});

18
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

```
3.Récupér ationdesVal eur sdesChampsduFor mul aire
Lesv aleur sdesdi fférent schampsduf ormul ai re( `ci
n`,`nompr enom` ,`email̀,
`niv eau` ,
`modul e`)sontr écupér éesenut il
isant` document .
getElement ById`suividela
pr opr iété
`val ue` .
```Jav aScr ipt
constci n=document .
get Element By Id('
cin').
v alue;
Constnompr enom =document .getEl ement By Id('nompr enom' ).
value;
constemai l =document .get Element By I
d('emai l'
).value;
constni veau=document .
get Element By I
d( '
niv eau' )
.value;
constmodul e=document .getElement By I
d( '
modul e').
value;
```
4.Val i
dat iondesChamps
Lapr emi èr ev al i
dat ionv érifiequet ousl eschampsduf ormulairesontr emplis.Si
l
'undes
champsestv ide, uneal er teestaf fi
chée, etl'env oi duf ormulaireestempêché
av ec
`ev ent .prev ent Def aul t
()` .
```Jav aScr ipt
If( cin===' '||nompr enom ===' '||emai l ===' '||ni veau===' '
||modul e===''){
al er t('
Veui ll
ezr empl irtousl eschamps. ');
ev ent .prev ent Def ault();
}
```
5.Val i
dat iondel '
Emai l
Unef onct ionauxi liaire` validateEmai l̀estdéf iniepourv ér
ifi
erleformatde
l
'adr esseemai l.
Elleut il
iseuneexpr essionr égul i
èrepours' assur erquel '
emailestv al
ide.Si
l
'emai lest
i
nv alide, uneal er t
eestaf fichée, etl'env oiduf or mul aireestempêché.
```j
av ascr ipt
elsei f( !
val idateEmai l
(emai l)
){
al er t('
Veui ll
ezent reruneadr esseemai lvalide. '
);
ev ent .prev ent Def ault();
}
funct ionv alidat eEmai l
(emai l){
constr e=/ ^[
^\ s@] +@[ ^\s@] +\.[
^\s@] +$/ ;
r etur nr e.test (St ring( emai l).toLower Case( ));
}
```
Lescr iptJav aScr iptf our nitunev alidationcôt écl i
entpourunf or mulair
e
d'enr egist rement .Ils'assur equet ousl eschampsobl igatoir
essontr empl i
set
quel '
adr esseemai lfour nieestv alideav antdeper met tr
el asoumi ssiondu
for mul aire.Encasd' erreur ,desal er tessontaf fichéespourgui derl '
util
i
sateur ,
et

19
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

l
asoumi ssionestempêchéejusqu'
àcequel eserreur
ssoi
entcor
ri
gées.
5.Aff
ichagedeTousl esÉtudiant
s(`
aff
ichage.php`):
Ceformul air
epermetauxuti
li
sateur
sd’accéderàlabasededonnées

20
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

Cecodesecomposed' unepar t
ieHTMLpourl astruct
uredel apageetd'
une
parti
ePHPpour
récupér eretaffi
cherlesdonnéesdesét udi
antsàpar t
irdelabasededonnées.
Fonctionnal i
téspri
ncipal
es
1.Affi
chagedel alist
edesét udiants:
-Unet ableHTMLaf f
ichelesinformat i
onsdesétudiants,ycomprisl
eCIN,l
e
nom et
prénom, l'
email,
leniveauetlemodul edeformati
on.
2.Récupér at
iondesdonnéesdel abasededonnées:
-LecodePHPr écupèrelesdonnéesdel atabl
e`Etudi
ant`danslabasede
donnéesetl es
affi
chedy namiquementdansl at ableHTML.
Détail
sducode
Parti
eHTML
LecodeHTMLdéf i
nitlastr
ucturedel apageetdel atablepouraffi
cherl
es
étudi
ant s:

21
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

Part
iePHP
LecodePHPr
écupèr
eetaf
fi
chel
esdonnéesdesét
udi
ant
sdepui
slabasede
données:

-Connexi
onàlabasededonnées:
-`i
nclude'
db.
php'
;`
:Incl
utl
efi
chierdeconnexi
onàl
abasededonnées.

-*
* Récupér
ati
ondesdonnées**
:
-`$stmt=$pdo->quer
y("
SELECT*FROM Et
udi
ant
");
`:Exécut
euner
equêt
eSQL

22
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

pour
sél
ecti
onnert
out
esl
esl
ignesdel
atabl
e`Et
udi
ant
`.

-**Affi
chagedesdonnées* *:
-`while($r ow=$st mt->f
etch())`
:Parcourtchaquel igneretour
néeparl a
requête.
-`echo" <tr>.
..
</tr>"
;`
:Aff
ichechaquel ignededonnéesdansunel ignedel a
tabl
eHTML.
Cecodef ournitunefoncti
onnal i
tédebasepouraf fi
cherunel i
sted'ét
udiants
dansunet able
HTML, avecdesdonnéesr écupéréesdy namiquementdepui sunebasede
données.
6.Recher cheparCI N(`af
fichage_cin.
php`&’aff
ichage_ ci
n.j
s):
Cet t
epageper metauxut il
isateursdefairedesr echerchesparCIN

23
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

Cecodeper metauxut i
li
sat eur sder echercherdesi nformati
onssurunét udiant
enutil
isantson
CIN(Car t
ed'Identit
éNat ional e).Ilcompr endunf or
mul ai
reder echercheetune
secti
onPHP
pourtrait
erlademandeetaf ficherlesr ésult
at s.
Foncti
onnal i
tésprincipal
es
1.Formulaireder echercheparCI N:
-Unf ormulaireHTMLper metauxut il
isateursdesai si
rleCINd' unétudiantet
desoumet t
re
l
ademande.
2.Trait
ementdel arecher cheetaf fi
chagedesr ésultats:
-LecodePHPr écupèr elesdonnéessoumi ses, eff
ectueuner equêteàl abase
dedonnées
pourtrouverl'ét
udiantcor respondant ,etaffichel esrésult
ats.
Détail
sducode
Parti
eHTML
LecodeHTMLdéf i
nitlast r
uct ureduf or mulaireder echercheetl '
aff
ichagedes
résul
tats:

24
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

-For mulair
eder echer che:
-`act i
on="affi
chage_ cin.php"`:Leformul air
eenv oielesdonnéesv i
aPOSTàl a
mêmepage.
-`inputt y
pe="text"id="cin"name=" ci
n"r equir
ed`:Champdesai siepourl
eCIN,
obligatoi
re.
-`but t
ont ype="submi t"`
:Bout onpoursoumet t
relefor mulai
re.
-Affichagedesr ésul
tats:
-Unet ableHTMLestut il
iséepouraf ficherlesinformat i
onsdel '
étudi
antsi
tr
ouv é.
PartiePHP
LecodePHPt raitelasoumi ssionduf ormul ai
reetaffichelesrésultat
s:
<?php
i
f($_ SERVER[ '
REQUEST_ METHOD' ]==' POST')

-Vérifi
cationdel amét hodeder equête:
-`if($_SERVER[ '
REQUEST_ METHOD' ]=='POST')
`:Assurequelecodes'exécut
e
seulementl orsquel ef or
mulaireestsoumi svi
aPOST.
-Récupér ati
onett raitementdesdonnées:
-`$cin=$_ POST['cin'
]`:RécupèreleCI Nsoumisparl '
uti
li
sat
eur
.
-`include'db.php';
`:Inclutl
ef i
chierdeconnexionàl abasededonnées.
-`$stmt=$pdo- >prepar e("
SELECT*FROM Et udiantWHEREci n=?")
;`
:Prépare
une

25
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

requêt
eSQLpoursél ecti
onnerl'étudiantav ecleCINfourni.
-`$stmt-
>execute([$cin]);
`:Exécutel arequêteavecleCI Ncommeparamètr
e.
-`$row=$st mt->fetch();
`:Récupèr eler ésult
atdelarequête.
-Affi
chagedesr ésultats:
-Siunét udi
antestt rouvé, sesinformat ionssontaff
ichéesdansunet
abl
e
HTML.
-Siaucunét udi
antn' esttrouvé, unmessaged' er
reurestaffi
ché.
Cecodeper metder echercherunét udiantparCINetd' af
fi
cherses
i
nformationss'i
lestt rouvé
danslabasededonnées.

LecodeJav aScriptf ournigèr elavalidati

ond' unchampspéci f
ique(`CI
N` )dans
un
formul ai
resurunepageweb.
1.Év énement` DOMCont entLoaded`
Lecodecommenceparécout erl'
événement` DOMCont entLoaded`,quise
déclenchel orsque
l
edocumentHTMLestent i
èrementchar géetanal ysé.Ceciper metdes' assurer
quel eDOM
estpr êtav antd' exécut ertoutscr i
ptmani pul antlesélément sduf ormulaire.
``
`javascript
document .addEv entListener('DOMCont ent Loaded',functi
on(){
/ /Codedev al
idat i
oni ci
});
``
`
2.Sél ecti
onetÉv énementdeSoumi ssi onduFor mulair
e
Lef ormul aireestsél ecti
onnéàl '
aidede` document .
quer ySelector
('
form')`,etun
écout eur
d'événementestaj outépourcapt urerl'événement` submi t`
.Ceciper metde
déclencherune
fonctionchaquef oisquel ef ormulaireestsoumi s.
``
`javascript
constci nFor m =document .
quer ySelector('form');
cinFor m.addEv ent Listener('
submi t'
,funct ion( event
){

26
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

/ /Codedev al
idat i
oni ci
});
``
`
3.Récupér ationdel aVal eurduChamp` CIN`
Lav aleurduchamp` CI N`estr écupér éeenut i
lisant`document .get
Element ById`
sui videl a
propr iété` value`.
``
`jav ascr i
pt
constci n=document .get Element ById('
cin'
) .
value;
``
`
4.Val i
dat i
onduChamp` CIN`
Lav ali
dat i
onv érifiequel echamp` CIN`n'estpasv ide.Silechampestv ide,une
aler teest
affichéepouri nf ormerl 'utili
sateurqu' i
ldoitent rerun` CIN`,
etl'
envoidu
formul air
eest
empêchéav ec` event .
pr ev entDefaul t
()`.
``
`jav ascr i
pt
i
f( cin===' '){
al ert('
Veui l
lezent rerunCI N.'
);
ev ent .prevent Def ault();
}
``
`
Lescr iptJav aScr i
ptf our nitunev ali
dationcôt écl i
entpourunchampspéci f
ique
(`CIN` )dans
unf ormul aire.Ils'assur equel echamp` CIN`estr empl iavantdeper mettrela
soumi ssiondu
formul air
e.Encasd' oubl i,uneal erteestaf fichéepourgui derl
'uti
li
sateur,etla
soumi ssionest
empêchéej usqu' àcequel echampsoi tcorrectementr empli
.
7.For mul airededéconnexi on( ‘l
ogout .php‘&’ l
ogout .
js‘):
CecodePHPgèr el adéconnexi ond' unut il
isateurent er mi
nantsasessi oneten
l
er edirigeant
ver slapagedeconnexi on

Voiciuneanalysedétail
léedufoncti
onnementdececode.Foncti
onnalit
és
pri
ncipal
es1.Gest i
ondel asessi
on:-Terminerl
asessiondel
'ut
il
isateuren
cours.2.Redir
ection:-Redir
igerl
'ut
il
isat
eurver
slapagedeconnexionaprèsl
a
déconnexion.Détail
sducode:

27
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

Expl i
cat i
ondesl ignesdecode
1.Démar ragedel asessi on:
```php
sessi on_ star t(
);
```
-Cet teli
gnei niti
al i
sel asessi on.El l
eestnécessai repouraccéderetmanipuler
l
esdonnées
desessi onexi stant es.Sanscet teligne,lesfonct i
onsdesessi onsuiv
antesne
fonct i
onner aient
pas.
2.Réi niti
alisat i
ondel asessi on:
```php
sessi on_ unset ()
;
```
-Cet tefonct i
onl ibèr etout esl esv ari
ablesdesessi onactuel
les.El
lenedétrui
t
pasl asessi on
ell
e-mêmenisesv ariablesgl obal es.Ell
eef facesi mplementlesdonnées
stockéesdansl a
sessi on.
3.Dest r
uct iondel asessi on:
```php
sessi on_ dest roy ();
```
-Cet tefonct i
ondét ruitlasessi onencour s.Ellesuppr i
metouteslesdonnées
associ éesàl a
sessi on,ycompr i
sl 'i
dent ifiantdesessi on.Apr èscetappel,l
asessionn'
existe
plus.
4.Redi r
ect i
onv ersl apagedeconnexi on:
```php
header ("Locat ion:logi n.php" );
exi t
;
```
-` header ("Locat ion: l
ogi n.php" );`:Cetteli
gneenv oieunen-têt
eHTTPau
nav i
gat eur ,l
ui
i
ndi quantder edirigerl 'util
isat eurv ers"l
ogi n.php".
-` exit;
`:Cet tef onct ionar rêt el '
exécut i
onduscr i
pt.El
leestuti
li
séeaprèsune
redirection
pours' assur erquel er esteduscr i
ptnes' exécut epas.

28
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

Cecodeestsimpl eeteffi
cacepourgérerl
adéconnexiondesut i
li
sat
eursen
ter
minantleur
sessi
onetenl esredir
igeantv
erslapagedeconnexion.Ilassur
equet out
esl
es
donnéesde
sessi
onsontcor r
ectementeffacées,
garant
issantai
nsiunedéconnexion
sécur
isée.

LecodeJav aScr i
ptfour nigèrel adéconnexi ond'unut i
li
sateursurunepageweb
enaj outant
uneconf i
rmat ionav antdepr océderàl aredir
ectionv ersunepagede
déconnexi on
(`l
ogout .
php` )
.
1.Év énement` DOMCont entLoaded`
Lecodecommenceparécout erl'
événement` DOMCont entLoaded`,
quise
décl enchel orsque
l
edocumentHTMLestent i
èrementchar géetanal ysé.Ceciper metdes'assur
er
quel eDOM
estpr êtav antd' exécut ertoutscr i
ptmani pul
antlesél ément sdelapage.
```
jav ascript
document .addEv entListener('
DOMCont entLoaded',function(){
/ /Codedegest iondel adéconnexi oni ci
});
```
2.Sél ect
ionduLi endeDéconnexi on
Lel iendedéconnexi onestsél ectionnéàl 'ai
dede
`document .get Element By I
d('
logout -
link'
)`
,
quir écupèr el'élémentav ecl '
i
dent i
fiant`l
ogout -
li
nk`.
```
jav ascript
constl ogout Link=document .getElement ById('
l
ogout -l
ink')
;
```
3.Év énementdeCl icsurl eLiendeDéconnexi on
Unécout eurd' év énementestaj out éaul i
endedéconnexi onpourcapturer
l
'événement` click`.
Celaper metdedécl encherunef onct ionchaquef oisquel '
uti
li
sat
eurcli
quesur
l
el iende
déconnexi on.

29
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

```
jav ascr ipt
l
ogout Link. addEv ent Listener ('
click',function(
ev ent){
/ /Codedeconf i
r mat ioni ci
});
```
4.Pr év ent ionduCompor tementparDéf aut
L'év énementpardéf autducl i
csurl elienestempêchéav ec
`ev ent .pr ev ent Def ault()`.Cel a
empêchel enav igat eurdesui vrel eli
eni mmédi atement .
```
jav ascr ipt
ev ent .pr ev ent Def aul t
( )
;
```
5.Conf irmat iondeDéconnexi on
Uneboî t ededi aloguedeconf irmat ionestaf f
ichéeenut il
isant`conf i
rm("
Êt es-
voussûrde
voul oi rv ousdéconnect er? ")`
.Sil '
util
isateurconf i
rmeladéconnexi on( en
cliquantsur" OK" ) ,
l
af onct ionr env oie` true` ,sinonel ler envoie`f
alse`.
```
jav ascr ipt
constconf irmLogout=conf i
rm( "Êtes-voussûrdev ouloi
rvousdéconnect er?")
;
```
6.Redi rect ionv ersl aPagedeDéconnexi on
Sil '
ut ilisat eurconf ir
mequ' ilveutsedéconnect er,l
apageestr edi r
igéevers
`l
ogout .php`en
déf ini ssant` wi ndow. locat ion.href `àl '
URLdel apagededéconnexi on.
```
jav ascr ipt
i
f( conf irmLogout ){
wi ndow. locat ion. href=' logout .php' ;
}
```
Lescr iptJav aScr iptaj out eunecouchedeconf irmati
onav antdeper mett
reà
l
'ut i
lisat eurdese
déconnect er.Lor squel '
ut i
lisateurcl i
quesurl el i
endedéconnexi on,uneboî tede
dial oguede
conf irmat ions' af fiche.Sil '
util
isateurconf i
rmel adéconnexion,ilestredir
igé
ver s
`l
ogout .php` .Si non, l'actiondedéconnexi onestannul ée.Cemécani smeai deà
prév eni rl es
déconnexi onsacci dent ellesendemandantuneconf i
rmat i
onexpl i
citede
l
'ut i
lisat eur .
8.CSSpourl agest iondesst yles:
Lef ichi erCSSf our nidéf initlesst y l
espourunepagewebav ecplusieurs
sect i
onsetél ément s.
/*St y l
esgénér aux* /
html
{

30
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

background-color:
#45FFFF;
}
body{
font
-family
:Ar i
al,
sans-seri
f;
background-color:#45AFFF;
margin:0;
padding:0;
}

/
*Cont ainergénér alpourcent
rerl
esél
ément
s*/
.
cont ainer,
.
login-cont ainer,
.
home- cont ainer,
.
registration-cont ainer,
.
cin-sear ch-cont ainer,
.
student s-cont ainer{
width:80%;
mar gin:0aut o;
paddi ng:20px;
backgr ound- color :#f
ff;
box-shadow:0010pxr gba(
0,0,
0,0.
1);
border -r
adi us:8px;
mar gin-top:50px;
}

/*Titrescentrésetsty
li
sés*
/
h2{
text-al
ign:cent
er;
color:#333;
mar gin-bot
tom:20px;
}

/*Navigation*/
navul{
l
ist-
styl
e:none;
padding:0;
text
-ali
gn:lef
t;
margin:20px0;
}

navulli{
di
splay:i
nli
ne;
margin:010px;
}

navull
ia{

31
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

text-
decorati
on:none;
color:#007BFF;
font-
weight:bol
d;
}

navullia:
hover{
col
or:#0056b3;
}

/
*For mulair
es* /
f
or m{
di
splay:fl
ex;
fl
ex-di
rect
ion:column;
al
ign-i
tems:center;
}

l
abel,
i
nput,
butt
on,
sel
ect{
margin:10px0;
widt
h:80%;
max-width:300px;
}

/
*Labels*/
l
abel{
t
ext-
ali
gn:l
eft
;
widt
h:100%;
}

/*Champsdesai si
e* /
i
nput [
type="text
"]
,
i
nput [
type="passwor d"
],
i
nput [
type="email"]
,
select{
padding:10px;
border:1pxsolid#ccc;
border-r
adius:4px;
box-sizi
ng:border-box;

/*Boutons*/
butt
on{
paddi
ng:10px20px;

32
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

backgr ound-color
:#007BFF;
col
or :#f f
f;
border:none;
border-radius:4px;
cursor:poi nt
er;
box-sizing:border-
box;
}

butt
on:hover{
background-
col
or:#0056b3;
}

/
*Tabl eaux*/
t
able{
width:100%;
border -
coll
apse:col
lapse;
mar gin:20px0;

t
able,th,t
d{
border
:1pxsoli
dblack;
tr
ansform-
text:capi
tal
ize;
}

t
h, td{
padding:10px;
text
-ali
gn:l
eft;
}
}

t
h{
backgr
ound-
col
or:#f
2f2f
2;
}

/*Lienpourdéconnexi
on*
/
#logout-
li
nk{
color
:#FF0000;
}

#l
ogout-l
ink:
hover{
col
or:#CC0000;
}

/
*Stylespourlesf or
mul
air
esder
adi
o*/
i
nput[
type="r
adio"]{
margi
n-ri
ght:5px;
}

33
Uni
ver
sit
édeN'
dj
amena|
Facul
tédeSci
encesExact
esetAppl
i
quées(
FSEA)|
Dépar
tementI
nfo

I
V-CONCLUSI
ON

Enconcl usion,laprogr ammat ionwebestundomai neessent i

elpourl acréati
on
etledév el
oppementdesi t
esWebmoder nesetfoncti
onnel s.Lesdév eloppeurs
webut i
lisentunev ari
ét édel angagesdepr ogr
ammat ionpourconcev oirdessites
Webi nteracti
fs,dynami quesetsécur i
sés.Laprogrammat i
onwebj oueunr ôle
cruci
aldansl aconst ruct i
ond'unepr ésenceenl i
gneef f
icacepourlesent r
epri
ses,
l
esor ganisationsetlespar t
iculi
ers.C'estundomaineenconst anteév olut
ionqui
nécessitedescompét encest echniquesetunecompr éhensionappr ofondiedes
technologieswebact uel l
es.

34