Appreciation

I would like to thank all the staff of XpoPro that I met, for their
welcome, their support and help they were able to give me in the success of
my internship.
First of all, I would like to thank Mrs. Faiza CHAANBI, Manager of the
Symboles Média agency, for the opportunity she offered me.
Subsequently, I thank Mr. Oussama ALOUI, the internship supervisor, he
taught me a lot and shared his knowledge in the field of development; who
provided me with the necessary tools for the smooth running of my
internship.
A big thank you to my mother, for her patience and support.
 Contents

chapter I
1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2 Presentation of the host organization . . . . . . . . . . . . . . . 1
3 Missions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
4 PRESENTATION OF THE COMPANY . . . . . . . . . . . . . 2
4.1 Its commitments . . . . . . . . . . . . . . . . . . . . . . . 2
4.2 Its strategy . . . . . . . . . . . . . . . . . . . . . . . . . . 2
5 PRESENTATION OF THE AGENCY . . . . . . . . . . . . . . 2
6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
chapter II
1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2 Study Of The Existing . . . . . . . . . . . . . . . . . . . . . . . 5
3 The Issue: Criticism of the existing . . . . . . . . . . . . . . . . 5
4 Proposed Solution . . . . . . . . . . . . . . . . . . . . . . . . . . 6
5 Specifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
5.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
5.2 Identification of needs . . . . . . . . . . . . . . . . . . . . 6
5.3 Actors and Users . . . . . . . . . . . . . . . . . . . . . . . 7
5.4 Use case diagrams . . . . . . . . . . . . . . . . . . . . . . 7
5.5 Sequence diagrams . . . . . . . . . . . . . . . . . . . . . . 11
5.6 Equipment and tools . . . . . . . . . . . . . . . . . . . . . 12
6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
chapter III
1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2 Merise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.1 The conceptual data model . . . . . . . . . . . . . . . . . 17
2.2 The Data Logic Model . . . . . . . . . . . . . . . . . . . . 18
2.3 The Physical Data Model . . . . . . . . . . . . . . . . . . 18
3 Treatment Design . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
chapter IV
1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2 Work Enviornment . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.1 Hardware environment . . . . . . . . . . . . . . . . . . . . 23
2.2 Software environment . . . . . . . . . . . . . . . . . . . . . 24
3 Theoretical notions . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.1 How the World Wide Web Works . . . . . . . . . . . . . . 24
3.2 Implementation of the essential parts . . . . . . . . . . . . 25
4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
 List of Figures

1.1 Web application Global Use Case . . . . . . . . . . . . . . . . . 8

1.2 Manage Web App Use Case . . . . . . . . . . . . . . . . . . . . 9
1.3 Add Client Sequence Diagram . . . . . . . . . . . . . . . . . . . 11
1.4 The Conceptual Data Model (DCM) . . . . . . . . . . . . . . . 19
1.5 The physical model of data . . . . . . . . . . . . . . . . . . . . 20
1.6 Client/Server Architecture Flow . . . . . . . . . . . . . . . . . . 25
1.7 ”Login” interface of the web app . . . . . . . . . . . . . . . . . . 26
1.8 ”Show Room” section of the web app . . . . . . . . . . . . . . . 26
1.9 ”Add Client” feature of the web app . . . . . . . . . . . . . . . 27
1.10”Clients” interface of the web app . . . . . . . . . . . . . . . . . 27
1.11”Edit Client” interface of the web app . . . . . . . . . . . . . . 28
1.12”Export Client Info in Excel Format” interface of the web app . 29
1.13”Excel file” Exported Client Info . . . . . . . . . . . . . . . . . 30
1.14”Admin” table in database . . . . . . . . . . . . . . . . . . . . 31
1.15”3salons” table in database . . . . . . . . . . . . . . . . . . . . . 32
1.16”paramed” table in database . . . . . . . . . . . . . . . . . . . . 32
1.17”hr” table in database . . . . . . . . . . . . . . . . . . . . . . . 33
 List of Tables

