The document presents a block-based development environment for creating customized e-commerce applications. The environment allows non-programmer end-users to design e-commerce sites by selecting, positioning, and customizing pre-developed software blocks without coding. Key features include a library of blocks, a drag-and-drop interface, customizable block properties, and the ability to preview and save projects. The environment is meant to provide a flexible and affordable way for small businesses to develop e-commerce sites compared to traditional template-based systems or content management systems. An evaluation of the implementation is planned.

1. H2 - 3 2011 International Conference on Electrical Engineering and Informatics
17-19 July 2011, Bandung, Indonesia
Development Environment for Layout Design of
e-Commerce Applications Using Block-Based
Approach
Nor Haimimy Rawi1, Marini Abu Bakar2, Rokiah Bahari3 and Abdullah Mohd Zin4
#
Programming and Software Technology Research Group
Fakulti Teknologi dan Sains Maklumat
Universiti Kebangsaan Malaysia
1
mimiey.rawi@gmail.com
2
marini@ftsm.ukm.my
3
rokiah@citycampus.utm.my
4
amz@ftsm.ukm.my
Abstract— E-commerce is a process of buying, selling, The Malaysian government has encouraged Malaysian
transferring or exchanging products or services via the Internet. businesses especially small and medium enterprises to venture
It is expected that in the future, more and more business into e-commerce. However, the cost of developing e-
transactions will be carried out through e-commerce. The design commerce application is tremendous and this has hindered
of an e-commerce website plays a significant role in attracting most of them from venturing into this type of business. In
potential customers to visit the site. It can also influence order to solve this problem, we have proposed a mechanism
customer’s decision to make purchase and to return to the site. for developing e-commerce application based on the block
Good e-commerce applications need to be developed by
based software development approach. By using this approach,
professional programmers and the cost is substantially high.
With the advent of Web 2.0 technology, end-users are now able an e-commerce application can be developed by selecting,
to create their own web content and applications such as blog, customizing and combining software blocks that are specially
facebook and friendster. Some providers such as Google provide developed for this purpose.
a mechanism for end-users to create web sites and host e- This environment is based on web 2.0 technology
commerce applications. However, using these technologies, users applications such as blogs, friendsters and facebooks, which
can only select and customize the application according to have enabled end-users to develop their own web applications
provide templates. One of the main problems with this approach for the purpose of social networking. The major difference
is that they do not support a flexible layout design. This implies between our approach and the approach used by previous e-
that an end-user cannot change the layout of a selected template.
commerce applications is that our approach based on blocks
This paper presents a flexible and easy to use block-based
development environment for creating customized e-commerce and not template. The use of blocks will make the
applications. A block is a single layer software component that environment more flexible and hence can be used for
performs a single function. Concurrent project has developed developing more complex applications [4].
blocks for e-commerce application. The proposed development Studies have shown that an important characteristic of
environment is intended for non-programmer end-users to online shopping is that consumers have to base their
design and develop their own e-Commerce applications by judgments on product information presented on these e-
selecting and positioning blocks on a page. commerce websites. As a consequence, website design plays a
significant role in affecting consumers’ online shopping
Keywords— development environment, layout design, e-
performance and attitude toward the websites [5]. Like user
commerce application, block based
interfaces in ordinary computing, this interface could be a
I. INTRODUCTION major success factor, and in many cases it is the major factor
In recent years, we have witnessed an explosive growth in that determines buyers' willingness to buy on the Net [6]. In
electronic commerce or service [1]. More firms and start ups particular, the design of websites can influence visitors’
choose the web to build brand reputation, to do transaction decision to purchase and return to the site [7]. The success of
e-commerce for any company, especially if it is not a well-
with web-users and investors, or for public relations purposes
known name, is greatly dependent on the appropriate design
[2]. According to Forrester Research US online retail reached
of its website [6].
$175 billion in 2007 and is projected to grow to $335 billion
by 2012 [3]. Therefore, the main objective of this research is to develop
an environment for layout design of e-commerce application
978-1-4577-0752-0/11/$26.00 ©2011 IEEE

