Paycode Company

the world-class payments’ technology solution is deployed.
Project Manager Team
At Paycode, like all in other companies, the project manager plays a primary role in the project. He is responsible for its successful completion. The manager’s job is to ensure that the project proceeds within the specified time frame and under the established budget, while achieving its objectives. Project managers make sure that projects are given sufficient resources, while managing relationships with contributors and stakeholders.
Operations Team
At Paycode, IT operations are the processes and services administered by an organization’s information technology (IT) department. As such, IT operations include administrative processes and support for hardware and software, for both internal and external clients. The operations team takes care of these previous tasks.
Developers Team
I am part of this team during this internship.
This team is responsible for the development and implementation of mentioned products below. In this team, there are specialists in different areas like web development, android development, database or Java development.

2.3. Company’s products
– XOMS : Online Management System
This Application facilitates Merchant Registration, Linking Operators to Merchant Cards, Creation and Movement of e-Value, and the Requesting of Cards for Card Production. It is the tool on which I am working since the beginning of my internship.

– Middleware
The Application responsible for accessing all the information relative to Customers and Operators. This information includes Personal Information, Card Information, Banking Information, and Biometrics.

– Card Production
The Application used to create Operator and Client cards using a card printing device. This is for the printing of basic information on cards like Name or Card Number…

– Card Perso
This is where the Operator and Client cards are printed with the facial image and any additional information not printed by the card printing device.

– RESCI Suite
Our Registration, Enrolment and Smart Card Issuing Solution. We have two options currently for registering of Operators and Clients :
RESCI Station – The Application is run from a laptop or desktop PC, with a Card Reader and Fingerprint Scanner, and an integrated camera.
RESCI Tablet – A mobile solution. The Application is run on a Tablet with an integrated Card Reader, Fingerprint Scanner, and Camera. This is designed for remote areas.

– Payment Distribution Application/System
The Application used to pay wages, grants, etc. to the Clients (Payment recipients).
Once the payment has been done, the Client will be able to load their funds to their Client card by means of the Point of Sale (POS) device.

– Point of Sale (POS Device)
The POS device contains a bottom reader for the Operator/Merchant card that that facilitates funds’ loads, unloads and settlement for financial movements and reporting for a specific Merchant.
Client transactions inclusive of loading of funds, transfers, cash deposits, cash withdrawals, bill payments, etc. are performed on the POS device. Paycode’s transactions consist of both online, and offline transactions.

To summarize, here is a diagram showing the different stages of the process with the links between the different products :

Figure 1 : Software and products of Paycode

2.4. My arrival in the company
In this sub-part, I will present the points that surprised me when I arrived in the company. I will also talk about my integration phase.

2.4.1. My astonishment
Compared to my previous internships, the working method is quite similar. However, I noticed some changes that I would like to indicate :
On the one hand, there is no daily stand-up meeting but only two weekly meetings that I will describe now :
Every Monday, we have a meeting with the developer’s team during which each person specifies the spots that he is doing, his schedule for the week and any difficulties encountered during the previous week.
Then, each Wednesday, there is a project’s meeting. During this meeting, the project’s manager gives an overview of all projects in progress in order to know the state of progress of these projects but also the urgent points to be treated as a priority.
At the end of this meeting, there is a prize awarded to the best employee of the week.
On the other hand, for some XOMS environment, there are several versions of this software, which I will explain :
TEST version : It is the first version of the development. In this version, only critical tasks have been implemented with high quality.
BETA version : BETA phase generally begins when the software is feature complete but likely to contain a number of known or unknown bugs.
QA version : Quality Assurance is a way of preventing mistakes and defects in manufactured products and avoiding problems when delivering solutions or services to customers.
UAT version : User Acceptance Testing is the last phase of the software testing process. During UAT, actual software users test the software to make sure it can handle required tasks in real-world scenarios, according to specifications.
LIVE version : It is the real version of the software. This is the one which will be used.
Before this internship, it was rare that I worked with so many versions for single software. However, I find this useful because it really marks the evolution in the project.

