Raport de proiect de finalizare a studiilor în vederea obț inerii

diplomă de brevet de tehnician superior

B
T Concepț ia ș i realizarea unei platforme
Învăț are online
S

D
S Realizat de: Fatima-Ezzahra Houd
Abdelghafour Aouad
Eu
Încadrat de:
Domnul Lachhab Youssef

Promoț ie : 2019 / 2021

 Mulț umiri

La finalul acestei lucrări, am dori să ne exprimăm

recunoș tinț ă profundă tuturor persoanelor care ne-au
ajutat, orientat ș i susț inut în timpul celor doi ani de master.

Ne mulț umim în mod deosebit coordonatorului nostru, Dl

Lachhab Youssef, profesor de design la centrul BTS
Hassan II. Răbdarea lor ș i sfaturile înț elepte au permis...
realizarea acestui lucru. Le datorăm mult de
recunoaș tere pentru disponibilitatea ș i rigurozitatea lor.

De asemenea, îi mulț umim profesoarei noastre, doamna Amina.

Hmajou, precum ș i doamna Bahija Gouimi pentru sfaturile lor
avisate.

Către toț i profesorii care ne vor face onoarea de a contribui

La evaluarea acestui lucru, ne adresăm mulț umirilor noastre.

2
 Table des matières
Remerciement .................................................................................... 2
Cuprinss .............................................................................. 3
[Link]................................................................................. 5
[Link] și specificații generale......................................... 8
A. Présentation de subiect : ............................................................ . 9
[Link]ț ia E-învăț are :........................................................ 9
C. Principe de proiectul nostru: ....................................................... 11
D. Gestion de proiect : ................................................................. 12
Diagramă GANTT : ............................................................... 13
Diagramă PERT :................................................................... 14
[Link].............................................................................. 16
Introduction : ................................................................................. 17
Alegerea metodologiei de proiectare : ..................................... 17
Diagramă de cazuri de utilizare.................................................... 18
- Definiț ie ..................................................................................... 18
-Actorii .................................................................................... 18
-Diagramă.................................................................................... 19
Diagramă de clasă :.................................................................... 20
- Definiț ie ..................................................................................... 20
- Diagramă................................................................................... 20
Diagramă de secvenț ă:.............................................................. 21
- Definiț ie ..................................................................................... 21
- Diagrama de secvenț ă (Conectare)...................................... 21

3
 Diagrama de secvenț ăInscriere) ............................................ 22
[Link]ă de arhitectură și tehnologii utilizates ................... 23
Introducere ................................................................................... 24
Studiu tehnic. 24
• Alegerea limbajelor de dezvoltare.................................. 24
• Unelte de dezvoltare....................................................... 26
• Outils de développement ....................................................... 28
[Link].................................................................................. 29
Introduction : ................................................................................. 30
Architecture : ................................................................................. 30
Interfeț e grafice :................................................................... 31
Prezentarea interfeț elor : ...................................................... 32
VI. Concluzie................................................................................. 38
Lista acronimelors .......................................................................... 40
Webographie .................................................................................... 41

4
[Link]

5
 Pandemia de COVID-19 ne-a schimbat vieț ile. Ne-a privat de
milioane de elevi să-ș i continue învăț area, în special cei proveniț i
familii defavorizate din cauza prăpastiei digitale care continuă să se lărgească
ș i care a fost dezvăluită de această criză sanitară.
Recursul la noile tehnologii este indispensabil pentru a atenue!
impactul închiderii institu ț iilor de învă ț ământ. În acest scop,
învă ț ământul la distan ț ă se propune ca o alternativă care garantează
continuitate pedagogică.
Cu toate acestea, succesul acestui mod de învăț are necesită disponibilitatea unui
material tehnologic adecvat ș i o conexiune la internet de mare viteză. Dar
aceste condiț ii nu sunt îndeplinite în toate ț ările în dezvoltare sau
cei care sunt cei mai puț in dezvoltaț i.
Învăț ământul la distanț ă (sau e-learning) este un mod de a te forma ș i de
a valida un diplom la distanț ă, adică fără a fi nevoie să se prezinte în
o ș coală pentru a participa la cursuri. O soluț ie deosebit de interesantă
pentru persoanele care au o activitate în timpul zilei (salariaț i, mame casnice...)
sunt în străinătate sau nu se pot deplasa.
Concret, studentul primeș te lecț iile acasă pe care le poate studia astfel în orice moment.
moment. Adesea cursurile sunt însoț ite de exerciț ii de realizat ș i de
retrimitere pentru a fi corectate de către profesori. Din ce în ce mai mult
de instituț ii au trecut în ultimii ani, de la hârtie la mouse, ș i
utilizează acum instrumentele digitale pentru a facilita învă ț area ș i
interacț iunea între elev ș i profesor.

Printre avantajele învăț ământului la distanț ă:

● Mai multă flexibilitate
Cursurile online permit să le plasezi unde doreș ti în programul tău.
timpului. În mod normal, cei care lucrează ș i care doresc să urmeze cursuri
în plus fa ț ă de munca lor, se confruntă cu dificultă ț i în gestionarea timpului.
formările online le permit să decidă când sunt cei mai
disponibili pentru a studia. Ei pot urma cursurile în timpul călătoriilor cu autobuzul,
cu maș ina, cu trenul sau cu avionul. Asta nu este, evident, posibil în
învăț ământul faț ă în faț ă, care necesită un program prestabilit ș i un loc fix.
Dar cursurile online vă oferă timpul necesar pentru a vă organiza pentru a învăț a.
● Adaptat la toate ritmurile
Fiecare învăț ăcel lucrează în ritmul său. În cazul în care sunteț i
mai rapid decât ceilal ț i, nu este deloc nevoie să-i a ș tepț i.
Inversul este, de asemenea, adevărat: dacă eș ti mai lent, poț i lua timpul tău
timp fără a deranja pe nimeni. Formările pot fi de asemenea
făcute la comandă în funcț ie de nivelul de învăț are.

6
● Practică
L’enseignement à distance, contrairement à l’enseignement en présentiel,
permite furnizarea unei formări în timp ș i loc asincronic.
Învăț ăceii nu mai trebuie să se deplaseze ș i să se conformeze unor
program. Ne putem învăț a unde vrem, când vrem. Este suficient să avem o
conexiune WI-FI ș i a unui laptop, a unei tablete, sau a unui
smartphone
E-learningul permite studen ț ilor care doresc să rămână acasă
exemple pentru motive familiale, de a valorifica timpul liber pentru
continua să înve ț i ș i să evoluezi la nivel profesional. Cu
învăț ământul la distanț ă, este inutil să te deplasezi sau să ceri unui
profesor de a veni la domiciliu, cursurile vor avea particularitatea de a fi efectuate
online. Putem lucra într-un mediu familiar care permite să
a lucra uș or. În plus, se preconizează o economisire considerabilă de timp.

7
II. Context ș i specifica ț ie
generală

8
A. Prezentarea subiectului :
Lucrarea prezentată în această lucrare se încadrează în acest context, obiectivul nostru
este de a concepe ș i de a pune în aplicare un sistem care reuneș te diferitele
func ț ionalităț i necesare unei platforme de învă ț are online ș i
confruntăm dezavantajele soluț iilor existente. Proiectul nostru este compus
dintr-o parte principală, este:
Gestionarea formărilor : permite organizarea formărilor precum ș i
gestionul utilizatorilor (crearea conturilor pentru profesori ș i
apprenants).

B.Définition de l’E-learning :
Astăzi, există multe termeni folosiț i pentru a desemna educaț ia
bazat pe web cum ar fi E-Learning, E-formare, învăț ământ online,
învă ț ământ bazat pe web, învă ț are bazată pe web
(instruire bazată pe web) ...etc.

În prezent, noț iunea de E-Learning include concepte ș i

tehnologii care nu sunt fixate, defini ț ia sa rămâne astfel destul de
aproximativ. Retinem definiț ia propusă de Consiliul European
(2001), care consideră că e-learningul este: „un ansamblu de concepte, de
metode ș i instrumente care utilizează noile tehnologii multimedia ș i de
Internetul, pentru a îmbunătăț i calitatea învăț ării prin facilitarea accesului la
resurse ș i servicii, precum ș i schimburile ș i colaborarea
eventual la distanț ă.
E-learningul este un mod de învă ț are care profită de utilizarea
tehnologiile informaț iei ș i comunicaț iei la toate nivelurile
l’activité de formation. Il désigne plus particulièrement un dispositif de
formare ai cărei principali obiective pot fi definite ca
autonomia învăț ării, formarea la distanț ă, individualizarea
parcurs de formare şi dezvoltarea relaţiilor pedagogice în
linie.

Utilizarea Internetului în scopuri de învăț ământ în multiple

forme se dezvoltă în prezent în toate sectoarele educaț iei ș i
în special în lumea universitară.
Această nouă modalitate de predare oferă avantaje, printre care se numără
în special pentru a facilita învăț area la distanț ă. Termenul E-learning este
utilizat pentru a desemna utilizarea Internetului în cadrul unei formări.

9
 E-learningul s-a născut pentru a permite elevilor să se formeze
fără a fi necesar să se deplaseze într-un loc de formare ș i fără a se îngrijora de timp
început sau sfâr ș it de formare deoarece formatorul nu va fi prezent
fizic.

Cu toate acestea, în acest nou mod de transmitere ș i achiziț ie al

cuno ș tinț e, referitor atât la formările academice cât ș i
profesionale, relaț ia directă profesor/învăț ăcel (faț ă în faț ă) este
înlocuită de o relaț ie mediatizată printr-un suport ș i un set de
tehnici.

Abreviere a "învăț ării electronice"; ceea ce se poate traduce prin

învă ț are ("learning") prin mijloace electronice ("E"). Conform
Definiț ia Comisiei Europene a E-learning-ului este: „Utilizarea
tehnologii multimedia ș i internet pentru a îmbunătăț i calitatea
de învăț are facilitând accesul la resurse ș i servicii, astfel
că schimburile ș i colaborarea la distanț ă.

