Plateforme de Gestion Des Étudiants (Anglais)

Institut Supérieur des Etudes Technologiques de
Nabeul
Département Technologies de L’informatique
Code : SI/HHT12/Fev./2022
PARCOURS
TECHNOLOGIES DE L'INFORMATIQUE
RAPPORT DU STAGE D’INITIATION
ORGANISME D’ACCUEIL
LES EXPERTS
RÉALISÉ PAR
HOUSSEM HAMMAMI
PÉRIODE DU STAGE
DU 2022/01/17 AU 2022/02/18
A NNÉE U NIVERSITAIRE
2021/2022
Stage d’initiation Les Experts
SUMMARY
GENERAL INTRODUCTION...................................................................................................................................0
Chapter 1: Company Overview and Internship Motivations.......................................................................................1
Introduction...........................................................................................................................................................1
1. General presentation..................................................................................................................................1
1.1. Presentation of the company.................................................................................................................1
2. Reasons for the internship..........................................................................................................................1
Conclusion.............................................................................................................................................................1
Chapter 2: Description of Activities...........................................................................................................................1
Introduction...........................................................................................................................................................1
1. Project Activities and Entities....................................................................................................................1
1.1. Project Activities...................................................................................................................................2
1.2. Project Entities......................................................................................................................................2
2. Examples of activities interface.................................................................................................................3
2.1. Authentication.......................................................................................................................................3
2.2. Statistics................................................................................................................................................4
2.3. Groups..................................................................................................................................................5
2.4. Add group.............................................................................................................................................6
2.5. Edit group.............................................................................................................................................7
2.6. Students................................................................................................................................................8
2.7. Add Student..........................................................................................................................................9
2.8. Edit Student .......................................................................................................................................10
2.9. Student payment list............................................................................................................................11
2.10. Student add payment...........................................................................................................................12
2.11. Student account deactivation...............................................................................................................13
2.12. Print student information's..................................................................................................................14
Conclusion...........................................................................................................................................................14
Chapter 3: Achievements and problems....................................................................................................................15
Introduction.........................................................................................................................................................15
1. Achievements...........................................................................................................................................15
1.1. Technical............................................................................................................................................15
1.2. Personal..............................................................................................................................................15
1.3. Professional.........................................................................................................................................15
1.4. Communication...................................................................................................................................15
2. Problems..................................................................................................................................................15
2.1. professionnelle....................................................................................................................................15
2.2. communication....................................................................................................................................15
Conclusion...........................................................................................................................................................15
CONCLUSION GENERAL.....................................................................................................................................15
Hammami Houssem 2021/2022

LIST OF TABLES
Table 1: authentication page description.......................................................................................................3

Table 2: Statistics page description................................................................................................................4
Table 3: Groups page description..................................................................................................................5
Table 4: Add group page description.............................................................................................................6
Table 5: Edit group page description.............................................................................................................7
Table 6: Students list page description..........................................................................................................8
Table 7: Add a new student page description................................................................................................9
Table 8: Edit student page description.........................................................................................................10
Table 9: Student payments list.....................................................................................................................11
Table 10: Add a new payment page description..........................................................................................12
Table 11: Deactivate student page description............................................................................................13
Table 12: Print student page description......................................................................................................13

LIST OF FIGURES
Figure 1: Entity Relationship Chart............................................................................................................................2

Figure 2: Login page...................................................................................................................................................3
Figure 3: Statistics page..............................................................................................................................................4
Figure 4: Groups page................................................................................................................................................5
Figure 5: Add a new group page.................................................................................................................................6
Figure 6: Edit group page...........................................................................................................................................7
Figure 7: Students page..............................................................................................................................................8
Figure 8: Add a new student page...............................................................................................................................9
Figure 9: Edit a specific student...............................................................................................................................10
Figure 10: Specific student payments list.................................................................................................................11
Figure 11: Add a new payment for a specific student...............................................................................................12
Figure 12: Deactivate a specific student...................................................................................................................13
Figure 13: Print specific student page.......................................................................................................................14
Figure 14: Strapi Headless CMS..............................................................................................................................15
Figure 15: Nextjs based on Reactjs library...............................................................................................................16
Figure 16: JSX..........................................................................................................................................................16
Figure 17: VPS.........................................................................................................................................................17
Figure 18: Nginx reverse proxy................................................................................................................................17
Figure 19: Sqlite.......................................................................................................................................................18
Figure 20: PM2 nodejs process manager..................................................................................................................18

