UNIVERSITI TEKNOLOGI MALAYSIA

SCHOOL OF COMPUTING

INDUSTRIAL TRAINING REPORT

DevOps Project Portal

By

KANISHALAKSHMI BAKTHAVASALAM

YEAR 4

BACHELOR OF COMPUTER SCIENCE (SOFTWARE ENGINEERING)

TRAINING PLACE: PETRONAS DIGITAL SDN BHD

LEVEL 23, MENARA EXXONMOBIL
KUALA LUMPUR CITY CENTRE
50088, KUALA LUMPUR

TRAINING PERIOD: 3RD OCTOBER 2022 – 17TH FEBRUARY 2023

SUPERVISORS: DR. MASITAH BINTI GHAZALI
:MR. M FAIZAL SIDEK

REPORT DATE: 20TH DECEMBER 2022

 ABSTRACT

Industrial training program is crucial for all School of Computing students in UTM as
one of the requirements to complete their respective degree courses. One of the requirements
to complete the Bachelor of Computer Science (Software Engineering) at Universiti Teknologi
Malaysia (UTM) located in Skudai Johor Bahru is undergoing industrial training for 20 weeks.
It is to help students experience the working environment in the real-life industry according to
their related course. The student is given the choice to apply for industrial training in any
organization that is related to their study field, and it is crucial for the students to ensure that
the job scope of the position applied in the organization meets the requirements of industrial
training in UTM according to their respective faculties or schools. The student can also imply
their knowledge during studies during their internship to have a better understanding in those
areas. The 20 weeks of industrial training would be able to expose the students to a real
working environment and work culture along with enhancing their soft skills and hard skills.
For Software Engineering students, it is important that we take the most out of this opportunity
as it will prepare us for our future careers, especially in this field. Apart from technical skills,
this training will also enhance our soft skills, especially when dealing with people at work. In
this report, I will be sharing my experience undergoing internship training at PETRONAS
Digital Sdn Bhd. The office is located in Menara ExxonMobil, KL. I will be covering the
projects that have been assigned to me, some of the knowledge and experiences that I gained,
software and hardware used to develop website tasks, and most importantly the reflections to
what I have achieved throughout this training. Additionally, I will also explain the challenges
faced when performing tasks in the project and provide solutions to the issue.
 ACKNOWLEDGEMENT

First, I would like to express my sincere gratitude towards my faculty supervisor,

Dr. Masitah Binti Ghazali for guiding me throughout this industrial training period
which is from 3rd Oct 2022 until 17th Feb 2023. The questions and doubts regarding the
industrial training will not be cleared without her guidance and advice. Despite her
hectic schedule, she keeps me updated and frequently asks about my internship.
Honestly, she is the best person to fit this position to guide me through my internship
period.

Next, I also would like to thank my team supervisor, Mr. M Faizal Sidek who is
the Head of (DevOps Engineering) at Petronas Digital Sdn. Bhd for willing to accept me
as an intern under the Azure DevOps team. He is very generous in sharing his technical
knowledge, experience, and company operation. I also would like to take this
opportunity to thank my colleagues who shared their programming knowledge with me.

I also would like to thank my parents who constantly provide morale support for
me throughout this internship period. They always motivate me whenever I face
problems during industrial training.

Finally, I am grateful to be surrounded by people who encourage and support me

in accomplishing my internship goals. Their generosity was the best gift from the
universe god, and God willing I will pass my internship with flying colors that are filled
with pieces of knowledge. Thank you for always being there for me during the
completion of the internship.
 TABLE OF CONTENTS

TITLE PAGE

ABSTRACT ii
ACKNOWLEDGEMENT iii
TABLE OF CONTENTS iv
LIST OF TABLES vi
LIST OF FIGURES vii
LIST OF ABBREVIATIONS viii
LIST OF APPENDICES xi

CHAPTER 1 INTRODUCTION 1
1.1 Introduction 1
1.2 Organization 1
1.3 Division Info 3
1.4 Internship Program 3

CHAPTER 2 SPECIFIC DETAILS ON PROJECT/TRAINING 5

2.1 Introduction 5
2.2 Objectives 5
2.2.1 Training Objectives 5
2.2.2 Project Objectives 5
2.3 Internship Task – Enhancement of DevOps Project 6
Portal
2.3.1 Project Overview 6
2.3.2 Project Execution 9
2.3.3 Project Output 11
2.4 Side Task 28
2.4.1 Design Web Page 28
2.5 Tools and Technologies Used 35
 2.6 Time Period to Complete All Tasks 35
2.7 Theoretical and Practical Knowledge 37
2.8 Problem Faced 38
2.9 Conclusion 39

CHAPTER 3 OVERALL INFORMATION OF INDUSTRIAL TRAINING 40

3.1 Introduction 40
3.2 Skills Improvement 40
3.2.1 Programming Skills 40
3.2.2 Problem Solving Skills 41
3.2.3 Communication Skills 41
3.3 Reference Materials 42
3.4 Constructive Comments 42
3.5 Conclusion 42

CHAPTER 4 CONCLUSION 43
4.1 Introduction 43
4.2 Overall Achievement 43
4.3 Problems and Execution 44
4.4 Opinions and Suggestion 45
4.5 Conclusion 45

REFERENCE 46
S
 LIST OF TABLES

TABLE TIT PAGE

NO. LE
Table 2.1 Hardware 35
Table 2.2 Software 35
Table 2.3 Programming languages and libraries 36
 LIST OF FIGURES

FIGURE TIT PAGE

