An Interactive Web based Application as Educational Tool for SCM Course by Using FOSS

An Interactive Web-based Application as Educational Tool
for SCM Course by Using FOSS
Wahyudi Sutopo

Bayu Putra

Didiek Sri Wiyono

Department of Industrial Engineering
Sebelas Maret University
Jalan Ir. Sutami No. 36A, Kentingan,
Surakarta 57126

Programmer of Belugerin Studios
Depok, Jawa Barat, Indonesia

Department of Informatics Engineering
Sebelas Maret University
Jalan Ir. Sutami No. 36A, Kentingan,
Surakarta 57126

bayuputra_mail@yahoo.com

sutopo@uns.ac.id
ABSTRACT
This paper presents the application of free/open source software
(FOSS) for teaching and learning one specific topic in Supply
Chain Management (SCM) course. In the last few years, there is
abundant FOSS for educational tools. However, educator still
faces problems to implement such an education FOSS for
improving the quality of education i.e. customizing of software
function, developing of a specific educational media, and
illustrating of a course content. The purpose of this research is to
design an educational tool for increasing efficiency in conveying
subject matter especially distribution problem. It has a module of
real distribution problem in commodity paddy was captured. We
crated an interactive Web-based application by using WSDL,
PHP and My SQL, and SOAP. The result of the research will be
able to improve the pedagogic approach for learning of SCM
course.

Keywords:
Educational tool, FOSS, interactive media, SCM course.

1. INTRODUCTION
Free/Open Source Software (FOSS) is application that is made
available along with source code as a distinctive feature [1]. There
are some reasons why FOSS implemented in a majority of the
higher education as follow. With limited budgets, FOSS
applications can be used for making ICTs as educational tools
[1],[2]. Based on survey conducted by [2], FOSS is gaining
mindshare from four directions: spill over from commercial
initiatives (such as Linux, Apache, Open Office), grant-funded
open source initiatives (course management, portal, financial
systems, student portfolios), market-driven initiatives in specific
application areas (course management), and open source
compatible higher education specific applications (course
management, portal). The higher educational institutions can use
FOSS in front-line curriculum for the reason of possibility of
localization [3].
Learning tool or educational tool is a tool to deliver the message

of learning [4]. Recent advances in internet technologies have
transformed the World-Wide-Web from delivering static text to
providing an easily accessible multimedia channel for dynamic
and interactive communication [5], [16], [17]. Furthermore, the
development of Information and Communication Technology

didieksw@uns.ac.id

(ICTs) devices, such as Personal Digital Assistant (PDAs), Server,
Modems, Laptops and Tablet PCs, reform the development of an
interactive learning media become easier, faster, and cheaper.
Web-based media offers an effective alternative to deliver the
message of a course and involves a fusion of sounds, images, and
texts that enable students to interact with complex system. A good
educational tool can activate learner in analytical, computational,
and experimental practices of a course.
In the last few years, there is plentiful of web-based application as
educational tool which made by FOSS. Some applications are
described below. A LearNet (www.learnet.de) is learning and
experimenting on real technical plants can be used in

