Web-based ERP System with GIS for Facilities Maintenance in

Maritime Cargo Terminals

Veronica S. Moertini1 and Julfikhsan A. Mukhti2 & Christyan Setiawan3

1Informatics Department, Parahyangan Catholic University
2,3Dinamaritama Konsultan Rekayasa
Bandung - Indonesia

Keywords: ERP with GIS, GIS in Maritime Cargo Terminals, Port Facilities Maintenance, SVG for Interactive Maps.

Abstract: The civil facilities in maritime cargo terminals must be maintained to prevent uninterrupted services in
handling cargo as well as to defer the stoppage of the whole port supply chain. These facilities include
wharves, yards, warehouse and piping, and all the components attached to these which are needed to support
the port operations. Given the vast area of the maritime cargo terminals (a terminal may consist of several
berths of which the area is 10-100 ha each), identifying the exact location of each facility with its current
condition information is important for the decision makers to design proper repair actions for the damaged
parts of the facilities. Hence, GIS is needed. ERP frameworks offer advantages that can be adopted in facilities
maintenance system. However, GIS is not yet supported by the frameworks. This paper presents the design
of the proposed ERP system with GIS module and its implementation. To facilitate interactive maps and to
display high quality of maps on web browsers, Scalable Vector Graphics (SVG) format is adopted. The system
has passed the user acceptance test and is used by the largest maritime cargo terminals in Indonesia.