NO. LE
Figure 1.1 logo 2
Figure 1.2 Organization Chart 2
Figure 2.1 Use Case Diagram of Job Management System 7
Figure 2.2 ERD of Job Management System 8
Figure 2.3 Prototyping using Axure RP 9 9
Figure 2.4 Login Screen 11
Figure 2.5 Menu Items Related to User Management 12
Figure 2.6 Customer List 13
Figure 2.7 Personal and Company Info Section of the Form for
Registering New Customer 13
Figure 2.8 Shipping Destinations and Account Info Section of the
Form for Registering New Customer 14
Figure 2.9 Select a Customer (Eg: Jone Corp) 14
Figure 2.10 The Associated Shipping Location of the
Selected Customer in the Suggestion Dropdown 15
Menu
Figure 2.11 Truck Management Page 15
Figure 2.12 Trailer Management Page 16
Figure 2.13 Master Data Menu 16
Figure 2.14 Manage Commodity Page 17
Figure 2.15 Commodity Dropdown in Order Form 17
Figure 2.16 Job Order List Page 18
Figure 2.17 Job Order Action Buttons 19
Figure 2.18 New Order Form 19
Figure 2.19 Dropdown Options 20
Figure 2.20 Success Message 20
Figure 2.21 The Generated Consignment Note 21
Figure 2.22 Driver Menu 22
Figure Form for Updating Shipping Info 23
2.23
Figure Truck Number Dropdown Menu 24
2.24
Figure Updated Job Order List 24
2.25
Figure View Order Page 25
2.26
Figure Custom Verification Status Update 25
2.27 Form
Figure Update Job Order List 26
2.28
Figure Column Selection Dropdown 26
2.29
Figure Report Generation Buttons 27
2.30
Figure Generated Excel Report 27
2.31
Figure Donation Form Collapsible Sections 30
2.32
Figure Button for Requesting OTP and OTP Inp Fie on
2.33 Registration Form ut ld 31

Figure OTP Message Sent to Handphone SMS Inbox 31

2.34
Figure “About” Page Before Editing CSS 32
2.35
Figure “About” Page After Editing CSS 33
2.36
Figure Certificate page on tablet before modifying 34
2.37 CSS
Figure Certificate page on tablet after modifying CSS 34
2.38
Figure Prototype Discussion Session with Client 39
2.39
 LIST OF ABBREVIATIONS

UTM - Universiti Teknologi Malaysia

API - Application Programming Interface
PDF - Portable Document Format
HTML - Hypertext Markup Language
CSS - Cascading Style Sheet
PHP - Hypertext Preprocessor CSV
Comma Separated Values
SDN Sendirian
BHD Berhad
 LIST OF APPENDICES

APPENDI TIT PAGE

X LE
Appendix Industrial Training Gantt Chart 47
A
Appendix Industrial Training Checklists (Placement) 48
B
Appendix Industrial Training Achievements 49
C
 CHAPTER 1

INTRODUCTION

1.1 Overview

Industrial training is the main component and compulsory for Computer Science
curriculum at University Teknologi Malaysia (UTM) which the student needs to
undergo training at the related company in a short period of 20 weeks. During this
period, the student will be exposed to a real industrial working environment which is
essential for the student to enhance their skills and prepare for their future careers.
Besides, students can implement their knowledge and skills during their internship days.
The internship intended for the student to gain exposure to every aspect of social,
cultural, communication, work ethic, and work conducts.

First and foremost, the student needs to complete any pre-requisite subjects before going
for their industrial training. Then, they will need to find companies with suitable job
scopes based on their courses. Then, they need to apply as an intern to the company and
get accepted by the company to undergo an internship for 20 weeks and pass to be
eligible for the degree and graduation.

This chapter will discuss the organization’s background, organizational structure, the job
scope of the internship, and the training program which has been planned by the
organization.

1.2 Organization Background
 PETRONAS Digital Sdn. Bhd. is a subsidiary company of Petroliam Nasional Berhad
(PETRONAS) also known as Group Digital where its specialties include business solution
governance, application management, project management, and other areas involving data
management. There are multiple departments under Group Digital including Digital
Excellence, Cyber Security, Digital Engineering, Enterprise Architecture, Enterprise Data,
Data Science, and Employee Digital Experience. Each department has its own specified area,
especially when dealing with huge data sources. PETRONAS, they have more than 43,000
employees worldwide. Aside from national employees, they hired employers from across the
world too with great talent and skills.

Digital Engineering is the largest delivery entity under PETRONAS for Group Digital.
Within DE we house technical expertise for Agile ways of working, Cloud, Software
Engineering, Product Management, a full suite of SAP modules, Application Platforms such as
OpenText, SharePoint, Microsoft M365 suite, and many more.

In addition, DE also houses IT infrastructure support such as servers, networks,

communications infrastructure, and devices. Another facet of DE is Product Delivery which
houses business industry expertise and bridges the technical SMEs with business stakeholders.
Approximately 5000 staff working in the Petronas Digital Sdn Bhd.

9 Units with Petronas Digital Engineering 

● Digital Engineering Office 

● Infra Services 

● UIUX

● Software Engineering & Testing 

● Product Management 

● Platform Services 

● SAP Services 
 ● Product Delivery Upstream

Figure 1.1 Petronas Logo

Name PETRONAS Digital Sdn Bhd

Level 23, Menara ExxonMobil,

Address Kuala Lumpur City Centre,
Kuala Lumpur,
Wilayah Persekutuan 50088,
MY

Phone No. +6017 298 0332

1.3 Organization Structure

Figure 1.2 and 1.3 below show the organization structure from the Chief Executive Officer to
its branches. The intern department is positioned under the Head of Software Engineering &
Testing.
Figure 1.2 Organization chart of Petronas Digital
Figure 1.3 Organization structure of DevOps Team
1.4 Software Engineering and Testing Department 

Petronas Digital Engineering is divided into different kinds of departments. Every

department has its own responsibility and operation. The department for the industrial
training placement is Software Engineering and Testing Department. Software
Engineering & Testing Department. This department develops software for PETRONAS
and defines best practices, frameworks, and tools for the end-to-end software
development processes. This department is responsible for handling software technical
and non-technical problems such as developing a new project, fixing system bugs, and
add-on new features to the system. Software Engineering and Testing Department are
also divided into several teams. The team for the industrial placement is DevOps
practices. DevOps is a mindset and way of working that allows us to accelerate the
technology value stream. Refer to figure 1.4 for the DevOps Methodology diagram. The
stream that turns a business hypothesis into a technology-enabled service or product so
that customers can enjoy value as quickly as possible. It’s a culture guided by three ways
of thinking: Firstly, acceleration of the workflow by ensuring workflows in a single
direction. Secondly, short and amplified feedback loops encourage the sharing of
valuable information. Lastly, an environment that promotes continuous experimentation
and improvement.

