IOP Conference Series: Materials Science and Engineering

PAPER • OPEN ACCESS

Build an Online Shop Website Using Html Programming Language

To cite this article: E S Soegoto and H R Pasaribu 2018 IOP Conf. Ser.: Mater. Sci. Eng. 407 012064

View the article online for updates and enhancements.

This content was downloaded from IP address 139.81.99.107 on 27/09/2018 at 01:48

INCITEST IOP Publishing
IOP Conf. Series: Materials Science and Engineering 407 (2018) 012064 doi:10.1088/1757-899X/407/1/012064
1234567890‘’“”

Build an Online Shop Website Using Html Programming

Language

E S Soegoto* and H R Pasaribu

Departemen Teknik dan Ilmu Komputer, Universitas Komputer Indonesia, Indonesia

[email protected]

Abstract. The purpose of this research is to help distributors of products that do not have
sufficient funds to rent stores and market their products by using and providing the Online
Shop website. The method used in this research are Observation by performing a review
directly to the place that conducts the process of building an online store website, Interview
with the business owner, and Study of literature by finding the books that deal with the issues
discussed in this study. The result of this research shows that by making an online shop
website, potential buyers can see any products that have been updated and available at any time
through the Website and also can order and buy any product without having to come to the
store directly.

1. Introduction
The development of technology in the present, especially in the field of technology and information is
growing very rapidly. In this very advanced era, very often we hear about internet technology which is
a recent development of a highly advanced information technology. The development of Internet
technology in this highly developed era is more dominant in the direction of user-friendly, the ease of
consumers in understanding and also using the function of the internet. The use of the Internet as a
medium in terms of spending has empowered buyers with lots of benefits and also its own advantages.
With the increasing popularity of online shopping and being the most populated country in the world,
China is one of the largest online markets now and is likely to become the largest market in the future.
In the academic literature, website quality has generally been recognized as a critical step to drive
business online. [1] According to Khalifa and Liu, in this study, we further develop the information
systems in the context of online shopping, using a contingency theory that accounts for the roles of
online shopping and online shopping experience. [2] and to provide a lifestyle perspective of who is
using the Internet to shop, who does not shop, and why. [3] in another explanation in one of the
researchers namely Heijden et al. This paper explores factors that influence consumer's intentions to
purchase online at an electronic commerce website. Specifically, we investigate online purchase
intention using two different perspectives: a technology-oriented perspective and a trust-oriented
perspective. We summaries and review the antecedents of online purchase intention that have been
developed within these two perspectives. An empirical study in which the contributions of both
perspectives are investigated is reported. We study the perceptions of 228 potential online shoppers
regarding trust and technology and their attitudes and intentions to online shop at particular websites.
In terms of relative contributions, we find that the trust-antecedent 'perceived risk' and the technology-
antecedent 'perceived ease-of-use' directly influenced the attitude towards purchasing online. [4]

Content from this work may be used under the terms of the Creative Commons Attribution 3.0 licence. Any further distribution
of this work must maintain attribution to the author(s) and the title of the work, journal citation and DOI.
Published under licence by IOP Publishing Ltd 1
INCITEST IOP Publishing
IOP Conf. Series: Materials Science and Engineering 407 (2018) 012064 doi:10.1088/1757-899X/407/1/012064
1234567890‘’“”

Perceptions about an online store, developed after a brief study of the website, can significantly
influence somebody's attitude towards purchasing at that store. This is an online store image. [5] Retail
brand trust, off-line patronage, clothing involvement and two factors of website quality (usability and
information quality, visual appeal and image) were found to determine to influence online apparel
shopping intention. Off-line patronage was the strongest predictor of online shopping intention.
Implications for multi-channel apparel retailers were discussed based on these findings. [6] Stimulus-
Organism-Response model to include both external (i.e. reputation) and internal source of information
(i.e. website quality) as stimuli which affect consumers' response systems. [7] Trust has been
empirically established as one of the key attributes in business to customer (B2C) e-commerce. The
effect of measures to build and maintain trust in B2C Online Shopping is subject to customer-centric
behavior factors, which cannot be controlled by the business firm. The present study conducted in the
Indian context explores the role of consumer self-efficacy and social presence website in customer's
adoption of B2C online shopping mediated by trust, perceived usefulness, and perceived risk. The
most significant outcome of the study is that the consumer self-efficacy and the website of social-
presence affect trust, perceived usefulness and perceived risk in online customers, and in turn
positively influence the customer's intention to purchase products online. [8] But the website must be
integration from different sites [9], cause it convenient for the customer.
By building an Online Store Website Using HyperText Markup Language Programming is
expected to create a method and device for the operation of an online shop with a possibility for a
customized price generation. [10] The classical plain-text representation of source code is convenient
for programmers but requires parsing to uncover the deep structure of the program. [11] The purpose
of this research is to help distributors of products that do not have sufficient funds to rent stores and
market their products by using and providing the Online Shop website. The method used in this
research are Observation by performing a review directly to the place that conducts the process of
building an online store website, Interview with the business owner, and Study of literature by finding
the books that deal with the issues discussed in this study.