1 INTRODUCTION information of the damages (pictures and the

description of the damages) in order to plan the repair
Maritime port terminals or simply called as ports actions. Likewise, the exact locations of broken/failed
generally occupy a vast area. Their infrastructure facility components (e.g., fenders, bollards, lights,
consists of wharves, quays and jetties, breakwaters, etc.) also need to be identified prior to the
roads and parks, buildings (including yards and replacement. For these reasons, GIS for facilities
warehouses) and dredging (INA, 1998). Some ports management is needed. Despite of this fact, any
may also have pipings. Wharves, yards, and research result discussing this specific domain of GIS
warehouses have many facility components to hasn’t been found (most of information systems for
support their functions (e.g., the components of a marine terminals relate to supply-chain management
wharf are fenders, bollards, etc.). By design, each of systems, such as (Kia, et.al., 2000)). One work found
the components is “attached” to a certain location on which is close to this domain is WebGIS for
a particular facility. Wharves, yards, warehouses, and maintaining coastal structures, particularly
piping are usually “divided” into smaller unit of areas breakwaters, discussed in (Maia et al., 2017).
(such as blocks with identification numbers). The It is known that the Enterprise Resource Planning
structure of wharves, yards, warehouses, and piping (ERP) system that comes with a lot of useful modules
as well as their facility components must be for organizations (e.g., Accounting, CRM, HR,
maintained regularly to ensure uninterrupted cargo Marketing, MRP, Sale, many kinds of reporting, etc.)
services that can cause economic loss and to prevent are needed by organizations (APTEAN, 2017),
major damages that also lead to loss (Zhang, et.al., especially large corporations that manage marine
2017). terminals. With ERP, data organization can be
Given their large sizes, the structure of facilities captured in the real time, thus many kinds of reports
may be damaged just on few separated “tiny spots”. can be generated based on the current data and can be
The decision makers, who usually do not visit the vast displayed as texts as well as graphs (dash-boards).
terminal areas, need to easily and quickly identify the Web-based ERP frameworks offering modules that
exact location of these spots as well as the complete can be customized quickly (by developers) to meet
organizations’ need are available. However, to the maintenance area, etc. The apron, yard, and each of
best of our knowledge, there are currently no ERP the facility require a wide area, which makes a marine
framework that offers GIS modules which can be terminal as a vast area of land and shore in result. The
customized. area required for a multi-purpose terminal will vary
This paper intends to contribute in designing a between about 5-15 ha/berth, and for a container
specific web-based ERP and GIS for maintaining terminal about 10-100 ha/berth, depending of the
civil facilities in large marine cargo terminals, that generation of the container ship.
can capture and process non-spatial as well as spatial Few major facilities (see Figure 1) that need to be
data in the real time to produce text, graphs, as well maintained are described as follows:
as spatial reports. The case study is an organization (a) Wharf or dock or quay: A structure attached to
handling many vast marine terminal cargo ports in land to which a vessel is moored. It is either the area
Indonesia. As ERP design is quite common, in this of water between or next to a human-made structure
paper the focus is on discussing how to enhance it or group of structures involved in the handling of
with GIS features. boats or ships, usually on or close to a shore, or the
structures themselves. The structure can be
constructed from timber, masonry, cement, or other
2 RELATED LITERATURE material with sufficient depth of water to
accommodate vessels and receive and discharge
REVIEW cargo or passengers. To support the operations of
loading/discharge of ships, wharfs are equipped with
2.1 Maritime Port Terminals and fenders, bollards, kademeters, drainages, water pipe
Facilities Maintenance for vessels, electricity grid, etc. (Petering, 2011)
(b) Yard: The storage area of primary and secondary
Maritime port terminals are the most vital aspect of yard can be constructed using concrete or paving
the national transportation infrastructure as they are blocks. The yards are usually equipped with crane
used as trade facilitation. Given their multiple roles rail, lightings, drainage, marks, signs, etc.
(e.g., exports and/or imports, mercantile trading (c) Warehouse: The bulk storage buildings,
center, distribution center, etc.), cargo ports should warehouses, are usually constructed from concrete or
also be considered as one of the most important timbers. They are facilitated with lightings, utility
aspects of maritime transport (Alderton, 2008). networks, marks, signs, etc.
Maritime cargo port terminals refer to a complete port (d) Piping: The piping facilities (for receiving or
facility used to accommodate ships loading and dispatching liquid bulk) are usually equipped with
discharging and cargo stacking and handling onshore. lightings, electricity grids, marks, signs, etc.
The port accommodation consists of berthing Berths, yards, warehouse and piping structures
accommodation and storage facilities. Berthing with their equipment components need to be
accommodation includes general cargo berths maintained regularly. The importance of port
(wharves, quays, piers, docks), terminals, bulk cargo infrastructure maintenance can be viewed in the
facilities, container and roll-on/roll-off terminals, following three aspects (Zhang, Kim, Tee, Lam,
liquefied gas terminals, etc. Storage facilities include 2017):
transit sheds (along the wharves or docks), back-up (a) Most port infrastructures need to be utilized for a
storage away from the dock, warehouses, stockyards very long period of time that structural deteriorations
and stacking areas for containers, stockpiles for bulk may always occur. For this reason, maintenance is a
cargo, etc. The cargo can be classified into (Petering, long-term work which aims to keep the lifetime risk
2011): Dry bulk (e.g., salt, grain, minerals, coal below a target level.
byproducts, etc.), liquid bulk (e.g., crude oil, (b) Port infrastructures are normally built along the
gasoline, liquefied natural gas, etc.), break bulk (e.g., coastal areas which demands frequent repair and
steel, lumber, heavy machinery, etc.), automobile and retrofit works. As most port infrastructures are
containerized (e.g., finished consumer goods). directly exposed to the harsh environment, a fast
The total terminal area is covering (a) the apron or deterioration mechanism is usually expected in the
the area behind the berth front, (b) the primary yard constructed facilities. For example, the chloride-
area or container storage area, (c) the secondary yard induced corrosion is a primary cause of most
area, which includes the entrance facility, parking, reinforced concrete structures in onshore marine
office buildings, customs facilities, container freight environment. There is a need for effective and
station, empty container storage, container
economic maintenance planning for these quickly-
deteriorating structures.
yard and wharf
pipe

bollard

warehouse fender

Figure 1: Port civil facilities.

(c) The consequences associated with port The computerized information system (IS) is an
infrastructure failures due to insufficient maintenance integrated set of people, processes, and mechanisms
can be enormous, not only causing a disruption at for collecting, storing, and processing data using the
ports, but also a possible stoppage of the whole port IT infrastructure to deliver an information toward a
supply chain. In other words, the condition of particular goal (Stair R. and Reynolds, 2014). Any
infrastructural performance affects the efficiency of specific IS aims to support the operations,
port operations and associated sectors. management, and decision-making. ERP system is an
The port infrastructures as well as the equipment IS, and vice versa. However, GIS, which is a system
components attached to or existed on those designed to capture, store, manipulate, analyze,
infrastructures, which are significant in supporting manage, and present spatial or geographic data, is
the port operations, must be maintained. usually not a part of the ERP systems.
To provide an easy and fast development of ERP
2.2 ERP, Information Systems and systems, many vendors offer ERP frameworks. Each
ERP Frameworks framework comes with a lot of modules (Accounting,
CRM, HR, Marketing, MRP, Sale, etc.) that can be
The Enterprise Resource Planning (ERP) system is a used as is or customized by developers to meet
set of software that is used to organize, define, and organizations’ requirements. One of the available
standardize the business processes that are necessary frameworks is ODOO.
to effectively plan and control an organization. ODOO is an ERP framework built upon a Model-
Essentially, ERP applications are a computer model View-Controller (MVC) architecture (ODOO, 2017).
of organization business, embodying the products and One of the primary goals of this architecture is to
processes, information flow, procedures, and separate the visual display of the information from the
relationships between functions and activities. Data business rules and management of the underlying
analysis and reporting tools are also an essential part data. With this architecture, the Model notifies the
of the system, allowing full exploitation of the broad Controller of any data changes, and in turn, the
range of information that the system will manage. Controller updates the data in the Views. The View
Another essential technology characteristic is the can then notify the Controller of actions the user
Internet connectivity. Modern systems employ thin- performed and the Controller will either update the
client, highly graphical and tailorable role-based user Model if necessary or retrieve any requested data (see
interface (APTEAN, 2017). Figure 2).
 user