Figure 1.4 DevOps Methodology

1.5 Job Scope

A total of 20 weeks of industrial training at Petronas Digital in the Department of

Software Engineering & Testing. I have been assigned as an Intern Software Engineer
which subjects to assist developers in developing and enhancing the existing system
which is DevOps Project Portal. In return for the learning outcome, I will be able to gain
experience in developing and enhancing a system independently that fulfills the
requirements of the client. Below is the list of the job scopes during the internship
period:

a)  Assist in developing the system.

b)  Enhance or upgrade the existing system.
c) Work together with the frontend developer to enhance the DevOps Project portal
using React.js

1.6 Gantt Chart

1.7 Conclusion

This chapter has described the introduction of Petronas Digital, the company
structure, and the department involved in the 20 weeks of industrial training. The job
scope of the intern in the Department of Software Engineering and Testing has also been
briefly explained in this chapter.
 5

CHAPTER 2

SPECIFIC DETAILS ON PROJECT/TRAINING

2.1 Introduction

This chapter is about the project in detail of this 20-week-long internship

training. All the tasks and projects accomplished will be elaborated here including the
objectives, result of the project, hardware and software used, and problem faced during
the process. Besides, this chapter will also include a brief explanation of the hardware,
software, programming languages, and libraries that are used in the tasks of this
internship program.

2.2 Objectives

This section consists of the objectives of the training and the main project.

2.2.1 Training Objectives

The training objectives are:

i. To understand the workflow of a software company.
ii. To adapt to the working culture of a real-life working environment.
iii. To apply the knowledge that is learned from the previous semester in
the completion of real software projects.
iv. To learn about DB architecture, website development, and SQL query development
v. API architecture and endpoints development
vi. Develop web/mobile application
vii. HTML and CSS development
viii. Agile development with Scrum ceremonies
ix. Conduct Innovation tasks
x. Execute tasks with punctuality and quality
 xi. Conduct effective communication
2.2.2 Project Objectives

The project objectives are

i. To enhance the existing system through programming languages such as

React.js library for building user interfaces based on UI components
ii. To test the developed system so that the system is free from bugs and
ready for deployment.
iii. To make appropriate changes to the developed system after gathering
feedback from the product owner, agile coach, and developer.
iv. Provide standardized forms for project requests according to the DevOps tools.
v. Automate project creation.
vi. Allow project administrators to manage project members' access on different tools at one place
2.3 Internship Task – Enhancement of DevOps Project Portal Front-End

This section will describe the main internship task that was carried out from
week 5 until week 20. The main task of this internship program is to enhance a web-
based system for DevOps Project Portal. The modules, summary of project execution,
and output of the development of the DevOps Project Portal system are explained below.

2.3.1 Project Overview

The DevOps Project Portal is a one-stop portal to request and create

projects, as well as manage users' access to DevOps tooling. Every project creation
and access management within each tool will be automated by the portal behind
the scene. Among the DevOps tools supported by this portal are Azure DevOps, a
Software Project Management tool, and SonarCloud, a code scanning tool. Azure
DevOps supports a collaborative culture and set of processes that bring together
developers, project managers, and contributors to develop software. It allows
organisations to create and improve products at a faster pace than they can with
traditional software development approaches. DevOps principle encourages
inter-team communication, frequent feedback, and seamless transition to create
flexible and adaptive teams.
The enhancement of this project portal involves the development of five
modules, namely Request Azure DevOps, Sonar Cloud, Confluence Space Request
module, Search/Filter Project, view project status, update project, and Dashboard
module. The features are shown in Figure 2.1.
Figure 2.1 Features of Azure DevOps Project Portal
Figure 2.2 Homepage of DevOps Project Portal
The database structure of this system is shown in the database diagram in Figure 2.2.

Figure 2.3 Database Structure of DevOps Project Portal

 Figure 2.3 shows a visual representation of the architecture diagram utilized in the
DevOps Portal project. The architecture diagram presents a layout with all the
software components (such as databases, applications, and middleware) and how they
interact with each other. It defines how the data is delivered through HTTP and
ensures that the client-side server and the backend server can understand. Moreover,
it also secures that valid data is present in all user requests. It creates and manages
records while providing permission-based access and authentication. Choosing the
right design defines your company’s growth, reliability and interoperability, and
future IT needs. As such, it is important to understand the components comprising the
architecture of web apps. The browser or the client-side component or the front-end
component is the key component that interacts with the user, receives the input, and
manages the presentation logic while controlling user interactions with the
application. The storage is used to store attachments. User inputs are validated as
well if required. This architecture is more secure as the client does not directly access
the data. The ability to deploy application servers on multiple machines provides
higher scalability, better performance, and better reuse. You can scale it horizontally
by scaling each item independently. You can abstract the core business from the
database server to efficiently perform load balancing. Data integrity is improved as
all data goes through the application server which decides how data should be
accessed and by whom. For that reason, a change of management is easy and cost-
effective.

Figure 2.4 Database Structure of DevOps Project Portal

2.3.2 Project Execution

Currently Azure DevOps Project Portal have been assigned to be involved in that
requires me to learn and understand the business requirement before starting to do front-
end tasks based on the react javascript framework. React, also known as React JS, is a
popular open-source JavaScript library for creating fast and scalable web apps. It is
essentially a front-end JavaScript framework that allow to create of interactive user
interfaces quickly and easily. The project begins with a briefing from Mr. M Faizal
Sidek about the flow of the Azure DevOps process. In the briefing, he also mentioned
the tools used to develop the system. This is followed by the development of a high-
fidelity prototype by using Figma. The Figma tool is used to design the proposed system
interface. The UI/UX display of the DevOps Project Portal will provide an overview and
flow of the system. It will reduce errors and improve the user experience as well as the
workflow of the users. Thus, the prototype is completed at an early stage of the project
so that the design and other features may be verified with the agile coach/scrum master.
A prototype discussion session was held online to brief about the figma tools ,
components and the structure of the wireframe to understand the figma discuss the
prototype and clear the doubts regarding the flow of the existing system. Before starting
to do the UI requires me to learn and understand the Figma through
EmerlandHUE.Emerald HUE is the UX design system is one of the significant steps to
meet the customer-centricity agenda in PETRONAS. It is built by thorough user
research and having a deep understanding of user behaviours and differences.
 Figure 2.5 Prototyping using Figma