2.4.2. My integration phase
My integration in Paycode Company was done quickly and in the best conditions. Indeed, before the beginning of this internship, I had already been able to exchange by mail with Kimberley HIEPNER, in charge of presales as well as with Ralph PECKER, sales manager of the company and who is also my master of internship.
During these first weeks in the company, I was able to meet and get to know the rest of the employees. All the people in the company were really nice with me when I arrived, and they immediately tried to put me at ease. The fact of having already done an internship in a web platform creation company allowed me to quickly adapt to the work requirements of Paycode Company.

3. Presentation of the internship topic

3.1. Problematic and goals of this internship
During this internship, my mission is to develop web applications. The goal is to continue to enrich my skills in the field of the Web. For this, I use different technologies such as PHP, JavaScript, HTML or CSS. To develop its web applications, Paycode relies on the CodeIgniter framework. This tool is totally new to me because I had never used it before. This internship is also an opportunity to improve my English level.

3.2. Issues and constraints of this internship
The issues of this internship are major. Indeed, after having already used several web frameworks in recent years, I have the opportunity to discover a new one, which is CodeIgniter. Indeed, it is very important for me to understand several frameworks in order to work in the field of the web.

Skills to develop in programming
As far as server-side programming is concerned, I am going to develop my knowledge of PHP with the CodeIgniter framework, and for client-side programming, I am going to use JavaScript and the HTML 5 and CSS 3 languages.

4. Used tools and way of working

4.1. Used tools
During this internship, I use several tools that I will present to you now :

NAME OF THE TOOL TOOL’S DESCRIPTION
FileZilla

FileZilla is a free software, cross-platform FTP application, which allow to transfer files using FTP.
CodeIgniter

CodeIgniter is an open-source software rapid development web framework, for use in building dynamic web sites with PHP.
SSH / PuTTY

Secure Shell (SSH) is a cryptographic network protocol for operating network services securely over an unsecured network. Typical applications include remote command-line login and remote command execution, but any network service can be secured with SSH.

PuTTY is a free and open-source terminal emulator, serial console and network file transfer application. It supports several network protocols.

GIT / GitLab

Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people.

GitLab is a web-based Git-repository manager.
Atom

Atom is a free and open-source text and source code editor, and this is the one I used during this internship.
XAMPP

XAMPP is a free and open-source cross-platform web server solution stack package. It is consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in the PHP and Perl programming languages.

Trello

Trello is a web-based project management application.

I also use several languages to develop the tasks that are asked of me :

NAME OF THE LANGUAGE LANGUAGE’S DESCRIPTION
PHP

Free programming language mainly used to produce dynamic web pages via an HTTP server.
JavaScript / jQuery library

JavaScript is a script programming language mainly used in interactive web pages but also for servers with the use of NodeJS.

jQuery is a JavaScript library designed to simplify the client-side scripting of HTML.
AJAX

Ajax (Asynchronous JavaScript And XML) is a set of Web development techniques using many Web technologies on the client side to create asynchronous Web applications.
HTML 5 / CSS 3

HTML is used to manage the content of web pages. This language uses tags called “tags” to write hypertext.

CSS is the complement of HTML. It allows creating aesthetic pages by separating “presentation” and “content”.

4.2. Work environment
The XOMS application I worked on during this internship is related to other software developed by other members of the developer team. Among these, there are Middleware and Stratus.
I will present them below.
XOMS : This Application facilitates Merchant Registration, Linking Operators to Merchant Cards, Creation and Movement of e-Value, and the Requesting of Cards for Card Production.
STRATUS: This is MTN servers that host databases for Paycode. All databases use MySQL.
MIDDLEWARE: This software is developed in Java. This is basically for accessing user permission, roles and functionality. Here is created the user roles along with creating maintaining different types of users. The code base is Java.

4.3. Using GIT
To share my work with other teammates, I use GIT. Before to put my work online, I test it on my local environment. I will explain how I transfer my local files to a GIT repository.
Firstly, I have to get back the work that has already been done in order to have a base of work. To do that, I use this command in order to clone the GIT repository :

Figure 2 : GIT Clone Command
Then, I need to create my own space in the GIT repository. That is why I am creating a branch to separate my work from the work of others. This is possible thanks to the GIT checkout command with the -b option :