THANKS
First of all, I would like to thank, Mr. Jlassi Montassar, Anwer Ben Ali directors of (Les
Experts). He was able to trust me during this adventure in the professional world. I would also like to
thank him for his availability and the quality of his supervision within the centre.
I would then like to express my thanks to the Institute and to the administrative staff of the
Higher Institute of Technological Studies of Nabeul, for the quality of teaching.


GENERAL INTRODUCTION
I present to you as part of the realization of an introductory internship project, I did a one-month
internship at Les Experts.
The objective of this internship is to develop a dynamic web application. to facilitate the tasks at
the center Les Experts.
And the objective of the internship report is to show the ability to analyze, synthesize and present
a project, It reflects the student's ability to use different skills.
The report includes the following points, The first chapter will deal with a general presentation
of the company Les Experts and the general framework of the project, the second devoted to conceptual
modeling and finally the third chapter will relate to the description of the tools and software and the
languages as well as a description of the final product.
At the end A general conclusion to close our work.
Hammami Houssem 0 2021/2022

Chapter 1: Company Overview and Internship Motivations
Introduction
In this chapter, I have described the company LES EXPERTS. The second part of the study
includes the study of the project, the criticism of the project as well as the solution that I proposed.
1. General presentation
1.1.Presentation of the company

LES EXPERTS is a school assistance center approved by the State to provide tutoring lessons.
Directed by Jlassi monatssar et Jlassi anwar.founded in late 2019 in mornaguia, Manouba.
2. Reasons for the internship

In order to master my already acquired knowledge, the company LES EXPERTS welcomed me
to its premises. They gave me the chance to carry out my project entitled “Les experts Admin Dashboard”
in a professional environment with good supervision.
Conclusion
In this chapter, we started by introducing our company LES EXPERTS. Then, we described the
motivations of the internship.
Chapter 2: Description of Activities
Introduction
In this chapter we will discuss the different parts related to the development of the application.
“The Experts Admin Dashboard” application is used to manage students and groups in The Experts
Center. The main interfaces of the application will be revealed in the form of screenshots.
1. Project Activities and Entities

I worked in this project the frontend and backend (api) administrator parts.

1.1.Project Activities
v Authentication:
Ø Login (username or email)
Ø Password.
v Manage students:
Ø Add a new student to the list.
Ø Edit student data.
Ø Deactivate a student.
Ø Add a new payment date.
Ø Consult the list of students.
v Manage groups:
Ø Add a new group to the list.
Ø Edit group data.
Ø Obtain a list of students in the selected group.
v Statistics:
Ø Number of students.
1.2.Project Entities
Figure 1: Entity Relationship Chart

2. Examples of activities interface

2.1.Authentication
Figure 2: Login page.
Use case Login to the (les epxerts) admin dashboard.

Responsible admin.
Results redirect to admin dashboard.
Report error message.
Api endpint POST: {{HOST}}/api/auth/local.
Table 1: authentication page description.

2.2.Statistics
Figure 3: Statistics page.
Use case statistics page for students number.

Responsible admin.
Results Free and paid students number.
Report ~
Api endpint GET: {{HOST}} \
/api/experts-users/count
Table 2: Statistics page description.

2.3.Groups
Figure 4: Groups page.
Use case List of all the groups.

Responsible Admin.
Results Show groups from the database.
Report Empty state page.
Api endpint GET: {{HOST}}/api/groupes
Table 3: Groups page description.

2.4.Add group
Figure 5: Add a new group page.
Use case Add a new group.

Responsible Admis.
Results Add a new group to the database.
Report Validation error
Api endpint POST: {{HOST}}/api/groupes
Table 4: Add group page description.

2.5.Edit group
Figure 6: Edit group page.
Use case Edit a specific group.

Responsible Admin.
Results Success message.
Report Validation error.
Api endpint PUT: {{HOST}}/api/groupes/:id
Table 5: Edit group page description.

2.6.Students
Figure 7: Students page.
Use case Get all students page.

Responsible Admin.
Results Students list from database.
Report Empty state page
Api endpint GET: {{HOST}}/api/experts-users
Table 6: Students list page description.

2.7.Add Student
Figure 8: Add a new student page.
Use case Add a new student.

Responsible Admin.
Api endpint POST: {{HOST}}/api/experts-users
Table 7: Add a new student page description.

2.8.Edit Student
Figure 9: Edit a specific student.
Use case Edit student.

Responsible Admin.
Api endpint PUT: {{HOST}}/api/experts-users
Table 8: Edit student page description

2.9.Student payment list
Figure 10: Specific student payments list.
Use case Student payments list..

Responsible Admin.
Results Payments list.
Report Empty state page
Api endpint GET: {{HOST}} \
/api/experts-users/payments/:id
Table 9: Student payments list

2.10. Student add payment
Figure 11: Add a new payment for a specific student.
Use case Add new payment page.

Responsible Admis.
Report Validation error.
Api endpint POST: {{HOST}}/api/payments/addpayment
Table 10: Add a new payment page description.

2.11. Student account deactivation
Figure 12: Deactivate a specific student.
Use case Deactivate student.

Responsible Admin.
Report ~
Api endpint GET: {{HOST}}
/api/experts-users/deactivate/:id
Table 11: Deactivate student page description.

2.12. Print student information's
Figure 13: Print specific student page.
Use case Print a student.

Responsible Admin.
Results Print screen.
Report ~
Api endpint GET: {{HOST}}
/api/experts-users/:id
Table 12: Print student page description.
Conclusion
During this chapter we have seen examples of the different Interface of this application.

Chapter 3: Achievements and problems
Introduction
In this chapter, I will describe what I learned during the internship, in terms of skills and
knowledge. Then goes on to mention the problems i encountered .
1. Achievements
During this internship I worked on the frontend and backend part of the application, I learned
new skills in working with dynamic web applications with (state and api), and communication and
teamwork skills.
1.1.Technical
Strapi build app fast, Design APIs fast, manage content easily. Strapi is the leading open-source
headless CMS. It’s 100% JavaScript, fully customizable and developer-first. Node. js based, Headless
CMS that saves developers a lot of development time while giving them the freedom to use their favorite
tools and frameworks. Strapi also enables content editors to streamline content delivery (text, images,
video, etc) across any devices.
Figure 14: Strapi Headles CMS.

Next. js provides an out-of-the-box solution for server side rendering (SSR) of React
components. With Next. js, developers can render the JavaScript code on the development server and
send simple indexable HTML to the user.
Figure 15: Nextjs based on Reactjs library.
JSX (JavaScript Syntax Extension and occasionally referred as JavaScript XML) is a React
extension to the JavaScript language syntax which provides a way to structure component rendering using
syntax familiar to many developers. It is similar in appearance to HTML.
Figure 16: JSX.

Virtual Private Server (VPS) is hosting that virtually mimics dedicated server environments
within a shared server. VPS hosting has become a popular choice because it is generally lower in cost
than dedicated hosting but provides better reliability, security, and performance than shared hosting.
Figure 17: VPS.
Nginx, stylized as NGINX, nginx or NginX, is a web server that can also be used as a reverse
proxy, load balancer, mail proxy and HTTP cache. The software was created by Igor Sysoev and publicly
released in 2004. Nginx is free and open-source software, released under the terms of the 2-clause BSD
license.
Figure 18: Nginx reverse proxy.