update action

Model Controller View

notify update

Figure 2: MVC architecture of ODOO ERP framework.

Developers build an ERP system for specific

organizations by developing ODOO module. An
2.3 SVG and the Use in GIS-ERP
ODOO module is usually composed of data models, System
together with some initial data, views definitions (i.e.
how data from specific data models should be Scalable Vector Graphics or SVG is an XML-based
displayed to the user), wizards (specialized screens to graphics standard that enables Web documents to be
help the user for specific interactions), workflows smaller, faster, and more interactive (Eisenberg,
definitions, and reports. The module contains the 2002). Using SVG, an image is described as a series
elements of: (a) Business objects: Declared as Python of geometric shapes. Rather than receiving a finished
classes, these resources are automatically persisted by set of pixels, a vector viewing program receives the
ODOO based on their configuration; (b) Data files: commands to draw shapes at specified sets of
XML or CSV files declaring metadata (views or coordinates. Thus, vector graphics have one feature
workflows), configuration data (modules that makes them invaluable in many applications —
parameterization), demonstration data and more; (c) they can be scaled without loss of image quality.
Static web data: Images, CSS or JavaScript files used There are many shapes that can be displayed, such as
by the web interface or website. lines, circles, and polylines. Texts can also be added
ODOO clients can communicate with ODOO on a specific coordinate in the canvas using some
server using XML-RPC. As the logic of ODOO choices of style, font, size, color and orientation.
should entirely reside on the server, the client is Object shapes can be grouped and an SVG may
conceptually very simple: it issues a request to the have many object groups. Later on, the viewing
server and displays the result (e.g. a list of customers) program can select which groups that will be
in different manners (as forms, lists, calendars, etc.). displayed on the canvas/screen. Thus, in the context
Upon user actions, it will send the modified data to of GIS, a group of objects can be defined as a “layer”.
the server. The data tier of ODOO is provided by a The GIS viewing program can be designed to display
PostgreSQL relational database. While direct SQL one or more layer of objects.
queries can be executed from ODOO modules, most Having those features and capabilities, SVG is a
database access to the relational database is done good option to display design or map of port facilities
through the Object-Relational Mapping (ORM). (e.g., wharves, yards, piping, and warehouses) as
The data models are described in Python and detailed images with its object labels or legends or
ODOO creates the underlying database tables. All the information can be displayed in many scales on web
benefits of RDBMS (unique constraints, relational browsers without losing its clarity. Also, objects in a
integrity, efficient querying, etc.) are utilised when specific facility can be grouped to form a particular
possible and completed by Python flexibility. The layer.
ODOO Model (as M in MVC) specifies how some One problem that must be resolved: As the
data are structured, constrained, and manipulated. In complete data of the facilities (e.g., wharves, yards,
practice, a model is written as a Python class that piping and warehouses etc. with their attributes) will
encapsulates: The fields composing the model, be stored in relational database tables, how to relate
default values to be used when creating new records, the tables with the SVGs? Fortunately, each group
constraints, etc. It also holds the dynamic aspect of and shape object in SVG may have its own ID and
the data it controls: methods on the class can be name as depicted in a simple example of SVG with
written to implement any business need (for instance, three groups of objects is as follows:
<svg>
what to do upon user action). <g id="layer_BG" name="Background"> <rect width="800"
height="1000" stroke="black" stroke-width="2" fill="cyan"/>
</g>
<g id="layer_1" name="Wharf">
 <circle class="layer_fac" cx="50" cy="50" r="16" purpose of analysis and designing proper actions to