Before moving on to the coding phase of this project, the database that uses
MySQL is planned. For every system entity such as operators, job orders and customers,
there will be a table in the database that holds the related data. All data in the tables is
identified by an auto incrementing primary key while the tables are related to each other
through foreign key. Furthermore, the system architecture is also determined. The
system will adopt (Model View Controller) MVC as the system architecture. The reason
for using this system architecture is to ensure the system is still open for changes in the
future. This is because the view is separated from business
logic of the system. As a result, the design of the web pages can be changed without the
risk of breaking something related to the system functions. Besides, MVC can also
reduce code duplication. This is because MVC permits multiple views for a model. In
other words, there is no need to duplicate codes in order to be used for multiple views.

The implementation and coding process started with the development of frontend
web pages of the system. Bootstrap framework is used to ensure the developed system is
responsive and easy to be developed because bootstrap comes with predefined CSS
classes for buttons, form elements and warning boxes. Since this management system
will show the data in the form of a table, jQuery data table library is used. This library is
used because it adds data pagination, sorting and search filtering to the tables.

As for form validations such as checking compulsory fields and password fields,
it is done by using jQuery and JavaScript functions. The function will be called once the
submit button of the form is clicked. jQuery identifies the form fields through their id
and then performs checking through a series of conditional statements. The data will
only be submitted to the relevant PHP file through AJAX if the form is valid. The
backend of the system involves the writing of PHP code for database manipulation and
data retrieval. MySQLi functions are used for the query executions, data result fetching
and error reporting. As for the development of the function that allows users to print
container dispatch advice, MPDF library is used to generate the PDF file of the container
dispatch advice from HTML and the retrieved data from the database. As a result, the
container dispatch advice can be printed by the users. All data is displayed using Jquery
data table so that the data can be searched, filtered, and exported to excel format easily.

As for testing, unit testing is done whenever a component is completed. This is

done to make sure bugs are fixed before moving on to the next phase of the
development. Besides, unit testing also eases the process of bug fixing because the root
of the problem can be easily be found. After a module is completed, functional testing is
conducted to make sure the system achieves the functional requirements after the
components are integrated together.
2.3.3 Project Output

After putting long hours of efforts into the system project, the
project is completed within the given time-period. All 5 modules of the job
order management system are developed.

2.3.3.1 Login Module

This module allows the users with valid credentials to login with the system.
Different user account types will have different access levels to the system. For example,
operators can use this system to assign truck drivers to job orders but not allowed to
access the management page of trucks and trailers. The login screen is as shown in
Figure 2.4.

Figure 2.4: Login Screen

2.3.3.2 User Management Module

This module provides an interface for the administrators to register new users so
that they have access to the system. The users can be either administrators, customer
service officers, operators, drivers, agents, warehouse agents or customers. Besides
registering, the administrators can also edit or delete the personal and account
information of the users.

As shown in the menu in Figure 2.5, the users can choose to manage all
typesof users by selecting a menu option.

Figure 2.5: Menu Items Related to User Management

For example, if the user chooses to manage customer, then a list of customers
will be displayed as shown in Figure 2.6. The user can register a new customer by
clicking on the plus button and fill in the form as shown in Figure 2.7 and 2.8.
Furthermore, the customer personal information and account information can also be
edited or deleted.

Figure 2.6: Customer List

Figure 2.7: Personal and Company Info Section of the Form for Registering New
Customer
 Figure 2.8: Shipping Destinations and Account Info Section of the Form for
Registering New Customer

The shipping destinations that is associated with the customer can be entered into
the “Shipping Destinations” section of the form. The user can add more than one
destination. As a result, after the user selected a customer in the “New Order Form” as in
Figure 2.9, the shipping destinations that is associated with that selected customer will
appear as a dropdown suggestion in the shipping form field as in Figure 2.10.

Figure 2.9: Select a Customer. (Eg: Jone Corp)

 Figure 2.10: The Associated Shipping Location of the Selected Customer in the
Suggestion Dropdown Menu

2.3.3.3 Infrastructure Management Module

This module refers to the part of the system that enables the administrators to
manage the information of trucks and trailers such as registration number and PM
number. The page for managing truck and trailer is shown in Figure 2.11 and 2.12,
respectively. Lastly, this module also allows the administrators to update the master data
such as size, trip types, logistic commodity, shipment height, and delivery type. All this
information is stored so that form field suggestions can appear when the user is filling in
the form for adding new logistic job orders. As a result, input mistake can be prevented.

Figure 2.11: Truck Management Page

 Figure 2.12: Trailer Management Page

Furthermore, this module also allows users to manage the master data of the
system. The master data menu as shown in Figure 2.13 below can be accessed using
“Manage Master Data” in the main menu. The master data of commodity, height, port
code, size, trip, type, delivery type, forwarding/shipping agent and pickup/drop off
location can be inserted into the system. As a result, the corresponding input fields in the
order forms will have dropdown suggestions. For example, “Laminated Veneer Number”
is one of the commodities in the system as shown in figure 2.14. Consequently, the
commodity dropdown field will have the “Laminated Veneer Number” as in Figure 2.15.

Figure 2.13: Master Data Menu

 Figure 2.14: Manage Commodity Page

Figure 2.15: Commodity Dropdown in Order Form

2.3.3.4 Job Order Management Module

This module allows the customer service officers and administrators to insert,
update, and delete the information of logistics job orders. Besides, the users can also
generate and print the container dispatch advice of the job orders through this module.
The container dispatch advice consists of the logistic order information such as job
number, shipping reference, destination, container number etc. Furthermore, the
container dispatch advice also consists of a QR code that allows truck drivers to access
the system and update their job progress and shipping information. This is to ease the
truck driver who is probably a technology novice to use the system without having to go
through the login process and menus.