Figure 3 : GIT Checkout Command

To see all the branches that have already been created. Just run the GIT branch command. The branch you are working on when you execute this command is written in a different color (dark green here) :

Figure 4 : GIT Branch Command

The GIT status command displays the status of the working directory and the staging area. It allows you to see changes that have been staged, those that have not been, and files that are tracked by GIT. Here we can see that there are four files that have been modified but have not been transferred to the GIT repository. This command tells us to use the GIT add command to add the files :

Figure 5 : GIT Status Command 1

The GIT add allows the user to add file contents to the index. The option –all I used to add all files in one command :

Figure 6 : GIT Add Command
If you run the GIT status command again, you can see that the color of the modified files has changed from red to green. This means that the files have been added to the index. This command tells us to use the GIT commit command to commit all the files :

Figure 7 : GIT Status Command 2

We use the command GIT commit. This command allows the user to record changes to the repository. The -m option allows you to leave a message describing the changes you make to the GIT directory (Here is “Mozambique Branch Init”)

The GIT push command is used to publish new local commits on a remote server. The first parameter (here is “origin”) is the default name of the remote GIT repository. The second parameter is the name of the branch :

Figure 9 : GIT Push Command

Figure 10 : Result of GIT Commands
Now, all my work is on a branch in a GIT repository.

4.4. Agile Methods
The Agile method used during this internship is called Scrum. It is based on a development cycle that brings the customer to the center. The client is involved in the realization from the beginning to the end of the project. Thanks to the Agile method, the project applicant obtains better visibility of the management of the works than with a conventional method.
Involving the customer in the process allows the team to obtain regular feedback to directly implement the necessary changes.
This method aims to accelerate the development of software. In addition, it ensures the realization of functional software throughout the duration of its creation.
With this method of development, the test phases are also paramount because it is essential that all the cases of use of a software are studied and tested before delivering it to the customer.

5. Study of the problematic

5.1. Presentation of the project and operating principle
During these four months of internship, the project on which I worked the most is an Online Managament System called XOMS, which is a management platform of different customers of the company Paycode.
This web application had already been started before and my mission was to complete the application by finishing the development of some features and providing new ones.

5.2. Existing elements of the application
The first thing to do was to look at what had already been developed and what remained to improve.
Indeed, several basic features had already been implemented because this platform had already been developed by several members of the Paycode team still present in the company or who had left.
So, I recovered an already advanced application, however, there were still many more features to implement to make it fully functional.
I will quote some in the next subpart.

5.3. Proposal of new features
Here are the functionalities that seemed to me missing and that made the application less functional compared to what was said upon my arrival at the beginning of the internship :
– Implement a correct display of currency values according to the chosen country

– Create an adapted display for transaction’s types for a kind of account

– Setting up a dynamic and responsive menu for the application

– Implementation of a sorting system

– Merchant Management

– Operator Registration

I will introduce all of them in a next part.

6. Organization of the internship at Paycode

In this part, I will present the various tasks that I have done. First, I will present a Gantt Diagram to have a global overview of the organization of my internship. And then I will describe in detail each existing element of the Gantt diagram.
Here is the Gantt Diagram that represents my activity during this internship :

Now, I am going to introduce each step of my internship more precisely.
Week 1 : Installation XAMPP + CodeIgniter
During this first week, I had to install and configure XAMPP. This tool is necessary for me when I work on my local machine. Indeed, I need to have an Apache server and a MySQL server for working on XOMS.
Then, I had to acquire some knowledge about CodeIgniter because this framework is used for my project. So, I read some documentation and watched many tutorials to find out how this framework worked.

Week 2 : Discovering XOMS and GIT knowledge
From this week, I started to work on XOMS which is an Online Management System. During this week, I just understood the purpose and the operation of the application. I also had to get used to using GIT because this tool is very useful for developers.

Week 3-4 : XOMS of Zambia and Nigeria
These two weeks have been dedicated to making changes to the XOMS environment for Zambia and Nigeria. These changes mainly concerned the formatting of the application. So, I had to use some PHP, HTML and CSS.