2. that will enable end-users to design their own e-commerce software, Google Sites is based on template for design.
applications which are attractive and easy to be used. Users can only select and customize the application
according to provide templates. This implies that an end-
II. RELATED WORKS user cannot change the layout of a selected template. So it
A. E-Commerce Applications limited flexibility in design.
Electronic commerce, or e-commerce, is the selling of B. Web 2.0 Technology
goods and services via an electronic media, using technology The term Web 2.0 is generally associated with web
to facilitate rapid exchange of detailed information between applications that facilitate the interactive exchange of
buyers and sellers [8]. E-Commerce applications can be information. A Web 2.0 site gives users the free choice to
divided into a few categories such as B2B (Business to interact or collaborate with each other in a dialogue of social
Business), B2C (Business to Customers) and C2C (Customers media as a creator of user generated content in virtual
to Customers). communities, as opposed to a website where users
A type of B2C is e-retailing that enables direct sales of (subscribers) is limited and can only view content created for
products or services through electronic storefronts or them. Examples of Web 2.0 including social networking sites,
electronic malls. This facility enables us to buy from home, 24 blogs, wikis, video-sharing site, hosts services, web
hours a day, seven days a week [4]. The fundamental applications and mashups.
characteristics behind a B2C (Business to Customers) website The increasing popularity of Web 2.0 tools, such as
are its content and design [9]. The content is important in facebook, friendster, blogs and wikis is fundamentally
influencing web-user’s purchase decision while the design changing how consumers use the web. The basic core of Web
helps to attract and retain customers’ interest at a site [10]. To 2.0, that user can generate and share their own content, often
help end-users develop their own e-commerce web application, regarding company brands and products, provides both
some provider such as Google and open source software such potential value and challenges to marketing practitioners. So
as Content Management Systems (CMS) provide a to make our application is acceptable, user friendly and easy
mechanism for end-users to create web sites and host e- to create without using any programming code, we create this
commerce applications. application similar to the environment for creating Web 2.0
1)Content Management Systems (CMS) site such as facebook, friendster and blogs.
A CMS is a tool that enables a variety of technical (i) Facebook
and non technical staff to create, edit, manage and finally Facebook is another social networking application
publish a variety of content such as text, graphics, video that is used basically as a mean of communication
and documents. Examples of the well known CMS for between friends [12]. From the view of design,
creating e-commerce applications are “Joomla”, “Drupal” facebook are not flexible because user cannot
and “PrestaShop”. However CMS are very complex pieces rearrange the layout interface.
of software that required a lot of time to understand and
required advanced understanding of HyperText Markup (ii) Blogspot
Language (HTML), CSS and web technologies. End-users Blogspot is a free blog publishing tool from Google
also need to have knowledge in PHP for editing the web for easily sharing our thoughts with the world.
editor and mySQL to manage the database. So essentially Blogger will use the features in this blog to help them
operating a CMS still requires a web developer. posting text, photo, video and more to their blog [13].
CMS is not flexible when it comes to designing and The layout for blogspot is half flexible because the
structuring of a website. CMS sites primarily use templates layout design is still depending on template.
for design. They are easy to recognize because they have a
standard format such as 2 or 3 column designs with boxes (iii) Wikis
placed in various positions to accommodate the content. A wiki is a tool that allows multiple users to
The designer must stay within the confines of this type of collaborate with each other through a group website.
template therefore it is limited in the flexibility and Each user can add or modify text as well as upload
uniqueness of design. Furthermore, CMS sites cost a lot files by simply using a web browser. Anyone can
more to design than static sites because a designer has to edit the text or file so this may be too open for some
install and configure the database, design the template, then applications, for example confidential documentation.
customize it to include all the extensions such as menus, The flexibility of a wiki's structure can mean that
polls, banners and forms. It will also require extensive information can become disorganised
testing to check for errors, browser compatibility and
screen resolution [11]. III. DESIGN OF LAYOUT EDITOR DEVELOPMENT ENVIRONMENT
2) Google Sites A. Blocks
Google sites also provide a mechanism for end-user Blocks are basically a program component that can be
to develop a simple e-commerce site. Just like CMS combined with other blocks to form an application without