2. Method
The concept of standard methods that have been very often used by developer’s web makers, namely
by using the method "Waterfall". Which originated and started from; Planning (Planning), Design
(Designing), Code (Coding), Testing System (Testing) and Development (Maintenance). (See Figure
1).

Figure 1. Waterfall model.

In the process of building an online store website using HyperText Markup Language, the
programming language has to go through various stages, namely the stages of data collection, problem
analysis, database design and the last is the implementation of the online store website itself.
Techniques of data collection used i.e.; through Interviews, Observations and Library Studies.

2
INCITEST IOP Publishing
IOP Conf. Series: Materials Science and Engineering 407 (2018) 012064 doi:10.1088/1757-899X/407/1/012064
1234567890‘’“”

3. Results and discussion

In a system, it certainly has a process. The process of working here in terms of the stage of the system
process itself. First, we open the product category, then select what products will be purchased, then
put in the cart (shopping cart). In addition, if we are still going to buy other products we can continue
shopping, but if it is done, then we do a checkout. What distinguishes the shopping process in the
supermarket or the mini market that there is no request to write the identity of the buyer. In the online
store website there is definitely an order form, because if it does not fill the order form, the seller
cannot send the goods to customers who have bought the item. After the filled form is submitted, the
process in the system is completed, and the consumer waits for the goods to come directly to the home
or address.

3.1. Flowchart creation

Flowchart System User Pages Online Shop Website (Figure 2).

Figure 2. Flowchart of user page system.

The Flowchart of Processing Products System start of the buyer chooses the category of products to
buy and then select the products that exist in that category, when finished shopping, can directly enter
the shopping cart, but if you are going to shop again, then you can go back to choose the product to
buy, if it is really finished, can directly checkout (Figure 3).

3
INCITEST IOP Publishing
IOP Conf. Series: Materials Science and Engineering 407 (2018) 012064 doi:10.1088/1757-899X/407/1/012064
1234567890‘’“”

Figure 3. Flowchart of product processing system.

This Flowchart of Admin page System starts from entering username and password by admin, if
username and password are correct, it will go to administrator data, but if failed admin must check
login and reenter username and valid passwords, if already successfully logged in, admin can make
system settings, input, edit, and also can do the deletion of data related to the website, and the data that
appear is the data that has been changed by the admin, if already admin can do logout of the system
(Figure 4).

4
INCITEST IOP Publishing
IOP Conf. Series: Materials Science and Engineering 407 (2018) 012064 doi:10.1088/1757-899X/407/1/012064
1234567890‘’“”

Start

Input username &

password

Failed Data Login

Login check

Data
administrator

System setting, input, edit

and erase from all data
related to website

Data

Logout

Finish

Figure 4. Flowchart of admin page online store system.

Website Display Design detail product to be ordered (Figure 5).

Header

Menu
Product
Product detail

Messages

Cancel

Related product

Footer
Figure 5. Website display design of product order details.

3.2. Creation of context diagram

The context diagram (top level) is part of the data flow diagram that serves to map the environmental
model that is presented with a single circle representing the entire system (Figure 6).

5
INCITEST IOP Publishing
IOP Conf. Series: Materials Science and Engineering 407 (2018) 012064 doi:10.1088/1757-899X/407/1/012064
1234567890‘’“”

KODE_BARANG ID_Pembeli
ID_Pembeli
No_Resi
TGL_BAYAR
Nama Pembeli Nama_barang

Pembeli Membeli Barang Kode_barang

NO_Rekening
Jumlah Barang
Alamat No_konfirmasi NO_TRANSAKSI

Figure 6. Context diagram of product ordering process.

3.3. DFD creation