Week 5 : XOMS of Mozambique
During this week, I had to prepare the environment for XOMS of Mozambique. First, I had to setup this OMS on my local machine with Mozambique’s settings using PHP, HTML and CSS. And finally, I created a specific GIT repository for Mozambique’s environment.

Week 6 : Configuration Mozambique’s servers for XOMS
To run this kind of software, Paycode uses some Virtual Machines. For the moment, I just configure Virtual Machines that have OS Ubuntu. So, I had to install some libraries, packages and dependencies in order to make XOMS work properly.

Week 7 : Configuring logs for XOMS Mozambique’s servers
This step is very important. Indeed, during this week, I had to set up a system of logs that would allow seeing in real time what was happening on the site. Like this, when there is an error or an unexpected event when the site is used, it is directly written in a file and it is faster for the developer to detect the error.
Week 8-9 : Aesthetic of XOMS and correct display of currencies depending each country
During these two weeks, I worked on the aesthetic aspect of XOMS. My mission is to propose possible improvements and to implement them later. So, I have to use HTML, CSS and JavaScript languages to do theses settings. The display of currencies depending each country will be explained in more details in the end of internship report because it is too long to show it in this report.

Week 10-11 : Work on Merchant Management
These two weeks of work were devoted to the most important part of the application which is the Merchant’s Management. So, I had to implement three features to make this part of the application fully functional :
– Creation of Merchant’s accounts

– Search for a precise account

– Display of all accounts already created

Week 12-13 : Work on Operator Registration
During these two weeks, I worked on Operator Registration feature. This feature allows to assign a kind of role to a merchant. With this feature, the merchant, whose role has been assigned, gets rights to perform some actions defined by the platform administrator.

Week 14-15 : Work on Transaction Types
This two weeks period was devoted to setting up different types of transactions for merchant accounts. It allows to define the types of transactions that will be possible for the concerned merchant. The different transactions available are described by a description and by sub transactions when it is necessary.

Week 16-19 : Development of other features not defined yet
At the time of writing this report, all the remaining tasks for weeks 16 to 19 had not yet been defined.

7. Technology used by the XOMS application

To develop the XOMS solution, Paycode’s developers decide to use CodeIgniter.
I will explain briefly how this framework works.
The architecture of CodeIgniter application is shown below :

Figure 12 : Architecture of CodeIgniter
As shown in the figure above, whenever a request comes on a web application using CodeIgniter, it will first go to “index.php” page.
In the second step, Routing will decide whether to pass this request to step 3 for caching or to pass this request to step 4 for security check.
If the requested page is already in Caching, then Routing will pass the request to step 3 and the response will go back to the user.
If the requested page does not exist in Caching, then Routing will pass the requested page to step 4 for Security checks.
Before passing the request to Application Controller, the Security of the submitted data is checked. After the Security check, the Application Controller loads necessary Models, Libraries, Helpers, Plugins and Scripts and pass it on to View.
The View will render the page with available data and pass it on for Caching. As the requested page was not cached before so this time it will be cached in Caching, to process this page quickly for future requests.

Now, I will introduce the structure of CodeIgniter’s directories :

Figure 13 : Structure of CodeIgniter\’s directories

As the name indicates, the “application” folder contains all the code of your application that you are building. This is the folder where you will develop your project.
The three directories containing the development work itself are “views”, “models” and “controllers”.
They obviously correspond to the directories of the MVC architecture that we find here.
The content of each of these three directories is as follows :
Controllers
This folder holds the controllers of your application. It is the basic part of your application.
Models
The database login will be placed in this folder. All the data processing in the database will be done in the code files of this directory
Views
This folder contains all application’s HTML files.

8. Work done during this internship

In this section, I will try to describe a maximum of tasks that I was able to perform during this internship. I will rely on screenshots in order to explanations are as concrete as possible.
All the tasks that will be presented below concern the XOMS application.

8.1. Configuring servers to host environments for XOMS
To host environments for XOMS, we need to configure servers. These servers are on Virtual Machines which have Operating System (OS) Ubuntu.
I will explain how I configure these servers.

8.1.1. Connection to a server
To establish a connection with the server, I use the SSH client PUTTY.

Figure 14 : Putty Interface