stroke="black" stroke-width="2" fill="red" id="fac_Wharf-1" avoid total damaged. Hence, web-based GIS is also
name="Wharf-1" />
<circle class="layer_fac" cx="50" cy="120" r="16"
proposed to be utilised by the headquarters as well as
stroke="black" stroke-width="2" fill="red" all the branches. Given the advantages of ERP
id="fac_Wharf_2" name="Wharf-2"/> framework (Subsection 2.2), the GIS will be
</g> developed as part of the ERP module.
<g id="layer_2" name="Yard">
<circle class="layer_fac" cx="200" cy="50" r="16"
stroke="black" stroke-width="2" fill="yellow"
3.2 Proposed Solution Concept
id="fac_Yard-1" name="Yard-1" />
<circle class="layer_facility" cx="300" cy="50" r="16" In essence, to resolve the organizations problems, we
stroke="black" stroke-width="2" fill="yellow" propose the following concept:
id="fac_Yard-2" name="Yard-2" /> (1) The main structural facilities (wharves, yards,
</g> warehouses, and pipes) along with their most
</svg>
important components attached to them are the
The ID and name of each SVG group and object can
facilities that would be handled in the system.
then be stored as table attributes, and the ID can be
Weights are assigned for each facility and each
defined as the primary key of the corresponding
component by administrator such that KPI for each
tables. The SVG codes can also be stored in a table
facility as well as branch can be computed using a
attribute and other facility information - such as
defined formula.
length, width, construction type, etc. in the case of
(2) Every component of facilities (e.g., for wharves:
yards, can be stored in other table attributes.
slabs, bollards, fenders, etc.; for yards: floor,
lightings, etc.) requires an appropriate procedure and
specific periods of observation. Hence, we propose
3 PROBLEMS AND DESIGNED two types of observations, which are:
PROPOSED SYSTEM (a) Monitoring: conducted monthly towards
components that are easily damaged and need simple
3.1 Problems efforts to be observed (such as the components
attached to the surface of facilities);
The problems of a big organization that operates (b) Inspection: performed annually or once every 4
cargo terminals with hundreds of structural facilities years towards the components that are rarely
and its branches can be comprised as follows: damaged and require difficult efforts to be inspected
The structural facilities should be maintained in order (such as structures that are below the surface or
that they can operate smoothly at all times to support submerged in the water);
cargo loading and unloading. As the branches are (3) The results of monitoring and inspections, which
spread across three islands, the headquarter are component status (ok/not-ok for monitoring, and
administration needs to have the real-time reports good/ lightly-damaged/ heavily-damaged for
(summary as well as detailed) of the current inspection), descriptions, and photos taken at the site
conditions of the facilities in order to perform proper are input promptly into the system by field inspectors
maintenance actions promptly. Due to the large area using a mobile app or by clicking objects on the
of the ports, where each port has many structural facility maps. Then, the entered data is checked by a
facilities and each facility is of large dimensions, the branch administrator. After branch managers
management need to quickly and easily “pin point” reviewed the information of the damages, repair
the exact position of the facility as well as the actions are also input into the system.
locations that need attention (with damaged (4) Users can use the interactive maps (i.e. facility site
infrastructures) with its complete plan) to get the information (text-based as well as
reports/performance regarding their conditions. They visual) of a particular facility and its components.
should also be able to record the appropriate repair (5) Summary, performance (KPI computation
actions into the system. results), and detailed reports (text-based as well as
As depicted in (FAO, 2013), one of the purpose dash-board) of the current and historical conditions,
of GIS is facilities management. (Maia et al., 2017) and the repair action plans towards facilities can be
have also proposed a WebGIS to maintain coastal accessed easily by executive users via web browser
structures, particularly breakwaters. They emphasize (to support the decision making).
the importance of checking the structures on-site and The “traditional IS features” to record data into
recording the relevant data into WebGIS for the forms and generate reports will be implemented by
customizing the modules provided by the selected
ERP framework (see Subsection 2.2). Hence, the
concept of the interactive map can be depicted below:
(a)
Map of wharf W1 condition Current Condition of W1
* Good : 13
* Bad: 2
* Not inspected: 3

(b)

Wharf W6
* Length : 300 m
W1 Sea * Construction:
W2
W3 Concrete
W4 .....
Y1 W5
Y4 W6
Y3
Y2 Y5
WH1

Layer: All Wharf Yard Warehouse

Figure 3: (a) Map of port civil facilities with its performance color; (b) Inspector click on a component layer map to pop up
the form.