1.1 Manage the Web app . . . . . . . . . . . . . . . . . . . . . . . . 10

 Introduction

No one can doubt anymore that computer science is a fundamental

revolution and an innovative innovation that has significantly affected
human life over the past century. Indeed, far away to be an effervescent
phenomenon, or a passing trend, computer science has just been exploited
in all aspects of life. No domain has remained immune to this policy which
facilitates tasks for both the company and the staff. In this context, we had
the opportunity to follow our internship XpoPro for one month from 2
agaust 2021 until 31 aguast 2021. This experience has also allowed me to
enter the working life and to discover more precisely the environment
professional.

My project is divided into four chapters: the first chapter entitled

”Presentation of the internship framework”, we will present the
framework of the work, while talking about its activities. In the second
chapter entitled ”Specification of Requirements”, we will talk about
the study of the existing as well as functional and non-functional needs.
Subsequently, in the third chapter entitled ”Design”, devoted to the design
of the data. Finally, the last chapter of this report, ”Implementation”,
will be devoted to the technical study where we will detail the working
environment hardware, software, steps of realization and I will present some
interfaces of our site
Chapter I

Presentation of the internship

framework
1 Introduction

In order to put the subject in its general framework, it is essential to present

the environment in which it was carried out. Indeed, in this chapter, we
will present in first place the company in which we did our internship while
listing their activities as well as the organizational chart of the company.

2 Presentation of the host organization

The agency Symboles Media located at 55, Av. Kheireddine pasha, Mont-
plaisir 1073 Tunis.
Communication and Multimedia Agency, which contributes to the develop-
ment of professional sectors, through an offer of high-performance services,
in the field of communication.
With the help of my internship supervisor, Mr. Oussama ALOUI is the web-
master of the agency, I was able to learn in excellent conditions and bene-
fited from quality support.

3 Missions

My internship in the development department of Symboles Média con-

sisted mainly of initiation that brings the basic knowledge to allow me to
upgrade my skills in web development.
More broadly, learn about the tools for creating and developing websites
and also discover the main programming and development languages. Be-
yond enriching my knowledge in web development.
1
4 PRESENTATION OF THE COMPANY
4.1 Its commitments

• Guarantee confidentiality on your files

• Undertakes to respect the delivery times
• Ensures the quality of execution of the work entrusted
• Undertakes to use current techniques
• Undertakes to make you benefit from studied prices

4.2 Its strategy

• Symbols Media designs, through the mastery of codes, colors and

their symbolism, the visual identity of the company
• Symbols Media provides conceptual and strategic solutions that meet
customer demands
• Symbols Media guides the message, with linguistic elements and orig-
inal graphic forms
• Symbols Media listens to the specific requests of the client and take
into account its financial means

5 PRESENTATION OF THE AGENCY

Who works there?

Manager, webmaster, graphic designer, two sales managers, an executive assistant
Agency ID card?
Communication and Multimedia Agency
What are its equipment?
Pcs
What are its activities?
Creation of logos and declination of the graphic charter on the different media De-
sign: leaflets, portfolios, catalogues... Creation and development of static and dy-
namic websites Web identity marketing develop web Design and offer of turnkey exhi-
bition solution
What is its economic situation?
Fragile due to COVID

2
6 Conclusion

Through this chapter, we now have an idea about the company Symbols
Media with its activity and its organizational chart, in the next chapter
we present the study of our project as well as the needs of our site and the
technologies used.

3
4
Chapter II

Requirement Identification
1 Introduction

In this chapter we will present a study of the project while introducing in

a first part the study of the existing followed by the existing problem and
then give an improvement summarizing all the solutions chosen. .

2 Study Of The Existing

This part consists of understanding and analyzing existing solutions and