In this interface, I just have to fill three fields :
– The IP address of the server
– The port (here it is the port number 22 that corresponds to SSH port)
– The connection type
After filling these fields, I click on the “Open” button and if I filled the correct information, the connection is established.

For greater security, when the connection is established, the user is asked to enter a login and a password in order to access the server (framed in blue on the screenshot).
If these information are correctly filled, the server is reachable to the user as shown in the screenshot below :

Figure 15 : Ubuntu Server\’s Interface

Now, I am connected to the server and I have to configure it.
Firstly, I will prepare the OS.

8.1.2. Prepare the Ubuntu OS
In this sub-part, I will present all the software I have to install on this server.
First, I have to install Apache on the server :
sudo apt install apache2

Then, to see if it is working, I need to start Apache :
sudo service apache2 start

To check if it is ready, I load the IP address in a browser :
http://XX.XX.XX.XX
I land on this page :

Figure 16 : Apache Default Page

This page is the Apache Ubuntu Default Page, so, we can see that is working.

Then, like the XOMS application relies on MySQL databases, it is necessary to install this module :
sudo apt install mysql-server

I also install all the dependencies PHP necessary for the good functioning of the application :
sudo apt install php libapache2-mod-php php-mysql php-curl php-xml
When you install these PHP modules without specifying which version you want, it automatically gets the latest version that is the version 7.2.

These XOMS need the Mcrypt library to work. However, the MCrypt library was removed from PHP 7.2 because it is no longer maintained. So, I have to find a solution to install it :
sudo apt-get install libmcrypt-dev

8.1.3. Setup Apache VirtualHost
First of all, I will explain what Apache VirtualHost is and for which reason I have to configure it.
Apache VirtualHost is used to run more than one web site using a single IP address. Different sites will be shown depending on the user’s requested URL. That is the main reason why Paycode uses it.
The first thing to do here is to enable the “Rewrite Mod” for Apache.
Mod_rewrite is a powerful Apache module that provides URL manipulation capability. The sophisticated feature allows webmasters to rewrite URLs and this is a common practice in many applications coding with CodeIgniter.
After that, just restart the Apache service :
sudo a2enmod rewrite
sudo service apache2 restart

Then, I need to configure the ports listened to in the “ports.conf” file.
In this file, I have to fill in these two information :
“Listen 80” and “Listen 8080”
These two instructions are used to make sure that the server accepts connections on ports 80 and 8080.
cd /etc/apache2/
sudo nano ports.conf

The last configuration to complete the server preparation is to activate the relevant website.
I use the command “a2ensite” that stands for “apache2 enable site” with the name of the website “xoms”.
sudo a2ensite xoms

I end up reloading the apache server to make sure that any changes made to it are effective :
service apache2 reload
The only thing I have to do is transfer the application files from my local machine to the server via the FTP protocol.
I place all the files on the server in the following location :

Figure 17 : Files location in the server
The directory /xoms contains all files of the application.
The server configuration is now complete. We have to see if the web application can be loaded in the browser.
If the server’s configuration was done correctly, when I refresh the web page, I arrive on a new page.
On this page, the user has to fill some information that I will describe now.

Figure 18 : XOMS Configuration\’s Page 1

The first part of this page shows the two requirements which are essential for the proper functioning of the XOMS application :
– The PHP CURL Library
– The PHP Mcrypt Library
We can see that these two libraries have been installed. If this were not the case, loading and using the application would be impossible.

Figure 19 : XOMS Configuration\’s Page 2
In the second part of this web page, the user must fill several information concerning the environment and the used currency :
– Environment Name
This name is just an identifier to allow all users of the XOMS platform to not mix between any already created environments.
– Currency Identifier
This field corresponds to the identifier of the currency of the country concerned. This identifier is generally the diminutive of the full name of the currency. For example, for the United State Dollar, the currency identifier is USD.
– Currency Multiplier
Link between the monetary base and money supply of an economy.
– Hundredth Multiplier
This number can be 1, 10, 100 or 1000. It depends on the choice of the currency above.
– Percentage Symbol
This symbol is often ‘%’.

As I explained before, the XOMS web application is linked to two other software packages: Middleware and Stratus.
The third and fourth parts of this web page allow to link these three software.