manufacturing education [6]. The EDICS created by [7] is FOSS
application for learning the course of engineering design
instructional computer program. An open source educational
software for basic photogram metric tasks is dedicated by [8].
Also, there are many free e-Learning tools, for instant: 3D
modeling
software
tool
(Google
Sketch
Up,
http://sketchup.google.com/); an advanced online assessment
management system (TOIA, http://www.toia.ac.uk/); an
alternative browser for young children (KidRocket,
http://www.kidrocket.org);
the
open
source
portfolio
(http://www.osportfolio.org/) and flash quiz creator (HotPotatoes,

http://hotpot.uvic.ca).
The development of ICTs encourages Supply Chain (SC) entities
(from supplier’s supplier to customer’s customer) changes to
improve the competitiveness of the company; from efforts of
internal efficiency towards inter-entities collaboration for
leveraging benefits to achieve [9]. Therefore, for the learning
process of SC course needs innovative teaching and learning
methods to improve the ability of our students to solve complex
problems. We still have not the application of FOSS for teaching
and learning one specific topic in SCM course in the Department
of Industrial Engineering/Department of Informatics Engineering,
Sebelas Maret University. In conclude, we still have some
problems to implement such an education FOSS for improving the
quality of education i.e. customizing of software function,
developing of a specific educational media, and illustrating of a
course content. This study aimed to design an interactive webbased application as educational tool for SCM course, so that
teaching objectives can be explained effectively to the students.

55

An Interactive Web-based Application as Educational Tool for SCM Course by Using FOSS

This paper is organized as follows. In Section 1, we propose the
background of our research. Then, we resume several special
cases of the web-based educational tools. In Section 2, we provide
the methodology for solving the problem. In Section 3, we design
the web-based application for blending face-to-face and distance
learning model. We introduce the guidance for learning in Section
4. Section 5 is summarizes and future research.

2. RESEARCH METHODOLOGY
Figure 1, we describe the methodology to design web-based
application for teaching SCM course. An interactive web-based
application can be proposed to improve of existing teaching
method. The proposed teaching method will apply a blended
learning model with learners completing an online learning
module followed by a hands-on, face-to-face small group session.

A case study of real distribution problem in commodity paddy of
after-harvest [10]

A. Problem-based Learning preparation
Simplify the real system of distribution problem to illustrate the
integrated system
Determine the relevant system to illustrate the relationship
among structural aspect, functional aspect and business object

Next, the previously research should be redesigned to develop a
prototype of O-A-S-E (Open Application for SCM course
Education). UML (universal model language) can be used to
model the system [13]. Simple Object Access Protocol (SOAP)
was considered as web service technology for delivering text in
dynamic and interactive communication [14]. The PHP and

MySQL was used as relational database structure [15].
Finally, the guidance for learning. It discusses a user guide to use
the application for teaching distribution problems. This contained
information about the design of course content, instruction for
lecturer, and the hardware requirement to implement new method.

3. PROBLEM-BASED LEARNING

PREPARATION
The real business process of distribution system in commodity
paddy of after-harvest is mapped by [10]. The Distribution
System adopted in PBL system is in Fig. 2. There are three types
of flows in each arrows as follow: flow material, information and
financial. We propose SC-client as the business services centre of
commodity paddy of after-harvest for learning distribution system
(or Pusat Layanan Bisnis Distribusi Padi Paskapanen ). The main
problem simulated in the SC-Client consists of four business
activities (BA) as follows:
order consolidation/planning;
receiving/record keeping; inventory management and distribution
planning.

Suppliers for farming paddy
B. The Development of Prototype O-A-S-E
Improve the application from previously research [11]:

B3. Development web-based application
(making the SC database, coding the program, building the

Web Service, and debugging the application

C. The Guidance for Learning
( the design of course content, instruction for lecturer, and the
hardware requirement to implement new method)

Figure 1. The design of Educational tool for SCM Course
The methodology begun with in-deep analyze of case study. We
consider the distribution real problem which investigated by [10]
to prepare Problem-Based Learning (PBL) system. The PBL
system consider four characteristics as follow: a student-centered
learning is driven by challenging, draws on essentially
constructivist principles of learning, students work in small
collaborative groups, and lecturer take action as facilitators [11][12], [18].

56

Farmer
Union

SC-User
(supplier)

Farmer

Rice Milling
Enterprise
SC-Client

B2. Design System
Design model
Design database
Design interface

SC-User
(customer)

B1. Capture PBL to System
Software Requirement
Specification

Use Case Diagram

Farmer
cooperation

SMEs Trader
(BA 1)

The Business Services Centre of Commodity
Paddy of After-Harvest
(BA 2 & 3)
(BA 4)

Personal
trader

Retailer
Union

Retailer
Retailer
cooperation Non-cooperation

Customer of Rice / User
Figure 2. The Distribution System adopted in PBL system

Proceeding - ICOSic2010 UNS Solo Indonesia

4. THE DEVELOPMENT OF PROTOTYPE
O-A-S-E
We improve the application from previously research [11] to
develop OASE prototype. The phenomenon was solved using
three stages as follow: capturing PBL to System, designing
system, and developing web-based application.

The sequence diagram is used to describe the algorithm of
application running steps. Then, the class or static diagram is
designed to show the class and object structures (Fig. 4.).

Boundaries

4.1. Capturing PBL to System
The SC entities consist of three components as follows: (i) SCUser-1 as supplier, SC User-2 as consumer, and SC Client. For
capturing real distribution problem to system, we make Software
Requirement Specification (SRS) and use case diagram. The
Software Requirement Specification (SRS) is detailed to answer
the functional aspect of PBL system. We propose 15 SRS
functional and 14 SRS non functional. All SRS is aimed to design
use case diagram for user and client (Fig. 3)
U C - N W F0 1

U C - W F01

Entities

Exceptions

PrintHandler

Login

DBGrid

Customer

Dialog

Administrator

Halaman

Supplier

Table

Registrasi

Messanger

SQLHandler
GraphHanlder

U C - W F05

Mendaftarkan D iri
Mem es an Produk

Menerim a Perm in taa n
Pa s oka n


Menerim a H a s il S ele ks i
Pe naw a ra n

U C - W F04



The application uses component diagram to determine the
relationship inter-component. We use MySQL to develop
Database Management System. We design tables needed in
database and after normalization process. In Figure 5, we show
diagram scheme for SCM Application

Vis ito r
Su pplier

Me naw arkan P ro duk

nama
alamat
kota
propinsi
email
notelp
nohp
website
faximile
keterangan

PK kode

U C - W F06

tpemasok

Menaw arkan P as oka n

U C - W F02

Menerim a Ba las an
Pe m e nuhan Pe m e s anan

Tools

Figure 4. Package Mapping for SCM Application


U C - W F0 3

Components

tgudang
tstok
PK kode
PK,FK1 id_produk

C us to m e r
nama
alamat
notelp
kota
tipe

U C - N W F0 2
U s er
Meng is i D a ta

FK2

U bah Pas s w ord
U C - N W F1 0

Menu Bantuan
U C - N W F0 5

kode_gudang
jumlah
batas_bawah
batas_atas
harga

U C - N W F0 4

PK kode

FK1 id_produk
tanggal
harga

PK,FK2 id

FK1
tbank

nama
rekening
an
cabang

tlelangpesanan
PK

nomer

FK1 no_pesanan
id_produk
kuantitas
tanggal
durasi
status

PK kode

tloginStatus
PK,FK1 kode_account
tpelanggan

Tlelangreply
tanggal

ttransaksiJual

tanggal

username
password
expiredDate
status
level

PK id

PK id

PK
PK,FK1 nomer_pemesanan

kategori

tpemesan

nama
alamat
email
notelp
nohp
kota
propinsi
kodepos

nomer

FK1 id_pemesan
FK2 id_produk
tanggal
tanggalKirim
kuantitas
FK4 jenisPembayaran
FK3 bank
keterangan
harga
status

PK kode

taccount

tpemesanan
PK

tkategori

nama
satuan
kode_kategori
keterangan

PK kode

carabayar

The design system consist of 3 steps as follow: to design model
application, to design database and to design interface. The
activity diagram is used to breakdown the responsibility of each
SC entities. We propose 14 diagrams as follow.
(i) SCM client (to login-log out, to manage inventory, and to
evaluate supply and to evaluate demand).
(ii) SCM user for supplier (to bargain supply, to buy product, to
evaluate the price, to evaluate the quantity, to collect
information from client, and to receive orders.
(iii) SCM user for consumer (to order product, to get feed-back
from the client and to change user-ID).

tlogHargaProduk

tproduk

Log in/Logu t

4.2.Designing System

judul
ulasan
isi
tampilkan

tanggal

FK1 id_produk
kuantitas
jenis
ref
refid
keterangan
tcaraPembayaran

Figure 3. Use Case Diagram sample of SC-User

PK tanggal

nama
ukuran
jenis
md5
publikasi
lokasi
download

tanggal
FK2 kode_pemasok
FK1 id_produk
kuantitas
carapenawaran
harga
keterangan

U C - N W F0 3

Mengu nd uh JAR

tberita

PK versi

nomer

tperubahanStok
PK

Pilih Tem a
U C - N W F0 9

tJAR

tpenawaranPasokan
PK

nomer_lelang
FK1 kode_lelang
kode_pemasok
kuantitas
harga
status

tanggal
nama
alamat
email
notelp
nohp
kota
propinsi
kodepos

status
sessionId
ipAddress
browser

tchat
PK

waktu

nama
pesan
FK1 sender

Figure 5. Diagram Scheme for SCM Application

57

An Interactive Web-based Application as Educational Tool for SCM Course by Using FOSS

In Figure 6, we show the architecture of the SCM application.
The web interfaces developed in PHP, which has three layers as
follow: operating system, application, and interface. The SCM
application is implemented by two sides, that is the client side and
the server side.

Browser (Web Interface)

SCM Mobile App (J2ME)

AppServ
Apache Web Server

SOAP Server

SMS Gateway

Database
MySQL

DBMS
PHPMyAdmin

The web-based application developed using free open source
software which is WSDL, Object Oriented programming method
with PHP and MySQL PHP, and Simple Object Access Protocol
(SOAP). WSDL interface (web service definition language)

was used to communicate information between different
platforms that owned by each entity in the SCM through the
HTTP protocol. Simple Object Access Protocol (SOAP).
SOAP was developed that consist of 23 services that these
can be accessed by J2ME, Java, and PHP platforms. WSDL
has been created by SOAP web service application. There
are 23 SOAP Web Service as follow: loginSCM, order,

SCM Sistem

PHP

4.3. Developing web-based application

Sistem Operasi
6a. The layer of SCM application

getDataPemesanan, getBank, getCaraBayar, getProduk, getBerita,
getLelang,
setLelangReply,getAccount,
updateAccount,
getPenawaran,
getLelangResult,
getListOfPemesanan,
getDetailOfPemesanan, getAllDataPemesanan, makeLelang,
getLelangWinner, setLelangWinner, increaseStok, decreaseStok,
changePrice, and prosesOrder.
Web Server was developed by using OS Linux Slackware, Apache
2.0 Web Server and Web Traffic Tools. Database Server was
developed by using IBM OS and MySQL. On Client side, the PC
must has minumum requirement: OS Windows 98 or up and web
browser IE version 6.0 or Firefox version 3. The prototype of
OASE is consist of five interfaces for visitor, administrator,
supplier, customer and system management. The interface can be
used to input, process, and give feedback to system. The samples
of interface is showed in Fig. 7 - Fig. 9.

CUSTOMER
SUPPLIER
J2ME
GPRS
Customer Memesan Produk

ADMINISTRATOR

JAVA

SCM Application
Internet
TCP/IP

JSP
SOAP

PHP

Figure 7. The main page of OASE

SMS
Gateway
Mail Server

GPRS

6b. The SCM architecture
Figure 6. The architecture of the SCM application
Figure 8. The first page of customer

58

Proceeding - ICOSic2010 UNS Solo Indonesia

The web also provides the instruction method: to create and
deliver content, to monitor student participation and to assess
student. The hardware requirement for implementing this
educational tool is as follows:
- personal computer for server with minimum specification:
processor intel dual core 2,4 Ghz, RAM 2Ghz, and Hard disk
40Gb SCSI.
- Database server with minimum specification IBM Server,
RAM 8Ghz, and Harddisk 240Gb SATA,
- PC Client with minimum specification: processor Pentium III,
RAM 256 Mb, Harddisk 20Gb and internet connection
10kbps.
- Server Hosting : control panel (CPANEL), mail account (10),
anti virus, SpamBlocker, SpamBox, WebMail, POP & SMTP
Access, Mail Forwarder, FTP Account (5), Sub Domain
(unlimited), Database (MySQL), Web Statistic, Fantastico
(Pre-Installed Scripts), Crontabs and Shell Access (SSH)
Figure 9. The first page of suppler
The user interface is written in Bahasa Indonesia, because the
users are Indonesian. The validation was conducted by using
hypothetic data, which verified. The model designed should be
able to: simplify the distribution problem, simulate the transaction
making and control, and support the communication between SC
entities. From experiment, we can access this application by

duration speed 5 seconds at 10kbps GPRS and 1 second at
50kbps in TCP/IP network.

5. THE GUIDANCE FOR LEARNING
For implementing learning media, we should propose the
guidance for learning. The three stages are needed to develop the
guidance for learning as follow: the design of course content,
instruction for lecturer, and the hardware requirement to
implement new method.
One of strategies to foster the student outcomes, it is required an
innovative educational tool, so that the PBL can be accustomed.
The OASE should be integrated into the course design system. By
using OASE, the new pedagogic approach can be arrived in
blended learning model. We can use OASE to illustrate
distribution problem using appropriate analytical, computational,
and experimental practices. We propose the design of course
content in Figure 9.

1. Develop teaching cases/materials:
a. Define Objectives;
b. Basic Competences
c. Describe course contains :
2. Session : Distribution Problem
3. The design of course contents:
a. Materials
d. Media
b. Methods
e. Time Allocation
c. Procedures
f. Assessment
Figure 9. How to design of course content

6. CONCLUSION
In this paper, we introduced OASE as an Open Application for
SCM course Education. The OASE can be used to explain college
students about phenomena of distribution problem as follows:
order consolidation/planning; receiving/record keeping; inventory
management and distribution planning. The OASE is web-based
application was created by using FOSS. The PBL system can be
held using OASE in blended learning model with learners
completing an online learning module followed by a hands-on,
face-to-face small group session. Furthermore, they can exercise
to solve distribution problem using appropriate analytical,
computational, and experimental practices. The result of the
research will be able to improve the pedagogic approach for
learning of SCM course.
The OASE still has certain limitation, so as any other open source
application, this application invites people around the world to
complete the model. We have some works for completing this
prototype as follow: testing OASE prototype, completing to all
module of SCM course and designing the experiment method to
assess the student’s performance.

7. ACKNOWLEDGMENT
The authors want to grateful Sebelas Maret University in
Research Program 2009/2010 for supporting this research.

8. REFERENCES

[1] Tong, TW. “Free/Open Source Software Education”, Reed
Elsevier India Private Limited, New Delhi, Hindia, 2004.
[2] Abel, RJ. “Best Practices in Open Source in Higher
Education Study The State of Open Source Software”, The
Alliance for Higher Education Competitiveness, Inc., Lake
Mary, FL, 2006.
[3] Henderson, J., Brown. E., and Mitchel, C. 2005 “Adapting
Open Source Software for Education: Challenges,
Methodologies and Results”, In proceedings of Open Source
for Education in Europe, Research & Practice, pp. 157-161
(Herleen, the Netherlands, Nov. 14th-15th 2005).
[4] Bovee, C. Business Communication Today, Prentice Hall, New
York, US, 1997.

59

An Interactive Web-based Application as Educational Tool for SCM Course by Using FOSS

[5] Özcan, OG. and Akarun, L. 2002.“Teaching Interactive
Media Design”, International Journal of Technology and
Design Education, 19, pp. 161–171.

Proceedings of the Industrial Engineering Conference on
Telecommunication, pp. 12-25. (Bandung, Indonesia, Oct. 78, 2009).

[6] Roesch, OJ., Roth, H. Yahoui, H. 2005, “Virtual Labs in the
Engineering Education : a Standardization Approach for
Tele-Control”, Journal sur l’enseignement des sciences et
technologies de ’information et des systèmes, 4(13), pp. 2-7.

[12] Turana, S., Elcina, M., Odabasıa, O., Warda, K. and Sayek,
I, 2009, “Evaluating the role of tutors in problem-based
learning sessions”, Procedia Social and Behavioral Sciences,
1, pp. 5–8.

[7] Jimenez, C, 2006.”Media-Based Engineering Design
Teaching Tool: MIT's EDICS”, In proceedings of the ASEE
pp. 1-15 (New England Section, Annual Conference, 2006).

[13] Rosenberg, D. and Kendall, S., “Applying Use Case Driven
Object with UML: an Annotated e-Commerce Example”,
Adison-Wesley, Upper Sadle River, USA, 2001.

[8] Kalisperakis, I., Grammatikopoulos, L., Petsa, E., and
Karras, G., 2010. “An Open-Source Educational Software
For Basic Photogrammetric Tasks”, Proc. International
Symposium “Modern Technologies, Education &
Professional Practice in Geodesy & Related Fields”, Sofia,
pp. 581-586.

[14] Robert, R, “Pro PHP XML and Web Services”, Appress,
New York, 2006.

[9] Matopoulos, A., Vlachopoulou, M., Manthou, V. and Manos, B.
2007. “A conceptual framework for supply chain collaboration:
empirical evidence from the agri-food industry”, Supply
Chain Management: An International Journal, 12(3), pp.177186
[10] Wiyono, DS. 2009, “Analyst and Design of Mobile and Web
SCM Application for Supporting Distribution Commodity
Paddy of After-Harvest”, PERFORMA, 9(2), pp. 1-12.
(Published in Indonesian).
[11] Wiyono, DS. Putra, B. and Sutopo, W. 2009. “Designing
SCM Application Base on Web Service for Supporting
Distribution Commodity Paddy Of After-Harvest.”, In

60

[15] Peter, L. “Object-Oriented PHP”, No Stracth Press, San
Fransico, USA, 2006.
[16] Chu, KC., Urbanik, N., Yip, SY. and Cheung, TW., 1999.
“The Benefit of Virtual Teaching to Engineering Education”.
Int. J. Engineering Ed. 15(5), pp. 334-338.
[17] Potdar, H. and Gramoll, K. 2000. “Internet-based, Interactive
Software for Industrial Engineering Education”, In
proceedings of Am. Soc. of Engineering Educ, Session 2257,
(St. Louis, MO, Jun. 18th-21th , 2000).
[18] Attwell, G., Barrett S., Erkan, K., Kuru, S., Marchesi, M.,
Ounapuu, E. and Ulybin, O. 2005 “Helping to develop an
Open Source Curriculum: the case study of TOSSAS E.U.
funded project”, In proceedings of Open Source for
Education in Europe, Research & Practice, pp. 157-161
(Herleen, the Netherlands, Nov. 14th-15th 2005).