determining their weak points and their strengths to be able to identify the
needs of the project, and to take them in consideration during the design
and implementation of our project. And for XpoPro Concept the prob-
lem was that it doesn’t have a website that presents the different services of
their company and that allow customers to discover the offers and achieve-
ments made by the company’s team.

3 The Issue: Criticism of the existing

The study of the existing ones allowed us to identify a number of shortcom-

ings:

• Lack of an exportation method to extract demanded information.

• Lack of a user-friendly interface to navigate through the web app.

• Lack of detailed and clear information that will be displayed.

5
4 Proposed Solution

In order to enhance the image of the company and following the disadvan-
tages mentioned in the paragraph Previously, we will develop a web app to
manage the client information and it’s designated show room and which is
saved in the data base furthermore you can extract detailed information
regarding the client in a Excel format file in the goal of making the whole
process more flexible and easier to deal with.

5 Specifications
5.1 Objective

The objective of our internship is to produce a website for an event book-

ing company and to ensure the sustainability of events, with an ambition to
serve the development of the professional sectors to which it is interested.

5.2 Identification of needs

Needs analysis is a very important step in every project from which it is

needed to first define the functionalities of our website. In the Next, we will
identify and formalize all the functional needs and not functional to which
our website should respond.

5.2.1 Functional needs

Functional needs or business needs represent the actions that the system
must execute, it becomes operational only if it satisfies them. This website
should mainly cover the following functional needs:
• Management of Clients.
• Management of Admin Accounts.
• Management of Show Rooms.

5.2.2 Non-Functional needs

These are requirements that do not specifically concern the behavior of the
system. but rather identify internal and external constraints of the system.
The main needs Non-functional of our site can be summarized in the fol-
lowing points:
6
 • Ergonomics: the site must offer a user-friendly and easy-to-use inter-
face.
• Ensure ease of navigation for Users and comprehensibility of writing.
• The Client information must be confidential and secure.
• The code must be clear to allow for future evolution or improvements .

5.3 Actors and Users

An actor is the person or material that interacts with our system in order
to achieve a value added. Our site involves 1 main actor which is:
• Administrator: this actor has full visibility on the web app features
and the one who manages Clients also the Show Rooms.

5.4 Use case diagrams

Use case diagrams identify the functionality provided by the system (use
cases), users who interact with the system (actors), and interaction between
them. The main objectives of the use case diagrams are:
• Provide a high-level view of what the system is doing.
• Identify the users (actors) of the web app.

7
The use case diagram in figure 1.1 gives an overview of the web application:

Figure 1.1: Web application Global Use Case

8
In the following Figure 1.2, we present the detailed use case diagram for
the Administrator The different use cases envisaged for this actor are:
• Add Client
• Edit Client info
• Delete Client info
• Extract Client Info in Excel Format file.
• Add Admin Account
• Delete Admin Account

Figure 1.2: Manage Web App Use Case

9
TEXT DESCRIPTION: The following table represents the description of the
use case in Figure 1.2

Table 1.1: Manage the Web app

Use Case Manage the Web app

Actors Administrator
Goal The Administrator can manage all
web app features
Pre-Condition The Administrator have to be
logged in first
Nominal Scenario 1- The Administrator chose the
Add Client option;
2-The Administrator Added a new
Client;
3-The Administrator Edited a
Client;
4-The Administrator Deleted a
Client.
5-The Administrator chose to ex-
port a Client info in a Excel File
.
Post-Condition The Administrator Managed the
Web App

10
5.5 Sequence diagrams

The UML sequence diagram is a diagram that allows you to represent the
interactions between objects, following an external event by specifying the
chronology of Messages. To analyze the behaviors of the use cases, we used
the sequence diagrams

Figure 1.3: Add Client Sequence Diagram

11
5.6 Equipment and tools

Development environments:

• PhpMyAdmin: phpMyAdmin is a web-based management application

for systems MySQL database management carried out mainly in PHP
and distributed licensed under the GNU GPL.