3. going through the coding process. The use of blocks will creating the first page for their e-commerce web
enable end-users to develop applications directly. It has also application.
introduced a new approach for programming, known as
4) Select block: User can select the block provided at the
Block-Based Programming [14].
bottom of the page.
Some of the proposed blocks to be provided for this
application are: 5) Drag and drop block: the selected block can be drag
• Login block and drop it into the workspace.
• Shopping cart block
• Product block
6) Edit block properties: User can edit the properties such
• Payment block
as text colour, text font, text size and text title of the
selected block.
• Shipping block
Fig. 1 is an example of login block looks like. 7) Integrated block: All the selected block will be
integrate.
8) Run project: After the block was integrated, user can
run or see the preview of the project that has been
done.
9) Save project: user can save the project that has been
done.
IV. IMPLEMENTATION AND EVALUATION
Fig. 1 Login block
A. Implementation
B. Use-Case Diagram.
This application is developed using Netbeans IDE 6.8 with
Fig. 2 shows the use-case diagram to represent the
Glass Fish v3.
functionality of the system. The functional requirements for
this system are: 1)Block features
• Register
• Login
In layout editor’s page, end-user can design their own
• Create web page
layout for their web page by choosing any of the available
• Select block
blocks. The list of block provided is shown at the bottom of
• Drag and drop block
the layout editor’s page (Fig. 3).
• Edit block properties
• Integrate block
• Run project
• Save project
Fig. 2 Use-case diagram
1) Register: The new user need to register first before can Fig. 3 List of block
start using this e-commerce web application. All these block is create as .jar file. One block is one jar file.
2) Login: For the user that has already registered, can Each block has its own properties and behaviour or operation.
continue with login. Block properties such as text font, text size and text colour can
be customized by the end-users. Block can be positioned
3) Create web page: After successfully login, layout anywhere on the workspace layout because it does not depend
editor’s page will be shown. User can start with on template. So it’s more flexible because end-users can
design their own layout. One web page layout can contain

4. more than one block and block can be re-used. Its means that 2)Workspace: Name of the user’s website appeared at the
the same block can be used more than one time. Anyway, the top of the workspace. The user’s web page that has been
web pages that have been design is not consider as a block. created by user also will be list in workspace.
2)Interface design 3)List of blocks: All provided block were list here. User
The GUI for proposed development environment for layout can select any block they want to use by drag the selected
design of e-commerce application is shown below. block and drop it on the workspace.
4)Operation: This part listed all the behaviour of the
(i) Login and register selected block.
Firstly, user need to login before they can create their e- 5)Properties: Listed all the available properties where user
commerce web application. For new user, they need to can change or customize it.
register their information fist before they can start using this 6)Layout preview: When the selected block has chosen,
application. The interface for login and register new user is user can arrange it on this layout.
shown in Fig. 4.
B. Scenario Example
After user successfully login, layout editor page was
shown. User can see their name appear at the profile info.
User can edit the profile and also can upload the photo. At the
workspace part, the site was name earlier by user will be
shown at the top. In this example the site was name ‘My
Ecommerce’. After that, user creates the first page named
‘Home Page’ as shown in Fig. 6. Now user can start design
the first page.
Fig. 4 Login page
(ii) Layout editor environment
After successful login, layout editor’s page will be shown
(Fig. 5)
Fig. 6 Layout editor’s page
They can select the block provided in ‘List of Blocks’ part.
For example, user select the login block by drag from the ‘List
of Blocks’ part and drop it on the workspace. The login block
was assign to ‘Home Page’ page (Fig. 7).
Fig. 5 Layout editor’s page
1)Profile info: After login, the name of the user appeared
at this side. Edit profile also available for user to edit or
change their profile information.