E-learning-ul defineș te orice mecanism de formare care utilizează o reț ea

local, extins sau internet pentru a difuza, interacț iona sau comunica, ceea ce
inclut învăț ământul la distanț ă, în mediu distribuit, accesul la
sursă prin descărcare sau consultare pe net. Poate face
interveni în sincron sau în asincron, sisteme torturate, de
sisteme bazate pe autoformare.

E-Learning-ul rezultă aș adar din asocierea conț inuturilor interactive ș i

multimedia (sunet, text, animaț ie), suporturi de distribuț ie (PC, internet,
intranet, extranet), un set de instrumente software care permit gestionarea
o formare online ș i instrumente de creare a formărilor interactive.
Accesul la resurse este astfel considerabil extins, la fel ca ș i
posibilităț i de colaborare ș i interactivitate.

10
C. Principiul proiectului nostru :
Principiul constă aș adar în a înlocui metodele vechi „
timp/loc/conț inut » al învăț ării prin procesele de învăț are
rapide/ deschise/personalizate.
Iată câteva puncte de diferenț ă între învăț area tradiț ională
în clasele ș i noul mod de învăț are online ilustrat în Tabelul 1.

Tabelul 1: Comparaț ie între E-Learning ș i învăț ământul tradiț ional

Pe un plan practic, se utilizează o platformă-pod între studenț i

ș i învăț ător, care reuneș te instrumentele necesare celor trei tipuri principale
de utilizatori:
Administratorul instalează ș i întreț ine sistemul.
• Profesorul poate să î ș i pună cursurile online, să încorporeze resurse
pedagogice multimedia ș i a efectua un follow-up al activită ț ilor cu acestea
învăț ăcei.
• Cursantul consultă online sau descarcă cursurile, are o viziune de
evoluț ia muncii sale, efectuează exerciț ii. Poate uneori să comunice
cu un formator sau alț i învăț ăcei prin intermediul unui forum.

11
 În general, memoria noastră se compune din cinci capitole:
- Capitolul I : Prezentare.
- Capitolul II : Context ș i specificaț ie generală.
- Capitolul III : Analiză ș i concepț ie detaliată.
- Capitolul IV : Arhitectura tehnică ș i tehnologiile utilizate.
- Capitolul VI: Realizarea proiectului.

D. Gestionarea proiectului :
Gestionul proiectului sau managementul proiectului este ansamblul activităț ilor
visând să organizeze desfăș urarea corespunzătoare a unui proiect ș i să atingă obiectivele acestuia.
Ea constă în aplicarea metodelor, tehnicilor ș i instrumentelor de gestionare
specifice etapelor diferite
În primul rând, lista sarcinilor proiectului nostru este următoarea:

Tableau 2 :Liste des tâches

12
 Pentru a asigura o bună gestionare a proiectului nostru, folosim
tehnicile următoare:

Diagrama GANTT :
Diagramul Gantt, frecvent utilizat în managementul proiectelor, este unul dintre
instrumentele cele mai eficiente pentru a reprezenta vizual starea de progres a
diferite activităț i (sarcini) care constituie un proiect. Coloana din stânga
diagrama enumerate toate sarcinile de efectuat, în timp ce linia de-
tête reprezintă unităț ile de timp cele mai adecvate pentru proiect (zile, săptămâni,
luna etc.). Fiecare sarcină este materializată printr-o bară orizontală, al cărei
poziț ia ș i lungimea reprezintă data de început, durata ș i data de sfârș it.
Această diagramă permite, aș adar, să vizualizăm dintr-o singură privire:
▪ Sarcinile diferite de luat în considerare
▪ Data de început ș i data de sfârș it pentru fiecare task
▪ Durata estimată a fiecărei sarcini
▪ Suprapunerea eventuală a sarcinilor ș i durata acestei suprapuneri
▪ Data de început ș i data de finalizare a proiectului în ansamblu
Iată diagrama GANTT a proiectului nostru :

Diagram 1: diagramă GANTT

13
Diagramă PERT :

Un diagramă PERT este un instrument vizual degestion de projetutile

pentru a planifica sarcinile diferite ș i a defini calendarul proiectului.
Metoda PERT este adesea confundată cu diagrama PERT.
cel mai bun mod de a defini în detaliu acesta este, aș adar, să începem prin
clarifier ces deux termes.
PERT este acronimul pentruTehnica de Evaluare ș i Revizuire a [Link] vorba despre
metoda utilizată pentru a crea un diagramă PERT. Un diagramă de
PERT este diagramul vizual care rezultă din utilizarea metodei PERT.
De fapt, metoda PERT poate fi văzută ca procesul ș i diagrama
de PERT ca rezultat.
Diagrama PERT le permite ș efilor de proiect să vadă toate
detalii esenț iale de planificare, cum ar fi dependenț ele între sarcini,
durata estimată a acestora ș i timpul minim necesar pentru realizarea
proiect. Totuș i, ele nu sunt foarte prietenoase ș i sunt în general prost
înț eles.
Iată diagrama PERT a proiectului nostru:

Diagramme 2 :diagramme de PERT

14
Diferenț a dintre cele 2 diagrame :
Diagramul Gantt este un instrument popular de vizualizare a
calendare de proiect. Este vorba despre un diagramă cu bare care arată de asemenea
dependenț ele dintre sarcini ș i calendarul unui proiect.
Diagrama Gantt sunt adesea mai puț in tehnice ș i mai uș or de
a înț elege deoarece nu au acelaș i nivel de detaliu ca diagramele de
PERT.
Din acest motiv, diagramele PERT sunt mai potrivite pentru estimare
initiale du calendrier d'un projet, alors que les diagrammes de Gantt
se potrivesc mai bine pentru a ț ine informaț i diferiț ii actori ai proiectului

15
[Link]ț ie

16
A. Introducere
Modelarea conceptuală ș i organizaț ională constituie o etapă
important în convergenț a notelor utilizate în domeniul
analiza de design obiect deoarece reprezintă o sinteză pentru noi
sistem.

În acest capitol, începem cu modelul conceptual detaliat de

aplicaț ia noastră, apoi expunem modelul logic al datelor.
În final, încheiem acest capitol cu o concluzie.

B. Modelare conceptuală
Introducere :
Modelul conceptual de date este o reprezentare statică a
sistem de informaț ie. Are ca scop constituirea unei reprezentări
clară ș i coerentă a datelor manevrate în sistemul de informaț ii.
Această secț iune va fi prezentată astfel: vom începe cu alegerea de
metodologia de concepț ie ș i justificare. Apoi, identificăm
actori ș i diagramele cazurilor de utilizare, apoi prezentăm
diagramă de clasă.
Alegerea metodologiei de proiectare :
În cadrul proiectului nostru, am optat pentru limbajul UML
comme une approche de conception. Ci-dessous, nous présentons ce
limbaj apoi justificăm alegerea noastră.

-Prezentarea UML :
UML (Limbajul de modelare unificat) este un limbaj formal ș i
normalizat în termeni de modelare obiect. Independenț a sa faț ă de
limbile de programare, domeniile de aplicaț ie ș i la
procesul, caracterul său multipurpose ș i flexibilitatea sa l-au făcut un limbaj
universal. În plus, UML este esenț ialmente un suport de
comunicare, care facilitează reprezentarea şi înţelegerea
soluț ie obiect. Notarea sa grafică permite exprimarea vizuală a unei
soluț ie obiect, ceea ce facilitează compararea ș i evaluarea soluț iilor.
Aspectul notării sale limitează ambiguitatea ș i neînț elegerile.
UML oferă un mod ingenios de a reprezenta diverse
proiecț ii ale aceleaș i reprezintări prin intermediul viziunilor.

17
 Concepț ia interfeț ei noastre a fost elaborată urmând demersul
următoare:
- Elaborarea diagramelor de cazuri de utilizare. Această etapă a fost realizată
în urma specificaț iei funcț ionale a aplicaț iei.
Recensământul claselor candidate ș i elaborarea diagramei
clase.

Diagramă de cazuri de utilizare:

-Definiț ie
Diagramele de cazuri de utilizare (DCU) suntdiagrame
UMLutilizate pentru o reprezentare a comportamentului funcț ional al unui
sistemsoftwareSunt utile pentru prezentări în faț a conducerii
ou actorii unui proiect, dar pentru dezvoltare,cas
de utilizaresunt mai potrivite. De fapt, un caz de utilizare (use cases)
reprezintă o unitate discretă de interacț iune între un utilizator (uman sau
maș ină) ș i un sistem. Astfel, într-un diagramă de caz de utilizare,
utilisateurs sont appelés acteurs (actors), et ils apparaissent dans les cas
de utilizare.

-Actorii
Profesorul, studentul ș i administratorul sunt actorii care
interacț ionează cu sistemul nostru.
Învăț ător: susț ine cursuri în sala de formare.
Studenț : participă la un curs în sala de formare.
-Administrator: acesta este responsabilul cu administrarea site-ului
téléformare.

18
-Diagramă

Diagrama 3: diagrama decas de utilizare

19
Diagramă de clasă :
-Definiț ie
Diagrama de clase este un schematic folosit îninginerie softwarea turna
prezentare aclaseș iinterfeț esisteme astfel cât ș i relaț iile lor.
Cediagrameface parte din parteastaticăd'UML,ne s-a interesat
aspector temporali ș idinamice.
Oclasădescrie responsabilităț ile, comportamentul ș i tipul unui
ansamblu de obiecte. Elemente ale acestui ansamblu suntinstanț ede la
clasã.
Diagramă
Diagramul de clase de mai jos conț ine toate informaț iile precum
ceea ce sunt clasele, metodele, asocierile ș i proprietăț ile

Diagrama 4 :diagrama de clasă