At first, the map of a branch is displayed. Users can an inspector (who has the duty to input the monitoring
select whether they want to display all layers or just a and inspection data), once the map of a facility is
layer. The map branch will include “mouse-over- shown, the user may select the component layer then
able” and “click-able” objects of facilities. When an the user click on a location/item, a form to input the
object is mouse-hovered, the information of the item condition, pictures, and comment will pop up
object will pop up. If a facility object is clicked, the (Figure 3(b)). The user can fill the form and save it.
map of the facility will appear and replace the map of To facilitate the interactive maps, the system
the branch. Every facility object as well as the database store and manage the maps (SVG) of
component of a facility will be displayed in color branches, which relates to their map of facilities. Each
representing its performance (e.g., green: ok, red: facility map must relate to its component layers, each
damaged, grey: has not been observed). The branch component must relate to its check items layers
as well as the facility page will also include its (Figure 4). As described in Section 2.3, the ID of the
summary reports and KPI (Figure 3(a)). If the user is SVG is used to relate between database tables.

map layers of a
map layers of wharf
branch
slab component with
its check items
wharf beam
yard slab
warehouse fender
bollard
background

fender component
with its check items

background map of wharf

Figure 4: Map layers of branch, a wharf facility and component with its check item.
 Facility Maintenance Web Mobile
ERP Module Services App
Inspector
Users

FM Database

Figure 5: Facility maintenance system architecture.

3.3 System Architecture taking facility pictures and inputting the component
conditions using tablets that they carry while working
The proposed Marine Terminal Civil Facility in the remote fields.
Maintenance (MTCFM) is built using the ERP
framework to take its advantages. The architecture is 3.4 Use-case
depicted on Figure 5. It comprises of two main
modules: The use-case describing features for each group of
(1) Facility Maintenance ERP Module: used by users and features is depicted on Figure 6(a). The
several groups of users (inspector, branch color in the ellipsis indicate whether the features are
administrator, branch manager, corporate division provided by the module that are customized from
head and director). This module is rich with features built-in ERP framework, interactive maps as well as
that are customized from the libraries provided by the customized or mobile app. The users access the
ERP frameworks as well as the ones designed with system via the organization Wide Area Network
interactive map capability. (WAN) using Internet browsers (Figure 6(b)). The
(2) Mobile App: used by facilities inspectors to reports that can be accessed by admin, manages and
download uninspected facilities, input, and upload the director include summary and detailed facilities
results of monitoring and inspections results. By conditions in every branch as well as branch and
using this app, inspectors have the advantage of facility KPIs.

(a)

(b)

Director
manage
Data
input monitoring Division
branches & inspection Center
Director
acitivities
Organization
manage Inspector
WAN
Super facilties
check & correct Database App
Admin Super
manage
monitoring & Server Server
inspection data Admin
users
Branch
input Admin
Branch
view maintenance
actions & finalize Manager
reports Inspector Branch
Director
Branch Admin
Manager
: Customized from built-in modules

: Mobile, interactive map & customized

: Interactive map & custumized

Figure 6: The use-case (a) and system accessed via WAN (b).