5. V. CONCLUSIONS
The use of blocks based approach provides a simpler
environment for end-users to develop web applications since it
does not involve any form of coding. This will hopefully
encourage entrepreneurs especially from small and medium
enterprise to develop their own e-commerce web applications.
Furthermore, this approach also allows the design of web
application to be flexible and thus the web applications can be
customize according to the need of the customers.
REFERENCES
[1] D. Cyr, et al, The role of social presence in establishing loyalty in e-
Service environments, Interacting with Computers Vol. 19. No. 1: 43-
56, 2007.
[2] C. Subramaniam, et al, Product Marketing and Channel Management
in Electronic Commerce, Information Systems Frontier, Vol. 1, No.:
363-379, 2000.
[3] S. Mulpuru, (2008). US eCommerce: 2008 To 2012. Cambridge, MA.
Forrester Research. [Online]. Available:
http://www.forrester.com/rb/search/results.jsp?N=0+11129.
[4] M. H. Hamizah, R. N. Haimimy, B. Rokiah, et al, Conceptual Design
Fig. 7 Layout editor page
of an Environment for Creating Simple e-Commerce Applications,
After login block was selected, we will see the part at the 2010
[5] Palmer, J. W. Web site usability, design, and performance metrics.
right side was change. At the top of right side we can notice Information Systems Research. Vol. 13.No. 2: 151-167. 2002.
the layout preview for Home Page. The login block that user [6] D. Gehrke, E. Turban, “Determinants of Successful Website Design:
chose appear at the layout preview. User can design by Relative Importance and Recommendations for Effectiveness,”
rearrange the position of that block. They can position that International Conference on System Sciences, Hawaii, 1999.
[7] B. T. Felix, L. L. Tung, Y. Xu, A Study of Web-Designers’ Criteria for
block anywhere on the layout without confines. So, it is Effective Business-to-Consumer (B2C) Websites Using the repertory
unlimited in flexibility. At the middle of the right side, the Grid Technique, Journal of electronic commerce research, Vol.10.
properties and operation available for the login block was No.3: 155-177, 2009.
shown. So user can customize it to make it look unique and [8] J. L. Nancy, What users want in e-commerce design: effect of age,
education and income, Ergonomics, vol. 46, No. 1-3, 153-168, 2003.
different from the others. User can check and uncheck the [9] Huizingh, E. K. R. E, The content and design of web sites: an
checkbox at the ‘Operation’ part. Operation part is containing empirical study. Information & Management, Vol. 37, No. 3: 123-134,
block behaviour and function. For example, if user wants to 2000.
make the checkbox ‘Remember’ in Login block can function, [10] Ranganathan, C. and S. Ganapathy, Key dimensions of business-to-
consumer web sites, Information & Management, Vol. 39, No. 6: 457-
user need to tick or check the checkbox Remember in 465, 2002.
operation part (Fig. 8). [11] (2009) Web Design Discussion website [Online]. Available:
http://www.drostdesigns.com/the-disadvantage-of-a-content-
management-system/
[12] M. Jazayeri, Some Trend in Web Application Development, Future of
Software Engineering (FOSE’07), 2007, IEEE.
[13] M. D. Jacyntho, D. Schwabe, G. Rossi, A Software Architecture For
Structuring Complex Web Application, Journal of Web Engineering,
Vol. 1, no 1(2002) 037-060: Rinton Press.
[14] A. Mohd. Zin, et. al, Block-Based Software development, Programming
and Software Technology Research Group Technical Report 1/2008,
Universiti Kebangsaan Malaysia.
Fig. 8 Layout editor page