DFD is a logical data model or commonly called a process that is made to describe where the origin of
the data in use and to where the destination data that will come out of the system, where the data is
stored, any process that can produce the data and also the interaction between the stored data and the
process to be imposed on the data (Figure 7).

Figure 7. DFD level 0.

The buyer chooses the goods to be purchased then the buyer will decide to choose what items will
be purchased, then the buyer will get the purchased goods. In the next DFD the purchase flow is
illustrated with DFD Level 1 (Figure 8).

6
INCITEST IOP Publishing
IOP Conf. Series: Materials Science and Engineering 407 (2018) 012064 doi:10.1088/1757-899X/407/1/012064
1234567890‘’“”

Figure 8. DFD level 1.

3.4. Administration preview design

Administration Preview Design has a header in the top position, and the footer in the bottom position
is useful to limit the look of the website, Left sidebar containing the menu options related to the
administration and content section that is used to display the display of content in the select (Figure 9).

Figure 9. Preview design of administration.

The user preview design has a header at the top position, and the footer in the bottom position is
useful to limit the look of the website, Main menu, breadcrumb, left sidebar, right sidebar and the
middle in use to fill the content of products that will on sale (Figure 10).

7
INCITEST IOP Publishing
IOP Conf. Series: Materials Science and Engineering 407 (2018) 012064 doi:10.1088/1757-899X/407/1/012064
1234567890‘’“”

Figure 10. User preview design.

The user end view design has a header at the top, and the footer at the bottom position is useful to
limit the look of the website, main menu, breadcrumb, left sidebar, right sidebar and middle in use to
fill the content of the products to be sell (Figure 11).

Figure 11. User end view design.

4. Conclusion
After observing and understanding about how to build an Online Store Website using HyperText
Markup Language programming language to promote and sell every product that is sold, it can be
concluded that the online store creation page is divided into two, namely Administrator Page and
Public Page. The website is created using My Structured Query Language or MySQL database and
HyperText Markup Language programming language and then added some modules to make the
display more interesting, such as Google Maps Module, Yahoo Messenger Module, and Two
Language Module, so that consumers can see every product- products that have been updated and
available at any time through the Website Shop Online. With the Website Shop Online buyers can see
and can also order any product and buy any product without having to come to the store directly.

References
[1] Bai B, Law R and Wen I 2008 The impact of website quality on customer satisfaction and
purchase intentions: Evidence from Chinese online visitors International journal of

8
INCITEST IOP Publishing
IOP Conf. Series: Materials Science and Engineering 407 (2018) 012064 doi:10.1088/1757-899X/407/1/012064
1234567890‘’“”

hospitality management 27 3 p 391-402

[2] Khalifa M and Liu V 2007 Online consumer retention: contingent effects of online shopping
habit and online shopping experience European Journal of Information Systems 16 6 p 780-
792
[3] Swinyard W R, and Smith S M 2003 Why people (don't) shop online: A lifestyle study of the
internet consumer Psychology & marketing 20 7 p 567-597
[4] Van der Heijden H, Verhagen T, and Creemers M 2003 Understanding online purchase
intentions: contributions from technology and trust perspectives European journal of
information systems 12 1 p 41-48
[5] Van der Heijden H, and Verhagen T 2004 Online store image: conceptual foundations and
empirical measurement Information & Management 41 5 p 609-617
[6] Jones C, and Kim S 2010 Influences of retail brand trust, off‐line patronage, clothing
involvement and website quality on online apparel shopping intention International Journal
of Consumer Studies 34 6 p 627-637
[7] Kim J and Lennon S J 2013 Effects of reputation and website quality on online consumers'
emotion, perceived risk and purchase intention: Based on the stimulus-organism-response
model Journal of Research in Interactive Marketing 7 1 p 33-56
[8] Dash S and Saji K B 2008. The role of consumer self-efficacy and website social-presence in
customers' adoption of B2C online shopping: an empirical study in the Indian context
Journal of international consumer marketing 20 2 p 33-48
[9] Dash S, and Saji K B 2008. The role of consumer self-efficacy and website social-presence in
customers' adoption of B2C online shopping: an empirical study in the Indian context
Journal of international consumer marketing 20 2 p 33-48
[10] Heflin J and Hendler J 2001 A portrait of the Semantic Web in action IEEE Intelligent Systems
16 2 p 54-59
[11] Badros G J 2000 JavaML: a markup language for Java source code Computer Networks 33 1-6
p 159-177 Schneider M 2005 U.S. Patent Application No. 10/720,384