As discussed in Subsection 2.2, an ERP module data, views definitions (e.g., how data from specific
consists of data models, together with some initial data models should be displayed to the user), wizards
(specialized screens to help the user for specific Facility(IdFac, name, facility_plan_svg,
interactions) and reports. The users interact with the IdBr(refering to Branch(IdBr), …other
system via a client (e.g., web browser). atributes); //the file of facility_plan_svg also
contains component type layers (in the case of
3.5 System Design wharves: slabs, beams, fenders, bollards, etc)
along with its components or object check items
Based on the ODOO architecture, the proposed ERP (in the case of wharf slabs, they are the element of
system can be seen in Figure 7. The clients can be slab construction).
categorized into two modules: FacMapLayer(Svg_Id, name);
(a) Customized from built-in client side ODOO FacComponent(IdFC, name, svg_layer_id,
module: it issues a request to the server and display IdBr(refering to Branch(IdBr), …other
the result (e.g., a list of facilities) in different manners atributes);
(as forms, lists, etc.). Upon user actions (on the menus FacCheckItem(IdFCI, name, svg_code,
or forms), it will send modified data to the server. IdFC(refering to FacComponent (IdFC), …other
(b) “Wizards” module that provides interactive maps: atributes);
this client module is developed using CSS, Ajax, and (Database tables and their attributes are conformed
JavaScript for HTML 5. Libraries for SVG map with the model classes, depicted on Figure 8.)
display are used as well. This wizard displays maps Other database tables for storing master data
with layers that can be selected and has objects that (facility type, users, etc.), facility weights (for
can be mouse-hovered as well as clicked to get the computing KPI), many kinds of monitoring and
object information or to pop-up forms (used to input inspection transactions, repair activities are also
data) if the user is the field inspector. This module designed and implemented.
also computes the facilities condition summary and
KPIs, and displays the results in the dash-boards. The Classes in the Model Module: The design of the
main classes representing the branch, facilities and
their component is shown in Figure 8. There are other
Customized Built-in
Interactive classes that are not presented in this figure, such as
Map Module:
ERP Module: Maps, Forms, classes that manage users, handle various transactions
Forms, Client logics, - Client logics,
Client Reports, Dashboards Reports, (inputting/updating data of facility monitoring and
(Web Browser) Dashboards inspection activities, facility status, etc.).

Branch BranchMapLayer
Web Services, Base FM
Server Module, ORM and name: char [] name: char[]
Module map_svg: binary svg_id: char[]
Engine kpi_condition: float
FM Database
kpi_checking: float
.. ..
create
write FacMapLayer
Figure 7: Facility maintenance (FM) modules. parse_branch_map_svg
get_branch name: char[]
.. .. svg_id: char[]

The server side module specifies how data are

structured, constrained, and manipulated. It contains Facility
a number of models written as a Python class, having name: char [] FacComponent FacCheckItem
svg_id: char
attributes, constructors and methods (the class site_plan_svg: binary name: char[] name: char
fac_subtype: char svg_id: char[] svg_code: char
diagram is depicted on Figure 8). is_active: boolean svg_layer_id: char is_monitor: boolean
cond_inspect: string current_cond_monitor: string is_inspect: boolean
cond_monitor: string current_cond_inspect: string .....
latest_inspect: date
current_cond
Database Schema: The FM database schema that are latest_monitor: date
work_weight: string
get_fact_comp_by_filter_ids
write
get_fac_chek_item
webservice_handle webservice_handle
created by the model can be comprised as follows: .. ..
create
Branch(IdBr, name, map_svg, …other atributes); // write
webservice_handle
the file of map_svg also contains branch parse_fac_map_svg
get_facility
FacType

port/terminal layers (e.g., wharves, yards, .. ..

warehouses, and piping that existed in the branch Figure 8: Class diagram related to maps data.
port/terminal area).
BranchMapLayer(Svg_Id, name, IdBr(refering to
Branch(IdBr)); Figure 8 shows that an object of branch has one or
more objects of branch map layer, a branch map layer
has one or more objects of facility, a facility has one write (update): Parse, check, clean the facility SVG
or more objects of facility map layer, a facility map (if reuploaded), get the values as in create method
layer has one objects of facility component, an object then overwrite if exists, insert if not exist, delete the
of Facility also have one or more facility component, old objects (component types, components) that are
a facility component type consist of one or more no longer existed in the new SVG.
components or objects of checkItems (as illustrated in webservice_handle: Get records of a facility, its
Figure 4). The description of classes and their main component types and components with all of their
methods are as follows: status construct as a complex object and return. The
records can be filtered by list_Ids or user_Id.
class Branch: Handle branches and their map of The data files (see Subsection 2.2) containing
branch. XML files declaring metadata (views or workflows)
Methods: and configuration data (modules parameterization)
create: Parse, check, clean the branch SVG file and: are declared accordingly such that they can be used
(1) Get/extract branch ID, branch_name; (2) by functions in accessing, computing and displaying
Get/extract identity <g id= ….> </g> that relates to the database content.
branch_map_layer (background, wharf, yard, Folder static: contains CSS describing the style of
warehouse, pipe) and extract Id, name of every the HTML documents, JavaScript source code for
facility type/group; (3) From group of svg code client logic (computing report and dash-board
representing a layer of wharf, yard, warehouse, pipe material) and handling interactive maps as well as the
(<g id= ….> </g> ), parse and extract: ID, name and non-map pages (by using styles defined in CSS),
type (wharf, yard, warehouse, pipe), coordinates and XML describing lots of HTML classes used in the
shape boundary of every facility objects CSS, and Lightbox JavaScript libraries (to manage
resided/existed on the background layer; (4) Save the images display).
branch SVG along with all those extracted values the The Navigation of Interactive Map: A menu
database tables Branch, BranchMapLayer and “Monitoring & Inspection” (in FM ERP Module) is
Facility accordingly. specifically provided for moving or navigating to
write (update): Parse, check, clean the branch SVG pages (of the wizard module) with map interactivity
file (if reuploaded) and extract branch ID, capability. When that menu is clicked, a page with
branch_name, branch_map_layer and ID, name and visual reports of every branch is displayed. Then,
type (wharf, yard, warehouse, pipe), coordinates and when a branch report is clicked, the branch map along
shape boundary of every facility objects with its filter widgets (to select month, year, facility
resided/existed on the background layer and update type layer, condition, monitoring or inspection, report
the values in the database tables or insert the values and dashboard for this branch) is displayed (Figure
(branch_map_layer and facility objects on the 9). Furthermore, if users hover on a facility object,
background layer) if they do not exist. Delete the the information of this facility will be popped up.
layer and its facility objects that no longer exist in the Then, by clicking an object (a wharf, a yard, a
updated branch SVG. warehouse, or a pipe) on the branch map, the
corresponding facility with its filter widgets (to select
class Facility: Handle facilities and their maps. the month, the year, the component type layer, the
Methods: condition, the monitoring or inspection, the report for
create: Parse, check, clean the facility SVG file and: this facility) is displayed (Figure 10). When a user
(1) Get/extract facility_name; (2) Get/extract identity clicks on a component: if the user is a field inspector,
<g id= ….> </g> that relates to fac_map_layer (for a form for entering the monitoring/inspection results
wharf, i.e. slabs, bollard, fender, etc) and extract Id, will be popped up; if other user, a report of
of every facility component. Extract ID of every monitoring/inspection for the corresponding
layer; (4) From svg code group (<g id= ….> </g> ) component at the selected month-year, will be popped
representing a component type layer of facility (for up.
wharf, they are slabs, bollard, fender, etc), parse and Hence, there are two pages designed with
extract ID, coordinates and shape boundary of every interactive map, which are branch and facility page.
item objects resided/existed on the component layer; These wizard pages are designed with: (a) JavaScript
(5) Save the facility SVG along with all those functions that display/render the map and all of the
extracted values in the database tables Facility, widgets (for filtering and to be clicked), and lots of
FacMapLayer and FacComponent and on-hover, on-button/mouse-click, on-mouse-out, on-
FacCheckItem. change of combo check-box, on-change of drop-
down list functions, drawing objects in dash-board side and button filter (Monitoring and Inspection) at
(monitoring and inspection charts, monthly-time- the top right, report dashboard, menu (at the left side)
series charts, etc. ; (b) CSS definitions: describing the and map with layer selection (top). Zooming the map
styles for those 2 pages; (c) XML definitions: many will display a clearer map, and mouse-over on a
HTML classes used in the CSS. facility object displays its information (bottom).
(b) Figure 10: By clicking on a facility object on the
map branch, the facility map with its dashboards,
4 IMPLEMENTATION filter (top), menu (left), dashboard (right) and
component-type layer selection (bottom) are
displayed (b); the results of monitoring/inspections of
The designed have been implemented and the results
are presented with sample of screenshots below: a facility item component can be inputted by clicking
on a layer of facility or text-based (a.2); the detailed
(a) Figure 9: the window of a branch with its drop-
report of monitoring transaction report (including the
down filter (month-year and condition) at the top left
pictures of damaged facility component items).

Port/branch name Dashboard

Jimbara

Jimbara
Duk u Wha rf

Typ e: Concr ete

Len gth: 375 m
Width: 273 m
Area: 102 ,375 m2
Design depth: 40 m
Actual de pth: 36 m
Flo or con structio n: Concr ete
Fo unda tion: Concr ete
Mo nitoring comp le tion: 100 %
Lat est mo nitoring : 11 July 201 7
Next m onitor ing: August 201 7

Facility layers check-box

Figure 9: Map of a branch (top) and its zoom with its layers selection, dashboard and mouse over on a wharf.
 (a.1)

(a.2)
Jimbara

Jimbara/Wharf 215

Query filter
Menu

(b)

Figure 10: (a.1) Text-based form; (a.2) Map-based form (form pop-ups by clicking a location on the background map); (b)
The slab layer map after bad condition (red) is saved by form (a.1) or (a.2).

application, and facility maps as well as reviewing

5 SYSTEM EVALUATIONS reports/dash-boards.
(e) Director: to read/review maps of branch and
As it has been known that the most important facilities conditions, text reports, KPI and graphical
parameter to measure the information system success reports (in the dash-boards).
is by conducting user acceptance test (UAT). We The user acceptance test (UAT) was conducted at
designed the UAT materials for each group of users the end of the development, on early August 2017, for
depicted on Figure 6. The features tested are as users in the largest and busiest marine terminals
follows: Indonesia operating in west of Java, south of
(a) Super Admin: to manage master data (users, Sumatera and west of Kalimantan island. The UAT
branches, type of facilities, facilities and documents). results have been accepted/approved. The users were
(b) Field Inspector: recording the results of facilities happy with the GIS features as they can view the
monitoring and inspection via web-based (via text facility conditions based on maps and “pin-point” the
forms and clicking map facilities) as well as mobile exact locations of the components that need to be
application (clicking map facilities after downloading repaired. Then, at the end of August 2017, users
the map). trainings were conducted attended by users from 12
(c) Branch Admin: to review monitoring and port branches.
inspection results transaction data entered by field After more facility site plans (in SVG format) are
inspectors and marking the transaction (as completed prepared and uploaded into the system, the system
or must be repeated) via web-based application and was launched on the beginning of October 2017.
facility maps. Currently, the system is accessed and used by all
(d) Branch Manager: to review the complete users from all branches via corporate WAN. By this
monitoring and inspection results transaction data, fact, we conclude that the proposed system has been
entering maintenance actions via web-based successful.
6 CONCLUSION AND FURTHER
Kia, M., Shayan, E., Ghotb, F., 2000. The importance of
WORKS information technology in port terminal operations,
International Journal of Physical Distribution &
Web-based ERP system with GIS module can be Logistics Management, Vol. 30 No. 3/4, 2000, pp. 331-
designed and implemented to resolve the problems in 344.
marine cargo terminals that are related to their Maia, A., Rodrigues, A., Lemos, R., Capitão, R., Fortes, C.,
2017. A Web Platform for the Systematic Monitoring
structural facilities maintenance. By using the system,
of Coastal Structures. In Proc. of the 3rd International
field inspectors who gather the data of the conditions Conference on Geographical Information Systems
of the facilities can input the data via “traditional Theory, Applications and Management (GISTAM
menu and forms” as well as by easily clicking facility 2017), pp. 102-111.
maps. The branch management can record repair Petering, M. E. H., 2011. Introduction to the Container
actions into the system. The executive users can view Shipping Industry, Department of Industrial and
the summaries and detailed reports as well as branch Manufacturing Engineering. University of Wisconsin –
and facility KPIs by easily clicking branch and Milwaukee.
facility maps or using “traditional menu” (text- Stair R., Reynolds G., 2014. Fundamentals of Information
Systems, Course Technology. USA.
based).
Zhang, Y., Kim, C.W., Tee, K.F., Lam, J. S. L., 2017.
An ERP module can be extended as it has a GIS Optimal sustainable life cycle maintenance strategies
sub-module. By applying this design, users have the for port infrastructures, Journal of Cleaner Production,
advantages of using interactive maps and rich Vol. 142, pp. 1693-1709.
functions provided by ERP frameworks. Developers APTEAN, 2017. ERP System Definition,
gains the advantage for faster system development. http://www.aptean.com/additional-crm-and-erp-
They are able to customize the available ERP related-links-pages/erp-resources-folder/erp-system-
functions quickly while also developing the GIS definition (accessed 27 August 2017).
module that takes more time and resources. ODOO, 2017. Basic of ODOO Architecture,
http://www.odoo.gotodoo.com/basics-odoo-
For further works, the system will be enhanced by
architecture/ [accessed 30 July 2017]
integrating it with Google Maps. Each facility and its ODOO, 2017. Building a Module,
components will be accessed by clicking a “mark” on https://www.odoo.com/documentation/10.0/howtos/ba
this map. Other feature that will be added in the ckend.html [accessed 13 August 2017].
mobile app is recording the monitoring and
inspection results on site and based on the GPS
coordinates of the mobile device.

ACKNOWLEDGEMENTS
We would like to thank PT Pelabuhan Indonesia II
for funding this project.

REFERENCES
Alderton, P. M., 2008. Port Management and Operations,
Informa. London.
Eisenberg, J. D., 2002. SVG Essentials, O'Reilly Publ.,
USA, 1st ed.
Food and Agriculture Organization (FAO) of The United
Nations, 2013. Advances in Geographic Information
Systems and Remote Sensing for Fisheries and
Aquaculture. Rome, Italy.
International Navigation Association (INA), 1998. Life
Cycle Management of Port Structures General
Principles. Report of Working Group No. 31 of the
Permanent Technical Committee II. PIANC General
Secretariat, Brussels, Belgium.