Figure 20 : XOMS Configuration\’s Page 3

The third part of this page is devoted to the Middleware information configured for this environment. As a reminder, the Middleware is used for accessing user permission, roles and functionality.
There are four fields in this part :
– The Middleware IP
It corresponds to the IP address of the concerned Middleware.
– The Middleware Port
It corresponds to the port of the concerned Middleware.
– The Middleware API Key
The API key corresponds to a code passed by computer programs calling an application programming interface (API) to identify the calling program, its developer, or its user to the Web site.
This is usually a random sequence of characters (letters and numbers).
– A test button to see if the three information filled above are correct or not.

Figure 21 : XOMS Configuration\’s Page 4

The third part of this page is devoted to the Stratus information configured for this environment. As a reminder, the Stratus is the server that host databases for Paycode.
This time, there are only three fields :
– The Stratus IP
It corresponds to the IP address of the concerned Stratus.
– The Stratus Port
It corresponds to the port of the concerned Stratus.
The \”Next\” button at the end of the page validates all previously entered information and accesses the XOMS application homepage :

Figure 22 : XOMS Home Page
8.2. Correct display of currency values according to the chosen country
I will now present a very important feature of the XOMS application since it is the display of different currencies depending on the selected countries.
Indeed, this display may vary from one country to another.
First of all, I will introduce the web page on which this feature has been implemented :

Figure 23 : Accounts Page

This page concerns the different accounts created on the XOMS application. When you arrive on this page, different accounts are displayed according to four separate fields :
– Type ID : This number corresponds to the account ID, it is automatically incremented when a new account is created. Therefore, it is necessarily unique.

– Account Name : It is the name of the account.

– Description : It is a longer text to more accurately describe the account.

– Actions : For each account, there are these two buttons which allow the user to view or to set the specified account.

I will now talk about the role of the two buttons presented above.
The first one, represented by an eye, is used to view account information in detail :

Figure 24 : View Account Button
When the user passes his mouse on it, a small note appears : “Display Test info” where “Test” is the name of the account.
When the user clicks on this button, a form appears on the window :

Figure 25 : View Account Form

On this form, we find several information about the account like its ID, its name, its description or even its lifetime.
After these account description information, we can find information about the currency :
– The minimum balance to be in the account
– The maximum balance to be in the account
– The limit credit for this account
– The currency for this account
This form is only used to view the information of the specified account, so it is impossible to modify any information. All fields are locked.

The second button, represented by a pen, is used to edit account information :

Figure 26 : Edit Account Button
This time, when the user passes his mouse on it, the small note that appears is : “Edit Test info” where “Test” remains the name of the account.

When the user clicks on this button, a form appears on the window :

Figure 27 : Edit Account Form

This is the same form as for the account information view except that the fields are now editable so that they can be edited. We can change all information except the ID account that has to be the same.
I will now explain the display of each kind of currency depending on the chosen country.
Here is a table containing all the characteristics of the currencies necessary for the correct implementation of this feature :

NAME OF THE CURRENCY
NUMBER OF DECIMALS TYPE OF THE SEPARATOR FOR THE DECIMAL POINT TYPE OF THE SEPARATOR FOR THE THOUSANDS
DIMINUTIVE OF THE CURRENCY
Euro 2 , . EUR
Iceland Krona 0 NA . ISK
Iraqi Dinar 3 . , IQD
Japan Yen 0 NA , JPY
South Africa Rand 2 , NA ZAR
South Korea Won 0 NA , KRW
UAE Dirham 2 . , AED
US Dollar 2 . , USD

You can find :
– The name of the currency
– The number of decimals (for example, here the number of decimals is 3 : 10,520)
– The type of the separator for the decimal point (10,520 or 10.520). It can be a point, a comma or nothing if there are no decimals
– The type of the separator for the thousand (10,000,520 or 10.000,520). It can be a point, a comma or a blank space.
– The diminutive of the currency for the display in the form

Here is the equivalent of the table presented above but transformed into code in order to treat the numbers correctly. There are exactly same data :