20
Diagramă de secvenț ă :
-Definiț ie
Diagrama de secvenț ă permite să arate interacț iunile obiectelor în
cadru al unuiscenariude unDiagramă a cazurilor de utilizare.Într-o preocupare
de simplificare, reprezentăm actorul principal în stânga diagramului, ș i
actorii secundari eventuali din dreapta sistemului. Scopul fiind de a descrie
cum se desfăș oară acț iunile între actori sau obiecte.
Dimensiunea verticală a diagramei reprezintă timpul, permiț ând
vizualiza desfăș urarea acț iunilor în timp ș i a specifica
naș terea ș i moartea obiectelor. Perioadele de activitate ale obiectelor sunt
simbolizate prin dreptunghiuri, iar aceste obiecte dialoghează prin intermediul mesajelor.

-Diagramă de secvenț ă (Conectare)

Diagrama 5: diagramă de secvenț ă (Conectare)

21
 Diagramul de secvenț ă „Autentificare” prezintă
secuenț ierea interacț iunilor între utilizator, interfaț a de autentificare,
entitatea utilizator ș i interfaț a de profil. În acest diagramă loop (1, n)
indică că va exista o repetare a afiș ării interfeț ei de autentificare
până la validarea pseudonimului ș i a parolei.

Diagramă de secvenț ă (A se înscrie)

Diagramme 6 :diagramme de séquence (S’inscrire)

Diagrama de secvenț ă pentru înscrierea pe site prezintă

secuenț ierea interacț iunilor între utilizator, interfaț a de înregistrare ș i
entitatea Utilizator.

22
 [Link]ă
tehnică ș i tehnologii
utilizate

23
Introducere
După ce am elaborat designul aplicaț iei noastre, abordăm
în acest capitol un aspect, care are ca obiectiv expunerea fazei
d’architectură tehnică.
În primul rând, realizăm o studiu tehnic în care descriem...
resurse software utilizate în dezvoltarea proiectului nostru. Noi
să prezentăm în primul rând alegerea noastră de mediu de lucru, unde
specifăm mediul hardware ș i software pe care l-am folosit pentru
realizăm aplicaț ia noastră, apoi detaliem arhitectura.

Studiu tehnic
Studiul tehnic este o etapă de adaptare a designului la
arhitectura tehnică.
Ea are ca obiectiv descrierea din punct de vedere funcț ional a soluț iei de realizat.
mod detaliat precum ș i descrierea tratamentelor. Această studiu, care
studiul detaliat, constituie complementul specificaț iei informatice
necesar pentru asigurarea realizării viitorului sistem. Această studiu permite
de asemenea de a determina:
✓ Structura informatică a bazei de date,
✓ Arhitectura programelor,
✓ Structura fiecărui program ș i accesul la date.
Pentru realizarea aplicaț iei noastre, am recurs la mai multe
mijloace materiale ș i software:
• Alegerea limbajelor de dezvoltare
LePHP, pentru PreprocesatorHypertext, desemnează un limbaj
informatica, sau un limbaj descriptutilizat în principal pentru
concepție de site-uri web dinamice. Este vorba despre un limbaj de
programare sub licență liberă care poate fi utilizată de
oricine într-un mod complet gratuit.
Creat la începutul anilor 1990 de către canadianul și groenlandezul Rasmus Lerdorf,
PHP este adesea asociat cu serverul de baze de dateMySQLși au
[Link],faceparteintegrantădinsuită
de software liberLAMP.
Din punct de vedere tehnic, PHP este folosit de cele mai multe ori pe partea de [Link] generează...
cod HTML, CSS sau chiar XHTML, date (în PNG, JPG, etc.) sau încă
fișiere PDF. De mulți ani, acesta face obiectul unei dezvoltări.
specific și se bucură astăzi de o bună reputație în ceea ce privește fiabilitatea și
performanțe.

24
 JavaScript este un limbaj de programare folosit în
dezvoltarea paginilor web.
Ce limbaj are particularitatea de a se activa pe postul client.
Cu alte cuvinte, este computerul dumneavoastră care va primi codul
ș i care trebuie să-l execute. Este în opoziț ie cu alte limbaje care sunt
activată pe partea serverului. Execuț ia codului se realizează prin browserul dvs.
internet precum Firefox sau Internet Explorer.

CSS este acronimul pentru Cascading Style Sheets, este un limbaj de

foaie de stil folosită pentru a descrie formatarea unui
document scris cu un limbaj de marcare. Acesta permite
concepătorii de a controla apariț ia ș i dispunerea paginilor lor web.

HTML este un limbaj informatic folosit pe internet. Acest

limbajul este folosit pentru a crea pagini web. Acronimul
semnifică Limbajul de Marcare HyperText, ceea ce înseamnă în
franceză "limbaj de marcare a hipertextului". Această semnificaț ie poartă bine
numele său deoarece, într-adevăr, acest limbaj permite realizarea de
hypertextul bazat pe o structură de markup.
Nu este, propriu-zis, un limbaj de programare, ci
mai degrabă un limbaj care permite formatarea conținutului.

MySQL (My Structured Query Langage-Limba de interogare structurat)

structurat) este un sistem de gestionare a bazelor de date
relaț ii dedicate open source. Este foarte rapid, fiabil ș i uș or
de utilizat ș i gratuit. A fost dezvoltat iniț ial pentru a gestiona volume foarte mari
baze de date mult mai repede decât soluț iile deja stabilite. El
oferă un set de func ț ionalităț i larg ș i bogat. Rapiditatea sa ș i
securizarea îl face un instrument ideal pentru aplicaț iile internet

25
MVC Modelul-vizualizare-controler este un model de arhitectură
softwaredestinat cătreinterfeț e graficelansat în 1978 ș i foarte popular
pentru ceiaplicaț ii [Link] este compus din trei tipuri de module
având trei responsabilităț i diferite: modelele, viziunile ș i controlerele.
• Un model conț ine datele care trebuie afiș ate.
• O vedere (View) conț ine prezentarea interfeț ei grafice.
• Un controler (Controller) con ț ine logica referitoare la ac ț iuni
efectuate de utilizator.
Ce motiv este utilizat de numeroasecadrea turnaaplicaț ii
webteluri ceRuby pe Ș ineGrails,[Link]
MVCSpring, Struts,Symfony,Apache Tapestry, Laravel,tuAngularJS.

• Instrumente de dezvoltare

Visual Studio Code este un editor de cod extensibil dezvoltat

par Microsoft pentru Windows, Linux ș i macOS. Les
funcț ionalităț ile includ suportul pentru depanare, implementarea
en évidence de la syntaxe, la complétion intelligente du code, les snippets,
refactorizarea codului ș i Git integrat.

WampServer (anterior WAMP5) este o platformă de

dezvoltare web de tipWAMP,permi ț ând să facă
func ț iona local (fără a fi necesară conectarea la un server)
externe) des [Link] nu este în sine un software,
dar un mediu înț elegând trei servere
(Apache,MySQLetMariaDB),un interpret de script (PHP), astfel
cephpMyAdminpentru administrarea web a bazelor de date MySQL.

StarUML este un software de modelareUMLcine a fost „cedat”

cumsursă deschisă» de către editorul său, la sfârș itul exploatării sale
comerciale (care evident continuă ...), sub o licen ț ă
modificată de GNU GPL.

26
 phpMyAdmin este o aplica ț ie web de gestionare pentru
sisteme de gestionare a bazelor de date MySQL ș i MariaDB,
realizată în principal în PHP ș i distribuită sub licenț a GNU
GPL

Ajax este o metodă care utilizează diferite tehnologii adăugate

auxnavigatoare webîntre 1995 ș i 2005, iar particularitatea sa este
de a permite efectuarea de cereri laserver web et, în
consecinț ă, de a modifica parț ial pagina webafiș ată pe
leposte client fără a fi nevoie să afi ș eze o pagină completă nouă.
Aceastaarhitectură informaticăpermis de construire pentruaplicaț ii webet
dessite-uri web dinamice [Link] este acronimul pentru asincron
JavaScript ș i XML

Bootstrap este ocolec ț ia de unelte utile la crearea de

design (grafism, animaț ie ș i interacț iuni cu pagina în
navigător, ș.a.m.d.) desites et d'applications web. Este un ansamblu
care conț ine coduriHTMLetCSSformulare, butoane,
instrumente de navigare ș i alte elemente interactive, precum ș i
extensiiJavaScriptîn opț iune. Este unul dintre cele mai populare proiecte pe
platforma de gestion a dezvoltăriiGitHub.

Photoshop este unsoftwarederetuș detratamentș i dedesen

asistat de computerlansat în 1990 pe MacOS apoi în 1992 pe
Windows.
Editat deAdobe,este utilizat în principal pentru tratament
desfotografii digitaledar serve ș te de asemenea la crea ț ieex
nimicd’images.
El lucrează în principal peimagini matriceale deoarece imaginile sunt
constituite dintr-o reț ea de puncte numitepixeli. Interesul acestor imagini este
de a reproduce nuanț e subtile de culori.

27
 JQuery este un cadruJavascriptsub licenț ă liberă care permite
de a facilita funcț ionalităț i comune deJavascript.
Utilizarea acestei biblioteci permite economisirea timpului de
dezvoltare în timpul interac ț iunii cu codulHTMLde pe o pagină web,
l'AJAX sau gestionarea evenimentelor. JQuery are în acelaș i timp
avantajul de a fi utilizabil pe mai multe browsere web (cf. Internet
Explorer, Firefox, Chrome, Safari sau Opera).

Gantt Project este un software liber de gestionare a proiectelor scris

în Java, ceea ce permite utilizarea sa pe diverse sisteme
exploatare. Permite editarea unui diagramă Gantt.

Aș adar, alte instrumente precum:

• SweetAlert
• Particule JS
• Maș ina de scris
• SummerNote (Wysiwyg)
• HtAccess
• FontAwesome

• Instrumente de dezvoltare
Dezvoltarea aplica ț iei se realizează prin intermediul a două calculatoare
portabile având următoarele caracteristici :

Caracteristică Latitude E5450 HP 250 g7

Marque DELL HP
Procesor Intel(R) Core (TM) i5- Intel(R) Core (TM) i5-
CPU 53000U @ 2.30 GHz CPU 1035G1 @ 1.00GHz
2,301 GHz 1.19GHz
RAM 16 DU 16GO
Discul dur 500 Go HDD 500 Go HDD + 128 Go SSD
M.2
Sistem de operare Windows 10 pro (x64) Windows 10 pro (x64)

Tableau 3 :Matériels utilisés

28
[Link]

29
Introducere :
După ce am finalizat etapa de analiză ș i design al aplicaț iei, vom
{"text":"a începe în acest capitol partea de realizare ș i implementare în"}
la care ne asigurăm că sistemul este pregătit pentru a fi exploatat de către
utilizatori finali.

Architecture :
Arhitectura aplicaț iei noastre este de tip client-server, unde un
computerul interacț ionează cu altele pe Internet.
În realizarea proiectului nostru, am optat pentru o arhitectură
MVC pentru a garanta o asigurare a mentenabilităț ii, modularităț ii
aplicaț ia ș i viteza de dezvoltare.

MVCliteral Modèle Vue Contrôleur este o arhitectură care

organise l'interface Homme-Machine d'une manière à ce que le
dezvoltarea să se facă în straturi independente. El impune
separarea între date, prezentare ș i tratamente, ceea ce dă
trei părț i fundamentale în aplicaț ia finală: modelul de date,
controlerul ș i vederea.
• Couche Modèle
Permite înregistrarea datelor, recuperarea lor, listarea lor, de a le
a elimina ș i a le actualiza.
• Couche Vue
Vizualizarea corespunde interfe ț ei cu care utilizatorul interac ț ionează. A lui
prima sarcină este de a prezenta rezultatele returnate de model. A sa
a doua sarcină este de a primi toate acț iunile utilizatorului (clic de
sursă, selecț ia unei intrări, butoane, etc…). Aceste diferite evenimente
sunt trimise controllerului, aceasta se rezumă la afiș area rezultatelor
tratamente efectuate de model ș i de a interacț iona cu utilizatorul.
• Couche Controlor
Controlerul se ocupă cu gestionarea evenimentelor de
sincronizare pentru a actualiza vizualizarea sau modelul ș i a le sincroniza.
El primeș te toate evenimentele utilizatorului ș i declanș ează acț iunile.
efectuează. Dacă o acț iune necesită o modificare a datelor, controlerul
solicită modificarea datelor modelului, iar acesta notifică vista
că datele s-au schimbat pentru a se actualiza.

30
 Figura următoare reprezintă arhitectura MVC a aplicaț iei noastre.

Schema 1: Arhitectura MVC

Interfeț e grafice :
Conceperea interfeț elor aplicaț iei este o etapă foarte
important deoarece toate interacț iunile cu inima aplicaț iei
trece prin aceste interfeț e, trebuie să ghidăm utilizatorul cu
mesaje de eroare ș i notificare dacă este necesar, astfel prezentând un sistem
complet. În această parte, vom prezenta câteva interfeț e de
aplicaț ia, care răspunde recomandărilor ergonomice de
compatibilitate, de ghidare, de claritate, de omogenitate ș i de flexibilitate. Noi
am ales administraț ia ca utilizator deoarece acesta se prezintă prin
aceste interac ț iuni majoritatea principalelor func ț ionalităț i de
aplicaț ia.

31
Prezentarea interfeț elor :

Figura 1 : pagina de start

32
 Această interfaț ă prezintă pagina principală a aplicaț iei noastre, se poate
împărț iț i în trei părț i :
• La 1eraconț ine logo-ul platformei noastre cu 2 butoane (Înscriere
et Se conecta), astfel încât un alt buton care redirecț ionează direct la
pagina cursurilor
• La 2emăconț ine informaț ii despre centrul nostru, precum ș i
filieră disponibile, cu fotografii de la promovarea noastră.
• La 3èmepartie reprezintă partea de jos a paginii, ultimul element vizualizat de
vizitatorul, conț ine o scurtă definiț ie a acestui proiect, localizarea
de la centrul nostru, precum ș i informaț iile de contact, toate acestea pentru
a lăsa o impresie bună asupra vizitatorului.

De la pagina de start, dacă vizitatorul este un nou utilizator, el are

posibilitatea de a-ț i crea contul. Trebuie doar să faci clic pe butonul
„Înscriere” pentru ca pagina de înscriere să se afişeze, iar vizitatorul trebuie să
completaț i toate câmpurile formularului pentru a crea un cont în cadrul nostru
platformă.
Figura de mai jos prezintă interfaț a de înscriere a unui nou
utilizator de tip învăț ăcel (Conturile profesorilor sunt create de
administratorul):

Figura 2: pagina de înscriere

33
 Dacă este deja înscris, un utilizator (formatator sau învăț ăcel) va putea să se
conectează-te. Este suficient să dai clic pe butonul „Conectează-te” ș i să introduci adresa ta de e-mail.
mailul ș i parola sa pentru a-ș i deschide sesiunea.
Figura de mai jos prezintă interfaț a de conectare a utilizatorilor
tip de învăț ăcel sau bine învăț ător :

Figura 3: pagină de conectare

După verificarea informaț iilor de conectare, utilizatorul va fi

redirigează către interfaț a principală. Imaginea de mai jos prezintă pagina
principale.

Figura 4 : pagina principală

34
 Această pagină conț ine lista tuturor cursurilor ș i exerciț iilor disponibile,
pentru a accesa conț inutul unui curs sau al unui exerciț iu, este suficient să faceț i clic pe
butonul « Citeș te mai departe » care redirecț ionează direct la o pagină care conț ine
curs sau exerciț iul detaliat.
Iată un exemplu de pagină de curs :

Figura 5: pagină de curs detaliat

Fiecare curs poate conț ine mai multe capitole, cum ar fi figura următoare
ilustre :

Figura 6 : interfaț ă capitole

35
 Figura 7 : Bară de navigare

Bara de navigare este un element foarte important în platforma noastră,

graț ie ei putem adăuga/modifica sau ș terge un curs/Capitol sau
o exerciț iu.
Figura următoare prezintă ceea ce am explicat mai devreme:

Figura 8 : Meniu derulant

Iată un exemplu de pagină de adăugare a unui curs:

Figura 9: pagina adăugării cursului

36
 Rămânem mereu în bara de navigare, aș a cum aț i putut observa
în dreapta, se află numele utilizatorului ș i fotografia sa, o dată ce a fost făcut clic pe nume
un meniu derulant va fi afisat. Meniul derulant contine elementele
următorii :

Figura 10 : meniu derulant 2

Odată ce faceț i clic pe „Deconectare”, sesiunea utilizatorului va fi închisă.

Ș i dacă dăm clic pe „Modificare profil”, suntem redirecț ionaț i automat către această
page :

Figura 11 : pagina de modificare a profilului

Pentru mai multe detalii, vă rugăm să vizitaț i site-ul nostru.

37
[Link]

38
 În concluzie, acest proiect ne-a permis să punem în
practicăm cunoș tinț ele dobândite în timpul formării noastre la
sein de centre BTS Hassan II, să înveț i spiritul de lucru în
grupuri ș i, de asemenea, de a ne dezvolta competenț ele tehnice în
informatică, realizând un site web care reuneș te diferitele
funcț ionalităț i necesare pentru o platformă de învăț are
elinează ș i confruntă dezavantajele soluț iilor existente. În
utilizând diferite limbaje de programare ș i software pentru
a reuș i, în ciuda tuturor obstacolelor ș i restricț iilor cu care ne-am confruntat.

În timpul perioadei de realizare a proiectului nostru, am fost

atenț i pentru a asigura calitatea ș i lizibilitatea codului sursă pentru a
de a crea un site web performant, încercând totodată să îl facă
cât mai plăcut posibil.

În cele din urmă, acest proiect nu este decât un început pentru noi
carieră, o nouă experienț ă pentru noi ș i o iniț iere pentru
a realiza alte proiecte ș i site-uri web în diferite domenii, pentru a
de a stăpâni uneltele informatice ș i limbajele de
programare necesară.

Ș i pentru a doua oară ne exprimăm cele mai călduroase

mulț umiri ș i profunda noastră recunoș tinț ă lui Mr. Lachhab Youssef
care a participat îndeaproape la succesul acestei lucrări.

39
 Lista acronimelor

BTS Brevet de Technicien Supérieur

GANTT Tabel de Normalizare a Activită ț ilor Generalizate

Tehnica de evaluare ș i revizuire a programelor (PERT)

UML Limbaj de modelare unificat

UCD Diagrama de caz de utilizare

PHP Preprocesator Hypertext

JS JavaScript
CSS Foile de stil în cascadă
HTML Limbaj de marcare hipertext

SQL Limbaj de interogare structurat

MVC Model-View-Controller
WAMPWindows, Apache, MySQL, Perl

40
 Webografie

SweetAlert2 - un instrument frumos, receptiv, personalizabil ș i accesibil (WAI-

ARIA) înlocuire pentru casetele popup din JavaScript

[Link] - O bibliotecă JavaScript uș oară pentru crearea particulelor

([Link])

Typewriter JS - Un plugin simplu dar puternic în javascript nativ pentru un efect interesant
efect de maș ină de scris. ([Link])

Summernote - Editor WYSIWYG super simplu

KaTeX– Cea mai rapidă bibliotecă de tipărire a matematicii pentru web

Bootstrap · Cea mai populară bibliotecă HTML, CSS ș i JS din lume.

([Link])

Font Awesome

jQuery

Fonturi Google

CodePen: Editor de cod online ș i comunitate pentru dezvoltatori web front-end

Stack Overflow - Unde dezvoltatorii învaț ă, împărtăș esc ș i îș i construiesc carierele

OpenClassrooms

Cursuri online - Învăț aț i ceea ce doriț i, în ritmul dvs. | Udemy

PHP: Documentation

41