This module also allows the customer service staffs to update the status of job
orders. Meanwhile, customers who already made a booking can also use this module
to inform the company that their shipping is now ready for pickup. Lastly, agents can also
update custom verification status of the logistic job orders.

After the user selected the “manage job orders” in the main menu. The page that
displays a list of logistic job orders will appear as shown in figure 2.16. The job order
progresses are highlighted in different colors. The job orders are uniquely identified by
job number. If the job order is an import order the job number will start with letter “I”
while export order will have letter “E” as the first character of the job number. If the
delivery type is “LCL”, the job number will always start with letter “C”. The job orders
that have dash and number at the end indicates that the job order involves more than one
container. For example, C0000002 involves 3 containers. The container number and seal
number are blank because the driver or operator haven’t update the shipping info of the
logistic order while the custom status is still blank because the agent haven’t update the
order with the custom verification status. The icons of the action buttons such as “view
order”, “duplicate order”, “edit order”, “print consignment note” and “delete order” will
appear when hovered as shown in figure 2.17.

Figure 2.16: Job Order List Page

 Figure 2.17: Job Order Action Buttons

The form for adding new order that is shown in figure 2.18 will be displayed
once the user clicks on the “+” button. All dropdown menu options of this form such as
the one shown in figure 2.19 can be inserted or removed in the “manage master data”
feature that was explained earlier.

Figure 2.18: New Order Form

 Figure 2.19: Dropdown Options

If the user clicks on the save button after all the mandatory form fields are filled
with proper values, a success message will appear as in Figure2.20. Otherwise, warning
message that describe the form mistakes will appear.

Figure 2.20: Success Messaage

 After the order is created, the customer service staffs, or administrator can
generate and print the “container dispatch advice” which can also be known as
consignment note and pass it to the driver. The consignment note consists of the order
information and a QR code that allow the drivers to access the shipping info update
page. Figure 2.21 shows the consignment note.

Figure 2.21: The Generated Consignment Note

 After scanning the QR, the driver needs to choose whether the task is a delivery
or collection through the menu shown in Figure 2.22. Then, fill in the shipping info such
as container number, seal number, truck number and trailer number in the form shown in
Figure 2.23. The driver can also visit this form from time to time to update job progress
and upload images as proof. The driver will need to enter their password again whenever
they want to update this form so that unauthorized people who scanned this QR code
cannot update the job progress. The truck and trailer number in the dropdown menu
shown in Figure 2.24 is from the database that can be managed in the “manage truck”
and “manage trailer” mentioned earlier.

Figure 2.22: Driver Menu

Figure 2.23: Form for Updating Shipping Info
 Figure 2.24: Truck Number Dropdown Menu

After the seal number and container number are entered, the administrator and
customer service officer can now see the numbers in the job order list as highlighted in
figure 2.25 below. They can also click on the “view order” button to view all
information related to the selected job order and the images that was uploaded by the
driver as in figure 2.26. The column value of “ready for collection & MT return” of job
number C0000001-2 is set to yes because the customer of this job order had set the order
as “ready for pickup”.

Figure 2.25: Updated Job Order List

 Figure 2.26: View Order Page

As for agents, they can use this module to update the custom verification status
of the job orders through the form that is shown in figure 2.27 below. Once updated, the
administrators and customer service staffs can see the customer verification status as
highlighted in figure 2.28.

Figure 2.27: Custom Verification Status Update Form

 Figure 2.28: Update Job Order List

2.3.3.5 Report module

This module allows administrators to generate an excel spreadsheet report of job

orders. The report can be generated based on the selected date range, column content
and status. Besides, reports can also be generated in the form of PDF files.

The users can choose which columns to appear in the report in the dropdown that
is shown in the left part of figure 2.29 or select only the job orders that is within a date
range.

Figure 2.29: Column Selection Dropdown

 Then, the users can generate the excel report by clicking on the green button or
generate a PDF report by clicking on the red button shown in figure 2.30. The generated
excel report is shown in figure 2.31. The example data with Job Number C0000003-2
have container number, seal number and custom status because the driver and agent
already updated the order with that information. If an information is still not yet existing,
the cell will be blank.

Figure 2.30: Report Generation Buttons

Figure 2.31: Generated Excel Report

2.4 Side Task

The tasks from week 1 until week 8 includes extending existing systems, fixing
bugs and website design. The reason that causes these tasks to be given is to provide
adequate training before proceeding with the development of the Sdn. Bhd.
Job Orders Management System which is the main task of this internship programme
that starts from week 9. Furthermore, these tasks also provide a good chance to gain
insights regarding the workflow and operation of the company. The tasks will be
explained in the following subsections.

2.4.2 System Maintenance

The Happy Face system is a web-based system that allows users to buy school
photos. To purchase the photo of a class, the users need to enter a password before they
can access the page to select a dimension and purchase the photo. If they want to buy the
photo of another class, they need to enter another password.

This deployed system has three bugs that need to be fixed. The first problem is,
the “add to cart” button will change to the “view cart” button after one of the dimensions
of the photo is added to the cart. As a result, the user cannot add another dimension of
the same photo without refreshing the page so that the “add to cart” button can be
accessed again. To fix this bug, the JavaScript function that is related to button is traced.
The location of the JavaScript function is found by inspecting the button by using the
browser console and viewing the “event” that is associated with the button. Then, the
DOM manipulation function is removed so that the button will stay as “add to cart”
button. The presence of this unnecessary DOM manipulation function is due to the
source code being reused from another e-commerce website. This DOM manipulation is
suitable for that e-commerce website because that website does not have variable
products as in this The Happy Face website.

The second bug of the system is an item (class photo) will not stay in the cart
after the user enter another password to buy the photo of another class. As a result, the
user who needs to buy photos from multiple classes will need to checkout multiple
times. Thus, this problem needs to be fixed as it will cause inconvenience for the users.
The bug is fixed by removing the function that checks the validity of the cart items
whenever the users switch to another class or category. The system will assume the
existing cart items as invalid after the users switch to another class or category. The bug
is also due to the code being reused. This checking function may be suitable to the e-
commerce system where the code originated but not suitable in this case.