To be clearer, I will present several examples of displays for different currencies.
Currency of Iraq : Iraqi Dinar
CURRENCY DECIMALS DECIMAL POINT THOUSANDS DIMINUTIVE
Iraqi Dinar 3 . , IQD

If the user chooses the Iraqi Dinar currency, and he fills the three fields concerning money like this :
Min Balance : 500,45
Max Balance : 600,45
Credit Limit : 700,45
Thanks to the data processing done, the displayed result will be :
Min Balance : 500.450
Max Balance : 600.450
Credit Limit : 700.450
The comma is replaced by a point and a third decimal is added.
Currency of Japan : Yen
CURRENCY DECIMALS DECIMAL POINT THOUSANDS DIMINUTIVE
Japan Yen 0 NA , JPY

If the user chooses the Japanese Yen currency, and he fills the three fields concerning money like this :
Min Balance : 5 000,45
Max Balance : 6 000,45
Credit Limit : 7 000,45
Thanks to the data processing done, the displayed result will be :
Min Balance : 5,000
Max Balance : 6,000
Credit Limit : 7,000
The separate for thousands becomes a comma and the decimals are deleted.

Currency of South Africa : Rand
CURRENCY DECIMALS DECIMAL POINT THOUSANDS DIMINUTIVE
South Africa Rand 2 , NA ZAR

If the user chooses the Iraqi Dinar currency, and he fills the three fields concerning money like this :
Min Balance : 5,689
Max Balance : 50,689
Credit Limit : 500,689
Thanks to the data processing done, the displayed result will be :
Min Balance : 5,69
Max Balance : 50,69
Credit Limit : 500,69
Three decimal places were entered by the user. Data processing deletes one and rounds the number.

8.3. Transaction’s types for a kind of account
This feature allows to define the types of transactions that will be possible for the concerned Merchant.
The view below is located in the Merchant account web page :
For each Merchant, there is a list of available transactions that can be attributed to him or not.
Each transaction is displayed with three elements :
– A column with possible action. If this box is checked, the transaction is active, otherwise it is disabled
– A second column with a description of the transaction

– A last column with different types of subtransactions that can themselves be enabled or disabled with for each a checkbox.
If the user checks the box in the \”Actions\” column, the boxes of the subtransactions are also automatically checked. However, the user has the possibility to uncheck some if necessary.

There are two different sort types for displaying the different transactions : Combine Interval and Combine Granularity.
For the Combine Interval sorting, there are three different choices :
– No Combining : Displays transactions without special sorting

– Combine Per Period : Displays transactions by sorting them by creation period

– Combine Per Date : Displays transactions by sorting them by creation date
For the Combine Granularity sorting, there are also three different choices :
– Combine All : Displays all information of each transaction

– Combine Per Transaction Type : Display only the first and the second column of each transaction

– Combine Per Transaction Sub Type : Display only the first and the third column

8.4. Setting up a dynamic and responsive menu for the application
I will now introduce the setup of the dynamic menu for the XOMS application. This menu is particularly useful when the application is loaded on a tablet or a mobile.

Here is the classic view when you load one page of the XOMS application :

On this page you can see two different menus :
– At the top, a menu with four categories allowing quick access to the most used pages of the application

– On the left side of the application, a menu with all the pages and sub-pages of the site
Next to the menu at the top of the application, there is a button (circled in orange on the screenshot) that allows to make dynamic the menu on the left.
The purpose of setting up the dynamic menu is that the menu on the left is hidden when the user clicks on this button.
If the user clicks on this button, the left menu disappears :

8.5. Implementation of a sorting system
The next feature I have developed is a sorting system.
This tool is particularly useful when several data are displayed in a disordered way in a table.
For example, when the page grouping the different user accounts is loaded, here is the display of the table

The table is composed of four columns :
– Account ID
– Account’s Name
– Account’s Description
– Actions for account : View or Edit (see previously for more information)
However, we can see that when loading the page, no data is sorted in any order.
The goal is to be able to sort these data in alphabetical order if they are words or in ascending or descending order if they are numbers.
I will now briefly explain how this sorting system was designed.
First, all data are contained in an array called DataTable. DataTables is a plug-in for the jQuery Javascript library. It allows to handle data more easily than if the data had been stored in a normal table.
Then, in agreement with the manager of the team, I decided that the sorting would be done with a click on the name of the columns (“Type ID”, “Account Name”, “Description”).

The principle to perform sorting is quite simple. Here is the code used to sort the first column of the table :
I am going to explain each element to be clear :
– #table_accounts
It is the table’s ID. It allows to identify the element on which we want to work.
– .DataTable()
It is the function used for processing data located in the table.
– “order”: [[ 0, “asc”]] “order” means that we will work on the order of displaying the data.
0, “asc” means that we want to increasingly sort the first column of the table (0 corresponds to the first column, 1 to the second …)

So, if the user clicks on the column with the name \”Type ID\”, the table will sort in ascending order on this column as shown in the screenshot below :

This sort is also valid for the second “Account Name” and third “Description” columns of the table.

8.6. Merchant Management
I will now talk about the main part of my work on the XOMS application : Merchant Management.

This page allows three different actions :
– create an account for a Merchant

– display all created accounts

– search a precise account thanks to two elements : a Merchant Registration Number and a Financial Institution code
I am going to present each of these three actions.

8.6.1. Merchant Registration
The first feature is to register a Merchant. It corresponds to the “Create” button. The form below allows you to perform this action.
This form is divided in three parts :
– Merchant Details
– Personal and Company Details
– Account Details

Here is the first part of the registration form concerning the Merchant Details :
Here is the second part of the registration concerning the Personal and Company Details :

To finish, the third part of the registration form concerning the Account Details :
8.6.2. View All Acounts
The second feature allows displaying all accounts already created. It corresponds to the “Browse All” button.
When the user clicks on this button, all the created accounts are displayed as shown in the screenshot below :

On the screenshot above, only six accounts are displayed but in reality, they are displayed eight by eight.
For each account, we find several important information in order to have a global overview like :
– The Merchant Registration Number that allows to identify each Merchant directly with a number

– The Financial Institution that corresponds to the company for which the Merchant is working

8.6.3. Search an account
The last feature of Merchant Management allows to search for a specific Merchant account.
The search is done directly on the page as shown below :

To carry out this search, the user has just to fill two fields :
– The Merchant Registration Number to search
– The Corresponding Financial Institution Code
If these two fields are correct, a form is displayed in which we find all the information concerning the account.
The visible information are the same as that filled during the registration. They are only displayed differently :

8.7. Operator Registration
This feature allows to assign a kind of role to a Merchant.
This role is linked to the financial institution entered when the merchant\’s account was created (Here it is “Investrust Bank”).
Here is the web page allowing the Operator Registration :
On this page, we find the financial institution selected beforehand. There two fields to fill in addition to be able to allocate a role to a Merchant :
– The Merchant himself
– The UBI corresponding to this Merchant
If both information are correct, a list of available roles for this Merchant appears below :
For each role in the list below, there are the rights that are available and if they are active on this role. To assign a role to a Merchant, simply click on the “Select” button corresponding to the desired role.

9. Results

During most of my internship at Paycode, I worked on a client management application called XOMS. The goal was to bring several features to an already existing application whose tree was already in place. After developing several solutions to improve the application, and in agreement with the manager of the team of developers, I was able to put online new features that I developed during these four months.
Finally, this internship was an opportunity to highlight my skills acquired throughout my course and exploit them through a concrete project.
This internship was therefore a success for me because I was able to satisfy the entire team of developers of Paycode.

10. Conclusion

This internship was very enriching for me because it allowed me to discover in detail the sector of web development with the web framework CodeIgniter. It also allowed me to participate concretely in projects through various and varied missions like the one devoted to the XOMS application that I particularly appreciated to realize.
I capitalized on my skills acquired during my training but had to be biased to exploit them in a professional environment and select what I needed to achieve what was expected of me.
This is how I also completed my training by training in the extensive use of the CodeIgniter web framework as well as in classical programming languages such as PHP, JavaScript, HTML and CSS that I already had previously used.
With this experience, I am convinced that this branch of computing is the one in which I want to practice later.
This internship abroad was for me a great experience. It allowed me to discover a new working culture but also to improve my level of English.