• Xampp: It is a set of software to easily set up a local Web server, an

FTP server, and an e-mail server.

12
• PHP Storm: PhpStorm is an IDE (Integrated Development Environ-
ment) for PHP and web developers, which is engineered by JetBrains.
It is not available free of cost. It supports PHP 5.3 and above versions.
PhpStorm is built on the IntelliJ IDEA platform, which is written in
Java.

13
Programming languages

• PHP: HyperText Preprocessor, better known by its acronym PHP, is

a language of free programming, mainly used to produce dynamic web
pages via an http server

• JavaScript: It is a scripting programming language mainly used in in-

teractive web pages but also for servers with the use of Node.js.

14
• Bootstrap: This is the most popular HTML, CSS and JS framework
for development of mobile and responsive websites.

• HTML5: HyperText Markup Language is the data format designed for

represent web pages. It is a markup language for writing hypertext,
for example, makes it possible to structure and format the content of
pages, include multimedia resources including images, seizure.

• CSS: it is designed to enable the separation of presentation and con-

tent, including layout, colors, and fonts.[3] This separation can improve
15
 content accessibility, provide more flexibility and control in the specifi-
cation of presentation characteristics.)

6 Conclusion

In this chapter, we have first presented the criticisms of the existing and
their solutions, then captured the functional and non-functional needs of
our website and by the then we identified the actors. Finally, we presented
the technologies used. In the next chapter, we will study the design phase.

16
Chapter III

Design
1 Introduction

Database design is the most difficult task in the development of the infor-
mation system. Use a design method to facilitate communication and coop-
eration between the different actors in an application. Hence in this chapter
we present the design part of our project.

2 Merise

MERISE is a French method born in the 70s, initially developed by Hu-

bert Tardieu. It was then put forward in the 80s, at the request of the
Ministry of Industry that wanted an IS design method (or system) infor-
mation). MERISE is therefore a method of analysis and design of IS based
on the principle of separation of data and processing. It has a number of
models (or diagrams) which are divided into 3 levels:

• The conceptual level.

• The logical or organizational level.

• The physical level.

2.1 The conceptual data model

This is the development of the conceptual data model (CDM) which is

a representation graphic and structured information stored by an IS. The
MCD is based on two main concepts: entities and associations, hence its
second name: the schema Entity/Association. The development of the
MCD involves the following steps:
17
 • The implementation of management rules (if these are not given to
you).
• The development of the data dictionary.
• The search for functional dependencies between these data.
• The development of the MCD (creation of entities then associations
then addition of cardinalities ).

2.2 The Data Logic Model

Intermediate between entity-association model and physical model of data.

Consisting of relational tables, consisting of attributes, including: A pri-
mary key → identifies in a unique way each instance of the table. Possibly
one or more foreign keys : primary keys in another table

2.3 The Physical Data Model

This step consists of implementing the model in the DBMS, i.e. translating
it into a data definition language. The language generally used for this type
of operation is SQL, and more specifically the SQL data definition language.

3 Treatment Design

18
Figure 1.4: The Conceptual Data Model (DCM)

19
Figure 1.5: The physical model of data

20
Data Logic Model
3salons:(id,societe,nom,tel,qualite,mail)
paramed:(id,societe,nom,tel,qualite,mail)
hr:(id,societe,nom,tel,qualite,mail)
admin:(login,pswd)

4 Conclusion

Design is the bridge between the specification of requirements and

implementation. In this chapter we presented the design part of our project
In the next chapter we will present the final interfaces of our site as well as
the development environment.

21
22
Chapter IV

Implementation
1 Introduction

The realization is the last stage of this project, it comes to concertize the
work of the study needs and conceptual study. The realization is very
important since, thanks to it the IT project will really exist. In this
chapter, I will present my hardware and software environment, then I
describe the work done by detailing some screenshots of the features
performed.

2 Work Enviornment

The work environment section presents the hardware and software