Lastly, the third problem is the lower part of the display photo appears to be
cropped when the web page is viewed using small screen sizes. The problem is fixed by
simply adding more top margin to the “Div” that is located below the display photo.

2.4.2 Extend Existing System

The extension of existing systems means adding new features to the systems that
are already deployed. The systems that are extended are
Malaysia official website and U Dental member management system.

2.4.2.1 Thekchencholing Official Website

The official website Malaysia is an existing website that

consist of the information, news and events of the Buddhist organization. Besides, this
website also has an e-commerce platform that allows users to buy prayer items. This task
will involve the addition of a donation module to this existing website.

First, the online form for donation is created based on the fields in the existing
hardcopy version of the form. The online form has at most two input fields per row and
is organized into collapsible Bootstrap accordion according to their categories as shown
in Figure2.32. Upon form submission, the user will be redirected to the iPay88 payment
gateway page.
 Figure 2.32 Donation Form Collapsible Sections

Meanwhile, the donation information will also be stored into a database. Then,
the administration page for the donation is also created for admins to edit and delete the
donation. Furthermore, the administration page also allows the admins to generate a PDF
version of the form. PDF can be generated from HTML layout with the help of Mpdf, a
library for PHP. The generated PDF will consist of the retrieved form values and follows
the layout of the original hardcopy form.

2.4.2.2 System

System has a system that allows customers to login into their account
and book an appointment. However, users can register an account by simply filling all
the registration form fields and submit the form without having to go through any
verification. As a result, this causes a lot of spam accounts in the database. Hence, this
side task will involve the addition of OTP verification in the registration page.

The button for requesting an OTP and OTP input field will be added to the
registration form. Upon the request OTP button is clicked, a 6-digit random number will
be generated and stored to the database along with an expiry time which is five minutes
from the current time. Then, the OTP is sent to the handphone number of the
user through Bulk360 SMS API. The registration form can only be submitted if the entered
OTP is valid.

Figure 2.33: Button for Requesting OTP and OTP Input Field on Registration Form

Figure 2.34: OTP Message Sent to Handphone SMS Inbox

2.4.3 Design Web Page

The web page design tasks involve optimizing the website layout for the smaller
screen sizes. Although the web pages are usually created with the help of Bootstrap
framework, the position of some web page elements still need to be adjusted. For
example, in the about page of the Sdn. Bhd. website, some section
icons are located on the left of the text block while some section icons are located on the
right of the text block. The default Bootstrap responsive behaviour that stack the
columns on top of each other will cause some icons to appear on top of text while some
icons to appear on the bottom of the text as shown in Figure 2.35. So, CSS media
queries are used to hide the icons on small screen sized and make the icons to appear as
a background image of the text block instead as shown in Figure2.36.

Figure 2.35: “About” Page Before Editing CSS

 Figure 2.36: “About” Page After Editing CSS

Furthermore, the certification page is also one notable example of the web design
task, the icon links of the certificates in the JK Wire Harness website appear to be too
thin on table screen size as shown in Figure2.37 while the layout is normal when the
website is shown on phone and desktop screen sizes. Thus, CSS media queries are also
used to make the columns to adopt a suitable width on tablet screen size as shown in
Figure2.38.
Figure 2.37: Certificate page on tablet before modifying CSS

Figure 2.38: Certificate page on tablet after modifying CSS

2.5 Tools and Technologies Used

This section will describe the hardware, software, programming languages and libraries
that are used in accomplishing the main and side tasks throughout this internship
program.

2.5.1 Hardware

The hardware used in the projects is as follows:

Table 2.1 Hardware

Name Specification
Laptop Processor: Intel Core
i5 Memory: 8GB
OS: Windows 10 64 bit

2.5.2 Software

The software used in the development of the projects is as follows:

Table 2.2 Software

Name Description
Visual Studio Code The IDE tha i use durin
t s d g
developme
nt.
PhpMyAdmin A tool that allows the management of
MySQL database.
 Axure RP 9 A prototyping software that allows
the prototypes to be
viewed in web
browsers.
Xampp To enable web sites to be run on
localhost for testing purpose.
FileZilla A server file management utility that
allows the website source files to be
uploaded to the server.

2.5.3 Programming Languages and Libraries

The programming languages and libraries that are involved in the development of the
projects is as follows:

Table 2.3 Programming languages and libraries

Name Description
HTML A markup language that is used to
shape
the layout of the web pages.
CSS Styles the web pages so that the web-
based system is more attractive and
user-
friendly.
JavaScript A programming language that
add
interactive elements to the static web
pages.
jQuery A JavaScript library that simplifies
JavaScript programming.
PHP A server-side programming language
that receives data that is posted from
the client-side JavaScript
and execute
 MySQL queries that are responsible
for
data manipulation and retrieval.
MySQL A relational database
management
system that holds and organize the
system data.
Mpdf Generate PDF from HTML layout and
data from the database.
jQuery data table A jQuery extension that adds sort,
search
and pagination features to data tables.
Bulk360 SMS API A PHP library that enable the sending
of
SMS messages to handphone numbers.

2.6 Time Period to Complete All Tasks

The time period to complete the smaller side tasks is from week 1 until week
8. The time allocated for a side task is usually one week. From week 9 onwards, the
main tasks, that is, the development of job order management system is
given. The prototyping phase is about one week while the time allocated for planning is
also about one week. Lastly, five weeks is allocated for the development of the system
while the rest of the weeks involve the gathering of feedback from clients and making
changes when appropriate.

2.7 Theoretical and Practical Knowledge

The development of the job order management system involved the

knowledge of HTML, CSS, JavaScript, PHP and SQL. Fortunately, all these
programming languages are already covered in previous semesters. Hence, making use
of these programming languages in this software development project is not a problem.
 One important theoretical knowledge that is applied in system
project is writing organized and maintainable code is vital and necessary. This is
because, unmaintainable code hinders the process of adding new features and fixing of
defects. In this case, maintainable code enables satisfying the changing requirements of
the clients even the module or system is already completed. Meanwhile, the practical
knowledge of tracing and analyzing code is learnt while completing side tasks such as
fixing bugs of existing systems.