SQLite is a C-language library that implements a small, fast, self-contained, high-reliability, full-
featured, SQL database engine.
Figure 19: Sqlite.
Advanced process manager for production Node.js applications. Load balancer, logs facility,
startup script, micro service management, at a glance.
Figure 20: PM2 nodejs process manager.
1.2.Personal
v Management of time
Ø During the internship I made good use of the time.
v Bug fixes
Ø I encountered many problems in this project and I ended up solving them.
1.3.Professional
Working with other developers in a professional environment i always try to make better and
cleaner code.

1.4.Communication
v Teamwork:
Teamwork is always a plus for everyone, especially for us developers, it can

help to work faster and deliver a product before the deadline.
2. Problems
2.1.professionnelle
It is my first professional experience it is normal that I find myself facing some difficulties some
of them are to design the flow and the api with a headless cms and connecting backend with the frontend,
database backups.
2.2.communication
Age interval between me and my supervisor and with a different background of logical thinking
this is actually problem for me.
Conclusion
During this chapter we have seen the achievements and the problems on the different training
plans.

CONCLUSION GENERAL
To conclude, this internship was very enriching for me, because it allowed me to better discover
the professional field in general and the field of development specifically.
The work is summarized in the realization of an web application admin dashboard les experts .
However, the implementation of this application required the mastery of new technologies presented on
the market such as Nextjs, JSX, Tailwindcss, etc.
Thanks to this internship I was able to learn how to organize myself for the creation of an
application, create and manage a database, create prepared queries, manage my time in relation to the
deadlines given for certain projects.

Plateforme de Gestion Des Étudiants (Anglais)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Plateforme de Gestion Des Étudiants (Anglais)

Uploaded by

Copyright:

Available Formats

Institut Supérieur des Etudes Technologiques de

Département Technologies de L’informatique

RAPPORT DU STAGE D’INITIATION

Hammami Houssem 2021/2022

Table 1: authentication page description.......................................................................................................3

Hammami Houssem 2021/2022

Figure 1: Entity Relationship Chart............................................................................................................................2

Hammami Houssem 2021/2022

Hammami Houssem 2021/2022

Hammami Houssem 2021/2022

At the end A general conclusion to close our work.

Hammami Houssem 0 2021/2022

Chapter 1: Company Overview and Internship Motivations

1.1.Presentation of the company

2. Reasons for the internship

Chapter 2: Description of Activities

1. Project Activities and Entities

Hammami Houssem 1 2021/2022

Figure 1: Entity Relationship Chart

Hammami Houssem 2 2021/2022

2. Examples of activities interface

Figure 2: Login page.

Use case Login to the (les epxerts) admin dashboard.

Table 1: authentication page description.

Hammami Houssem 3 2021/2022

Figure 3: Statistics page.

Use case statistics page for students number.

Table 2: Statistics page description.

Hammami Houssem 4 2021/2022

Figure 4: Groups page.

Use case List of all the groups.

Table 3: Groups page description.

Hammami Houssem 5 2021/2022

Figure 5: Add a new group page.

Use case Add a new group.

Table 4: Add group page description.

Hammami Houssem 6 2021/2022

Figure 6: Edit group page.

Use case Edit a specific group.

Table 5: Edit group page description.

Hammami Houssem 7 2021/2022

Figure 7: Students page.

Use case Get all students page.

Table 6: Students list page description.

Hammami Houssem 8 2021/2022

Figure 8: Add a new student page.

Use case Add a new student.

Table 7: Add a new student page description.

Hammami Houssem 9 2021/2022

Figure 9: Edit a specific student.

Use case Edit student.

Table 8: Edit student page description

Hammami Houssem 10 2021/2022

2.9.Student payment list

Figure 10: Specific student payments list.

Use case Student payments list..

Table 9: Student payments list

Hammami Houssem 11 2021/2022

2.10. Student add payment

Figure 11: Add a new payment for a specific student.

Use case Add new payment page.

Table 10: Add a new payment page description.

Hammami Houssem 12 2021/2022