components that have been part of the implementation of the current
solution

2.1 Hardware environment

During these different phases of working on this project it was carried it

out using a laptop pc with the following characteristics :
Device name DESKTOP-MCA5B3K
Processor Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz 2.50 GHz
Installed RAM 8,00 Go (7,89 Go usable)
System type 64-bit operating system, x64-based processor

23
2.2 Software environment

This part is dedicated to the libraries, languages and programming

techniques that we used throughout the implementation of the project:
The tools used for the design:
• Drawio [3]: a software for designing diagrams, info graphics, models
and Prototypes

2.2.1 Realization

The tools used for the realization and development:

• Xampp [8] : A local web serverr.
• PHPStorm [7] : An Editor

2.2.2 Technology Used

Technologies used
• HTML5 [4]: markup language used for structuring and presenting
content on the World Wide Web.
• Bootstrap [1]:open-source CSS framework directed at responsive,
mobile-first front end web development .
• PHP [6]:general-purpose scripting language especially suited to web
development.
• JavaScript [5]:JavaScript is the Programming Language for the Web.
• CSS [2]:Cascading Style Sheets is a style sheet language used for
describing the presentation of a document written in a markup
language such as HTML.

3 Theoretical notions
3.1 How the World Wide Web Works

Client / Server
The customer: This is the visitor to a website. It requests the web page
from the server. In practice you are customers when you surf the web.
24
More precisely it is your browser Web (Firefox, Chrome, Safari, IE,
Edge,etc) which is the client because it is he who requests the page Web.
The server: It is the computers that deliver the websites to the Internet
users, that is to say to customers.
The following figure shows the operation of the client/server system which
shows that the Client makes a request to the server, which responds by
giving the Web page.

Figure 1.6: Client/Server Architecture Flow

3.2 Implementation of the essential parts

3.2.1 Website Interfaces

The interfaces of our site are essentially developed on the front end with
it’s backend that contains login,logout,menu,Show Rooms, Add Client
option menu,manage Client,export Client info option
Then we present the interfaces of our site :

25
 Figure 1.7: ”Login” interface of the web app

Figure 1.8: ”Show Room” section of the web app

26
Figure 1.9: ”Add Client” feature of the web app

Figure 1.10: ”Clients” interface of the web app

27
Figure 1.11: ”Edit Client” interface of the web app

28
Figure 1.12: ”Export Client Info in Excel Format” interface of the web app

29
 Figure 1.13: ”Excel file” Exported Client Info

To create this Webapp we created a database to store the necessary

information.
We created a ”xpopro” database and then created 4 tables in this database
called Admin,3salons,hr,paramed. After you retrieve the data in PHP, they
will be used to form the INSERT statement of SQL. By running the
INSERT statement, the data will be stored in the database .

30
Admin:(login,pswd)

Figure 1.14: ”Admin” table in database

31
 hr:(id,societe,nom,tel,qualite,mail)

Figure 1.15: ”3salons” table in database

3salons:(id,societe,nom,tel,qualite,mail),

Figure 1.16: ”paramed” table in database

32
 paramed:(id,societe,nom,tel,qualite,mail)

Figure 1.17: ”hr” table in database

4 Conclusion

During this chapter, we presented the realization of the site while

presenting as well as the hardware and software environment. And then we
have the interfaces of our site as well as the database.

33
34
Bibliography

[1] BootStrap. https://getbootstrap.com/docs/5.0/getting-started/introduction/.

[2] CSS. https://en.wikipedia.org/wiki/CSS.
[3] Drawio. https://draw.io/.
[4] HTML5. https://en.wikipedia.org/wiki/HTML5.
[5] JavaScript. https://en.wikipedia.org/wiki/JavaScript.
[6] PHP7.4. https://www.php.net/downloads.php.
[7] PHPStorm. https://www.jetbrains.com/phpstorm/download/.
[8] Xampp. https://www.apachefriends.org/index.html.

35