2.8 Problem Faced

Since the proposed system aims to provide a computerized system for the
existing complex process about managing and processing customer logistic order, it is
quite challenging to understand the flow and make sure all requirements of the clients
are satisfied.

Fortunately, an online meeting was held with the client through Google Meet
after the prototype is finished. In the meeting, the prototype is used as medium of
discussion with the client so that the client can confirm about their expectations.
Furthermore, questions are also asked to confirm the access permissions of different
kind of users such as whether customer service officer accounts also have the permission
to assign resources to job orders.
 Figure 2.39: Prototype Discussion Session with Client

2.9 Conclusion

This chapter elaborated about the objectives, side tasks, main tasks and the tools
that are used in the projects. In short, the training and tasks that is of this internship
program is very meaningful because it provides a chance to participate in real software
projects and apply the knowledge that are learnt during the previous semesters.
 CHAPTER 3

OVERALL INFORMATION OF INDUSTRIAL TRAINING

3.1 Introduction

This chapter will describe the skills that are acquired during the industrial
training at Sdn. Bhd. Besides, this chapter also consists of the
constructive comments regarding the company.

3.2 Skills Improvement

This 20-week long industrial training is a remarkable experience because it

provides a chance to gain skills that prepare the intern for future career life. The skills
that are acquired during the industrial training are programming, problem solving,
communication and social skills. The skills are described in the following subsection.

3.2.1 Programming Skills

Since the main and side tasks are mostly related to web programming,
programming skills have been significantly improved. The projects also provide a
chance to gain experience with API implementation. Some of the API that are used in
the projects are Bulk360 SMS API and Mailgun API. Some of the notable programming
skills that were gained is generation of QR by using JavaScript and the generation of
PDF documents from HTML layout by using the Mpdf library.
 Even though the programming languages such as HTML, CSS, PHP and
JavaScript are already well-covered in the syllabus of previous semesters and used in
course projects, but the knowledges are not yet applied on real projects. The
development projects of this industrial training involved a lot of planning, coding and
troubleshooting. All these skills are fundamental to a software engineer and very useful
in the career path.

3.2.2 Problem Solving Skills

Problem solving skill was also gained from fixing problems of existing systems.
This is because, the existing code that is written by someone else need to be traced to
find the root of the problem. After the root of the problem is found, a solution is planned
in order to fix the bug. For example, the code of The Happy Face e- commerce website
is investigated so that the problem where items keep disappearing from cart after the
user switches to another category.

Moreover, problem solving skills is gained from the side tasks which are
originally tedious. For example, a method is proposed to aid the data entry process of the
large number of jewelry products of website. The data is organized in
CSV format and then parses into PHP code using fgetcsv( ). The parsed data is then
inserted into the database. As a result, all the product data can be entered in bulk by
using a tool instead of one by one.

3.2.3 Communication Skills

Interestingly, communication skills are improved automatically when working in

the industry. Throughout the internship program, there is no problem communicating
with Mr and other colleagues and the confidence level in
communication improved from time to time. Communication skills are further improved
during meeting with Mr and the meeting with clients from
Sdn. Bhd that aims to further understand the user requirements.
3.3 Reference Materials

The main reference material that is used in completing the given task is online
materials and tutorials. This is because this is the most effective way to find solutions
related to programming related problems and difficulties. The websites that often
referred are Stack Overflow, YouTube, W3Schools and so on. Besides online materials,
the colleagues are also willing to help in overcoming difficulties.

3.4 Constructive Comments

The colleagues at are always willing to lend a hand when problems are
faced during task execution. Besides, they are also very generous in sharing their
knowledge and provide their guidance. Furthermore, the tasks that are given are very
eye-opening and provided a very meaningful experience. Lastly, the time-period that is
given to complete the task are ample and can be completed without rushing. Hence, it is
highly recommended that future interns to undergo their industrial training at

3.5 Conclusion

This chapter described the overall information of this internship program that is
carried out at Sdn. Bhd such as the skills that have gained, reference
materials and the constructive comments.
 CHAPTER 4

CONCLUSION

4.1 Introduction

In this chapter, the information of the industrial training will be concluded by

discussing the overall achievements that were acquired. This is followed by a section
that describe the problems and suggestions that are related to this internship program.

4.2 Overall Achievement

This 20-week long industrial training provided a chance for familiarization

towards the working environment of the software engineering industry.
Communication skills are improved because there is a need to communicate with Mr and
other colleagues during the execution of given tasks. Furthermore, communication skill
and confidence are also improved during the prototype discussion
session with the client.

During the first 8 weeks of the industrial training, the side tasks such as fixing
bugs of the existing systems have provided a platform for improving problem solving
skills. This is because the existing code that is written by someone else need to be traced
to find the root of the problem. After the root of the problem is found, a solution is
planned in order to fix the bug. For example, the code of The Happy Face e- commerce
website is investigated so that the problem where items keep disappearing from cart after
the user switch to another categories.

Another achievement is the ability to plan a software architecture before the

development process starts. This is because job management system is a
new project that needs to be started from the beginning after the requirements elicitation
phase. Hence, the software architecture is planned. In this case, MVC is the chosen
architecture because the clients may want to change the look and feel of the systems
from time to time while keeping the functions. Another reason that lead to the choosing
of this architecture is the same data may need to be presented in many different views.

Next, the biggest achievement of this industrial training is the

system is completed successfully. The last few weeks of the industrial training involves
updating the systems with additional feature after gathering feedback from the client.

Lastly, various PHP libraries and API were also learnt. For example, Bulk360
SMS API was learnt to allow the sending of SMS to user handphone number while
Mpdf library was understood so that PDF document can be generated from a HTML
layout through PHP code. Lastly, Mailgun API was also learnt so that emails such as
newsletters that are sent by the websites will go to the inbox instead of the spam folder.

4.3 Problems and Execution

There are no significant issues or problems that are faced during this 20-week
industrial training. Since the web development projects and maintenance tasks mainly
involve programming languages such as PHP, JavaScript, HTML and CSS, not much
learning curve is encountered because these languages are already covered by the
lecturers during previous semesters. Moreover, the vast information from online
references and tutorials also allows solutions to problems to be found easily and
effectively. As for the implementation of API and libraries such as BULK360 API,
Mailgun, MPDF, the process is also very smooth because they provide adequate
documentation that are related to the integration into PHP code.

The only problem was encountered during understanding the logistic business
flow of Sdn Bhd. It is necessary to understand this flow before proceeding
with the development with the job order management system. This problem was solved
by completing a prototype after the initial meeting. Then, a prototype discussion session
with the client was held. In that session, the clients used the prototype as a medium to
point out missing or misunderstood processes and requirements. After that, remaining
confusion is also cleared with another follow up meeting with the
sales consultant, Mr . As a result, the requirements and flows of the proposed Asia Trans
job order management system are well understood and development process can be
proceeded.

4.4 Opinion and Suggestions

In my opinion, Sdn Bhd is a very suitable company for interns to

carry out their industrial training. This is because this company is willing to offer a wide
variety of different tasks to interns such as system planning, development, extending
system, bug fixing and web page design. Furthermore, this company also provides a
chance to participate in client meeting. Hence, working in this company is indeed an
eye-opening experience and it is highly suggested for future interns to carry out their
industrial training here.

4.5 Conclusion

In a nutshell, it is an undeniable fact that industrial training is a very important

and crucial part of the Bachelor of Software Engineering program. Industrial training
allowed interns to adapt to the industrial environment before graduation. The adaptation
is vital because academic knowledge alone is not enough to fully prepare the student to
venture into the software engineering industry. In my opinion, industrial training is very
effective to reduce the culture shock that will be encountered by graduate students who
begin their career in the workforce.
 REFERENCES

About (n.d.). Retrieved November 11, 2020, from

https://xantec.com.my/web-design-company

Basic usage. (n.d.). Retrieved December 5, 2020, from https://select2.org/getting-

started/basic-usage

C, S. (2014, September 02). Working with jQuery DataTables. Retrieved December

12, 2020, from https://www.sitepoint.com/working-jquery-datatables/

Mark Otto, J. (n.d.). Boostrap 4 Collapse. Retrieved November 10, 2020, from
https://getbootstrap.com/docs/4.0/components/collapse/

MySQL Documentation. (n.d.). Retrieved November 11, 2020, from

https://dev.mysql.com/doc/

SMS Guide. (n.d.). Retrieved November 5, 2020, from

https://sms.360.my/send_free_sms

Top 6 Most Important Benefits of MVC Architecture for Web (n.d.). Retrieved
November 20, 2020, from http://www.siyainfo.com/2017/01/16/top-6-
important-benefits-mvc-architecture-web-application-development-process/
Appendix A Industrial Training Gantt Chart
 Appendix B

INDUSTRIAL TRAINING CHECKLISTS (PLACEMENT)

Endorse
N Activities/ Tick
o. Tasks (√) by and
date
1. Report Duty To The Organization Approved by faculty √

2. E-mail Report Duty Verification (BLI-1D) to √

faculty supervisor.

3. Upload Report Duty Verification (BLI-1D) in e-learning √

for course code SCS*4114.

4. Contact faculty supervisor to inform the job scope √

and organization information

5. Fill in organization supervisor information survey in ITS √

6. Update of Industrial Training site (address). Inform √

faculty supervisor and JKL, if any changes.

7. Updating Industrial Training Logbook online – daily basis √

8. Ensure that organization supervisor able to login to √

ITS successfully (Organization supervisor get ITS
userid and password).

9. Faculty Supervisor Visit. Date: √

10 Industrial Training Presentation. √

.
11 Performance evaluation by organisation supervisor. Online or √
. submission BLI-2B during supervisor visit.

12 Submission of Industrial Training Logbook. √

.
13 Submission of Industrial Training Report with checklist √
. and achievement form as Appendix.

14 Fill in Industrial Training Performance Evaluation by √

. student (BLI-1E) in ITS.

15 End Industrial Training √

.

Note:
1. Italic activities are optional depending on student situation.
 APPENDIX C

Sekretariat Latihan Industri

Fakulti Komputeran,
Universiti Teknologi Malaysia,81310 SKUDAI, JOHOR
Fax: 07-5565044 Tel: 07-5532008
Email:
[email protected]
INDUSTRIAL TRAINING ACHIEVEMENTS

(This form must be filled by student and must be attached in the Industrial Training report)

Student’s Name : LOH ZHEUNG YIK

Organisation : XANTEC Solutions SDN. BHD.

No Task Month of Task Achieved

. (List all tasks have been completed) Mont Mont Mont Mont Mont
h h h h h
1 2 3 4 5
1 Responsive web page design (CMA,
JKWire Harness, IEM official website) √ √
2 Fix bugs of existing systems such as The
Happy Face e-commerce site and Kun Kwan √
content management system
3 Extends T System with
Donation management modul √
4 Integrate BULK360 SMS API feature into web
based system registration module for √
sending OTP.
5 Integrate Mailgun API into e-commerce
website for sending newsletter. √
6 Complete prototype for Proton system and
system. √
7 Develop Job Order
Management System √ √
8 Test, debug and update system based on
client feedback. √

Deliverable/Training reflection (Outcomes that have been achieved)

The main achievement is the development of the Asia Trans system is completed successfully. From that project, I
experienced the real software development that encompasses online client meeting, prototyping, coding
implementation, testing and update the system based on client feedback from time to time.

As for side tasks, all existing systems bugs that are reported are fixed and all web pages of the websites
assigned to me are now responsive. From those projects, I realized that responsive websites and systems that
are free of major bugs are very important for gaining client’s satisfaction.

In short, this industry training program at Xantec have provided me a lot of experience and practical skills that
are vital for my future career path in software engineering.

Student Signature:
Date:
2/2/2021

Approval
Organisation’s Supervisor: Faculty Supervisor :
 ......................................
...................................... (Signature)
(Signature)

Name:
Date: Kenneth ng
2/2/2021 N
a
m
e
:
D
a
t
e
: